Skip to main content
تعرف السلة ما تخبرها به Ajax API الخاصة بـ Shopify: العناوين والأسعار والكميات والخصائص. لكنها لا تعرف حقولك الوصفية (metafields). يجلب مُثري السلة (cart enricher) حقول منتج أو متغير إضافية من Storefront API ويرفقها بكل سطر مطابق، بحيث يمكنك عرض تقدير للتسليم، أو تحذير “يُشحن على حدة”، أو قائمة مكونات، أو أي شيء آخر تخزّنه على المنتج. استخدامات نموذجية: نوافذ تسليم لكل منتج، شارات مسببات الحساسية أو المكونات، علامة “مخزون منخفض” مخصصة، مضاعِفات نقاط الولاء، تسعير خاص بالمشتركين.

تسجيل المُثري

ثلاثة حقول: كلما حُمّلت السلة أو تغيّرت، تجلب Aftersell جزءك (fragment) لكل منتج أو متغير في السلة. الجلب غير حاجب: تُعرض السلة فورًا ويُعاد إطلاق cart_updated بمجرد وصول البيانات. الجزء البطيء أو الفاشل لا يؤخّر السلة ولا يعطّلها أبدًا.

قراءة البيانات

نظرًا لأن الإثراء غير متزامن، يكون line.metadata.delivery قيمته undefined حتى يتحقق أول جلب. احرس القراءة دائمًا.

عرضها في السلة

يضع الإثراء البيانات على السطر؛ وترسمها كتلة التعليمات البرمجية المخصصة في وضع React. أضف الكتلة ككتلة فرعية ضمن Cart items بحيث تُعرض مرة لكل سطر وتستقبل ذلك السطر كـ props.line:
تعود القيم المُثراة من Storefront API كما هي وبدون تعقيم. اعرضها كنص، كما في الأعلى، وليس أبدًا باستخدام dangerouslySetInnerHTML أو بكتابة HTML خام.

بيانات على مستوى المتغير

عيّن onType: 'ProductVariant' عندما يكون الحقل الوصفي على المتغير وليس على المنتج:

أكثر من الحقول الوصفية

يُدرج الجزء في استعلام Storefront API، لذا فإن أي شيء تكشفه الواجهة على Product أو ProductVariant يعمل، وليس الحقول الوصفية فقط:

أمور يجب ضبطها بشكل صحيح

  • احرس كل قراءة. القيمة الافتراضية لـ metadata هي {} ومساحة اسمك تكون undefined حتى يتحقق الجلب. تُعرض السلة قبل وصول البيانات، دائمًا.
  • كل id هو مساحة اسم خاصة به. تتعايش عدة مُثريات دون تصادم، بما في ذلك تلك التي تسجلها تطبيقات أخرى.
  • يجب أن تكون الحقول الوصفية مرئية لـ Storefront. الحقل الوصفي غير المكشوف لـ Storefront API يعيد null. تحقق من التعريف في لوحة إدارة Shopify إذا لم تحصل على شيء.
  • أبقِ الجزء صغيرًا. فهو يعمل لكل منتج في السلة، عند كل تغيير في السلة. اطلب الحقول التي تستخدمها، وليس كل شيء.
  • سجّل وقت الإعداد. إنه خُطاف، لذا فمكانه أعلى نص Initialization البرمجي.
  • يجب أن تتوازن الأقواس. لا أقواس خارجية حول الجزء، لكن أي تحديد متداخل يحتاج إلى زوجه المطابق. الجزء غير المتوازن يُرفض.

إلى أين تذهب بعد ذلك