Shopping Chart Using Salesforce Lightning Web Component (LWC) - Safak Demir

This LWC component is a shopping cart that allows users to add items to their cart and view them in a visually appealing way. The component utilizes CSS animations to enhance the user experience and includes an “add to cart” button, as well as previous and new item buttons for easy navigation.

Features

Add items to cart with “add to cart” button
View cart items in a visually appealing way using CSS animations
Navigate between previous and new items with buttons

Code Sample

HTML

<template>
    <lightning-card title="Product list with CSS animation">
        <div class="carousel-container slds-m-around_small">
            <lightning-card>
                <div class="slds-card slds-align_absolute-center">
                    <img class={imageStyle} src={imageUrl} onmouseover={handleMouseOver} onmouseout={handleMouseOut} />
                </div>
                <div class="slds-card slds-align_absolute-center">
                    <h1>{productName}</h1>
                </div>
                <div class="slds-card slds-align_absolute-center">
                    <div class="carousel-buttons" style="display: flex;">
                        <button class="slds-button slds-button_brand slds-m-around_small" onclick={prevProduct}> 
                            <img class="svgStyle" style="filter: invert(1);" src="https://www.svgrepo.com/show/509020/arrow-left.svg" alt=""> Previous
                        </button>
                        <button class="slds-button slds-button_brand slds-m-around_small" onclick={nextProduct}>
                            Next <img class="svgStyle" style="filter: invert(1);" src="https://www.svgrepo.com/show/509019/arrow-right.svg" alt="">
                        </button>
                        <button class="slds-button slds-button_brand slds-m-around_small" onclick={addToChart}>
                            <img class="svgStyle" style="filter: invert(1);" src="https://www.svgrepo.com/show/108999/shopping-cart.svg" alt=""> Add to chart
                        </button>
                    </div>
                </div>
                <span style="font-size: 25px; font: weight 800px;" slot="actions">{totalPrice}$</span>

            </lightning-card>
        </div>
    </lightning-card>
</template>

JavaScript

import { LightningElement, track, wire } from 'lwc';

export default class DataBindingWithDecorator extends LightningElement {
    //  Example 4 ADVANCED  ______________________________________________
    @track currentProductIndex = 0;
    @track imageStyle = 'product-image';
    @track imageUrl;
    @track productName;
    @track totalPrice = 0;

    products = [{
            imageUrl: 'https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Fuji/2021/June/Fuji_Quad_Keyboard_1x._SY116_CB667159063_.jpg',
            name: 'Keyboard',
            price: 10
        },
        {
            imageUrl: 'https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Fuji/2021/June/Fuji_Quad_Headset_1x._SY116_CB667159060_.jpg',
            name: 'Headset',
            price: 20
        },
        {
            imageUrl: 'https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Fuji/2021/June/Fuji_Quad_Chair_1x._SY116_CB667159060_.jpg',
            name: 'Chair',
            price: 15
        }
    ];

    handleMouseOver() {
        this.imageStyle = '';
    }

    handleMouseOut() {
        this.imageStyle = 'floating';
    }

    prevProduct() {
        if (this.currentProductIndex === 0) {
            this.currentProductIndex = this.products.length - 1;
        } else {
            this.currentProductIndex--;
        }
        this.imageUrl = this.products[this.currentProductIndex].imageUrl;
        this.productName = this.products[this.currentProductIndex].name + " " + this.products[this.currentProductIndex].price + "$";
    }

    nextProduct() {
        if (this.currentProductIndex === this.products.length - 1) {
            this.currentProductIndex = 0;
        } else {
            this.currentProductIndex++;
        }
        this.imageUrl = this.products[this.currentProductIndex].imageUrl;
        this.productName = this.products[this.currentProductIndex].name + " " + this.products[this.currentProductIndex].price + "$";
    }

    connectedCallback() {
        this.imageUrl = this.products[this.currentProductIndex].imageUrl;
        this.productName = this.products[this.currentProductIndex].name + " " + this.products[this.currentProductIndex].price + "$";
        this.imageStyle = 'floating';
    }

    addToChart() {
        this.totalPrice = parseFloat(this.products[this.currentProductIndex].price) + parseFloat(this.totalPrice);
    }

}

CSS

.carousel-container {
    overflow: hidden;
}

.floating {
    animation: floating 1.5s linear infinite;
    -webkit-animation: floating 1.5s linear infinite;
}

.svgStyle {
    width: 1.5rem;
    height: 1rem;
}

@keyframes floating {
    0% {
        transform: translate(0, 0px);
    }
    50% {
        transform: translate(0, 15px);
    }
    100% {
        transform: translate(0, -0px);
    }
}