كيفية عرض حقول منتجات Shopify الوصفية في صفحة تفاصيل المنتج داخل تطبيقك للجوال

ملاحظة: هذه المقالة مخصصة للبلوك المخصص القديم الذي يستخدم EDL، أما بالنسبة للبلوك المخصص الجديد الذي يستخدم react-native فيرجى الرجوع إلى بلوكات Product metafields codeable كمرجع

مقدمة

في سوق التجارة الإلكترونية التنافسي اليوم، يُعد توفير معلومات تفصيلية ومخصصة عن المنتجات أمرًا بالغ الأهمية لتحسين تجربة العميل. تتيح لك حقول metafields الخاصة بالمنتجات في Shopify تخزين وعرض بيانات مخصصة مثل المقاس أو الخامة أو تعليمات العناية أو التفاصيل الترويجية. ومع Evlop Mobile App Builder، يمكنك بسهولة دمج هذه الحقول في صفحة تفاصيل المنتج داخل تطبيقك للجوال، مما يوفر تجربة تسوق أغنى.

ستوضح لك هذه المقالة خطوات تحميل وعرض حقول metafields الخاصة بمنتجات Shopify في تطبيقك للجوال باستخدام Evlop.

ما هي حقول metafields الخاصة بمنتجات Shopify؟

حقول metafields الخاصة بمنتجات Shopify هي حقول مخصصة تتيح لك تخزين معلومات إضافية عن منتجاتك. ويُعرَّف كل حقل بـ namespace (فئة) وkey (حقل محدد). على سبيل المثال:

• Namespace: custom
• Key: text

يمكن لهذه الحقول تخزين أنواع متنوعة من البيانات، مثل النصوص أو الصور أو عناوين URL أو حتى رموز QR، مما يمكّنك من تقديم تفاصيل فريدة عن المنتجات تتجاوز السمات الافتراضية في Shopify.

تحميل حقول metafields الخاصة بالمنتجات إلى EDL

لعرض حقول منتجات Shopify الوصفية (metafields) في تطبيقك للجوال، عليك أولًا تحميلها إلى Extended Data Layer (EDL). إليك الطريقة:

1. انتقل إلى تبويب "Data for EDL" داخل Custom block.
2. انقر على "Add Data to Pass to EDL".
3. اختر "Product Metafields" كنوع للبيانات.
4. أضف namespace وkey لكل حقل وصفي تريد تحميله. على سبيل المثال:
   • namespace: custom  key: text
   • namespace: details  key: material
   • namespace: media  key: image
   • namespace: promo  key: qrcode
5. احفظ التغييرات.

بعد تحميلها، يمكنك الوصول إلى هذه الحقول الوصفية في EDL باستخدام مسارات مثل data.myMetafields.custom.text أو data.myMetafields.media.image.

عرض النصوص باستخدام بيانات الحقول الوصفية

لعرض بيانات نصية من حقل وصفي، استخدم مقطع EDL التالي داخل custom block:

<Box>
  <Text>Custom Text: {data.productMetafields.custom.text}</Text>
</Box>

يقوم هذا بسحب قيمة النص من الحقل التعريفي ديناميكيًا وعرضها في صفحة تفاصيل المنتج.

عرض صورة باستخدام بيانات الحقول التعريفية

لعرض صورة مخزنة في حقل تعريفي، استخدم مقطع EDL التالي في مكوّن مخصص:

<Box>
  <Image src={data.productMetafields.media.image.small} />
</Box>

حسب حجم العرض المطلوب، يمكنك استخدام أحد ما يلي

• data.productMetafields.media.image.small(بحد أقصى للعرض: 240px، وبحد أقصى للارتفاع: 240px)
• data.productMetafields.media.image.medium(بحد أقصى للعرض: 480، وبحد أقصى للارتفاع: 480)
• data.productMetafields.media.image.large(بحد أقصى للعرض: 960px، وبحد أقصى للارتفاع: 960px)

هذا مثالي لعرض صور المنتجات أو تعليمات العناية أو عناصر بصرية إضافية.

عرض رمز QR باستخدام بيانات الحقول التعريفية

لعرض رمز QR من حقل تعريفي، استخدم مقطع EDL التالي في مكوّن مخصص:

<Box>
  <QRCode value={data.productMetafields.promo.qrcode} />
</Box>

هذا مثالي للعروض الترويجية والخصومات أو الربط بمعلومات إضافية عن المنتج.

الخلاصة

من خلال تحميل حقول البيانات الوصفية لمنتجات Shopify وعرضها في تطبيقك للجوال باستخدام Evlop Mobile App Builder، يمكنك توفير تجربة تسوق أكثر تخصيصًا وإفادة لعملائك. سواء أكانت نصوصًا أو صورًا أو رموز QR، تتيح لك حقول البيانات الوصفية عرض تفاصيل فريدة للمنتج تتجاوز السمات الافتراضية في Shopify.

اتبع الخطوات الموضحة في هذه المقالة لدمج حقول البيانات الوصفية بسلاسة في تطبيقك وتحسين رحلة التسوق لعملائك. وإذا احتجت إلى مزيد من المساعدة، فتواصل مع فريق دعم Evlop!