function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rajasekhar RSRajasekhar RS 

Did ftt

How to add cart items in lwc (like as Amazon)  show me one
example
Thomas JaxonThomas Jaxon
Sure, I can provide you with an example of how to add cart items in LWC. Here's a simple example:

HTML Markup:
<template>
  <div>
    <h1>Product List</h1>
    <ul>
      <template for:each={products} for:item="product">
        <li key={product.id}>
          {product.name} - {product.price}
          <button onclick={addToCart} data-id={product.id}>Add to Cart</button>
        </li>
      </template>
    </ul>
    <h1>Cart Items</h1>
    <ul>
      <template for:each={cartItems} for:item="item">
        <li key={item.id}>{item.name} - {item.price}</li>
      </template>
    </ul>
  </div>
</template>

JavaScript Code:
import { LightningElement, track } from 'lwc';

export default class CartItems extends LightningElement {
  @track products = [
    { id: 1, name: 'Product A', price: '$10' },
    { id: 2, name: 'Product B', price: '$20' },
    { id: 3, name: 'Product C', price: '$30' },
  ];
  
  @track cartItems = [];
  
  addToCart(event) {
    const id = event.target.dataset.id;
    const product = this.products.find(item => item.id == id);
    this.cartItems.push(product);
  }
}
Rajasekhar RSRajasekhar RS
I want with images like as a Amazon in lwc code