لوگو دیاتوسعه
برنامه نویسی به سبک حرفه ای
فرانت اند NextJS ، بک اند ووکامرس

فرانت اند NextJS ، بک اند ووکامرس

مقدمه

در حال حاضر اکثر وبسایت ها با وردپرس و وکاممرس راه اندازی شده، اما خب همه خوب میدونیم سرعت NextJs خیلی بالاتره، تبدیل WooCommerce به حالت Headless و ترکیب آن با یک فریمورک فرانت-اند مانند Next.js می‌تواند تجربه کاربری را سریعتر، بروزتر و مدرن‌تر کند.

در تنظیمات حالت Headless، WooCommerce فقط به عنوان بک-اند عمل می‌کند و Next.js به عنوان فرانت-اند با WooCommerce از طریق API ارتباط برقرار می‌کند. این آموزش فرض می‌کند که شما دارای دانش پایه‌ای در راه‌اندازی سایت وردپرس/ووکامرس و همچنین محیط توسعه (لوکال هاست یا سرور آنلاین) هستید.

هدف ایجاد یک برنامه Next.js است که از طریق WPGraphQL و افزونه GraphQL ووکامرس با یک فروشگاه WooCommerce ارتباط برقرار کند.

 

مرحله ۱: راه‌اندازی ووکامرس

نصب و راه‌اندازی وردپرس

اگر هنوز این کار را انجام نداده‌اید، وردپرس را بر روی لوکال هاست یا سرور آنلاین نصب کنید

نصب و راه اندازی ووکامرس

به بخش پلاگین‌ها > افزودن جدید در داشبورد وردپرس بروید و جستجوی “ووکامرس” را انجام داده و آن را نصب و فعال کنید.

پیوند‌های یکتا را فعال کنید.

به تنظیمات > پیوندهای یکتا بروید و هر چیزی به جز “ساده” را انتخاب کنید. این کار باعث می‌شود نقاط اتصال API به درستی کار کند.

 

 

مرحله ۲: اضافه‌کردن پشتیبانی از GraphQL

افزونه WPGraphQL را نصب کنید.

در داشبورد وردپرس به بخش پلاگین ها > افزودن جدید رفته، سپس پلاگین WPGraphQL را جستجو کنید و آن را نصب و فعال کنید.

افزونه WPGraphql Woocommerce را نصب کنید.

این افزونه با اضافه کردن داده‌های ووکامرس به طرح کلی افزونه پیوند می‌دهد.

شما می‌توانید این افزونه را در گیت‌هاب پیدا کنید: https://github.com/wp-graphql/wp-graphql-woocommerce.

گیت‌هاب را کلون کرده یا آن را دانلود کنید، سپس به همان صورتی که با هر افزونه وردپرسی کار می‌کنید آن را نصب و فعال کنید.

 

مرحله ۳: ایجاد برنامه Next.js

اگر هنوز Next.js و نرم‌افزار CLI آن را نصب نکرده‌اید، آنها را نصب کنید:

				
					
npm install next react react-dom

پروژه جدید NextJs  ایجاد کنید

				
					
npx create-next-app woocommerce-next --use-npm --template "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
cd woocommerce-next

مرحله ۴: دریافت اطلاعات از ووکامرس

کتابخانه های GraphQL client را نصب کنید:

				
					
npm install @apollo/client graphql

اتصال Next JS به ووکامرس

با استفاده از GraphQL، مشتری برای بازیابی داده از ووکامرس ایجاد کنید. این کار را در یک فایل جدید مانند apollo-client.js انجام دهید:

				
					
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'YOUR_WORDPRESS_URL/graphql',
  cache: new InMemoryCache()
});

export default client;

YOUR_WORDPRESS_URL را با آدرس وبسایت ووردپرس / ووکامرس خود جایگزین کنید.

دریافت و نمایش محصولات در صفحه NextJS

در یکی از صفحات Next.js، مانند pages/products.js، می توانید محصولات را دریافت و نمایش دهید:

				
					
import { gql } from '@apollo/client';
import client from '../path-to-apollo-client';

export async function getStaticProps() {
  const { data } = await client.query({
    query: gql`
      query Products {
        products {
          nodes {
            id
            name
            ... // other fields you want to fetch
          }
        }
      }
    `,
  });

  return {
    props: {
      products: data.products.nodes,
    },
  };
}

function Products({ products }) {
  return (
    

      {products.map((product) => (
        

          {product.name}
          {/* render other product details */}
        

      ))}
    

  );
}

export default Products;

مرحله ۵: توسعه و طراحی تکمیلی

پس از انجام آزمون و خطا ها میتوانید سرانجام طبق سلیقه و کارایی مورد نیازتان فرانت اند خود را با NextJs توسعه دهید و با وردپرس/ووکامرس دیگر نگران کدنویسی پایه بک اند خود نباشید.

 

مرحله ۶: انتشار در سرور آنلاین

شما می توانید برنامه Next.js خود را با استفاده از پلتفرم هایی مانند Vercel، Netlify یا هر محیط Node.js دیگری مانند هاست و سرور منتشر کنید.

توجه: امنیت بسیار مهم است. به خصوص در صورت مشتریانی که با داده ها یا تراکنش های مشتری ارتباط برقرار می کنند، اطمینان حاصل کنید که با اطلاعات به صورت امن برخورد می کنید. حتماً مطالعه مستندات و دستورالعمل های رسمی برای ووکامرس، WPGraphQL و Next.js را مطالعه کنید.