Harvest Sun menggabungkan profil perusahaan, blog, dan katalog produk lengkap dalam satu situs. Katalognya bisa dijelajahi layaknya toko online, lengkap dengan pencarian, filter kategori, pengurutan, dan bagian produk terkait, hanya saja tanpa checkout, karena pemesanan dilakukan langsung lewat WhatsApp. Situs ini dibuat cukup fleksibel untuk hampir semua jenis bisnis retail, mulai dari sembako dan pakaian sampai makanan, elektronik, furnitur, dan perlengkapan rumah, jadi bisnis apa pun bisa langsung memakai dasar yang sama tanpa membangun dari nol. Produk di demo ini memang masih berupa data contoh, tetapi seluruh fitur dan alurnya sudah lengkap. Cukup ganti dengan produk asli, dan bisnisnya bisa langsung berjalan.
Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.
Desktop
Mobile
Pekerjaan seperti ini biasanya dibagi ke pengembang, desainer UI/UX, desainer grafis, dan pemasar. Di proyek ini, keempat keahlian itu dikuasai satu orang, jadi setiap keputusan datang dari orang yang memahami keseluruhan proyek, bukan hanya bagiannya sendiri.
16
standar yang terpenuhi, dari kode hingga pemasaran.
Dampak bisnis di sini diukur dari 5 area: Kehadiran, Kualitas, Kepercayaan, Konversi dan Pertumbuhan. Semuanya mencakup bagaimana bisnisnya ditemukan, dipersepsikan, dan direspons.
Informasi yang tetap mudah dicari, tidak terkubur
Sebelum
Kebanyakan bisnis saat ini hanya mengandalkan media sosial seperti Instagram, Facebook, dan TikTok untuk membagikan informasi. Padahal feed memang dirancang untuk menggeser postingan lama ke bawah setiap ada postingan baru, sehingga informasi tertentu makin sulit dicari.
Sesudah
Situs web menyusun informasi berdasarkan halaman dan section, bukan tanggal posting, sehingga detail tertentu selalu ada di tempat yang dicari pelanggan dan tidak tenggelam oleh postingan baru.
Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.
Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.
Masalah yang muncul selama membangun proyek ini, dan hasil yang didapat dari menyelesaikannya.
Filter yang Diam-Diam Tidak Menampilkan Hasil
Halaman archive kategori WooCommerce tidak memasukkan kategorinya sendiri ke kondisi filter query pada titik yang bisa di-hook oleh kode custom. Akibatnya, filter kategori custom justru menambah kondisi kedua yang tidak berhubungan, bukan menggantikannya. Memilih kategori apa pun dari sidebar saat sedang berada di halaman kategori menghasilkan grid kosong tanpa error apa pun. Masalah ini diperbaiki dengan menghapus kondisi kategori archive secara eksplisit sebelum filter custom dijalankan.
Refactor yang Diam-Diam Menghapus Jarak Antar Section
Helper PHP bersama yang memberi jarak vertikal konsisten di tiap section dipindahkan ke folder baru saat merapikan kode. Masalahnya, build tool yang memindai class Tailwind tidak diberi tahu untuk mencari di folder itu, karena build tool membaca file sebagai teks, bukan menjalankan PHP. Class-nya hilang dari CSS hasil build tanpa error, dan jarak antar section di semua halaman diam-diam menyusut sampai akhirnya ketahuan.
Satu Plugin Bisa Membuat Seluruh Situs Error
Keenam halaman membaca kontennya lewat fungsi field dari satu plugin, yang dipanggil langsung di puluhan tempat tanpa fallback. Kalau plugin itu dinonaktifkan atau gagal dimuat, semua halaman langsung mengalami fatal error, bukan sekadar kehilangan sebagian fungsi. Celah ini ditutup dengan membungkus setiap pemanggilan lewat compatibility layer, lalu memastikan situs tetap berjalan saat plugin itu benar-benar dinonaktifkan.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Filter selalu menampilkan produk yang tepat
Tanpa titik kegagalan tunggal di 6 halaman
Gambar di bawah 200KB
Kompresi otomatis di setiap unggahan baru
Satu acuan jarak section untuk seluruh situs
Sebelum
Memilih kategori kedua dari filter sidebar saat sedang melihat archive kategori menghasilkan nol produk, tanpa error yang menjelaskan penyebabnya.
Sesudah
Kondisi kategori dari archive dihapus secara eksplisit sebelum filter custom dijalankan, sehingga hasil filter selalu sesuai dengan pilihan pembeli.
Sebelum
Keenam halaman membaca konten lewat fungsi field dari satu plugin tanpa fallback, sehingga plugin yang dinonaktifkan atau gagal dimuat membuat seluruh situs mengalami fatal error sekaligus.
Sesudah
Compatibility shim membungkus setiap pemanggilan dan tetap mengembalikan hasil yang aman saat plugin itu tidak tersedia. Ini sudah diuji dengan menonaktifkan plugin tersebut secara langsung, dan situsnya tetap berjalan penuh.
Sebelum
Gambar tanpa kompresi di katalog yang padat gambar akan membuat tiap halaman lambat dimuat, apalagi pada koneksi mobile pelanggan.
Sesudah
Setiap gambar dikompres ke WebP sebelum diunggah, sehingga halamannya tetap cepat di mana pun diakses.
Sebelum
Kompresi hanya dilakukan sekali secara manual, sehingga foto yang diunggah klien nantinya akan masuk dalam ukuran penuh tanpa kompresi.
Sesudah
Pipeline khusus kini otomatis mengompres dan mengonversi setiap unggahan baru, sehingga halaman tetap cepat tanpa bergantung pada orang yang harus ingat mengoptimasi gambar secara manual.
Sebelum
Jarak vertikal antar section bisa diam-diam berubah kalau build tool kehilangan jejak helper function yang mengaturnya, seperti yang sempat terjadi saat refactor.
Sesudah
Masalah ini sudah didokumentasikan dan diantisipasi, dan jarak antar section di setiap halaman kini selalu konsisten karena diatur dari satu helper bersama.
