איך להציג מטא-שדות של מוצרים ב-Shopify בעמוד פרטי המוצר באפליקציה הניידת שלכם

שימו לב: מאמר זה מיועד לבלוק מותאם אישית מדור קודם המשתמש ב-EDL; עבור בלוק מותאם אישית חדש המבוסס על react-native, אנא השתמשו בבלוקים הניתנים לקידוד של Product metafields כרפרנס

מבוא

בשוק ה-eCommerce התחרותי של היום, מתן מידע מפורט ומותאם אישית על המוצרים הוא קריטי לשיפור חוויית הלקוח. ה-metafields של מוצרים ב-Shopify מאפשרים לכם לאחסן ולהציג נתונים מותאמים אישית כמו מידות, חומרים, הוראות טיפול או פרטים פרומוציוניים. עם Evlop Mobile App Builder, תוכלו לשלב בקלות את ה-metafields האלה בעמוד פרטי המוצר באפליקציה הניידת שלכם, ולספק חוויית קנייה עשירה יותר.

מאמר זה ידריך אתכם בתהליך של טעינה והצגה של Shopify product metafields באפליקציה הניידת שלכם באמצעות Evlop.

מהם Shopify Product Metafields?

Shopify product metafields הם שדות מותאמים אישית המאפשרים לכם לאחסן מידע נוסף על המוצרים שלכם. הם מוגדרים על ידי namespace (קטגוריה) ו-key (שדה ספציפי). לדוגמה:

• Namespace: custom
• Key: text

Metafields יכולים לאחסן סוגי נתונים שונים, כגון טקסט, תמונות, כתובות URL ואפילו קודי QR, מה שמאפשר לכם לספק פרטי מוצר ייחודיים מעבר לתכונות ברירת המחדל של Shopify.

טעינת Product Metafields ל-EDL

כדי להציג מטא-שדות (metafields) של מוצרים מ-Shopify באפליקציה שלכם, קודם צריך לטעון אותם אל 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(maxWidth: 240px, maxHeight: 240px)
• data.productMetafields.media.image.medium(maxWidth: 480, maxHeight: 480)
• data.productMetafields.media.image.large(maxWidth: 960px, maxHeight: 960px)

זהו פתרון אידיאלי להצגת תמונות מוצר, הוראות טיפול או ויזואלים נוספים.

הצגת קוד QR באמצעות נתוני מטא-פילדס

כדי להציג קוד QR ממטא-פילד, השתמשו בקטע ה-EDL הבא בבלוק מותאם אישית:

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

זהו פתרון מושלם למבצעים, הנחות או קישור למידע נוסף על המוצר.

סיכום

על ידי טעינה והצגה של metafields של מוצרי Shopify באפליקציה הניידת שלכם באמצעות Evlop Mobile App Builder, תוכלו לספק ללקוחות שלכם חוויית קנייה מותאמת אישית ומעשירה יותר. בין אם מדובר בטקסט, תמונות או קודי QR, metafields מאפשרים לכם להציג פרטים ייחודיים על המוצר שחורגים מהמאפיינים המובנים של Shopify.

עקבו אחר השלבים המפורטים במאמר זה כדי לשלב metafields באפליקציה שלכם בצורה חלקה ולשדרג את חוויית הקנייה של הלקוחות שלכם. אם אתם זקוקים לסיוע נוסף, פנו לצוות התמיכה של Evlop!