Shopify Beli Satu Percuma Satu: Pemilih di Halaman Produk yang Dibina atas Logik Troli Tema Sendiri

Mesej kedua daripada jenama dandanan lelaki yang kami namakan Kestrel tiba beberapa minggu selepas projek seksyen tersuai. Ia hanya satu tangkapan skrin halaman produk sebuah kedai barang kemas, dengan sebaris kad di bawah butang tambah ke troli: Beli 1 percuma 1, pilih barang kedua anda. Di bawahnya ada soalan ringkas: boleh kami dapat ini di halaman produk kami?

Tawaran Shopify beli satu percuma satu mudah diaktifkan dalam admin. Bahagian yang sukar ialah membuat pelanggan benar-benar menggunakannya. Kajian kes ini menunjukkan cara kami membina pemilih itu, mengapa kami tidak menyalin kod kedai rujukan, dan satu tetapan Shopify yang menjadikan produk kedua percuma.

Tentang kajian kes ini: ia gabungan berdasarkan kerja projek Shopify sebenar. Nama jenama, gambar produk dan beberapa butiran telah diubah, dan imej produk ialah ilustrasi. Corak kod, masalah dan penyelesaian adalah tepat seperti yang kami kendalikan.

Projek secara ringkas

Pelanggan	Jenama dandanan lelaki terus kepada pengguna, Belanda (kedai berbahasa Belanda, EUR)
Platform	Shopify Online Store 2.0, tema premium sedia ada dikekalkan
Skop	1 snippet, 1 helaian gaya, 1 skrip, 1 blok halaman produk baharu, tiada aplikasi
Diskaun	Diskaun automatik asli Shopify (Beli X dapat Y)
Penghantaran	Dipasang sendiri oleh peniaga dalam editor kod tema, fail demi fail

Mengapa diskaun BOGO asli tidak mencukupi

Shopify telah menyokong diskaun Beli X dapat Y sejak bertahun-tahun. Sediakan satu dan troli akan menggunakannya sebaik sahaja produk yang betul ada di dalamnya. Masalahnya terletak pada perkataan sebaik sahaja. Pembeli perlu tahu tawaran itu wujud, meninggalkan halaman produk, mencari produk yang layak, menambahnya dan kembali. Kebanyakan tidak berbuat begitu. Sepanduk “1+1 percuma” tanpa cara untuk bertindak kebanyakannya menghasilkan e-mel bertanya mengapa diskaun tidak berfungsi.

Kedai rujukan menyelesaikannya dengan pemilih: produk yang layak dipaparkan tepat di tempat keputusan membeli dibuat, satu ketikan untuk memilih, dan butang utama bertukar kepada Tambah 2 produk ke troli. Itulah pengalaman yang dikehendaki Kestrel.

Membaca rujukan, kemudian mengetepikannya

Peniaga turut menghantar CSS, JavaScript dan HTML kedai rujukan. Ia kerja yang teliti: kira-kira 400 baris dengan helaian bawah, lapisan “lihat semua”, pengesanan warna latar gambar produk dan permintaan tambah ke troli sendiri. Ia juga ditulis untuk tema lain, borang lain dan laci troli lain, dan ia milik orang lain.

Jadi kami menggunakannya sebagai penerangan tingkah laku, bukan sebagai kod. Sebelum menulis apa-apa, kami membaca borang produk dalam tema Kestrel. Itulah sejam yang paling berharga dalam projek ini.

Penemuan: tema sudah tahu cara menambah dua produk

Elemen product-form dalam tema mempunyai ciri untuk kotak semak “sering dibeli bersama”. Semasa dihantar, ia mengumpul setiap input[name="bundles"] yang ditanda dalam elemen yang dipautkan ke borang, lalu menghantarnya ke /cart/add.js bersama produk utama. Ia juga mengendalikan laci troli, mod halaman troli, mesej ralat dan butang tambah ke troli yang melekat.

Ini bermakna pemilih tidak memerlukan permintaan troli sendiri langsung. Setiap kad mengandungi kotak semak tersembunyi bernama bundles, dan elemen pemilih membawa id borang:

<bogo-picker form="{{ product_form_id }}">
  <label class="bogo-card__btn">
    <input type="checkbox" name="bundles" value="{{ variant.id }}" class="sr-only">
    <span>Choose</span>
  </label>
</bogo-picker>

Pilih satu kad dan kotak semaknya ditanda. Tekan butang utama, dan tema menambah kedua-dua produk dalam satu permintaan, membuka laci trolinya sendiri dan mengemas kini bilangan, sama seperti produk lain. JavaScript yang kami tulis hanya kira-kira seratus baris, dan tiada satu pun menyentuh troli.

Butiran yang menjadikannya terasa asli

• Satu produk percuma pada satu masa. Memilih satu kad akan menyahpilih yang lain, jadi pembeli tidak tertambah tiga item percuma secara tidak sengaja.
• Butang yang memberitahu apa yang akan berlaku. Apabila kad dipilih, label bertukar kepada “Tambah 2 produk ke troli”. Tema menetapkan semula label itu setiap kali varian bertukar, jadi MutationObserver kecil memulihkannya.
• Varian pada kad. Produk dengan lebih daripada satu varian mendapat menu lungsur yang padat, dan nilai kotak semak mengikutinya.
• Kad yang sejajar. Kad berkongsi baris grid melalui CSS subgrid, jadi nama, harga dan butang sejajar walaupun satu nama produk menjadi dua baris.
• Mudah alih dahulu. Di telefon, 2.3 kad kelihatan supaya kad seterusnya mengintai dari tepi; di desktop tiga kad dengan butang anak panah.
• Tetapan semula yang kemas. Selepas berjaya ditambah, pemilih mendengar acara cartUpdate tema dan mengosongkan pilihan.

Blok ini ditambah dalam editor tema seperti blok halaman produk lain. Peniaga memilih koleksi produk yang layak, atau medan meta senarai produk untuk tawaran khusus bagi setiap produk. Label seperti “Percuma”, “Pilih” dan teks butang ialah tetapan. Produk semasa dan produk yang habis dijual dikecualikan secara automatik.

Menjadikan produk kedua benar-benar percuma

Pemilih hanya meletakkan dua produk dalam troli. Harga dikendalikan oleh Shopify melalui diskaun automatik:

1. Cipta koleksi produk yang boleh diberi percuma, contohnya “BOGO Percuma”.
2. Dalam Diskaun, cipta diskaun Beli X dapat Y dengan kaedah Automatik.
3. Pelanggan membeli: kuantiti minimum 1 daripada koleksi yang mengandungi semua produk berbayar.
4. Pelanggan mendapat: kuantiti 1 daripada “BOGO Percuma”, pada nilai Percuma.
5. Tandakan Tetapkan bilangan maksimum penggunaan bagi setiap pesanan dan masukkan 1, jika tidak tiga pembelian memberi tiga produk percuma.

Shopify tiada pilihan “semua produk” dalam medan Pelanggan membeli, jadi koleksi diperlukan di situ. Koleksi automatik dengan syarat “harga lebih besar daripada 0” akan sentiasa dikemas kini sendiri. Satu kes khas perlu diketahui: jika produk percuma juga berada dalam koleksi itu, membeli dua item daripada “BOGO Percuma” akan menjadikan satu daripadanya percuma. Bagi kebanyakan kedai itu tidak mengapa. Jika tidak, tag produk BOGO dan kecualikan tag itu dalam syarat koleksi.

Memasang tanpa memuat naik tema

Tema langsung Kestrel mempunyai kerja lain yang belum diterbitkan, jadi memuat naik versi tema baharu bukan pilihan. Kami menyerahkan ciri ini sebagai lima langkah tepat untuk editor kod tema: tiga fail baharu (snippet, helaian gaya dan skrip) dan dua tambahan kecil pada seksyen produk, satu baris render dan satu entri blok dalam skema. Setiap langkah menyatakan baris yang perlu dicari dan apa yang perlu ditampal di atasnya. Oleh kerana setiap perubahan hanya menambah, ia kekal selepas kemas kini tema seterusnya dengan beberapa minit kerja.

Kami juga membuat imej kecil ringkas untuk koleksi “BOGO Percuma”, supaya koleksi itu kelihatan lengkap di mana-mana tema memaparkannya.

Nasihat kami untuk mana-mana kedai yang mempertimbangkan BOGO

• Letakkan pilihan di tempat keputusan dibuat. Tawaran yang perlu disusun sendiri oleh pembeli ialah tawaran yang dilangkau kebanyakan pembeli.
• Baca tema anda sebelum menulis kod. Baris kod terbaik dalam projek ini ialah yang tidak perlu kami tulis, kerana tema sudah boleh menambah bundle ke troli.
• Kekalkan logik harga dalam Shopify. Diskaun automatik asli berfungsi dalam troli, semasa pembayaran dan dalam setiap laporan, dan boleh dijeda tanpa menyentuh tema.
• Hadkan penggunaan bagi setiap pesanan dari hari pertama.

Jika anda mahukan pemilih beli satu percuma satu, pembina bundle atau ciri halaman produk tersuai lain di kedai anda, lihat perkhidmatan pembangunan tema Shopify kami atau ceritakan tentang kedai anda.

Soalan lazim

Adakah Shopify menyokong beli satu percuma satu tanpa aplikasi?

Ya. Diskaun automatik Beli X dapat Y terbina dalam Shopify. Yang tiada ialah cara untuk pembeli memilih produk percuma di halaman produk, dan itulah yang ditambah oleh pemilih ini.

Adakah pemilih berfungsi dengan tema saya?

Idea ini berfungsi dengan mana-mana tema Online Store 2.0. Pelaksanaannya bergantung pada cara borang produk tema anda menambah produk ke troli. Dalam tema ini kami menggunakan semula ciri bundle-nya; dalam tema lain kami menambah kedua-dua item dengan satu permintaan ke Cart API.

Bolehkah produk percuma mempunyai varian?

Ya. Produk dengan beberapa varian menunjukkan menu lungsur kecil pada kad, dan varian yang dipilih ialah yang ditambah ke troli.

Bolehkah pembeli menyalahgunakan tawaran?

Diskaun yang menentukan apa yang percuma, bukan pemilih. Dengan maksimum satu penggunaan bagi setiap pesanan, pembeli tidak akan mendapat lebih daripada satu produk percuma dalam satu pesanan.

Bolehkah saya memaparkan produk percuma berbeza pada produk berbeza?

Ya. Secara lalai blok membaca koleksi, dan medan meta senarai produk boleh menggantikannya bagi setiap produk.