खरीदें बटन, एम्बेडेड संग्रह या एम्बेडेड कार्ट को कस्टमाइज़ करना या हटाना

आप अपने वेबपेज के सोर्स 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'
          }
        }
      }
    }
  });
});

प्रत्येक कॉम्पोनेंट को एम्बेड कोड में कॉन्फ़िगरेशन ऑब्जेक्ट के ज़रिए कॉन्फ़िगर किया जाता है। एक ऑब्जेक्ट सेटिंग का एक संरचित ग्रुप होता है, जिसे की-वैल्यू (key-value) की सूची के रूप में फ़ॉर्मैट किया जाता है:

• की किसी सेटिंग का नाम होता है, जैसे कि buttonDestination.
• वैल्यू वह होती है जिस पर सेटिंग को सेट किया जाता है, जैसे कि 'cart'.

एक ऑब्जेक्ट किसी स्प्रेडशीट के समान होता है: प्रत्येक की (key) एक स्तंभ के नाम से संबंधित होती है, और प्रत्येक वैल्यू किसी सेल की सामग्री से संबंधित होती है। अपने खरीदें बटन का रूप या व्यवहार बदलने के लिए, कॉन्फ़िगरेशन ऑब्जेक्ट के अंदर की और वैल्यू को संपादित करें।

हर कॉम्पोनेंट में कई संपादन योग्य की (keys) होती हैं। संपादन योग्य कीज़ की पूरी सूची के लिए, डेवलपर दस्तावेज़ देखें। किसी ऐसी की को कॉन्फ़िगर करने के लिए जो आपके एम्बेड कोड में पहले से मौजूद नहीं है, उस की को उपयुक्त ऑब्जेक्ट में जोड़ें। उदाहरण के लिए, प्रोडक्ट एम्बेड का लेआउट बदलें देखें।

कॉम्पोनेंट स्टाइल को कस्टमाइज़ करें

हर कॉम्पोनेंट में एक नेस्टेड styles कॉन्फ़िगरेशन ऑब्जेक्ट होता है, जो कॉम्पोनेंट के रूप को नियंत्रित करता है। नेस्टेड ऑब्जेक्ट वह ऑब्जेक्ट होता है, जिसे किसी दूसरे ऑब्जेक्ट के अंदर रखा जाता है।

styles ऑब्जेक्ट CSS का इस्तेमाल करता है, जो वेबपेज के एलिमेंट को विज़ुअली स्टाइल करने का तरीका बताने के लिए उपयोग की जाने वाली भाषा है। styles ऑब्जेक्ट में हर टॉप-लेवल की, कॉम्पोनेंट के किसी एलिमेंट को दर्शाती है, जैसे कि शीर्षक (title) या बटन। उस की के भीतर, हर नेस्टेड की एक CSS प्रॉपर्टी होती है (उदाहरण के लिए, background-color या border), और उसकी वैल्यू एक CSS वैल्यू होती है।

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

styles में कोई भी मान्य (valid) CSS प्रॉपर्टी जोड़ी जा सकती है। सुनिश्चित करें कि डैश वाले प्रॉपर्टी नामों को कोटेशन मार्क में रखा गया हो।

CSS अनुकूलन के बारे में ज़्यादा जानकारी के लिए, डेवलपर दस्तावेज़ देखें।

एम्बेडेड संग्रह कॉम्पोनेंट

एम्बेडेड संग्रह, खरीदें बटन के समान ही कॉन्फ़िगरेशन ऑब्जेक्ट का उपयोग करते हैं। संग्रह में मौजूद प्रोडक्ट के लेआउट या अन्य प्रॉपर्टी को संपादित करने के लिए, product कॉन्फ़िगरेशन ऑब्जेक्ट खोजें और उसे उसी तरह संपादित करें जैसे आप किसी प्रोडक्ट एम्बेड को संपादित करते हैं। संग्रह की प्रॉपर्टी को संपादित करने के लिए, जैसे कि अगला पेज बटन का टेक्स्ट, इसके बजाय productSet कॉन्फ़िगरेशन ऑब्जेक्ट को संपादित करें।

कुछ की, जैसे कि किसी कॉम्पोनेंट का टेक्स्ट, नेस्टेड ऑब्जेक्ट के माध्यम से कॉन्फ़िगर की जाती हैं। उदाहरण के लिए, अगला पेज बटन का टेक्स्ट productSet कॉम्पोनेंट के text ऑब्जेक्ट के अंदर होता है:

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

प्रोडक्ट एम्बेड के कार्ट लिंक को प्रोडक्ट विवरण मॉडल से बदलें

प्रोडक्ट विवरण मॉडल एक पॉप अप विंडो है, जो प्रोडक्ट की जानकारी प्रदर्शित करती है। अपने ग्राहक को कार्ट के बजाय प्रोडक्ट विवरण मॉडल पर भेजने के लिए, अपने वेबपेज के सोर्स HTML में अपने खरीदें बटन एम्बेड कोड को संपादित करें।

चरण:

1. उस पेज का HTML खोलें जिसमें वह प्रोडक्ट एम्बेड है जिसे आप बदलना चाहते हैं।
2. product कॉन्फ़िगरेशन ऑब्जेक्ट ढूंढें।
3. ऑब्जेक्ट में buttonDestination की (key) ढूंढें:

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. अपने बदलाव सेव करें।