התאמה אישית או הסרה של לחצן קנייה, אוסף מוטמע או סל מוטמע

אפשר לשנות את המראה או ההתנהגות של לחצן קנייה, אוסף מוטמע או סל מוטמע על ידי עריכת קוד ההטמעה שלו במקור ה-HTML של דף האינטרנט. אפשר גם למחוק הטמעה על ידי הסרת הקוד מדף האינטרנט.

לחצן קנייה מציג מוצר עם לחצן רכישה. אוסף מוטמע מציג מספר מוצרים. סל מוטמע מציג סל קניות עצמאי שלקוחות יכולים להשתמש בו לאורך דפים שונים.

קוד הטמעה הוא קטע הקוד שהעתקת ממנהל Shopify והדבקת ב-HTML של דף האינטרנט בעת יצירת לחצן הקנייה או הסל. קוד ההטמעה כתוב ב-JavaScript, שפת התכנות המשמשת להוספת תכונות אינטראקטיביות לדפי אינטרנט.

הבנת קוד ההטמעה של לחצן הקנייה

כל לחצן קנייה בנוי מחלקים נפרדים הנקראים רכיבים. רכיב הוא חלק בעל שם מתוך קוד ההטמעה ששולט על חלק מסוים בחוויית לחצן הקנייה. לדוגמה, בעת הוספת מוצר עם סל לדף האינטרנט שלך, קוד ההטמעה יוצר את הרכיבים הבאים:

• רכיב product, שמציג את פרטי המוצר ואת לחצן הרכישה
• רכיב cart, שמציג את תוכן הסל
• רכיב toggle לסל, שמציג את הסמל שפותח את הסל

אם רכיב המוצר פותח חלון פופ-אפ עם פרטי מוצר, קוד ההטמעה ייצור שני רכיבים נוספים: רכיב modal עבור הפופ-אפ עצמו ורכיב modalProduct עבור פרטי המוצר שמוצגים בתוך הפופ-אפ.

בקטע הקוד הבא מופיעים רכיבים נפרדים עבור ה-product ועבור ה-cart:

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

כל רכיב מוגדר באמצעות אובייקט תצורה בקוד ההטמעה. אובייקט הוא קבוצה מובנית של הגדרות, המעוצבת כרשימה של צמדי מפתח-ערך:

• מפתח הוא השם של הגדרה מסוימת, כגון buttonDestination.
• ערך הוא התוכן או הסטטוס של ההגדרה, כגון 'cart'.

אובייקט דומה לגיליון אלקטרוני: כל מפתח מקביל לשם עמודה, וכל ערך מקביל לתוכן של תא. כדי לשנות את המראה או ההתנהגות של לחצני הקנייה שלך, יש לערוך את המפתחות והערכים בתוך אובייקטי התצורה.

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

התאמה אישית של סגנונות הרכיבים

לכל רכיב יש אובייקט תצורה מקונן של styles ששולט במראה הרכיב. אובייקט מקונן הוא אובייקט שנמצא בתוך אובייקט אחר.

אובייקט styles משתמש ב-CSS, השפה שמשמשת לתיאור העיצוב הוויזואלי של אלמנטים בדף האינטרנט. כל מפתח ברמה העליונה באובייקט styles מייצג אלמנט בתוך הרכיב, כמו הכותרת או הלחצן. בתוך אותו מפתח, כל מפתח מקונן הוא מאפיין CSS (לדוגמה, background-color או border), והערך שלו הוא ערך ב-CSS.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

ניתן להוסיף ל-styles כל מאפיין CSS חוקי. יש לוודא ששמות מאפיינים המכילים מקפים (dashes) עטופים במרכאות.

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

רכיבים של אוסף מוטמע

אוספים מוטמעים משתמשים באותם אובייקטי תצורה כמו לחצני קנייה. כדי לערוך את הפריסה או מאפיינים אחרים של המוצרים בתוך האוסף, יש למצוא את אובייקט התצורה product ולערוך אותו באותו אופן שעורכים הטמעת מוצר. כדי לערוך מאפיינים של האוסף עצמו, כמו הטקסט של הלחצן Next page (הדף הבא), יש לערוך את אובייקט התצורה productSet.

מפתחות מסוימים, כגון טקסט של רכיב, מוגדרים באמצעות אובייקטים מקוננים. לדוגמה, הטקסט עבור הלחצן Next page נמצא בתוך אובייקט ה-text של רכיב productSet:

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

החלפת קישור לסל בהטמעת מוצר בחלון מודאלי עם פרטי מוצר

חלון מודאלי עם פרטי מוצר הוא חלון פופ-אפ המציג מידע על המוצר. כדי להפנות את הלקוחות לחלון מודאלי עם פרטי מוצר במקום אל הסל, יש לערוך את קוד ההטמעה של לחצן הקנייה ב-HTML המקור של דף האינטרנט.

שלבים:

1. יש לפתוח את ה-HTML של הדף שמכיל את הטמעת המוצר שברצונך לשנות.
2. יש לאתר את אובייקט התצורה product.
3. יש לאתר באובייקט את המפתח buttonDestination:

options: {
      product: {
        buttonDestination: 'cart'
      }
}

4. יש לשנות את הערך של מפתח זה ל-'modal', כולל המרכאות:

options: {
      product: {
        buttonDestination: 'modal'
      }
}

5. יש לשמור את השינויים.

שינוי הפריסה של הטמעת מוצר

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

שלבים:

1. יש לפתוח את ה-HTML של הדף שמכיל את הטמעת המוצר שברצונך לשנות.
2. יש לאתר את אובייקט התצורה product.
3. יש להוסיף מפתח layout ולאחר מכן להגדיר את הערך ל-'horizontal'. יש לוודא שהערך כולל את המרכאות ושהשורה הקודמת מסתיימת בפסיק:

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

4. יש לשמור את השינויים.

שינוי המראה וההתנהגות של הטמעת סל

כדי לשנות את המראה או ההתנהגות של סל, יש לערוך את אובייקט התצורה cart בקוד ההטמעה.

שלבים:

1. יש לפתוח את ה-HTML של הדף שמכיל את הסל שברצונך לערוך.
2. יש לאתר את אובייקט התצורה cart בקוד ההטמעה:

options: {
      cart: {
        startOpen: false
      }
}

3. כדי לשנות את המראה או ההתנהגות של הסל, יש לערוך מפתח קיים או להוסיף מפתח חדש. לרשימה מלאה של מפתחות הניתנים להגדרה, יש לעיין בתיעוד המפתחים.
4. יש לשמור את השינויים.

מחיקת לחצן קנייה, אוסף מוטמע או סל מוטמע

כדי להסיר מדף האינטרנט לחצן קנייה, אוסף מוטמע או סל מוטמע, יש למחוק את קוד ההטמעה שלו מ-HTML המקור.

שלבים:

1. יש לפתוח את HTML המקור של דף האינטרנט שמכיל את לחצן הקנייה, האוסף המוטמע או הסל המוטמע.
2. יש למחוק מ-HTML המקור את כל קוד ההטמעה, החל מ-<script data-shopify-buy-ui> ועד </script>. להלן דוגמה לקוד הטמעה של לחצן קנייה:

<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>

3. יש לשמור את השינויים.