پرش به مطلب اصلی

ساخت اپ فروشگاهی با ووکامرس

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

پیش‌نیازها​

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

صفحه‌هایی که می‌سازیم​

فروشگاه            → لیست محصولات      → الگوی «کارت محصول»
جزئیات محصول       → ویجت‌های متصل به محصول + انتخاب تنوع + افزودن به سبد
سبد خرید           → لیست اقلام سبد    → الگوی «ردیف سبد»
آدرس
روش ارسال          → لیست روش‌ها       → الگوی «ردیف ارسال»
درگاه پرداخت       → لیست درگاه‌ها     → الگوی «ردیف درگاه»
نتیجه سفارش
سفارش‌های من       → لیست سفارش‌ها     → الگوی «کارت سفارش»

گام ۱: کارت محصول و فهرست فروشگاه​

  1. صفحه‌ای به نام «کارت محصول» بسازید. ساده‌ترین راه: از منوی افزودن ویجت مسیر وردپرس ← بلوک‌های فروشگاه ← بلوک آماده کارت محصول را انتخاب کنید. برای ساخت دستی، یک گروه عمودی بسازید و ویجت‌های معمولی عکس و متن را به sys.inPage.product.image.url، sys.inPage.product.title و مسیرهای قیمت متصل کنید.
  2. برچسب تخفیف را با شرط مقدار متغیر روی sys.inPage.entity.price.hasDiscount نمایش دهید تا روی محصولات بدون تخفیف دیده نشود.
  3. صفحه «فروشگاه» را بسازید و یک لیست پویا اضافه کنید:
    • نوع منبع: WordPress
    • نوع داده: «محصولات WooCommerce»
    • صفحه الگو: «کارت محصول»
    • چیدمان: شبکه‌ای دو ستونه
    • بارگذاری تدریجی: روشن

فیلتر نمونه برای نمایش فقط محصولات موجود:

{ "stock_status": "instock", "orderby": "date", "order": "desc" }

گام ۲: صفحه محصول​

  1. صفحه‌ای به نام «جزئیات محصول» بسازید.
  2. ویجت‌های معمولی عکس و متن را به مسیرهای sys.inPage.product.* متصل کنید و برای میانگین امتیاز از نمایش امتیاز استفاده کنید.
  3. برای محصول متغیر، بلوک آماده انتخاب تنوع و افزودن به سبد را اضافه کنید.
  4. دکمه «افزودن به سبد» بسازید و عملکرد افزودن محصول به سبد خرید را با گزینه «استفاده از محصول فعلی» روی آن بگذارید.
  5. دکمه را با شرط موجود بودن محصول نمایش دهید و در حالت مخالف، متن «ناموجود» را نشان دهید.
  6. در صفحه «کارت محصول»، روی کلیک گروه، عملکرد باز کردن محصول ووکامرس را با «استفاده از محصول فعلی» و صفحه الگوی «جزئیات محصول» تنظیم کنید.
مهم

برای محصول متغیر، تا وقتی همه گزینه‌ها انتخاب نشده باشند افزودن به سبد انجام نمی‌شود. اگر می‌خواهید دکمه در این حالت غیرفعال دیده شود، آن را با شرط مقدار متغیر روی sys.inPage.product.selection.complete کنترل کنید.

کنترل تعداد در صفحه محصول​

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

  • دکمه «+» با عملکرد تغییر تعداد محصول در سبد خرید، هدف «محصول جاری صفحه»، عملیات «افزایش یک گام».
  • دکمه «−» با همان عملکرد و عملیات «کاهش یک گام / حذف در حداقل».
  • عدد وسط با متغیر sys.inPage.product.cart.quantity.
  • نمایش کل کنترل با شرط sys.inPage.product.cart.exists، و نمایش دکمه افزودن به سبد در حالت مخالف.

گام ۳: دسته‌ها و فیلتر​

  1. صفحه «کارت دسته محصول» را با بلوک کارت دسته بسازید؛ یا ویجت‌های معمولی را به sys.inPage.category.* متصل کنید.
  2. در صفحه فروشگاه، یک لیست افقی با نوع داده «دسته‌های محصول» اضافه کنید.
  3. صفحه «محصولات دسته» را با این فیلتر بسازید:
{ "category": "{{shop.filter.category}}" }
  1. روی کارت دسته، یک عملکرد چندگانه بگذارید:
    • مقداردهی متغیر shop.filter.category با {{sys.inPage.category.id}}
    • باز کردن صفحه «محصولات دسته»

فیلتر دسته در ووکامرس شناسه عددی می‌گیرد، نه نامک.

همین الگو را می‌توانید برای برچسب، برند و ویژگی محصول با متغیرهای shop.filter.tag، shop.filter.brand و shop.filter.attribute تکرار کنید.

گام ۴: جست‌وجوی محصول​

بلوک آماده صفحه جست‌وجوی زنده محصول یک فیلد متن و یک لیست فیلترشده با {{search.query}} را با هم اضافه می‌کند. برای ساخت دستی، همان الگوی گام ۳ را با فیلتر { "search": "{{search.query}}" } تکرار کنید.

گام ۵: سبد خرید​

  1. صفحه‌ای به نام «ردیف سبد» بسازید و ویجت‌های معمولی عکس و متن را به داده‌های sys.inPage.cartItem.* متصل کنید.
  2. روی همان ردیف، دو عملکرد اضافه کنید:
    • تغییر تعداد محصول در سبد خرید با هدف «ردیف جاری فهرست سبد»
    • حذف محصول از سبد خرید با «استفاده از ردیف فعلی سبد خرید»
  3. صفحه «سبد خرید» را بسازید و یک لیست پویا با نوع داده «اقلام سبد خرید» و همین صفحه الگو اضافه کنید.
  4. زیر لیست، بلوک آماده خلاصه سبد خرید را بگذارید.
  5. با شرط خالی بودن سبد خرید پیام «سبد شما خالی است» را نشان دهید و دکمه ادامه را پنهان کنید.
  6. در تولبار اپ، بلوک آماده دکمه سبد خرید با نشان تعداد را اضافه کنید.

گام ۶: مسیر پرداخت​

مراحل آدرس، روش ارسال، درگاه و ثبت سفارش به‌طور کامل در سبد خرید، سفارش و پرداخت توضیح داده شده‌اند. خلاصه:

  1. آدرس: فیلدهای فرم را به checkout.payload.billing_address.* وصل کنید و روی دکمه ادامه، عملکرد ثبت آدرس و دریافت نرخ‌های ارسال را بگذارید.
  2. روش ارسال: لیست با نوع داده «روش‌های ارسال سبد خرید» و عملکرد انتخاب روش ارسال روی ردیف.
  3. درگاه: لیست با نوع داده «درگاه‌های پرداخت» و عملکرد انتخاب درگاه پرداخت جاری روی ردیف.
  4. ثبت سفارش: دکمه با عملکرد ثبت سفارش و شروع پرداخت و متغیر checkout.payload.
  5. نتیجه: صفحه‌ای که وضعیت را از sys.woocommerce.lastOrderPaid و sys.woocommerce.lastOrderStatus می‌خواند.
هشدار

مسیر پرداخت را حتماً با یک سفارش واقعی تست کنید. بسته شدن صفحه درگاه به معنی موفق بودن پرداخت نیست؛ وضعیت واقعی همیشه از سایت خوانده می‌شود.

گام ۷: حساب کاربری و سفارش‌ها​

برای این بخش، کاربر باید به حساب وردپرس وارد شده باشد. راهنمای کامل در حساب کاربری وردپرس در اپ.

  1. صفحه «کارت سفارش» را با بلوک آماده کارت سفارش بسازید و در صورت نیاز ویجت‌های متن متصل به sys.inPage.order.* را تغییر دهید.
  2. صفحه «سفارش‌های من» را با یک لیست پویا و نوع داده «سفارش‌های کاربر» بسازید.
  3. برای نمایش اقلام هر سفارش، داخل صفحه «کارت سفارش» یک لیست پویای دیگر با منبع خودکار و مسیر فیلد items بگذارید.
  4. روی هر سفارش، عملکردهای لغو سفارش و درخواست بازپرداخت یا مرجوعی را اضافه کنید.
  5. کل صفحه را با شرط ورود کاربر به حساب وردپرس محافظت کنید.

گام ۸: علاقه‌مندی‌ها​

  1. روی کارت و صفحه محصول، یک دکمه قلب بگذارید با عملکرد افزودن محصول به علاقه‌مندی‌ها.
  2. دکمه دوم با حذف محصول از علاقه‌مندی‌ها بسازید و هر کدام را با شرط مناسب نمایش دهید.
  3. صفحه «علاقه‌مندی‌های من» را با لیست پویا و نوع داده «محصولات مورد علاقه» بسازید؛ صفحه الگو همان «کارت محصول» است.

نکات کارایی​

  • تعداد آیتم هر صفحه لیست را بین ۱۰ تا ۲۰ نگه دارید و بارگذاری تدریجی را روشن بگذارید.
  • در کارت محصول فقط ویجت‌ها و داده‌هایی را بگذارید که واقعاً دیده می‌شوند؛ هر بخش اضافه، زمان ساخت هر ردیف را بالا می‌برد.
  • بخش‌های سنگین مانند «محصولات مرتبط» را با شرط وضعیت محصولات مرتبط فقط وقتی نمایش دهید که داده دارند.
  • شرط «عدم برقراری ارتباط با سایت وردپرسی» یک درخواست واقعی می‌فرستد؛ آن را داخل الگوی آیتم لیست نگذارید.

اشتباه‌های رایج​

  • گذاشتن دکمه افزودن به سبد روی محصول متغیر بدون بلوک انتخاب تنوع.
  • استفاده از گزینه «نیاز به ورود» صفحه برای صفحه‌های وردپرسی؛ آن گزینه به حساب اپ‌ادیتور مربوط است.
  • نام‌گذاری متغیر پرداخت با چیزی غیر از checkout.payload.
  • انتظار به‌روزرسانی خودکار لیست با تغییر متغیر فیلتر؛ باید صفحه دوباره باز شود.
  • تست نکردن حالت بازگشت کاربر با دکمه Back از وسط صفحه پرداخت.

مطالب مرتبط​