英文:
how to add products to cart dynamically ? (Nuxt 3)
问题
以下是翻译好的部分：
-
"As the question asked, I have 1 list of products, each product has an add cart button."
- 根据问题所述，我有一个产品列表，每个产品都有一个添加购物车按钮。
-
"And after clicking add cart, the cart icon on the header will automatically display a div informing the user that they have added a product."
- 单击添加购物车后，页眉上的购物车图标将自动显示一个 DIV，通知用户已添加了一个产品。
-
"Thank you everyone for the question and support."
- 感谢大家的问题和支持。
-
"this is product detail page with button
<button class="ml-5 btn-wide btn-addcart"><span>Add to cart</span>"- 这是带有按钮的产品详细页面
<button class="ml-5 btn-wide btn-addcart"><span>Add to cart</span>
- 这是带有按钮的产品详细页面
-
"And after selecting more products, my cart has not been updated"
- 在选择更多产品后，我的购物车没有被更新。
英文:
As the question asked, I have 1 list of products, each product has an add cart button.
And after clicking add cart, the cart icon on the header will automatically display a div informing the user that they have added a product.
Thank you everyone for the question and support.
this is product detail page with button <button class="ml-5 btn-wide btn-addcart"><span>Add to cart</span>
<template>
<div class="product-detail py-[40px]">
<div class="mx-auto container">
<div class="head-content">
<a-breadcrumb separator="»">
<a-breadcrumb-item>Trang chủ</a-breadcrumb-item>
<a-breadcrumb-item><nuxt-link to="/all-product">RAM ECC</nuxt-link></a-breadcrumb-item>
<a-breadcrumb-item href="">RAM Samsung DDR4 ECC Registered 64GB 3200AA</a-breadcrumb-item>
</a-breadcrumb>
</div>
<div class="mt-10 flex justify-start items-start ">
<div class="border-2 w-[381px] relative ">
<img :src="ramImg1" alt="" srcset="" class="top-0 overflow-hidden z-10 left-0">
</div>
<div class="px-8 flex flex-col">
<div class="flex flex-col pb-3 border-b-2 mb-3 w-full">
<span class="text-[15px] text-primary font-semibold"><a href="#">RAM ECC</a></span>
<span class=" text-2xl">RAM Samsung DDR4 ECC Registered 64GB 3200AA</span>
</div>
<span>Mã SP: RA021</span>
<span class="text-[#c00] text-2xl font-medium my-3">3,900,000 đ</span>
<span class=" text-base text-[#777] mb-5">
– Tình trạng: mới 100%, date 2022.<br/>
– Giá trên không bao gồm VAT.
</span>
<span class="text-[#f00] text-xl font-medium mb-5">Còn 8 sản phẩm</span>
<span class="mb-5 uppercase text-base font-semibold text-[#114eab]">Bảo hành: 3 năm</span>
<div class="flex gap-3 items-center mb-5">
<button @click="decrement" class="bg-[#E6E6E6] w-[42px] h-[42px] rounded-full">-</button>
<div class="text-center pt-2 bg-[#E6E6E6] w-[42px] h-[42px] ">{{ value }}</div>
<button @click="increment" class="bg-[#E6E6E6] w-[42px] h-[42px] rounded-full">+</button>
<button class="ml-5 btn-wide btn-addcart"><span>Thêm vào giỏ hàng</span></button>
<nuxt-link to="/thanh-toan"><button class="btn-wide btn-primary" ><span>Mua ngay</span></button></nuxt-link>
</div>
<div class="flex gap-5">
<span class="text-[#524e6f] font-medium">Chia sẻ trên:</span>
<a href="#" class="text-[#524e6f]"><font-awesome-icon icon="fa-brands fa-facebook-f" style="height: 18px;"/></a>
</div>
</div>
</div>
<div class="my-5 flex flex-col">
<span class="text-primary text-lg font-bold">THÔNG TIN SẢN PHẨM</span>
<span class=" text-base text-[#777] mt-5 leading-10">
– RAM Samsung DDR4 ECC Registered 64GB 3200AA.<br/>
– RAM được sản xuất bởi hãng Samsung, mới 100% 1 box 25 cây.
</span>
</div>
</div>
</div>
</template>
And after selecting more products, my cart has not been updated
<template>
<div class="mini-cart ">
<a-dropdown>
<a class="ant-dropdown-link" @click.prevent>
<a-badge count="5">
<div class="bg-white h-[38px] w-[38px] rounded-full">
<font-awesome-icon icon="fa-solid fa-cart-shopping" style="color: #0098d9; padding-top: 30%; padding-left: 30%;" />
</div>
</a-badge>
</a>
<template #overlay>
<div class="w-[300px] bg-white shadow-lg p-5 flex flex-col ml-[5%] mt-[6%]">
<div class="flex justify-start gap-2">
<div class="h-[60px] w-[60px]">
<img :src="ramImg1" alt="" srcset="">
</div>
<div class="flex flex-col text-center mb-3 w-[155px]">
<span class=" text-primary font-bold">RAM Samsung DDR4 ECC Registered 32GB 3200AA</span>
<span class="text-[#414042] text-base">1 x <span class="text-[#c00] text-base font-bold">2,200,000 đ</span></span>
</div>
<div>
<button href="#" class="close"></button>
</div>
</div>
<center><button class="uppercase bg-[#0d6efd1a] py-1 px-[19px] text-primary font-medium rounded-[5px] h-[35px] w-[200px]"><span>xoá tất cả sản phẩm</span></button></center>
<div class="flex justify-between text-base text-[#777] font-bold my-3 border-t-[1px] pt-3">
<span>Tổng số phụ:</span>
<span>2,200,000 đ</span>
</div>
<nuxt-link to="/gio-hang"><button class="w-full mt-[17px] h-10 border-primary border-[1px] text-primary py-1 rounded-full"><span>Xem giỏ hàng</span></button></nuxt-link>
<nuxt-link to="/thanh-toan" class="text-white font-medium"><button class="w-full mt-[10px] h-10 bg-primary rounded-full py-1 text-white"><span>Thanh toán</span></button></nuxt-link>
</div>
</template>
</a-dropdown>
</div>
</template>
答案1
得分: 1
考虑阅读有关状态管理的Nuxt文档。您可以使用useState来实现此功能。
英文:
Consider reading the nuxt documentation about state management. You can use useState for this.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论