Mesej itu tiba pada suatu pagi Rabu, bersama tangkapan skrin dan sedikit kod lama. Pemilik sebuah kedai dalam talian di Copenhagen yang menjual bagasi aluminium dan barangan perjalanan, yang kami namakan Havn & Co., terlihat sesuatu dalam troli pesaingnya dan mahukan yang sama: sebuah kotak kecil di bawah produk dengan teks Pakej keselamatan: perlindungan daripada kehilangan, kecurian dan kerosakan, serta suis yang boleh dihidupkan oleh pelanggan sebelum membuat bayaran.
Kami mahu betul-betul seperti ini, tulis mesej itu, dan kami mahu menukar teks, imej dan warna sendiri. Tolong, tiada aplikasi baharu. Kajian kes ini menerangkan cara kami membina togol perlindungan penghantaran Shopify tersebut: apa fungsinya, mengapa setiap bahagian wujud, kejutan yang kami temui di kedai sebenar, dan setiap pilihan yang kami tambah dalam editor tema.
Tentang kajian kes ini: ia berdasarkan kerja projek Shopify sebenar untuk pelanggan dari Denmark. Nama kedai telah ditukar dan imej-imejnya ialah ilustrasi. Ciri, tetapan dan ujian diterangkan tepat seperti yang diserahkan.
Ringkasan projek
| Pelanggan | Kedai dalam talian Denmark untuk bagasi dan barangan perjalanan, harga dalam DKK |
| Platform | Shopify, tema Horizon 3.5, aplikasi troli Upcart |
| Ciri | Suis pilihan “Pakej keselamatan” (perlindungan penghantaran) di dalam troli |
| Diserahkan | 1 snippet, 1 skrip, 1 stylesheet, kumpulan baharu Safety package dalam tetapan tema, serta tambahan kecil dalam 4 fail tema |
| Syarat | Tiada aplikasi perlindungan tambahan, tiada pertukaran tema, semua boleh diedit dalam editor tema, teks dalam bahasa Denmark |
Permintaan: apa yang dikehendaki kedai
Berdasarkan tangkapan skrin, contoh kod dan panggilan ringkas, kami merumuskan permintaan itu kepada lima keperluan konkrit:
- Kotak perlindungan dalam troli, terus di bawah produk, dengan ikon, tajuk, penerangan ringkas dan suis hidup/mati.
- Satu sentuhan untuk menambah atau membuangnya, dengan jumlah dikemas kini serta-merta tanpa memuat semula halaman.
- Troli yang kemas: perlindungan tidak boleh muncul sebagai baris produk tambahan yang mengelirukan.
- Kawalan penuh dalam editor tema: teks, imej, saiz, warna dan produk harga, tanpa menyentuh kod.
- Teks bahasa Denmark di kedai: Sikkerhedspakke dan Beskyttelse mod tab, tyveri og skade.
Apa itu togol perlindungan penghantaran dan mengapa kedai menggunakannya
Togol perlindungan penghantaran membolehkan pelanggan memilih, pada langkah terakhir sebelum bayaran, untuk membayar caj kecil sebagai perlindungan jika bungkusan hilang, dicuri atau rosak. Di sebalik suis itu ialah produk Shopify biasa (49 kr dalam ilustrasi kami) yang ditambah atau dibuang daripada troli.
Bagi kedai yang menjual bagasi bernilai beratus-ratus krone, ia memberi tiga manfaat sekali gus:
- Ketenangan pada saat yang tepat. Soalan “bagaimana jika ia hilang?” dijawab betul-betul di sebelah butang bayaran, tempat keraguan timbul.
- Hasil tambahan bagi setiap pesanan. Setiap pelanggan yang memilihnya menambah caj itu pada pesanan, dan kedai menentukan cara menggunakannya untuk menampung tuntutan.
- Kurang pertanyaan kepada khidmat pelanggan. Apabila bungkusan hilang, sudah ada persetujuan jelas tentang apa yang dilindungi.
Satu peraturan membentuk keseluruhan reka bentuk: di EU, pilihan berbayar tambahan mesti dipilih sendiri oleh pelanggan. Arahan Hak Pengguna (2011/83/EU, Perkara 22) tidak membenarkan kotak yang ditanda lebih awal untuk bayaran tambahan. Sebab itu suis ini dimatikan secara lalai, dan mod tambah automatik yang pilihan dilabel dengan jelas dalam tetapan serta sentiasa menghormati pelanggan yang mematikannya.
Kejutan: troli itu bukan milik tema
Versi pertama kami memasukkan kotak itu ke dalam troli tema Horizon. Kodnya berfungsi, tetapi apabila pelanggan melihat kedai sebenar, kotak itu langsung tidak kelihatan. Sebabnya: kedai itu menggunakan Upcart, aplikasi troli yang menggantikan troli tema sepenuhnya dan memaparkan trolinya sendiri, terasing daripada gaya tema.
Daripada meminta pelanggan menampal kod ke dalam aplikasi, kami memeriksa kedai sebenar, mengesahkan fungsi Upcart yang tersedia dan menukar pendekatan: tema masih menyimpan semua tetapan, dan skrip kecil meletakkan kotak Pakej Keselamatan di dalam troli Upcart, mengekalkannya apabila Upcart dipapar semula, dan meminta Upcart menyegar semula selepas setiap perubahan. Versi untuk troli tema dikekalkan sebagai sandaran jika kedai membuang Upcart suatu hari nanti.
Ciri-ciri, satu demi satu
1. Satu suis, jumlah serta-merta
Apa: suis menambah atau membuang produk perlindungan melalui API troli Shopify, kemudian troli dan kiraan item dikemas kini. Mengapa: memuat semula halaman pada saat ini mengganggu aliran dan merugikan jualan. Pelanggan melihat jumlah baharu dalam kira-kira satu saat.
2. Baris perlindungan yang disembunyikan
Apa: produk perlindungan disembunyikan daripada senarai item, dalam Upcart dan troli tema. Mengapa: “baris produk” kedua dengan butang kuantitinya sendiri mengelirukan pelanggan. Kotak itu sudah menunjukkan statusnya, dan harganya tetap termasuk dalam jumlah dan pesanan.
3. Peraturan troli pintar
Apa: selepas setiap perubahan troli, tiga peraturan berjalan secara automatik. Mengapa: troli tidak boleh berada dalam keadaan pelik, contohnya perlindungan dibeli secara bersendirian.
- Tidak dijual bersendirian: jika pelanggan membuang produk sebenar yang terakhir, perlindungan turut dibuang.
- Sentiasa kuantiti 1: pendua atau kuantiti melebihi satu akan dibetulkan.
- Menghormati “tidak”: apabila tambah automatik dihidupkan, pelanggan yang mematikan perlindungan tidak akan ditanya lagi sepanjang lawatan itu.
4. Berfungsi dengan Upcart dan tema
Apa: ciri yang sama berjalan dalam troli Upcart, troli tema Horizon dan halaman troli penuh. Mengapa: peniaga menukar aplikasi. Kotak perlindungan harus kekal tanpa perlu dibina semula.
5. Kod ringan milik sendiri
Apa: satu skrip kecil dan satu stylesheet, dimuatkan oleh tema. Mengapa: tiada yuran bulanan untuk aplikasi perlindungan lain, tiada skrip pihak ketiga tambahan pada setiap halaman, dan kodnya berada dalam tema milik peniaga sendiri.
Semua pilihan yang kami tambah dalam editor tema
Semua tetapan berada dalam satu kumpulan baharu: Kedai Dalam Talian → Tema → Sesuaikan → Tetapan tema → Safety package. Peniaga boleh menukar semua perkara di bawah tanpa pembangun.
| Kumpulan | Tetapan | Fungsi |
|---|---|---|
| Umum | Enable safety package | Menghidupkan atau mematikan keseluruhan ciri |
| Protection product | Produk (dan harga) yang ditambah ke dalam troli | |
| Add automatically to cart | Tambah automatik pilihan, dimatikan secara lalai; mengingati apabila pelanggan menolak | |
| Hide protection product in the item list | Memastikan troli kemas | |
| Also show on cart page | Memaparkan kotak juga di halaman troli | |
| Kandungan | Imej, lebar imej | Muat naik imej sendiri atau guna ikon kotak dan perisai terbina dalam |
| Warna perisai ikon | Warna perisai pada ikon terbina dalam | |
| Tajuk, penerangan | Sebarang teks, dalam sebarang bahasa | |
| Papar harga di sebelah tajuk | Menunjukkan harga perlindungan | |
| Tipografi | Saiz tajuk, jarak huruf, huruf besar, saiz penerangan | Sepadan dengan tipografi kedai |
| Gaya kotak | Warna teks dan latar, garis pemisah, lebar dan warna sempadan, jejari sudut, padding, margin sisi dalam Upcart | Sepadan dengan reka bentuk troli |
| Suis | Warna hidup, mati dan tombol | Suis dalam warna jenama |
Cara ia berfungsi di sebalik tabir
Bagi pembaca yang membina kedai Shopify sendiri, versi ringkasnya: tema mencetak tetapan sebagai blok JSON kecil dan templat HTML. Skrip membacanya, menunggu Upcart dimuatkan, kemudian memasang kotak di bawah senarai produk Upcart. MutationObserver meletakkan semula kotak setiap kali Upcart dipapar semula. Suis memanggil endpoint troli standard dan kemudian menyegar semula troli:
// hidupkan
await fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: protectionVariantId, quantity: 1 }] }),
});
// biar Upcart memapar semula troli dengan jumlah baharu
window.upcartRefreshCart?.();Baris perlindungan disembunyikan dengan memadankan ID variannya, yang Upcart masukkan dalam ID setiap baris. Permintaan troli berjalan dalam baris gilir, jadi menekan suis berulang kali dengan pantas tidak akan menimbulkan konflik.
Ujian di kedai sebenar
Sebelum penyerahan, kami menguji tingkah lakunya di kedai sebenar dalam sesi pelayar terasing, menggunakan produk pengganti supaya tiada pesanan sebenar dibuat:
| Ujian | Keputusan |
|---|---|
| Tambah produk dan buka troli | Kotak muncul di bawah item, dalam keadaan mati |
| Hidupkan | Perlindungan ditambah, baris disembunyikan, jumlah dikemas kini |
| Matikan | Perlindungan dibuang, jumlah kembali kepada harga produk |
| Hidupkan, kemudian padam produk sebenar terakhir | Perlindungan dibuang secara automatik, troli kosong |
Apa yang pelanggan dapat
- Kotak Pakej Keselamatan seperti rujukan yang mereka hantar, dalam bahasa Denmark, di dalam troli yang benar-benar dilihat oleh pelanggan mereka.
- Kumpulan tetapan yang boleh diedit dalam beberapa minit: teks, imej, warna, saiz dan produk harga.
- Tiada langganan aplikasi bulanan baharu untuk ciri perlindungan.
- Peraturan yang memastikan setiap troli sah, dan reka bentuk pilihan aktif yang selaras dengan peraturan pengguna EU.
- Panduan mudah untuk mencipta produk perlindungan dan menghidupkan ciri ini.
Ciri tersuai atau aplikasi perlindungan?
| Aplikasi perlindungan | Togol tersuai | |
|---|---|---|
| Kos bulanan | Biasanya langganan atau peratusan setiap caj | Pembinaan sekali, kemudian percuma untuk dijalankan |
| Reka bentuk | Widget aplikasi, gaya terhad | Reka bentuk anda sendiri, ditetapkan dalam editor tema |
| Troli | Mungkin tidak menyokong semua aplikasi troli | Dibina untuk troli anda (di sini Upcart) dan tema |
| Pengurusan tuntutan | Selalunya oleh penyedia aplikasi | Diuruskan oleh kedai sendiri |
| Sesuai untuk | Kedai yang mahu tuntutan diuruskan pihak luar | Kedai yang mahu kawalan dan pengalaman berjenama |
Tiada pilihan yang sentiasa betul. Jika kedai mahu pihak ketiga menguruskan tuntutan, aplikasi masuk akal. Jika kedai mahu mengawal caj, teks dan rupa sendiri, togol tersuai lebih ringan dan lebih murah dalam jangka panjang.
Apa lagi yang boleh ada dalam troli anda?
Corak yang sama (tetapan dalam editor tema, skrip kecil, serta produk atau atribut troli di belakangnya) sesuai untuk banyak tambahan lain yang menaikkan nilai pesanan atau mengurangkan soalan:
- Pembungkusan hadiah sebagai tambahan berbayar.
- Bar kemajuan penghantaran percuma yang menggalakkan pelanggan menambah satu item lagi.
- Pemilih tarikh penghantaran yang disimpan pada pesanan.
- Waranti lanjutan untuk setiap produk.
- Derma bundar untuk tujuan amal.
- Ukiran dan nota pesanan dengan pengesahan.
Soalan lazim
Adakah ia berfungsi dengan Upcart?
Ya. Kotak diletakkan di dalam troli Upcart dan kekal selari apabila Upcart dipapar semula. Ia juga berfungsi dalam troli tema dan di halaman troli.
Adakah sah untuk menambah perlindungan secara automatik di EU?
Tambahan berbayar mesti dipilih oleh pelanggan, jadi suis dimatikan secara lalai. Tambah automatik adalah pilihan; kedai yang menghidupkannya patut mendapatkan nasihat undang-undang sendiri.
Bolehkah harga menjadi peratusan daripada troli?
Secara lalai ia harga tetap yang ditetapkan pada produk perlindungan. Harga berperingkat mengikut nilai troli boleh dibuat dengan beberapa varian dan sedikit logik tambahan.
Adakah ia memperlahankan kedai?
Tidak. Ia hanya satu skrip kecil dan satu stylesheet, dan permintaan troli hanya berjalan apabila pelanggan menggunakan suis atau troli berubah.
Bolehkah kami menukar teks kemudian?
Ya. Tajuk, penerangan, imej dan warna semuanya tetapan tema, jadi boleh ditukar dalam beberapa minit, dalam sebarang bahasa.
Perkara utama
- Tawarkan perlindungan di tempat keputusan dibuat: di dalam troli, di sebelah jumlah.
- Jadikannya pilihan aktif dengan harga yang jelas, dan hormati pelanggan yang berkata tidak.
- Sembunyikan baris produk teknikal, kekalkan jumlah yang jujur.
- Semak troli mana yang benar-benar digunakan oleh kedai sebelum membina.
- Letakkan semua teks, warna dan saiz dalam editor tema supaya peniaga mengawalnya sendiri.
Mahukan ciri seperti ini untuk kedai anda? Kami membina ciri troli tersuai, integrasi Upcart dan tema, serta pembangunan Shopify lengkap untuk kedai di seluruh Eropah. Lihat perkhidmatan kami, atau hubungi kami tentang troli anda.