Anggardha Febriano

Video ini membahas pembuatan section produk terlaris dengan konsep overlay dan konten pada website e-commerce sederhana. Prosesnya melibatkan pembuatan div untuk menampilkan produk beserta harga dan pengaturan posisi menggunakan absolute position. Selain itu, penataan konten dilakukan dengan flexbox dan penyesuaian tata letak. Untuk rating produk, digunakan flexbox dengan penambahan bintang sebagai rating. Terakhir, disarankan untuk menyesuaikan jarak antar elemen agar tampilan lebih estetis dan menarik.

Nah setelah kita udah berhasil nih, kita udah bikin overlaynya, selanjutnya kita bikin kontennya, dimana kontennya sebenernya konsep itu sama dengan pada saat kita bikin overlay, jadi kayak kita akan menimpa si overlay ini dengan kontennya gitu.

Nah caranya itu sama, jadi tinggal kita iniin aja, pertama kita bikin divnya gitu, misalnya divnya namanya apa, namanya class carousel item konten gitu, dimana ini nanti akan ada product namenya, produknya kita pake hampad gitu misalnya.

Hampad misalnya macbook pro plus, terus abis itu karena di contohnya ini pricingnya itu dibungkus dari kotak ya, jadi kita kasih div juga biar nanti kita bisa bikin kotak, terus disini kita kasih misalnya pake spend gitu harganya misalnya 12 juta.

Nah sekarang kita coba nih atur si carousel item konten supaya posisinya itu bisa nimpa si overlaynya, jadi konsepnya sama kita pake yang namanya absolute value atau absolute position sorry.

Position absolute, nah yang beda adalah kita mau dia itu di bawah bukan di atas gitu ya, kalau misalnya yang overlay itu kan kita define dia itu di top gitu ya, tapi kita mau dia di bawah gitu, jadi kayak bottomnya 0 terus abis itu dia levelnya 0 dulu deh gitu biar keliatan, terus mungkin biar keliatan juga kita kasih color 1.

Nah terus kalau misalnya kita refresh, ini udah muncul nih di pojok kiri bawah gitu ya, dan kalau misalnya kalian pengen di pojok kanan atas itu tinggal atur aja dari bottom sama left atau right gitu misalnya kalian pengen di kanan gitu, yaudah ganti aja jadi right sama dengan 0 gitu, atau misalnya kalian pengen di atas yaudah ganti topnya jadi 0 gitu, jadi kayak kalian bisa memanipulasi value dari top bottom right sama left supaya sesuai dengan position yang kalian mau.

Kalau misalnya mungkin saya balikin dulu jadi bottomnya, kalian mau ada jarak gitu ya di bottom tapi ada jarak atau di left ada jarak, nah kalian bisa tinggal define aja valuenya misalnya 16px bottomnya 16px gitu, nah ini jadi ada jarak, nah sebenernya artinya dari bottom left right sama top itu adalah misalnya bottom, berarti berapa jarak yang kalian mau dari bottom, berapa jarak yang kalian mau dari left gitu,

jadi kayak misalnya bottomnya 16px yaudah berarti dari bawah tuh jaraknya 16px, kalau misalnya topnya 16px berarti dari atas tuh 16px gitu.

Nah cuman yang perlu diperhatikan juga si top bottom left atau right itu tuh bisa digunakan itu dalam kondisi khusus gitu dan salah satunya adalah kondisi dimana kalau misalnya elemen yang kalian gunakan itu dengan positionnya adalah absolute gitu, jadi kalau misalnya positionnya relatif itu agak kurang berguna gitu ya gitu.

Nah ini sekarang udah nih kita udah bikin si kontennya tinggal kita hias aja sesuai dengan yang kita perluin gitu ya, jadi misalnya kita bikin displaynya flex terus kita kasih flex directionnya itu column, nah terus abis itu misalnya kita kasih gapnya berapa misalnya 4px gitu.

Kita refresh, nah ini udah ada jarak terus misalnya kita kasih class disini deh biar kita bisa styling si titelnya gitu misalnya product name, nah kita kasih styling disini product name misalnya apa, misalnya font size nya 24px, jangan 24 ya misalnya 20px ya, 20px terus font widthnya misalnya kita bikin jadi bold.

Terus kalau kita refresh, nah ini jadi lebih besar gitu ya karena defaultnya juga udah bold jadi makanya gak ada bedanya, terus satu lagi misalnya disini kita bikin product price gitu ya, class product price.

Nah si product price itu kan ada ini ya ada bungkus si kotak gitu ya jadi kita bikin ini misalnya background colornya itu adalah white terus kita kasih padding misalnya padding atasnya kita pengennya berapa misalnya ya dikit aja lah misalnya 2px gitu ya terus kanan kirinya kita pengen agak lebar misalnya 8px terus abis itu kita kasih border radius biar ada agak bulat gitu ya misalnya kita kasih 16px.

Terus kita reload, nah ini udah nih udah terbentuk kayak gini cuman yang belum adalah kita belum kasih warna jadi kita kasih warna tulisannya jadi red gitu misalnya.

Lalu ini udah nih sekarang udah jadi kayak gini cuman problemnya sekarang adalah tulisannya ini agak apa ya gak di tengah gitu ya yaudah kita tinggal bikin aja jadi di tengah misalnya, misalnya gimana tinggal kasih text align center gitu misalnya.

Nah ini jadi di tengah gitu jadi kalau buat tulisan kita bisa pakai text align center untuk dibikin di tengah.

Nah selanjutnya apa selanjutnya kita perlu bikin ini ya bintang si rating ini gitu nah caranya gimana caranya tinggal simple aja kalian bikin dulu nih si bungkusnya untuk bisa bikin jadi flexnya tuh bisa jadi row gitu ya misalnya kita bikin carousel eh sorry jangan product rating misalnya.

Product rating gimana product rating itu kita simple aja product rating displaynya kita pakai flex, flex directionnya itu row terus kita kasih gap misalnya 4px deh ya kita kasih 4px nah kita tinggal cari starnya dimana nah ini udah ada nih kita udah nyari star jadi tinggal di copy aja si kodenya.

Ini ya yang ini kita copy terus kita taruh disini sebanyak 5x gitu misalnya 1,2,3,4,5 kita save terus kita reload nah udah jadi gitu ya nah paling ini mungkin kita bisa rapihin dikit biar enak dibaca gitu ya.

Udah kita rapihin nah paling sisa apa mungkin kayak gapnya kayaknya kurang kurang lebar gitu ya yaudah kita kasih gapnya aja deh di carousel item content jadi 4px jadi misalnya 0,5 rem gitu ya.

Nah ini jadi lebih lebar gitu ya atau mungkin kurang lebar lagi bisa jadi berapa 0,75 rem bisa gitu jadi harusnya untuk product item dan best sellingnya ini kita udah selesai ini untuk bikin satu dan mungkin PR buat temen-temen semua untuk coba bikin di best selling atau di product item best selling lainnya jadi kan ini ada 3 lagi coba kalian bikin untuk 3 item lainnya.

Tapi mungkin sebelum itu kita coba untuk hapus gapnya dulu ya jadi di carousel container ini kita hapus background colornya dan juga gapnya kita hapus gitu biar jadi lebih keliatan cantik gitu ya jadi kayak nanti kalau misalnya kalian udah bikin itu bener-bener seamless kayak ya kayak kotak satu gitu yang bisa di scroll gitu jadi kayak yang ini gitu.

Membuat Section Produk Terlaris Part 4

DEKSRIPSI

PENGAJAR

Anggardha Febriano

Anggardha Febriano

DEKSRIPSI

Anggardha Febriano

Anggardha Febriano