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
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="//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="//www.w3.org/2000/svg"
>
<rect width="24" height="24" rx="2" fill="#ffffff" />
</svg>
<svg
class="cart-icon"
xmlns="//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="//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 HTML tag. To know more about SVG (Scalable Vector Graphics) read our blog for an easy introduction.
Diberikan di bawah ini adalah output untuk file HTML kita tanpa menatanya dengan CSS
IKLAN
keluaran
Website Portofolio Pribadi Menggunakan HTML & CSS Dengan Source Code
IKLAN
Kode CSS Untuk Tombol Tambahkan Ke Troli
Untuk 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 Troli
Sekarang 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
Lihat Pena
Tanpa judul oleh ankit (@celebstori)
di CodePen
100+ Proyek JavaScript Dengan Kode Sumber (Pemula hingga Mahir)
Kesimpulan
Semoga 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: window. onload = function () {.