Description

Dalam projek pembuatan website ecommerce ini saya membuat dari frontend developnya terlebih dahulu. Saya menggunakan:

1. HTML
2. CSS
3. Java Script

Alasan Pembuatan Website Stylique
Website ini dibuat untuk mempermudah pelanggan dalam menemukan dan membeli produk fashion terbaru secara online. Dengan platform digital, Stylique dapat menjangkau pasar yang lebih luas, memberikan pengalaman belanja yang praktis, aman, dan sesuai dengan tren, tanpa terbatas waktu dan lokasi.

Fitur

1. Bagian Home, terdapat navbar yang berisikan beberapa kategori seperti :                                                                                                      a. Menu home                                                                                                                                                                                                  b. Menu pria berisi beberapa pilihan barang yang bisa dilihat                                                                                                                        c. Menu wanita berisi beberapa pilihan barang yang bisa dilihat                                                                                                                d. Menu anak berisi beberapa pilihan barang yang bisa dilihat                                                                                                                    e. Menu sport berisi beberapa pilihan barang yang bisa dilihat                                                                                                                      f.  Menu perhiasan berisi beberapa pilihan barang yang bisa dilihat                                                                                                              g. Menu parfum berisi beberapa pilihan barang yang bisa dilihat                                                                                                                  h. Blog                                                                                                                                                                                                              i. Hot Offers

  2. Bagian home juga tersedia apabila user ingin mencari barang yang diinginkan. Karena saya membuat website ini masih dalam frontend       develop, maka untuk fitur ini belum berfungsi

  3. Bagian home terdapat juga tersedia kategori, jika user klik button Lihat Semua, maka akan otomatis website ecommerce ini akan                 mengarahkan ke kategori barang yang di klik atau dipilih

   Disini kita coba pilih di kategori jaket klik Lihat Semua

   Maka akan otomatis akan mengarahkan user ke produk jaket, dari sini saya menggunakan logika pada java script

   Fungsi lihatSemuajaket() digunakan untuk mengarahkan (redirect) pengguna ke halaman produk-jaket.html saat dipanggil, dan mencetak    log ke console sebagai penanda bahwa proses redirect sedang dilakukan.

4. Fitur selanjutnya tersedia sidebar, jika pengguna klik misalkan di kategori aksesories, maka akan menampilkan aksesories apa saja yang         tersedia dan menampilkan juga stok yang tersedia

  5. Juga terdapat fitur yang bisa melihat barang apa yang lagi diskon dan juga bisa melihat rekomendasi barang 

   Disini bisa dilihat dari sepatu steve madden lagi diskon besar-besaran, juga tersedia bisa menambahkan  barang tersebut ke keranjang        (tetapi kembali lagi saya masih membuat ini secara frontend saja), juga ada keterangan stok yang sudah terjual dan stok yang masih            tersedia ada berapa, dan terakhir juga ada waktu untuk barang sepatu ini akan masa berlaku diskon di hari, jam, menit, dan detik                  berapa.

 7. Testimoni

     Juga ada testimoni dari user yang menggunakan website ecommerce ini untuk berbelanja fashion pastinya

  8. Pelayanan Yang Ditawarkan

 9. Footer

   Berisi beberapa detail perusahaan dan saya juga mencantumkan gambar yang digunakan dan sumber asal saya mendevelop website       ecommerce ini.

10. Kembali lagi ke navbar

 User bisa menklik salah satu kategori diatas, misalkan klik kategori wanita dan memilih salah satu barang juga misalkan memilih baranga atasan. Maka user akan diarahkan langsung ke pages atasan

  Disini user bisa melihat-lihat pilihan atasan yang ingin dibeli selainn itu juga ada filtering di sidebar untuk memilah dan memilih apa yang diinginkan oleh user. Disini saya juga menggunakan logika java script

  Kode ini membuat setiap elemen dengan class .product-card bisa diklik dan diarahkan ke halaman sesuai nilai data-href-nya. Cursor juga diubah menjadi tangan saat hover untuk menunjukkan bahwa elemen bisa diklik.

Dan pada filtering juga menggunakan logika java script, pada bagian

   Kode ini membuat menu dropdown bisa dibuka dan ditutup saat diklik. Saat konten ditampilkan atau disembunyikan, ikon panah pada judul dropdown juga berubah dari '►' ke '▼' atau sebaliknya.

11. Selanjutnya misalkan memilih blus rayon, akan juga diarahkan ke pages detail produk dari blus rayon

   Pada pages blue rayon ini, pengguna bisa memilih warna apa yang inginkan (cream atau blue) dan juga menggunakan logika java script

Kode ini memungkinkan pengguna memilih satu warna produk. Saat lingkaran warna diklik, semua pilihan warna lain dihapus status     aktifnya (selected), lalu warna yang diklik diberi class selected.

 Selain itu user bisa memilih ukuran yang sesuai dan juga menggunakan logika java script

Kode ini memungkinkan pengguna memilih satu ukuran produk. Saat tombol ukuran diklik, semua pilihan ukuran lainnya dinonaktifkan (remove selected), lalu tombol yang diklik diberi class selected sebagai tanda pilihan aktif.

Dan yang terakhir user bisa menambahkan atau mengurangi barang yang ingin dibeli 

Kode tersebut digunakan untuk mengatur jumlah produk yang akan dibeli oleh pengguna melalui tombol tambah (+) dan kurang (–). Saat halaman dimuat, nilai awal jumlah produk diset ke 1. Ketika tombol minus diklik, jumlah akan dikurangi satu, tetapi tidak akan pernah kurang dari 1 untuk menghindari nilai negatif atau nol. Sebaliknya, ketika tombol plus diklik, jumlah akan bertambah satu setiap kali diklik. Perubahan nilai ini langsung ditampilkan pada elemen yang menunjukkan jumlah produk. Dengan logika ini, user dapat menyesuaikan jumlah produk yang ingin dibeli dengan cara yang sederhana dan interaktif.