Advertisement
  1. Code
  2. Shopify

Bekerja dengan Produk-Produk Shopify: Keranjang Belanja Ajax

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Menjadikan toko Shopify lebih intuitif adalah cara yang hebat untuk mengonversi lebih banyak penjualan dan mendapatkan jumlah barang terjual lebih banyak per transaksi. Dikombinasikan dengan menampilkan produk Anda dalam daftar yang sederhana, kita bisa menjadikan pengalaman menambahkan barang ke keranjang belanja semudah satu klik, tanpa harus navigasi ke halaman daftar produk.

Modifikasi ini bisa dikerjakan dengan tampilan grid atau daftar yang hanya butuh sedikit perubahan agar bisa bekerja, ditambah lagi modifikasinya bisa dengan mudah diperluas. Jadi mari kita mulau dan memaksimalkan monetisasi toko Anda.

Daftar Koleksi yang Tuntas

What you will be creating - the collection view with add to cart ajax buttonsWhat you will be creating - the collection view with add to cart ajax buttonsWhat you will be creating - the collection view with add to cart ajax buttons

Berikut adalah contoh yang bisa Anda buat dengan modifikasi ini. Kami punya toko yang menjual koin peringatan, dan untuk kemudahan penggunaan, pengguna bisa memilih jumlah tiap koun dan menambahkannya ke keranjang belanja tanpa meninggalkan halamannya.

Ini bisa dilakukan dengan suatu panggilan AJAX yang ditulis di JavaScript, yang mengirimkan permintaan ke Shopify API. Intinya peramban bisa mengirimkan formulirnya melalui permintaan di latar belakang dan membuat pengguna tetap ada di halaman.

Memodifikasi Tema

Untuk melakukan ini, kita harus memofidikasi tema Shopify, jadi masuklah ke admin dan buka Online Store, lalu bagian Themes (untuk jalan pintas, tekan GWT).

Click on the to Edit HTMLCSSClick on the to Edit HTMLCSSClick on the to Edit HTMLCSS

Sekarang klik tombol ... di tema Anda dan pilih Edit HTML/CSS. Di bagian ini, lihat ke kiri dan klik folder snippets dan tambahkan suatu snippet baru.

Create your snippet ajaxify-cartCreate your snippet ajaxify-cartCreate your snippet ajaxify-cart

Namai snippetnya ajaxify-cart dan klik Create snippet.

Sekarang buka file ini, pilih semua, dan copy paste isinya ke snippet ajaxify-cart.liquid yang baru saja dibuat.

Adding Ajaxify CartAdding Ajaxify CartAdding Ajaxify Cart

Pastikan Anda Save perubahannya sebelum keluar. Jika ANda ingin mengubah teks di ajaxify cart, Anda bisa melihat perubahan stringnya di file ini seperti addToCartBtnLabel. Untuk informasi lebih lanjut tentang konfigurasinya, baca readme terkait ajaxify cart.

Sekarang, di dalam folder layout, klik file theme liquid. Temukan bagian akhir tag </body> di editor dan pastikan Anda menambahkan kode berikut di mana saja sebelumnya.

Ini mencakup juga snippet ajaxify-cart yang baru saja ditambahkan ke semua halaman sehingga kodenya siap jika dipanggil di langkah berikutnya.

Example of how to add the ajaxify-cart tagExample of how to add the ajaxify-cart tagExample of how to add the ajaxify-cart tag

Anda bisa memasukkan ajaxify-cart dan juga snippet lainnya di dalam tag <body> </body> sebagaimana ditunjukkan di atas.

Pastikan Anda sudah menyimpan file theme.liquid sebelum keluar dari jendelanya.

Menambahkan Kuantitas

Sekarang Anda sudah memiliki dasar ajax cart, kita bisa menambahkan beberapa modifikasi lagi untuk memanfaatkan lebih banyak fitur Shopify API.

Mari kita tambahkan isian kuantitas ke formulirnya dengan memodifikasi tema daftar produknya. Jelajahi file-file snippetnya untuk menemukan formulir untuk menambahkan ke keranjang belanja; Anda bisa memodifikasinya seperti berikut:

Sekarang simpan filenya dan lihat ke peramban, Anda akan melihat isian kuantitas di formulir Anda.

Mengetes Aplikasinya

Kunjungi toko online Anda dan buka produk apa saja, jika semua berjalan sesuai rencana, tombol tambahkan ke keranjang belanja dan isian kuantitas sekarang akan menambahkan ke kerajang belanja tanpa memuat ulang halamannya.

Adding a product to the cart without refreshing the pageAdding a product to the cart without refreshing the pageAdding a product to the cart without refreshing the page

Jika tidak bekerja dengan baik, silakan cek langkah-langkah berikutnya dan lihat konsol kesalahan web developer tool peramban, untuk melihat apakah ada kesalahan yang dilaporkan.

Tampilan Barang-Barang Anda di Daftar

Untuk menampilkan koleksi Anda di daftar, kkita akan membutuhkan beberapa CSS untuk melakukan hal tersebut. Modifikasi file css tema Anda dan tambahkan yang berikut ini.

Catatan: Camkan dalam pikiran bahwa beberapa tema mungkin ditampilkan secara berbeda terhadap tema yang kita gunakan, yakni tema Pacific, tetapi untuk mengadaptasikan pengetahuan ini ke tema Anda, ketahui bahwa prinsip dasarnya adalah menambahkan float: left; yang dikombinasikan dengan pengaturan lebar.

Untuk membuatnya responsif bekerja di ponsel dan desktop, Anda harus menggunakan kueri media seperti di bawah ini untuk memperjelas float:

Membuat Add to Cart Hanya Ditampilkan untuk Kriteria Tertentu

Sebagai contoh, anggap saja Anda ingin menampilkan tombol di dalam koleksi, bukan di halaman beranda. Ini bisa dilakukan secara mudah dengan menambahkan persyaratan ke file templat liquid Anda.

Buka templat Anda dan tambahkan persyaratan berikut di tempat Anda ingin tombol keranjang belanjanya tampil. misalnya di dalam layout daftar produk Anda, yang di situ kita tambahkan kuantitasnya. Masukkan persyaratan {% if collection.title %} sebagaimana dalam kode berikut:

Anda bisa menentukan kriteria apa saja yang diinginkan di {% if collection.title %} jika Anda ingin mengecek nilai lainnya, misalnya apakah produknya ada stoknya atau kategori atau penandaan apa yang telah diterapkannya.

Finalisasi Tampilan

Anda bisa mengubah CSS tema Anda untuk memodifikasi tampilan ajax cart dan mengubahsuainya seperti keinginan Anda. Beberapa kelas yang bermanfaat untuk dimodifikasi adalah .cart-count dan #cart-count a:first.

Untuk menetapkan nilai yang ditambahkan ke keranjang belanja, Anda juga bisa memodifikasi tautannya untuk menampilkan keranjang belanja dengan kelas #gocart p a#cart, and .checkout em.

Untuk mengubah jumlah total item, lihat kelas .item-count.

Anda juga bisa mengedit warna berikut di bagian akhir snippet ajaxify-cart.liquid.

Ubah penjajaran, margin, dan paddingnya untuk menyesuaikan dengan tema Anda dan buat tampilan yang sebaik mungkin untuk para pengguna akhir.

Dukungan Responsif Selular

Ingatlah untuk memeriksa resolusi selular untuk melihat bagaimana cara kerja ajax cart. Mungkin Anda perlu menambahkan sejumlah kueri media sehingga bisa tampil cantik di semua tampilan.

Sebagaimana disebutkan lebih awal, Anda bisa menggunakan persyaratan-persyaratan media berikut untuk memeriksa hal ini:

Kesimpulan

Jadi sekarang Anda telah mempunyai komponen keranjang belanja yag diajax-kan di toko Anda, artinya alur kerja pembelian sudah dilancarkan untuk para pengguna akhir. Harapannya ini akan menghasilkan lebih banyak konversi. Dikombinasikan dengan menampilkan produk Anda dalam daftar dengan pengaturan kuantitas, ada peningkatan kemungkinan akan pesanan yang lebih besar. 

Baik untuk situs yang sering menawarkan barang habis pakai dan yang mencoba menawarkan banyak pembelian dalam sekali pembayaran, keranjang belanja ajax bisa bekerja dengan sangat baik.

Melangkah ke depan, Anda mungkin ingin menambahkan lebih banyak elemen ajax ke situs Anda. Jika ya, titik referensi pertama Anda adalah Shopify API—dan membongkar sumber yang disiapkan untuk keranjang belanja (ajaxify-cart.liquid) untuk melihat lebih dekat bagaimana cara membuat panggilannya.

Pemahaman dasar tentang JavaScript dan AJAX diperlukan untuk melakukan ini, tetapi jangan khawatir jika Anda adalah pendatang baru—hanya hal-hal paling dasar saja yang diperlukan.

Semua pemrosesan untuk panggilan AJAX bisa ditemukan di bagian $.ajax dari file, dan lebih banyak informasi tentang bagaimana cara kerjanya bisa ditemukan di situs web jQUery.

Saya harap Anda  menikmati modifikasi toko Anda dan meningkatkan penjualan produk Anda dengan konsep baru ini!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.