Bantuan
Log masuk

Menyesuaikan atau mengalih keluar Butang Beli, koleksi terbenam atau troli terbenam

Anda boleh mengubah penampilan atau kelakuan Butang Beli, koleksi terbenam atau troli terbenam dengan mengedit kod benamnya dalam HTML sumber laman web anda. Anda juga boleh memadamkan benaman dengan mengalih keluar kod daripada laman web anda.

Butang Beli memaparkan produk dengan butang pembelian. Koleksi terbenam memaparkan berbilang produk. Troli terbenam memaparkan troli kendiri yang boleh digunakan oleh pelanggan merentasi pelbagai halaman.

Kod benam ialah cebisan kod yang anda salin daripada pentadbir Shopify anda dan tampalkan pada HTML laman web anda apabila anda mencipta Butang Beli atau troli. Kod benam ditulis dalam JavaScript, bahasa pemprograman yang digunakan untuk menambahkan ciri interaktif pada laman web.

Pada halaman ini

Memahami kod benam Butang Beli

Setiap Butang Beli dibina daripada bahagian berasingan yang dipanggil komponen. Komponen ialah bahagian yang dinamakan bagi kod benam yang mengawal satu bahagian pengalaman Butang Beli. Contohnya, apabila anda menambahkan produk dengan troli pada laman web anda, kod benam menghasilkan komponen berikut:

  • komponen product, yang memaparkan maklumat produk dan butang pembelian
  • komponen cart, yang memaparkan kandungan troli
  • komponen toggle troli, yang memaparkan ikon yang membuka troli

Jika komponen produk anda membuka tetingkap pop timbul butiran produk, kod benam akan menghasilkan dua komponen tambahan: komponen modal untuk pop timbul itu sendiri dan komponen modalProduct untuk maklumat produk di dalam pop timbul tersebut.

Dalam cebisan kod berikut, terdapat komponen yang berasingan untuk product dan 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'
          }
        }
      }
    }
  });
});

Setiap komponen dikonfigurasikan melalui objek konfigurasi dalam kod benam. Objek ialah kumpulan tetapan berstruktur yang diformatkan sebagai senarai pasangan kunci-nilai:

  • Kunci ialah nama tetapan, seperti buttonDestination.
  • Nilai ialah perkara yang ditetapkan untuk tetapan itu, seperti 'cart'.

Objek adalah serupa dengan hamparan: setiap kunci sepadan dengan nama lajur dan setiap nilai sepadan dengan kandungan sel. Untuk mengubah penampilan atau kelakuan Butang Beli anda, edit kunci dan nilai di dalam objek konfigurasi tersebut.

Setiap komponen mempunyai banyak kunci yang boleh diedit. Untuk mendapatkan senarai penuh kunci yang boleh diedit, lihat dokumentasi pembangun. Untuk mengkonfigurasi kunci yang belum wujud dalam kod benam anda, tambahkan kunci pada objek yang bersesuaian. Untuk mendapatkan contoh, rujuk Ubah susun atur benaman produk.

Sesuaikan gaya komponen

Setiap komponen mempunyai objek konfigurasi styles bersarang yang mengawal penampilan komponen. Objek bersarang ialah objek yang diletakkan di dalam objek lain.

Objek styles menggunakan CSS, bahasa yang digunakan untuk menerangkan cara elemen laman web digayakan secara visual. Setiap kunci peringkat atas dalam objek styles mewakili elemen dalam komponen, seperti tajuk atau butang. Dalam kunci itu, setiap kunci bersarang ialah sifat CSS (contohnya, background-color atau border) dan nilainya ialah nilai CSS.

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

Apa-apa sifat CSS yang sah boleh ditambahkan pada styles. Pastikan nama sifat dengan sempang dibalut dalam tanda petikan.

Untuk mendapatkan maklumat lanjut tentang penyesuaian CSS, lihat dokumentasi pembangun.

Komponen koleksi terbenam

Koleksi terbenam menggunakan objek konfigurasi yang sama seperti Butang Beli. Untuk mengedit susun atur atau sifat lain bagi produk dalam koleksi, cari objek konfigurasi product dan edit perkara tersebut dengan cara yang sama anda mengedit benaman produk. Untuk mengedit sifat koleksi itu sendiri, seperti teks butang Halaman seterusnya, edit objek konfigurasi productSet.

Sesetengah kunci, seperti teks komponen, dikonfigurasikan melalui objek bersarang. Contohnya, teks untuk butang Halaman seterusnya berada di dalam objek text komponen productSet:

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

Modal butiran produk ialah tetingkap pop timbul yang memaparkan maklumat produk. Untuk menghalakan pelanggan anda kepada modal butiran produk dan bukannya troli, edit kod benam Butang Beli anda dalam HTML sumber laman web anda.

Langkah-langkah:

  1. Buka HTML halaman yang mengandungi benam produk yang ingin anda tukar.
  2. Cari objek konfigurasi product.
  3. Cari kunci buttonDestination dalam objek:
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Ubah nilai kunci tersebut kepada 'modal', termasuk tanda petikan:
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Simpan perubahan anda.

Ubah susun atur benaman produk

Susun atur benaman produk mendatar meletakkan gambar di sebelah butiran produk dan bukannya di atas butiran tersebut. Untuk menukar kepada susun atur ini, edit kod benam Butang Beli anda dalam HTML sumber laman web anda.

Langkah-langkah:

  1. Buka HTML halaman yang mengandungi benam produk yang ingin anda tukar.
  2. Cari objek konfigurasi product.
  3. Tambahkan kunci layout dan kemudian tetapkan nilai kepada 'horizontal'. Pastikan nilai menyertakan tanda petikan dan baris sebelumnya berakhir dengan koma:
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Simpan perubahan anda.

Ubah penampilan dan kelakuan benaman troli

Untuk mengubah penampilan atau kelakuan troli, edit objek konfigurasi cart dalam kod benam anda.

Langkah-langkah:

  1. Buka HTML halaman yang mengandungi troli yang ingin anda edit.
  2. Cari objek konfigurasi cart dalam kod benam anda:
options: {
      cart: {
        startOpen: false
      }
}
  1. Edit kunci sedia ada atau tambahkan kunci baharu, untuk mengubah penampilan atau kelakuan troli. Untuk mendapatkan senarai penuh kunci yang boleh dikonfigurasikan, lihat dokumentasi pembangun.
  2. Simpan perubahan anda.

Padamkan Butang Beli, koleksi terbenam atau troli terbenam

Untuk mengalih keluar Butang Beli, koleksi terbenam atau troli terbenam daripada laman web anda, padamkan kod benamnya daripada HTML sumber.

Langkah-langkah:

  1. Buka HTML sumber bagi laman web yang mengandungi Butang Beli, koleksi terbenam atau troli terbenam.
  2. Padamkan keseluruhan kod benam daripada HTML sumber, bermula dengan <script data-shopify-buy-ui> dan berakhir dengan </script>. Berikut ialah contoh kod benam Butang Beli:
<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>
  1. Simpan perubahan anda.