Đôi khi các nút 'Thêm vào giỏ hàng' mà bạn nhận được trong kho X-cart & nbsp; không đủ và bạn muốn thêm một & nbsp; 'Thêm vào nút' & nbsp; Cửa hàng giỏ hàng, hoặc trên một trang đích sản phẩm bên ngoài X-Cart. Show
Có hai phương pháp để làm như vậy:
Phương pháp 1
Phương pháp 2Phương pháp này có thể được sử dụng để tạo một nút sẽ thêm sản phẩm vào giỏ hàng mà không cần tải lại trang:
5 là ID của sản phẩm cần được thêm vào giỏ hàng; Ví dụ: đối với sản phẩm & nbsp; http: //demostore.x-cart.com/admin/admin.php? Target = sản phẩm & sản phẩm_id = 37 & nbsp; ID này là 37.
 Chào mừng bạn đến với mã với blog ngẫu nhiên. Trong bài viết này, chúng tôi tạo một hình ảnh động thêm vào nút. Chúng tôi sử dụng HTML, CSS và JavaScript để thêm hình ảnh động nút. HTML, CSS, and Javascript for Add To Cart Button Animation. Sử dụng CSS, chúng tôi trình bày thêm nút Giỏ với các dự án CSS & JavaScript với mã nguồn có sẵn để bạn sao chép và dán trực tiếp vào dự án của riêng bạn.Add To Cart Button With CSS & JavaScript projects with source code available for you to copy and paste directly into your own project. Chơi bài kiểm tra không giới hạn của HTML, CSS và JavaScript - bấm vào đâyClick Here Tôi hy vọng bạn thích blog của chúng tôi, vì vậy hãy để bắt đầu với cấu trúc HTML cơ bản cho hoạt hình nút Thêm vào nút.Add To Cart Button Animation. Hướng dẫn video của nút Thêm vào nútMã HTML cho nút Thêm vào giỏ hàng<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Add to cart</title> <!-- styles --> <link rel="stylesheet" href="styles.css" /> </head> <body> <button class="button"> <span>Add to cart</span> <div class="cart"> <svg viewBox="0 0 36 26"> <polyline points="1 2.5 6 2.5 10 18.5 25.5 18.5 28.5 7.5 7.5 7.5"></polyline> <polyline points="15 13.5 17 15.5 22 10.5"></polyline> </svg> </div> </button> <script src="app.js"></script> </body> </html> Có tất cả mã HTML cho hoạt hình nút Thêm vào giỏ hàng. Bây giờ, bạn có thể thấy một đầu ra với & nbsp; thêm hoạt hình nút giỏ hàng sau đó chúng tôi viết & nbsp; javascript để thêm hoạt hình nút cart. Trang web thương mại điện tử sử dụng HTML CSS và JavaScript HTML Cập nhật đầu ra cho nút Thêm vào giỏ hàng. Mã CSS cho nút Thêm vào giỏ hàngCode For Add To Cart Button.button {
--background: #362a89;
--text: #fff;
--cart: #fff;
--tick: var(--background);
position: relative;
border: none;
background: none;
padding: 8px 28px;
border-radius: 8px;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-mask-image: -webkit-radial-gradient(white, black);
overflow: hidden;
cursor: pointer;
text-align: center;
min-width: 144px;
color: var(--text);
background: var(--background);
transform: scale(var(--scale, 1));
transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27);
}
.button:active {
--scale: 0.95;
}
.button span {
font-size: 14px;
font-weight: 500;
display: block;
position: relative;
padding-left: 24px;
margin-left: -8px;
line-height: 26px;
transform: translateY(var(--span-y, 0));
transition: transform 0.7s ease;
}
.button span:before, .button span:after {
content: '';
width: var(--w, 2px);
height: var(--h, 14px);
border-radius: 1px;
position: absolute;
left: var(--l, 8px);
top: var(--t, 6px);
background: currentColor;
transform: scale(0.75) rotate(var(--icon-r, 0deg)) translateY(var(--icon-y, 0));
transition: transform 0.65s ease 0.05s;
}
.button span:after {
--w: 14px;
--h: 2px;
--l: 2px;
--t: 12px;
}
.button .cart {
position: absolute;
left: 50%;
top: 50%;
margin: -13px 0 0 -18px;
transform-origin: 12px 23px;
transform: translateX(-120px) rotate(-18deg);
}
.button .cart:before, .button .cart:after {
content: '';
position: absolute;
}
.button .cart:before {
width: 6px;
height: 6px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--cart);
bottom: 0;
left: 9px;
filter: drop-shadow(11px 0 0 var(--cart));
}
.button .cart:after {
width: 16px;
height: 9px;
background: var(--cart);
left: 9px;
bottom: 7px;
transform-origin: 50% 100%;
transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0));
transition: transform 1.2s ease var(--fill-d);
}
.button .cart svg {
z-index: 1;
width: 36px;
height: 26px;
display: block;
position: relative;
fill: none;
stroke: var(--cart);
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.button .cart svg polyline:last-child {
stroke: var(--tick);
stroke-dasharray: 10px;
stroke-dashoffset: var(--offset, 10px);
transition: stroke-dashoffset 0.4s ease var(--offset-d);
}
.button.loading {
--scale: 0.95;
--span-y: -32px;
--icon-r: 180deg;
--fill: 1;
--fill-d: 0.8s;
--offset: 0;
--offset-d: 1.73s;
}
.button.loading .cart {
animation: cart 3.4s linear forwards 0.2s;
}
@keyframes cart {
12.5% {
transform: translateX(-60px) rotate(-18deg);
}
25%, 45%, 55%, 75% {
transform: none;
}
50% {
transform: scale(0.9);
}
44%, 56% {
transform-origin: 12px 23px;
}
45%, 55% {
transform-origin: 50% 50%;
}
87.5% {
transform: translateX(70px) rotate(-18deg);
}
100% {
transform: translateX(140px) rotate(-18deg);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
display: flex;
font-family: 'Inter UI', 'Inter', Arial;
justify-content: center;
align-items: center;
background: #eceffc;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}
body .twitter {
position: fixed;
display: block;
right: 64px;
bottom: 14px;
}
body .twitter svg {
width: 32px;
height: 32px;
fill: #1da1f2;
}HTML CSS Cập nhật đầu ra cho nút Thêm vào giỏ hàng. & nbsp; mã javascript cho thêm nút cartCode For Add To Cart Buttondocument.querySelectorAll('.button').forEach(button => button.addEventListener('click', e => {
if(!button.classList.contains('loading')) {
button.classList.add('loading');
setTimeout(() => button.classList.remove('loading'), 3700);
}
e.preventDefault();
}));Đầu ra cuối cùng của nút Thêm vào giỏ hàngTrang web danh mục đầu tư bằng cách sử dụng HTML CSS và JavaScript (Mã nguồn) Bây giờ chúng tôi đã hoàn thành phần JavaScript của chúng tôi để thêm nút giỏ hàng, đầu ra được cập nhật của chúng tôi với JavaScript. & NBSP; hy vọng bạn thích hoạt hình thêm nút thêm vào giỏ hàng. Xem các blog khác của chúng tôi và có được kiến thức trong phát triển phía trước. Cảm ơn bạn! Hơn 50 dự án phía trước có mã nguồn Bài đăng này dạy chúng tôi cách tạo hoạt hình thêm nút thêm vào nút bằng cách sử dụng HTML & CSS và JavaScript đơn giản. & NBSP; Nếu chúng tôi mắc lỗi hoặc bất kỳ sự nhầm lẫn nào, vui lòng gửi bình luận để trả lời hoặc giúp bạn dễ học.HTML & CSS and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. Được viết bởi - mã với ngẫu nhiên/anki & nbsp; Câu hỏi thường gặp cho nút Thêm vào giỏ hàng
Bạn sử dụng ngôn ngữ mã hóa nào cho nút Thêm vào giỏ hàng này?Tôi sử dụng HTML để tạo cấu trúc của nút Thêm vào giỏ hàng và để tạo kiểu tôi sử dụng CSS. Và đối với chức năng chính, tôi sử dụng mã JavaScript cho hoạt hình nút. Chúng ta có thể thêm nút Thêm vào giỏ hàng trong bất kỳ dự án ECOMERCE nào không?Vâng, coder thân yêu của tôi, bạn có thể sao chép mã dự án thêm nút này và thêm vào dự án ECOMERCE cũ của bạn và đó là Làm thế nào thêm vào giỏ hàng hoạt động trong JavaScript?Mã này bắt đầu đối tượng phiên JavaScript.Khi nhấp vào nút Thêm vào giỏ hàng trên gạch sản phẩm, chức năng này được gọi. Nó đọc chi tiết sản phẩm từ lưới sản phẩm nơi đặt thêm vào thêm vào giỏ hàng.Ví dụ, nó có được tên sản phẩm, số lượng và các chi tiết khác.On clicking the “Add to cart” button on the product tile, this function is invoked. It reads the product details from the product grid where the clicked “Add to cart” is placed. For example, it gets the product name, quantity and other details.
Thêm vào giỏ hàng có nghĩa là mua?Nút bổ sung để triển khai là một tính năng của các cửa hàng thương mại điện tử cho phép khách hàng chọn các mặt hàng để mua mà không thực sự hoàn thành thanh toán.Đối với các cửa hàng trực tuyến, nó sống trên các trang sản phẩm riêng lẻ, hoạt động như tương đương kỹ thuật số của một giỏ hàng trong một cửa hàng gạch và vữa.allows customers to choose items to purchase without actually completing the payment. For online stores, it lives on individual product pages, functioning as the digital equivalent of a shopping cart in a brick and mortar store. |
