کسی بائے بٹن، ایمبیڈڈ کلیکشن، یا ایمبیڈڈ کارٹ کو حسب ضرورت بنانا یا ہٹانا

آپ اپنے ویب پیج کے سورس 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 کے جوڑوں کی فہرست کے طور پر فارمیٹ کیا جاتا ہے:

• key کسی سیٹنگ کا نام ہوتا ہے، جیسے کہ buttonDestination۔
• value وہ ہوتی ہے جس پر سیٹنگ سیٹ کی جاتی ہے، جیسے کہ 'cart'۔

ایک آبجیکٹ اسپریڈ شیٹ کی طرح ہوتا ہے: ہر key کالم کے نام سے مماثل ہوتی ہے، اور ہر value سیل کے مواد سے مماثل ہوتی ہے۔ اپنے بائے بٹن کی ظاہری شکل یا رویے کو تبدیل کرنے کے لیے، کنفیگریشن آبجیکٹ کے اندر موجود key اور value میں ترمیم کریں۔

ہر کمپوننٹ میں کئی قابلِ ترمیم key ہوتی ہیں۔ قابلِ ترمیم key کی مکمل فہرست کے لیے، ڈیویلپر کی دستاویزات دیکھیں۔ کسی ایسی key کو کنفیگر کرنے کے لیے جو آپ کے ایمبیڈ کوڈ میں پہلے سے موجود نہیں ہے، متعلقہ آبجیکٹ میں وہ key شامل کریں۔ مثال کے لیے، پروڈکٹ ایمبیڈ کا لے آؤٹ تبدیل کریں سے رجوع کریں۔

کمپوننٹ کے اسٹائل کسٹمائز کریں

ہر کمپوننٹ میں ایک نیسٹڈ styles کنفیگریشن آبجیکٹ ہوتا ہے جو کمپوننٹ کی ظاہری شکل کو کنٹرول کرتا ہے۔ نیسٹڈ آبجیکٹ وہ آبجیکٹ ہوتا ہے جسے کسی دوسرے آبجیکٹ کے اندر رکھا جاتا ہے۔

styles آبجیکٹ CSS استعمال کرتا ہے، یہ وہ زبان ہے جو ویب پیج کے عناصر کے بصری اسٹائل کی وضاحت کرنے کے لیے استعمال ہوتی ہے۔ styles آبجیکٹ میں ہر ٹاپ لیول key کمپوننٹ کے ایک عنصر کی نمائندگی کرتی ہے، جیسے عنوان یا بٹن۔ اس key کے اندر، ہر نیسٹڈ key ایک CSS پراپرٹی ہوتی ہے (مثال کے طور پر، background-color یا border)، اور value ایک CSS ویلیو ہوتی ہے۔

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

کوئی بھی درست CSS پراپرٹی styles میں شامل کی جا سکتی ہے۔ یقینی بنائیں کہ ڈیش والے پراپرٹی کے نام کوٹیشن مارکس میں بند ہوں۔

CSS کسٹمائزیشن کے بارے میں مزید معلومات کے لیے، ڈیویلپر کی دستاویزات دیکھیں۔

ایمبیڈڈ کلیکشن کے کمپوننٹ

ایمبیڈڈ کلیکشنز وہی کنفیگریشن آبجیکٹ استعمال کرتی ہیں جو بائے بٹن کرتے ہیں۔ کلیکشن کے اندر موجود پروڈکٹس کے لے آؤٹ یا دیگر پراپرٹیز میں ترمیم کرنے کے لیے، product کنفیگریشن آبجیکٹ تلاش کریں اور اس میں بالکل اسی طرح ترمیم کریں جیسے آپ پروڈکٹ ایمبیڈ میں کرتے ہیں۔ خود کلیکشن کی پراپرٹیز میں ترمیم کرنے کے لیے، جیسے کہ اگلا صفحہ بٹن کا ٹیکسٹ، اس کے بجائے productSet کنفیگریشن آبجیکٹ میں ترمیم کریں۔

کچھ key، جیسے کہ کسی کمپوننٹ کا ٹیکسٹ، نیسٹڈ آبجیکٹ کے ذریعے کنفیگر کی جاتی ہیں۔ مثال کے طور پر، اگلا صفحہ کے بٹن کا ٹیکسٹ productSet کمپوننٹ کے text آبجیکٹ کے اندر ہوتا ہے:

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

پروڈکٹ ایمبیڈ کے کارٹ لنک کو پروڈکٹ کی تفصیلات کے موڈل سے تبدیل کریں

پروڈکٹ کی تفصیلات کا موڈل ایک پاپ اپ ونڈو ہے جو پروڈکٹ کی معلومات دکھاتی ہے۔ اپنے کسٹمر کو کارٹ کے بجائے پروڈکٹ کی تفصیلات کے موڈل پر بھیجنے کے لیے، اپنے ویب پیج کے سورس HTML میں بائے بٹن ایمبیڈ کوڈ میں ترمیم کریں۔

مراحل:

1. اس صفحے کا HTML کھولیں جس میں وہ پروڈکٹ ایمبیڈ موجود ہے جسے آپ تبدیل کرنا چاہتے ہیں۔
2. product کنفیگریشن آبجیکٹ تلاش کریں۔
3. آبجیکٹ میں buttonDestination key تلاش کریں:

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

4. اس key کی ویلیو کو 'modal' میں تبدیل کریں، بشمول کوٹیشن مارکس:

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

5. اپنی تبدیلیاں محفوظ کریں۔

پروڈکٹ ایمبیڈ کا لے آؤٹ تبدیل کریں

افقی پروڈکٹ ایمبیڈ لے آؤٹ تصویر کو پروڈکٹ کی تفصیلات کے اوپر رکھنے کے بجائے ان کے پہلو میں رکھتا ہے۔ اس لے آؤٹ پر سوئچ کرنے کے لیے، اپنے ویب پیج کے سورس HTML میں اپنے بائے بٹن ایمبیڈ کوڈ میں ترمیم کریں۔

مراحل:

1. اس صفحے کا HTML کھولیں جس میں وہ پروڈکٹ ایمبیڈ موجود ہے جسے آپ تبدیل کرنا چاہتے ہیں۔
2. product کنفیگریشن آبجیکٹ تلاش کریں۔
3. ایک layout key شامل کریں، اور پھر ویلیو کو 'horizontal' پر سیٹ کریں۔ اس بات کو یقینی بنائیں کہ ویلیو میں کوٹیشن مارکس شامل ہیں اور پچھلی لائن کوما پر ختم ہوتی ہے:

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

4. اپنی تبدیلیاں محفوظ کریں۔

کارٹ ایمبیڈ کی ظاہری شکل اور رویہ تبدیل کریں

کارٹ کی ظاہری شکل یا رویے کو تبدیل کرنے کے لیے، اپنے ایمبیڈ کوڈ میں cart کنفیگریشن آبجیکٹ میں ترمیم کریں۔

مراحل:

1. اس صفحے کا HTML کھولیں جس میں وہ کارٹ موجود ہے جس میں آپ ترمیم کرنا چاہتے ہیں۔
2. اپنے ایمبیڈ کوڈ میں cart کنفیگریشن آبجیکٹ تلاش کریں:

options: {
      cart: {
        startOpen: false
      }
}

3. کارٹ کی ظاہری شکل یا رویے کو تبدیل کرنے کے لیے موجودہ key میں ترمیم کریں یا نئی key شامل کریں۔ قابلِ کنفیگر key کی مکمل فہرست کے لیے، ڈیویلپر کی دستاویزات دیکھیں۔
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. اپنی تبدیلیاں محفوظ کریں۔