shopify wishlist

Daftar Keinginan Shopify

Satu set file yang digunakan untuk menerapkan daftar keinginan pelanggan sederhana di toko Shopify.

Versi: 2.3.0 - Kompatibel dengan Toko Online 2.0

Versi Sebelumnya:

• v2.1.0 (Toko Online 1.0)
• v2.0.0
• v1.0.0

Instalasi

Untuk mulai menggunakan Daftar Keinginan Shopify , Anda harus menyalin beberapa file di repo ini ke dalam kode tema Shopify Anda.

Catatan : Penyiapan ini mengasumsikan Anda memiliki cuplikan untuk menampilkan kartu produk.

File yang akan disalin:

Berkas Repo	Lokasi Tema Shopify
button-wishlist.liquid	snippets/
icon-heart.liquid	snippets/
wishlist-template.liquid	sections/
product-card-template.liquid	sections/
page.wishlist.json	templates/
product.card.json	templates/
Wishlist.js	assets/

1. Tempatkan cuplikan button-wishlist.liquid di dalam cuplikan kartu produk yang ada, atau di template product.liquid
   • {%- render 'button-wishlist', product: product -%}
   • Ini akan memungkinkan pelanggan untuk menambah/menghapus item ke/dari daftar keinginan mereka
2. Ganti cuplikan di bagian product-card-template.liquid dengan cuplikan kartu produk Anda yang sudah ada
   • Cuplikan yang sama dari langkah 1
   • Cuplikan kartu produk Anda mungkin menggunakan nama variabel produk yang berbeda, periksa kembali?
3. Tambahkan nama kelas elemen kartu produk Anda ke objek selectors di Wishlist.js
   • Contoh: Jika nama kelas kartu produk Anda adalah .product-item , variabel selectors akan terlihat seperti ini:

      const selectors = {
       button: '[button-wishlist]',
       grid: '[grid-wishlist]',
       productCard: '.product-item', // your classname here
     };
     

4. Buat halaman baru di admin Shopify:
   • Admin > Toko Online > Halaman > Tambah Halaman
   • Atur template halaman baru ke page.wishlist
   • Halaman ini akan menampilkan item wishlist yang disimpan pelanggan
5. Tempatkan script di theme.liquid sebelum tag </head> penutup
   • <script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>

Itu saja! Saat melihat toko Shopify Anda, Anda akan melihat tombol daftar keinginan di dalam kartu produk Anda (kemungkinan di halaman koleksi) atau di template produk. Klik pada tombol daftar keinginan akan menambah/menghapus item dari daftar keinginan pelanggan dan memicu gaya aktif pada tombol tersebut. Setelah menambahkan item daftar keinginan, Anda dapat melihat daftar keinginan Anda dengan menavigasi ke halaman yang dibuat pada langkah 3.

Demo Toko Shopify

Catatan

• Daftar keinginan ini menggunakan Javascript dan Penyimpanan lokal untuk menyimpan daftar keinginan pelanggan di browser mereka. Penyimpanan lokal tidak akan bertahan jika pengguna mengosongkan penyimpanan browser atau menjelajah dalam mode penyamaran.
• Saat pelanggan menelusuri produk dan menambahkannya ke daftar keinginan mereka, skrip akan secara otomatis mengatur tombol daftar keinginan ke status aktif jika produk terkait sudah termasuk dalam daftar keinginan.
• File-file ini hadir tanpa gaya atau struktur sehingga Anda dapat menyesuaikannya sesuai kebutuhan. Ini dimaksudkan untuk memberi Anda fungsionalitas dasar daftar keinginan tanpa embel-embel.
• Jika Anda mengerjakan tema yang belum dipublikasikan, Anda juga perlu membuat template baru pada tema yang dipublikasikan. Admin Shopify hanya akan mengizinkan Anda untuk menetapkan halaman ke template jika template tersebut ada pada tema yang diterbitkan.
• Jika Anda mengupgrade ke versi Toko Online 2.0, Anda akan diminta untuk menghapus wishlist .liquid dan template kartu produk yang lama.