E-CatalogPersonal2026

Harvest Sun: Platform E-Katalog White-Label

Harvest Sun menggabungkan company profile, blog, dan katalog produk lengkap jadi satu website, bisa dijelajah selayaknya toko online, lengkap dengan search, filter kategori, sorting, dan bagian related products, cuma tanpa checkout. Pemesanannya langsung lewat WhatsApp. Dibuat cukup fleksibel buat hampir semua jenis bisnis retail, dari sembako dan pakaian sampai makanan, elektronik, furniture, dan perlengkapan rumah, jadi bisnis apa pun bisa langsung pakai fondasi yang sama tanpa perlu dibangun dari nol. Produk yang ditampilkan di demo ini memang masih dummy, tapi seluruh fitur dan flow-nya sudah lengkap dan siap dipakai, tinggal ganti dengan produk asli dan bisnisnya langsung bisa jalan.

Kunjungi Website Kembali ke Proyek

Preview

Jelajahi Situsnya

Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.

Desktop

Mobile

Tech Stack

Teknologi Penggerak Proyek

Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.

Peran

Rincian per Skill

Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.

Web Development

Membangun tema sebagai child theme di atas Blocksy plus plugin settings pendamping, memisahkan logic reusable seperti kontrol Customizer dan custom post type ke plugin supaya tetap hidup lepas dari update tema.
Menyusun keenam halaman statis sebagai orchestrator PHP tipis yang merangkai section partial mandiri, tiap section merender field ACF dan markup-nya sendiri, jadi halaman baru bisa disusun dari section yang sudah ada tanpa duplikasi kode.
Mengubah WooCommerce jadi katalog tanpa checkout dengan menonaktifkan purchasability sambil sengaja membiarkan hook add-to-cart-nya tetap terdaftar, setelah menelusuri perilaku internal Blocksy di mana mencabut hook itu diam-diam ikut menghapus tombol custom lain yang berbagi rentang priority yang sama.
Memperbaiki bug filter kategori di mana kategori archive itu sendiri belum masuk ke query pada titik filter custom dijalankan, yang diam-diam mengembalikan nol produk begitu pembeli memilih kategori kedua selagi sudah berada di halaman kategori.
Menelusuri dan memperbaiki bug query di mana meratakan array filter pakai array_values() merusak key relation-nya, diam-diam merusak logic AND/OR antar klausa filter tanpa error PHP apa pun.
Membungkus setiap pemanggilan field konten di keenam halaman lewat compatibility shim, jadi kalau plugin konten dinonaktifkan atau gagal load, situsnya melambat dengan aman alih-alih fatal error total, diverifikasi langsung dengan menonaktifkan plugin-nya dan memastikan semua halaman tetap hidup.
Membangun sistem branding sebagai CSS custom property yang seluruhnya dikontrol dari WordPress Customizer, termasuk generator hex-ke-RGB otomatis supaya opacity modifier Tailwind tetap jalan di warna yang bisa diubah admin kapan saja.
Mendaftarkan custom post type dengan flag keamanan yang diperlukan supaya terhindar dari perilaku aneh canonical-redirect WordPress di post type yang tidak punya halaman single publik.
Menjalankan audit sistematis di tiap titik kode custom menyentuh internal WordPress, Blocksy, WooCommerce, dan ACF, mendokumentasikan mana yang aman dari update ke depan, mana yang sudah dijaga, dan mana yang masih perlu dicek manual, lengkap checklist buat dijalankan tiap habis update.

UI/UX Design

Mendesain navigasi mengikuti cara tiap breakpoint benar-benar dipakai, dropdown lewat hover di desktop dan tablet, lewat tap di mobile, dengan submenu mobile selalu terbuka alih-alih disembunyikan di balik toggle.
Mendesain ulang header sticky supaya cuma baris utility paling atas yang tetap menempel sementara baris navigasi ikut ter-scroll bareng konten, setelah animasi header melipat sebelumnya sempat memicu loop lompatan scroll saat halaman dimuat.
Mendesain drawer off-canvas buat mobile, penjelajah kategori muncul dari kiri dan menu utama dari kanan, masing-masing mengikuti arah tombol yang membukanya.
Mendesain ritme grid responsif buat section card berulang supaya jumlah kolomnya turun bertahap di tiap breakpoint, bukan langsung jatuh ke 1 kolom.
Mendesain kontrol branding di Customizer supaya admin non-teknis bisa mengganti seluruh sistem warna dan tipografi situs dari beberapa field saja, tanpa menyentuh kode.

Graphic Design

Mendesain identitas brand dan logo Harvest Sun dari nol sebagai brand demo buat boilerplate ini.
Menyeragamkan semua ikon di situs jadi satu gaya outline dari satu icon library, termasuk logo brand sosial media yang biasanya filled, menggantikan campuran ikon hand-drawn dan filled yang ditemukan saat audit desain.
Membuat favicon situs.
Mengompres setiap gambar ke WebP dan mayoritas di bawah 200KB sebelum diunggah, tanpa penurunan kualitas yang terlihat.

Digital Marketing

Mendesain alur katalog di sekitar WhatsApp sebagai kontak utama, bikin bisnis bisa langsung mulai terima pesanan tanpa perlu payment gateway atau integrasi kurir dulu.
Menambahkan search, filter kategori, dan sorting supaya pengunjung bisa nemuin yang dicari di katalog besar tanpa harus scroll semuanya, mencegah mereka kabur sebelum sempat lihat produknya.
Membangun bagian related products di tiap halaman produk, mekanisme cross-sell sederhana yang nunjukin lebih banyak katalog ke pengunjung yang udah tertarik.
Memberi tiap produk halaman detail sendiri alih-alih satu list panjang, jadi produk satu-satu bisa ke-index dan ketemu lewat pencarian, bukan cuma dari beranda.
Menggabungkan blog dan company profile jadi satu situs bareng katalog, jadi konten buat narik traffic organik dan cerita bisnis buat bangun kepercayaan duduk bersebelahan langsung sama produk yang mau dijual.
Menjaga data kategori dan produk tetap di struktur taxonomy native WooCommerce alih-alih custom field, supaya mesin pencari dan tooling SEO ke depannya bisa membacanya sesuai yang mereka harapkan.

Sorotan

Di Balik Layar

Tinjauan lebih dekat soal apa yang ditawarkan produk jadinya, hambatan di sepanjang jalan, dan hasil akhirnya.

Fitur Utama

Responsif penuh di mobile, tablet, dan desktop.
Menggabungkan company profile, blog, dan katalog produk lengkap jadi satu website.
Enam halaman khusus, Beranda, Tentang Kami, Pelanggan, Cara Pemesanan, Kontak, dan Galeri, masing-masing dengan kontennya sendiri.
Strip statistik di beranda.
Section "kenapa memilih kami" yang nunjukin keunggulan platformnya.
Showcase kategori produk di beranda.
Section "dipercaya oleh" berisi logo klien dan partner.
Section pengiriman terbaru yang nunjukin bukti kiriman sebelumnya buat bangun kepercayaan pembeli.
Halaman Pelanggan khusus buat nampilin testimoni unggulan.
Halaman Cara Pemesanan yang nuntun pengunjung baru lewat alur pemesanan via WhatsApp langkah demi langkah.
Search produk, plus sorting berdasarkan terbaru, terlama, dan harga dari termurah ke termahal atau sebaliknya.
Filter produk berdasarkan rentang harga atau kategori.
Tiap halaman produk punya carousel gambar, deskripsi lengkap, dan tombol "Beli di WhatsApp" yang langsung skip checkout.
Bagikan produk apa pun dengan menyalin tautannya atau share langsung ke Facebook atau WhatsApp.
Download foto produk langsung, jadi customer atau tim CS bisa tanya soal produk tertentu cukup dari gambarnya, tanpa perlu tautan.
Data tiap produk bisa ditambah atau diubah dari dashboard, lengkap panduan buat siapa pun yang mengelolanya.
Setiap gambar dikompres ke WebP sebelum diunggah.
Siap multi-brand, seluruh palet warna dan tipografi bisa diganti dari admin WordPress.

Tantangan yang Dihadapi

Pilihan Filter yang Diam-Diam Tidak Mengembalikan Apa-Apa

Halaman archive kategori WooCommerce tidak menambahkan kategorinya sendiri ke kondisi filter query pada titik kode custom bisa nge-hook, jadi filter kategori custom yang dibuat malah menumpuk kondisi kedua yang tidak berhubungan alih-alih menggantikannya. Memilih kategori apa pun dari sidebar selagi sudah di halaman kategori mengembalikan grid kosong tanpa error yang menjelaskan kenapa, diperbaiki dengan menghapus eksplisit kondisi kategori archive itu sebelum filter custom dijalankan.

Refactor yang Diam-Diam Menghapus Spacing Satu Section

Helper PHP bersama yang membungkus tiap section dengan spacing vertikal konsisten dipindah ke folder baru saat beres-beres kode, tapi build tool yang scan class Tailwind tidak diberi tahu buat cari ke sana, karena dia baca file sebagai teks, bukan menjalankan PHP. Class-nya hilang dari CSS hasil build tanpa error di mana pun, dan jarak antar section di semua halaman diam-diam menyusut sampai ketahuan.

Satu Plugin dari Menjatuhkan Seluruh Situs

Keenam halaman membaca kontennya lewat fungsi field satu plugin, dipanggil langsung di puluhan tempat tanpa fallback. Kalau plugin itu sampai dinonaktifkan atau gagal load, semua halaman bakal fatal error sekaligus alih-alih melambat dengan aman, ditutup dengan membungkus tiap pemanggilan lewat compatibility layer dan memverifikasi situsnya tetap hidup saat plugin-nya dinonaktifkan langsung.

Pelajaran yang Didapat

Debug hook WordPress dengan melihat langsung isinya saat runtime, bukan cuma percaya sama namanya, itu yang berhasil membongkar bug filter kategori maupun bug relation query, dua-duanya tidak kelihatan cuma dari baca kode.
Build tool yang baca file sebagai teks tidak tahu sebuah helper function masih ada begitu filenya dipindah, path file di config harus diperlakukan sebagai bagian dari checklist refactor, bukan setup sekali jadi.
Membungkus titik integrasi yang rapuh dengan compatibility layer baru kebukti gunanya begitu benar-benar diuji lawan kegagalan sungguhan, bukan cuma jalur normalnya, menonaktifkan plugin-nya langsung itu yang benar-benar membuktikan shim-nya jalan.
Mensentralisasi warna brand jadi token yang dikontrol Customizer alih-alih di-hardcode makan waktu lebih banyak di awal dibanding bangun buat satu brand saja, tapi mengubah proses reskin jadi sekadar ganti konfigurasi, bukan tulis ulang.

Dampak

Masalah yang Terselesaikan Setelah Rilis

Bagaimana proyek ini mengubah keadaan bagi bisnis dan penggunanya setelah rilis.

Filter selalu mengembalikan produk yang tepat

Nol titik kegagalan tunggal di 6 halaman

Gambar di bawah 200KB

Ganti brand penuh tanpa sentuh CSS

Satu sumber spacing section sitewide

Perbaikan Kritis

Filter Kategori yang Diam-Diam Tidak Mengembalikan Apa-Apa

Sebelum

Memilih kategori kedua dari filter sidebar selagi sedang melihat archive kategori mengembalikan nol produk, tanpa error yang menjelaskan kenapa.

Sesudah

Kondisi kategori archive itu sendiri dihapus eksplisit sebelum filter custom dijalankan, jadi hasil filter selalu sesuai yang benar-benar dipilih pembeli.

Perbaikan Kritis

Satu Titik Kegagalan di Seluruh Halaman

Sebelum

Keenam halaman membaca konten lewat fungsi field satu plugin tanpa fallback, jadi plugin yang dinonaktifkan atau gagal bikin seluruh situs fatal error sekaligus.

Sesudah

Compatibility shim membungkus tiap pemanggilan dan kembali dengan aman kalau plugin-nya tidak tersedia, diverifikasi dengan menonaktifkannya langsung dan situsnya tetap hidup penuh.

Performa

Halaman Lambat Akibat Gambar Tidak Dioptimasi

Sebelum

Gambar tanpa kompresi bakal bikin tiap halaman, apalagi katalog produk yang padat gambar, lambat dimuat.

Sesudah

Setiap gambar dikompres ke WebP dan mayoritas di bawah 200KB sebelum diunggah.

Peningkatan

Bangun Ulang dari Nol Tiap Ganti Brand

Sebelum

Bikin situs katalog baru buat brand berbeda bakal berarti menulis ulang warna dan style yang di-hardcode di seluruh CSS.

Sesudah

Warna brand, hover state, dan spacing disentralisasi di WordPress Customizer, jadi brand baru cukup ganti konfigurasi, bukan bangun ulang.

Peningkatan

Spacing Section Tanpa Satu Sumber Kebenaran

Sebelum

Ritme vertikal antar section bisa diam-diam melenceng kalau build tool sampai kehilangan jejak helper function yang mendefinisikannya, seperti yang sempat terjadi saat refactor.

Sesudah

Gotcha-nya sudah didokumentasikan dan dijaga, dan spacing section tiap halaman tetap konsisten by construction dari satu helper bersama.