إضافة كود زر الشراء (Buy Button) إلى HTML

بعد إنشاء زر الشراء (Buy Button) في مسؤول Shopify، ستكون جاهزًا لإضافته إلى موقعك الإلكتروني أو مدونتك.

تختلف عملية إضافة كود التضمين إلى مصدر HTML لموقعك الإلكتروني قليلًا بناءً على الطريقة والمكان اللذين تريد أن تظهر فيهما أزرار الشراء وسلة التسوق، وعلى منصة النشر الخاصة بك، وأحيانًا على القالب الذي تستخدمه في تلك المنصة.

إضافة كود التضمين إلى WordPress

يمكنك إضافة كود التضمين إلى المنشورات، أو الصفحات، أو القوالب في موقع WordPress الخاص بك.

إضافة كود التضمين إلى منشور أو صفحة WordPress

1. في Shopify، أنشئ زر الشراء (Buy Button) وانسخ كود التضمين الخاص به من مربع الحوار كود التضمين (أو انقر على نسخ كود التضمين إلى الحافظة).
2. من لوحة تحكم WordPress الخاصة بك، انتقل إلى منشوراتك أو صفحاتك.
3. إمّا أن تُنشئ منشورًا أو صفحة جديدة، أو تُعدّل ما هو موجود بالفعل.
4. داخل مُحرر المكوّنات، انقر على زر +، وابحث عن Custom HTML، ثم انقر لإدراج مكوّن Custom HTML.
5. الصق رمز التضمين في الحقل النصي الذي توفره كتلة HTML المخصص.
6. اختياري: انقل كتلة HTML المخصص أو عاين كيفية عرض Buy Button الخاص بك:
   • لنقل كتلة HTML المخصص، انقر على زري الأسهم في شريط أدوات الكتلة، أو اسحب الكتلة إلى موقع جديد.
   • لمعاينة Buy Button، انقر على معاينة في شريط أدوات الكتلة.
7. عند الانتهاء، انقر على زر حفظ المسودة، أو معاينة، أو نشر للمنشور أو الصفحة.

إذا كنت تستخدم المكوّن الإضافي Classic Editor Plugin في WordPress، فبدلاً من استخدام كتلة HTML المخصص، غيّر محرر النصوص من الوضع المرئي إلى وضع النص والصق رمز التضمين في المحرر.

إضافة رمز التضمين إلى قالب WordPress

إذا كانت سمة WordPress الخاصة بك تدعم محرر الموقع، فيمكنك إضافة Buy Button مضمّن إلى أي من قوالب موقعك.

الخطوات:

1. في Shopify، أنشئ زر الشراء (Buy Button) وانسخ كود التضمين الخاص به من مربع الحوار كود التضمين (أو انقر على نسخ كود التضمين إلى الحافظة).
2. في لوحة تحكم WordPress الخاصة بك، انتقل إلى المحرر.
3. انتقل إلى القالب الذي ترغب في تعديله.
4. داخل مُحرر المكوّنات، انقر على زر +، وابحث عن Custom HTML، ثم انقر لإدراج مكوّن Custom HTML.
5. الصق رمز التضمين في الحقل النصي الذي توفره كتلة HTML المخصص.
6. اختياري: انقل كتلة HTML المخصص أو عاين كيفية عرض Buy Button الخاص بك:
   • لنقل كتلة HTML المخصص، انقر على زري الأسهم في شريط أدوات الكتلة، أو اسحب الكتلة إلى موقع جديد.
   • لمعاينة Buy Button، انقر على معاينة في شريط أدوات الكتلة.
7. عند الانتهاء، انقر على زر معاينة، أو حفظ للقالب.

إضافة رمز التضمين إلى مدونة Shopify

الخطوات:

إضافة رمز التضمين إلى Squarespace

يمكنك إضافة رمز التضمين إلى منشورات فردية في Squarespace وإلى القوائم في صفحتك الرئيسية. في بعض الحالات، قد ترغب في القيام بالأمرين معًا. على سبيل المثال، يمكنك تضمين سلة في صفحتك الرئيسية لتلقي المشتريات من Buy Buttons التي تقوم بتضمينها في المنشورات الفردية.

الخطوات:

1. من لوحة تحكم Squarespace الخاصة بك، افتح صفحة الويب التي ترغب في إضافة رمز التضمين إليها.
2. ابحث عن العنصر الموجود في الصفحة حيث تريد عرض Buy Button أو السلة المضمنة، وحرّك المؤشر فوق منطقة محتوى الصفحة، ثم انقر على تعديل.
3. انقر فوق نقطة الإدراج التي ترغب في إضافة رمز التضمين فيها.
4. في قسم المزيد ضمن مربع حوار كتل المحتوى، انقر على الرمز.
5. من لوحة تحكم مسؤولي Shopify، انسخ رمز التضمين من مربع حوار رمز التضمين.
6. من لوحة تحكم Squarespace، الصق رمز التضمين في مربع حوار الرمز. تأكد من ضبط الحقل النصي لتلقي HTML.
7. انقر على تطبيق في مربع حوار تعديل الرمز.
8. انقر على حفظ مرة أخرى في محرر الصفحة. نظرًا لأن Squarespace يُعطل JavaScript في لوحة التحكم الخاصة به، يجب عليك معاينة صفحتك بشكل منفصل للتأكد من أن Buy Button أو السلة المضمنة تعمل.

إذا أكملت الخطوات ولم يتم تحميل Buy Button الخاص بك، فقد تحتاج إلى إيقاف تشغيل تحميل Ajax. لمزيد من التفاصيل، راجع تفعيل Ajax أو تعطيله.

إضافة رمز التضمين إلى Wix

بعد إنشاء Buy Button أو مجموعة في لوحة تحكم مسؤولي Shopify، يمكنك إضافته إلى موقع Wix الخاص بك باستخدام محرر مواقع Wix.

إذا كنت ترغب في عرض أكثر من منتج واحد على موقع Wix الخاص بك دون تعديل رمز التضمين، فيمكنك تضمين مجموعة. يمكنك إنشاء مجموعة جديدة في لوحة تحكم مسؤولي Shopify للمنتجات التي ترغب في عرضها على Wix.

الخطوات:

1. من لوحة تحكم مسؤولي Shopify، أنشئ Buy Button لمنتج أو مجموعة، ثم انسخ رمز التضمين الخاص به.

2. من حسابك في Wix، ابحث عن الموقع الذي ترغب في تعديله في قسم مواقعي، ثم انقر على تعديل الموقع.
3. في محرر مواقع Wix، انقر على زر +، ثم انقر على المزيد.
4. انقر على رمز HTML لإضافة أداة رمز HTML إلى الصفحة.
5. انقر على إدخال الرمز.
6. في مربع حوار إعدادات HTML، الصق رمز التضمين لـ Buy Button أو المجموعة الخاصة بك في حقل أضف الرمز الخاص بك هنا، ثم انقر على تحديث.
7. غيّر حجم أداة رمز HTML لتتناسب مع محتوياتها. إذا كنت تقوم بإنشاء تضمين يحتوي على سلة، فتأكد من عرض علامة تبويب السلة في المكان الصحيح.
8. عند الانتهاء، انقر على حفظ.

تضمين منتجات أو مجموعات متعددة

الخطوات:

1. من لوحة تحكم مسؤولي Shopify، أنشئ Buy Button لمنتج أو مجموعة، ثم انسخ رمز التضمين الخاص به.
2. الصق الكود في محرر الأكواد أو أداة إنشاء المواقع الإلكترونية Wix. كرر أول خطوتين حتى تنتهي من إنشاء أزرار الشراء التي تحتاجها.
3. عدّل أكواد التضمين للتأكد من عرضها بمحاذاة صحيحة.
4. من حسابك في Wix، ابحث عن الموقع الذي ترغب في تعديله في قسم مواقعي، ثم انقر على تعديل الموقع.
5. في محرر مواقع Wix، انقر على زر +، ثم انقر على المزيد.
6. انقر على رمز HTML لإضافة أداة رمز HTML إلى الصفحة.
7. انقر على إدخال الرمز.
8. في مربع حوار إعدادات HTML، الصق الكود المُعدّل لأزرار الشراء في حقل أضف الكود هنا، ثم انقر على تحديث.
9. غيّر حجم أداة رمز HTML لتتناسب مع محتوياتها. إذا كنت تقوم بإنشاء تضمين يحتوي على سلة، فتأكد من عرض علامة تبويب السلة في المكان الصحيح.
10. عند الانتهاء، انقر على حفظ.

إضافة علامات script بشكل منفصل

تتطلب بعض المنصات (مثل Unbounce) لصق علامات <script> الخاصة بكود التضمين في ترويسة الصفحة (header)، وباقي كود التضمين في الصفحة التي تريد أن يُعرض فيها زر الشراء.

الخطوات:

1. من كود التضمين الذي يتم إنشاؤه عند إنشاء زر الشراء، انسخ كلاً من عنصر <div> وعنصر <script>. على سبيل المثال:

<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    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({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

2. افتح ترويسة الصفحة للموقع الإلكتروني الذي تريد تضمين زر الشراء فيه.
3. الصق عنصر <script> بالكامل في ترويسة الصفحة.
4. احفظ تغييراتك.
5. من كود التضمين الأصلي في مسؤول Shopify، انسخ عنصر <div> فقط. على سبيل المثال:

<div id='product-component-2dd3c8704e6'></div>

6. افتح الصفحة في موقعك الإلكتروني التي تريد تضمين زر الشراء فيها.
7. الصق مقتطف كود <div> في الصفحة.
8. احفظ تغييراتك.