Tambah kod Butang Beli pada HTML

Selepas anda mencipta Butang Beli dalam pentadbir Shopify anda, anda bersedia untuk menambahkannya pada laman web atau blog anda sendiri.

Proses menambah kod benam pada sumber HTML laman web anda adalah sedikit berbeza bergantung pada cara dan tempat anda mahu Butang Beli dan troli anda dipaparkan, platform penerbitan anda, serta kadangkala pada tema yang anda gunakan pada platform tersebut.

Pada halaman ini

Tambah kod benam pada WordPress

Anda boleh menambah kod benam pada siaran, halaman atau templat di laman web WordPress anda.

Tambah kod benam pada siaran atau halaman WordPress

Dalam Shopify, cipta Butang Beli dan salin kod benamnya daripada dialog Kod Benam (atau klik Salin kod benam ke papan keratan).
Daripada papan pemuka WordPress anda, pergi ke siaran atau halaman anda.
Cipta siaran atau halaman baharu, ataupun edit yang sedia ada.
Di dalam editor blok, klik butang +, cari HTML Tersuai dan kemudian klik untuk memasukkan blok HTML Tersuai.
Tampal kod benam ke dalam medan teks yang disediakan oleh blok HTML Tersuai.
Pilihan: Alihkan blok HTML Tersuai atau pratonton cara Butang Beli anda akan dipaparkan:
- Untuk mengalihkan blok HTML Tersuai, klik butang anak panah dalam bar alat blok tersebut atau seret blok ke lokasi baharu.
- Untuk mempratonton Butang Beli, klik Pratonton pada bar alat blok.
Apabila anda selesai, klik butang Simpan Draf, Pratonton atau Terbitkan untuk siaran atau halaman anda.

Jika anda menggunakan Pemalam Editor Klasik WordPress, maka selain menggunakan blok HTML Tersuai, tukarkan editor teks daripada mod Visual kepada Teks dan tampalkan kod benam pada editor.

Tambah kod benam pada templat WordPress

Jika tema WordPress anda menyokong penyunting laman, maka anda boleh menambahkan Butang Beli Terbenam pada sebarang templat tapak anda.

Langkah:

Dalam Shopify, cipta Butang Beli dan salin kod benamnya daripada dialog Kod Benam (atau klik Salin kod benam ke papan keratan).
Dalam papan pemuka WordPress anda, pergi ke Penyunting.
Navigasi ke templat yang mahu anda sunting.
Di dalam editor blok, klik butang +, cari HTML Tersuai dan kemudian klik untuk memasukkan blok HTML Tersuai.
Tampal kod benam ke dalam medan teks yang disediakan oleh blok HTML Tersuai.
Pilihan: Alihkan blok HTML Tersuai atau pratonton cara Butang Beli anda akan dipaparkan:
- Untuk mengalihkan blok HTML Tersuai, klik butang anak panah dalam bar alat blok tersebut atau seret blok ke lokasi baharu.
- Untuk mempratonton Butang Beli, klik Pratonton pada bar alat blok.
Apabila anda selesai, klik butang Pratonton atau Simpan untuk templat tersebut.

Menambahkan kod benam pada blog Shopify anda

Nota:

Langkah:

Desktop

Daripada pentadbir Shopify anda, pergi ke Kandungan > Siaran blog.
Dari halaman Siaran Blog, klik pada tajuk siaran blog yang mahu anda sunting, atau klik Tambah siaran blog untuk mencipta yang baharu.
Dalam bahagian Tulis siaran blog anda, klik Tunjukkan HTML dalam editor teks beraneka.
Tampalkan kod benam anda ke dalam medan teks utama.
Klik Simpan.

Mudah alih

Daripada aplikasi Shopify, ketik ikon .
Pada menu Kandungan, ketik ikon , dan kemudian ketik Siaran blog.
Ketik siaran blog yang mahu anda sunting.
Dalam bahagian Kandungan, ketik … dan kemudian ketik ikon .
Tampalkan kod benam anda ke dalam medan teks.
Ketik Simpan atau ✓.

Menambahkan kod benam pada Squarespace

Anda boleh menambah kod benam pada siaran individu dalam Squarespace dan pada menu di laman utama anda. Dalam sesetengah kes, anda mungkin mahu melakukan kedua-duanya. Contohnya, anda boleh membenamkan troli pada laman utama anda untuk menerima pembelian daripada Butang Beli yang anda benamkan pada siaran individu.

Langkah:

Daripada papan pemuka Squarespace anda, buka laman web yang ingin anda tambahkan kod benam.
Cari elemen pada halaman tempat anda mahu paparkan Butang Beli atau troli terbenam, gerakkan kursor anda ke atas kawasan Kandungan Halaman, dan kemudian klik SUNTING.
Klik pada titik sisipan yang ingin anda tambahkan kod benam.
Dalam bahagian Lagi bagi dialog Blok Kandungan, klik Kod.
Daripada pentadbir Shopify anda, salin kod benam daripada dialog Kod Benam.
Daripada papan pemuka Squarespace anda, tampalkan kod benam ke dalam dialog KOD. Pastikan medan teks ditetapkan untuk menerima HTML.
Klik GUNAKAN pada dialog SUNTING KOD.
Klik SIMPAN sekali lagi pada penyunting halaman. Oleh sebab Squarespace menyahdayakan JavaScript dalam papan pemukanya, anda perlu pratonton halaman anda secara berasingan untuk mengesahkan Butang Beli atau troli terbenam berfungsi.

Jika anda melengkapkan langkah tersebut dan Butang Beli anda tidak dimuatkan, maka anda mungkin perlu mematikan pemuatan Ajax. Untuk butiran lanjut, rujuk Dayakan atau nyahdayakan Ajax.

Menambahkan kod benam pada Wix

Selepas anda mencipta Butang Beli atau koleksi dalam pentadbir Shopify anda, anda boleh menambahkannya ke laman web Wix anda menggunakan Penyunting Laman Web Wix.

Jika anda mahu memaparkan lebih daripada satu produk di laman web Wix anda tanpa menyunting kod benam, maka anda boleh membenamkan suatu koleksi. Anda boleh mencipta koleksi baharu dalam pentadbir Shopify anda untuk produk yang ingin anda paparkan di Wix.

Langkah:

Daripada pentadbir Shopify anda, cipta Butang Beli untuk sesuatu produk atau koleksi, dan kemudian salin kod benamnya.

Daripada akaun Wix anda, cari tapak yang mahu anda sunting dalam bahagian Tapak Saya, dan kemudian klik Sunting Tapak.
Dalam Penyunting Laman Web Wix, klik butang +, dan kemudian klik Lagi.
Klik Kod HTML untuk menambahkan widget kod HTML pada halaman.
Klik Masukkan Kod.
Pada dialog Tetapan HTML, tampalkan kod benam untuk Butang Beli atau koleksi anda di medan Tambahkan kod anda di sini dan kemudian klik Kemas kini.
Ubah saiz widget kod HTML untuk memuatkan kandungannya. Jika anda sedang mencipta benaman dengan troli, pastikan tab troli dipaparkan di tempat yang betul.
Apabila anda selesai, klik Simpan.

Membenamkan berbilang produk atau koleksi

Langkah:

Daripada pentadbir Shopify anda, cipta Butang Beli untuk sesuatu produk atau koleksi, dan kemudian salin kod benamnya.
Tampalkan kod tersebut pada penyunting kod atau pembina laman web Wix. Ulang dua langkah yang pertama sehingga anda telah mencipta Butang Beli yang anda perlukan.
Sunting kod benam untuk memastikan kod tersebut dipaparkan dalam penjajaran yang betul.
Daripada akaun Wix anda, cari tapak yang mahu anda sunting dalam bahagian Tapak Saya, dan kemudian klik Sunting Tapak.
Dalam Penyunting Laman Web Wix, klik butang +, dan kemudian klik Lagi.
Klik Kod HTML untuk menambahkan widget kod HTML pada halaman.
Klik Masukkan Kod.
Pada dialog Tetapan HTML, tampal kod yang diedit untuk Butang Beli anda dalam medan Tambahkan kod anda di sini dan kemudian klik Kemas kini.
Ubah saiz widget kod HTML untuk memuatkan kandungannya. Jika anda sedang mencipta benaman dengan troli, pastikan tab troli dipaparkan di tempat yang betul.
Apabila anda selesai, klik Simpan.

Tambahkan tag skrip secara berasingan

Sesetengah platform (seperti Unbounce) memerlukan anda menampal tag <script> kod benam dalam pengepala halaman dan bahagian baki kod benam tersebut pada halaman tempat yang anda mahu Butang Beli dipaparkan.

Langkah:

Daripada kod benam yang dijanakan apabila anda mencipta Butang Beli, salin kedua-dua elemen <div> dan elemen <script>. Sebagai contoh:

<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>

Buka pengepala halaman untuk laman web tempat yang anda mahu membenamkan Butang Beli.
Tampal keseluruhan elemen <script> dalam pengepala halaman.
Simpan perubahan anda.
Daripada kod benam asal dalam pentadbir Shopify anda, salin elemen <div> sahaja. Sebagai contoh:

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

Buka halaman pada laman web anda tempat yang anda mahu membenamkan Butang Beli.
Tampal cebisan kod <div> ke dalam halaman tersebut.
Simpan perubahan anda.