مقدمه
در حال حاضر اکثر وبسایت ها با وردپرس و وکاممرس راه اندازی شده، اما خب همه خوب میدونیم سرعت 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 (
<div>
{products.map((product) => (
<div key={product.id}>
{product.name}
{/* render other product details */}
</div>
))}
</div>
);
}
export default Products;
مرحله ۵: توسعه و طراحی تکمیلی
پس از انجام آزمون و خطا ها میتوانید سرانجام طبق سلیقه و کارایی مورد نیازتان فرانت اند خود را با NextJs توسعه دهید و با وردپرس/ووکامرس دیگر نگران کدنویسی پایه بک اند خود نباشید.
مرحله ۶: انتشار در سرور آنلاین
شما می توانید برنامه Next.js خود را با استفاده از پلتفرم هایی مانند Vercel، Netlify یا هر محیط Node.js دیگری مانند هاست و سرور منتشر کنید.
توجه: امنیت بسیار مهم است. به خصوص در صورت مشتریانی که با داده ها یا تراکنش های مشتری ارتباط برقرار می کنند، اطمینان حاصل کنید که با اطلاعات به صورت امن برخورد می کنید. حتماً مطالعه مستندات و دستورالعمل های رسمی برای ووکامرس، WPGraphQL و Next.js را مطالعه کنید.
