E Cart Project in LWC Part 9

7. productsList: This component shows all the products available with the available filters also.

productsList.JS

import { LightningElement, api } from "lwc";

export default class ProductsList extends LightningElement {
	@api products;

	handleAddToCart(event) {
		this.isAddedToCart = true;
		this.dispatchEvent(
			new CustomEvent("addedtocart", {
				detail: {
					productId: event.detail.productId,
					selectedQuantity: event.detail.selectedQuantity
				}
			})
		);
	}

	handleRemovedFromCart(event){
		this.dispatchEvent(
			new CustomEvent("removedfromcart", {
				detail: {
					productId: event.detail.productId
				}
			})
		);
		
	}
}

productsList.html

<template>
    <lightning-card title="Catalog" icon-name="standard:catalog">
        <lightning-layout multiple-rows horizontal-align="center">


            <template for:each={products} for:item="product">
                <lightning-layout-item key={product.productRecord.Id} size="12" small-device-size="6" medium-device-size="4"
                    large-device-size="3">
                    <c-product-tile product={product.productRecord} default-quantity={product.quantity} added-to-cart={product.isAddedToCart} onaddedtocart={handleAddToCart} onremovedfromcart={handleRemovedFromCart}></c-product-tile>
                </lightning-layout-item>
            </template>



            
        </lightning-layout>
    </lightning-card>
</template>