Selamat datang di blog Code With Random. Di blog ini, kita akan mempelajari cara membuat tombol Tambahkan ke keranjang. Ini adalah komponen yang sangat umum dari setiap situs web e-niaga Show
IKLAN IKLAN Untuk memulai proyek ini, yang Anda butuhkan hanyalah pemahaman dasar tentang HTML, CSS (SCSS), dan Javascript. Semoga Anda menikmati blog kami, jadi mari kita mulai dengan struktur HTML dasar untuk tombol buat Tambahkan ke troli Menggunakan HTML, CSS, & JavaScript Kami akan menunjukkan kepada Anda cara Membuat Tombol Tambahkan Ke Keranjang Menggunakan HTML, CSS, & JavaScript dengan kode Sumber lengkap yang tersedia untuk Anda sehingga Anda tinggal menyalin dan menempelkannya ke proyek Anda IKLAN
IKLAN 
Kode HTML Untuk Tombol Tambah Ke Troli<div class="container"> <button class="add-to-cart-button"> <svg class="add-to-cart-box box-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <rect width="24" height="24" rx="2" fill="#ffffff" /> </svg> <svg class="add-to-cart-box box-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <rect width="24" height="24" rx="2" fill="#ffffff" /> </svg> <svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" > <circle cx="9" cy="21" r="1"></circle> <circle cx="20" cy="21" r="1"></circle> <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" ></path> </svg> <svg class="tick" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" > <path fill="none" d="M0 0h24v24H0V0z" /> <path fill="#ffffff" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM9.29 16.29L5.7 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0z" /> </svg> <span class="add-to-cart">Add to cart</span> <span class="added-to-cart">Added to cart</span> </button> </div>
IKLAN There is all the HTML code for the Add to cart. To create the required figures we are using Diberikan di bawah ini adalah output untuk file HTML kita tanpa menatanya dengan CSS
IKLAN keluaranWebsite Portofolio Pribadi Menggunakan HTML & CSS Dengan Source Code IKLAN
Kode CSS Untuk Tombol Tambahkan Ke TroliUntuk menata proyek kami, kami menggunakan SCSS, yang merupakan varian CSS yang lebih canggih. SCSS menyediakan lebih banyak fitur daripada CSS biasa, ia menggunakan banyak sintaks yang mirip dengan CSS, sehingga lebih mudah dipelajari .add-to-cart-button {
background: #e6a247;
border: none;
border-radius: 4px;
-webkit-box-shadow: 0 3px 13px -2px rgba(0, 0, 0, 0.15);
box-shadow: 0 3px 13px -2px rgba(0, 0, 0, 0.15);
color: #ffffff;
display: flex;
font-family: "Ubuntu", sans-serif;
justify-content: space-around;
min-width: 195px;
overflow: hidden;
outline: none;
padding: 0.7rem;
position: relative;
text-transform: uppercase;
transition: 0.4s ease;
width: auto;
}
.add-to-cart-button:active {
-webkit-box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, 0.45);
box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, 0.45);
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
.add-to-cart-button:hover {
cursor: pointer;
}
.add-to-cart-button:hover, .add-to-cart-button:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, 0.45);
box-shadow: 0 0 0 0.2rem rgba(252, 186, 3, 0.45);
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
}
.add-to-cart-button.added {
background: #2fbf30;
-webkit-box-shadow: 0 0 0 0.2rem rgba(11, 252, 3, 0.45);
box-shadow: 0 0 0 0.2rem rgba(11, 252, 3, 0.45);
}
.add-to-cart-button.added .add-to-cart {
display: none;
}
.add-to-cart-button.added .added-to-cart {
display: block;
}
.add-to-cart-button.added .cart-icon {
animation: drop 0.3s forwards;
-webkit-animation: drop 0.3s forwards;
animation-delay: 0.18s;
}
.add-to-cart-button.added .box-1,
.add-to-cart-button.added .box-2 {
top: 18px;
}
.add-to-cart-button.added .tick {
animation: grow 0.6s forwards;
-webkit-animation: grow 0.6s forwards;
animation-delay: 0.7s;
}
.add-to-cart,
.added-to-cart {
margin-left: 36px;
}
.added-to-cart {
display: none;
position: relative;
}
.add-to-cart-box {
height: 5px;
position: absolute;
top: 0;
width: 5px;
}
.box-1,
.box-2 {
transition: 0.4s ease;
top: -8px;
}
.box-1 {
left: 23px;
transform: rotate(45deg);
}
.box-2 {
left: 32px;
transform: rotate(63deg);
}
.cart-icon {
left: 15px;
position: absolute;
top: 8px;
}
.tick {
background: #146230;
border-radius: 50%;
position: absolute;
left: 28px;
transform: scale(0);
top: 5px;
z-index: 2;
}
@-webkit-keyframes grow {
0% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes grow {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes drop {
0% {
-webkit-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(1px);
}
}
@keyframes drop {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(1px);
}
} /* Page style */
.container {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
width: 100%;
}_Sekarang kita telah menyelesaikan bagian CSS kita, Berikut adalah output CSS kita yang telah diperbarui Portofolio Situs Web Menggunakan HTML ,CSS ,Bootstrap dan JavaScript keluaran
IKLAN Kode JavaScript Untuk Tombol Tambahkan Ke TroliSekarang tambahkan javascript untuk saat kita mengklik tambahkan ke troli, untuk membuat tampilan pop-up "ditambahkan ke troli" IKLAN Di sini, kami menggunakan fungsi setTimeout() yang akan menjalankan fungsi callback di dalamnya 2 detik setelah Anda mengklik tombol Add to Cart IKLAN addToCartButton = document.querySelectorAll(".add-to-cart-button");
document.querySelectorAll('.add-to-cart-button').forEach(function(addToCartButton) {
addToCartButton.addEventListener('click', function() {
addToCartButton.classList.add('added');
setTimeout(function(){
addToCartButton.classList.remove('added');
}, 2000);
});
});Website Restoran Menggunakan HTML Dan CSS Dengan Source Code IKLAN Sekarang kami telah menyelesaikan bagian javascript kami. Ini adalah output kami yang diperbarui dengan javascript
IKLAN Keluaran Akhir Tombol Tambahkan Ke Troli
100+ Proyek JavaScript Dengan Kode Sumber (Pemula hingga Mahir) KesimpulanSemoga Anda menyukai HTML tombol Tambahkan ke troli. Anda dapat melihat video keluaran dan tangkapan layar proyek. Lihat blog kami yang lain dan dapatkan pengetahuan dalam pengembangan front-end Dalam posting ini, kita belajar cara Membuat Tombol Tambahkan Ke Keranjang Menggunakan HTML, CSS, & JavaScript. Jika kami membuat kesalahan atau kebingungan, silakan berikan komentar untuk membalas atau membantu Anda dalam belajar dengan mudah Bagaimana cara menambahkan keranjang belanja di HTML?Izinkan pengguna untuk mengosongkan keranjang dengan satu klik. . Step 1: Creating a card. HTML: .. . Step 2: Adding card header. HTML:
.. . Step 3: Adding a product details. HTML:
.. . Langkah 4. Membuat penghitung. HTML. . Langkah 5. Menambahkan bagian harga. HTML. . Langkah 7. Membuat bagian pembayaran. HTML Bagaimana cara menambahkan item ke troli menggunakan HTML dan JavaScript?Langkah 1. Pada tindakan "tambahkan ke troli", objek sessionStorage membuat larik item yang dibeli. Langkah 2. Kemudian, ia mendapatkan detail pembayaran pembeli di formulir checkout. Langkah 3. Dapat merender opsi pembayaran seperti PayPal dengan larik parameter permintaan. Larik ini berisi item yang dibeli dan detail pembayaran pembeli
Bagaimana cara menambahkan tautan ke tombol keranjang di HTML?Metode ini dapat digunakan untuk membuat tombol yang akan menambahkan produk ke troli tanpa memuat ulang halaman. . Di dalam file etc/config. php, tambahkan baris. HTML. Tepercaya = Aktif. Salinan. . Add the following code to the page where you need to insert your 'Add to cart' button:
Pos Terkait
Copyright © 2024 kemunculan Inc.
|
