E Cart Project in LWC Part 5

3. productFilters: This components is getting the filters information from multiSelectPicklistLwc component and passing this information to productSearch component to fetch the filtered product’s list.

productFilters.JS

import { LightningElement, wire } from "lwc";
import { getPicklistValues } from "lightning/uiObjectInfoApi";

// messageChannels
import { publish, MessageContext } from "lightning/messageService";
import FILTER_CHANNEL from "@salesforce/messageChannel/productFilterChannel__c";

// fields
import FAMILY_FIELD from "@salesforce/schema/Product2.Family";
import BRAND_FIELD from "@salesforce/schema/Product2.Brand__c";
import SIZES_FIELD from "@salesforce/schema/Product2.Sizes__c";
import COLORS_FIELD from "@salesforce/schema/Product2.Color__c";

export default class ProductFilters extends LightningElement {
	families = [];
	minPrice;
	maxPrice;
	brand=[];
	size=[];
	color=[];
	filterText='Show Filter';

	@wire(getPicklistValues, {
		recordTypeId: "012000000000000AAA",
		fieldApiName: FAMILY_FIELD
	})
	familyPicklistValues;

	@wire(getPicklistValues, {
		recordTypeId: "012000000000000AAA",
		fieldApiName: SIZES_FIELD
	})
	sizesPicklistValues;

	@wire(getPicklistValues, {
		recordTypeId: "012000000000000AAA",
		fieldApiName: BRAND_FIELD
	})
	brandsPicklistValues;

	@wire(getPicklistValues, {
		recordTypeId: "012000000000000AAA",
		fieldApiName: COLORS_FIELD
	})
	colorsPicklistValues;

	@wire(MessageContext)
	messageContext;

	show = false;
    
	handleShowFilterChange(event){
        this.show = event.target.checked;
		
		if(this.show==true){
			this.filterText='Hide Filter';
		} else {
			this.filterText='Show Filter';
		}

    }

	handleValueChange(event){
		var payload = event.detail.payload;
 		var payloadType = event.detail.payloadType;
		var payloadName = event.detail.name; 
		if(payloadType === 'multi-select') {
			this[payloadName] = payload.values;
			this.publishChange();

		}
		
	}

	handleChange(event) {
		this[event.target.name] = event.detail.value;
		console.log(event.detail.value);
		this.publishChange();
	}

	handleResetFilter(){
		this.families = [];
		this.minPrice = null;
		this.maxPrice= null;
		this.brand= [];
		this.size= [];
		this.color=[];
		
		const categoryCmp = this.template.querySelector('.Category');
		if(categoryCmp) {	
			categoryCmp.refresh(this.families);
		}

		const brandCmp = this.template.querySelector('.Brand');
		if(brandCmp) {	
			brandCmp.refresh(this.brand);
		}

		const sizeCmp = this.template.querySelector('.Size');
		if(sizeCmp) {	
			sizeCmp.refresh(this.size);
		}

		const colorCmp = this.template.querySelector('.Color');
		if(colorCmp) {	
			colorCmp.refresh(this.color);
		}

		this.publishChange();
	}

	publishChange() {
		const message = {
			filtersData: {
				families: this.families,
				minPrice: this.minPrice,
				maxPrice: this.maxPrice,
				size: this.size,
				brand: this.brand,
				color: this.color,
				reset : false
			}
		};
		publish(this.messageContext, FILTER_CHANNEL, message);
	}
}

productFilters.html

<template>
	
	<lightning-card variant="Narrow" title="Filter Products" icon-name="standard:filter">
		<lightning-layout multiple-rows>

			<lightning-layout-item size="12" padding="around-small" >
		
		<lightning-input onchange={handleShowFilterChange}  type="toggle" label={filterText} name="filter"></lightning-input>
    	</lightning-layout-item>
		</lightning-layout>

		<template if:true={show}>
    	<lightning-layout multiple-rows>

			<lightning-layout-item size="3" padding="around-small" if:true={familyPicklistValues.data}>
				
				<c-multi-select-picklist-lwc class="Category"  name="families"
                onselect={handleValueChange} 
				options={familyPicklistValues.data.values} multi-select="true" selected-value={families} label="Category"
				>
            	</c-multi-select-picklist-lwc>

			</lightning-layout-item>

			<lightning-layout-item size="3" padding="around-small">
				<div><label>Price Range</label><br/>
					<lightning-layout multiple-rows>
						<lightning-layout-item size="6">
				<lightning-input name="minPrice" style="width:100%" variant="label-hidden" placeholder="Min Price" type="number" value={minPrice} label="Min Price"
                        onchange={handleChange}>
               </lightning-input>
			</lightning-layout-item>
			<lightning-layout-item size="6">
				   
			<lightning-input name="maxPrice" style="width:100%" variant="label-hidden" placeholder="Max Price" type="number" value={maxPrice} label="Max Price"
                        onchange={handleChange}>
               </lightning-input>
			</lightning-layout-item>
			   </lightning-layout>
			</div>	
			</lightning-layout-item>

			<lightning-layout-item size="2" padding="around-small" if:true={brandsPicklistValues.data}>
				
				<c-multi-select-picklist-lwc class="Brand" name="brand"
                onselect={handleValueChange} 
				options={brandsPicklistValues.data.values} multi-select="true" selected-value={brand} label="Brand"
				>
            	</c-multi-select-picklist-lwc>

			</lightning-layout-item>
			
			<lightning-layout-item size="2" padding="around-small" if:true={colorsPicklistValues.data}>
				
				<c-multi-select-picklist-lwc class="Color" name="color"
                onselect={handleValueChange} 
				options={colorsPicklistValues.data.values} multi-select="true" selected-value={color} label="Color"
				>
            	</c-multi-select-picklist-lwc>

			</lightning-layout-item>
			
			<lightning-layout-item size="2" padding="around-small" if:true={sizesPicklistValues.data}>
				
				<c-multi-select-picklist-lwc class="Size" name="size"
                onselect={handleValueChange} 
				options={sizesPicklistValues.data.values} multi-select="true" selected-value={size} label="Size"
				>
            	</c-multi-select-picklist-lwc>
				

			</lightning-layout-item>
			<lightning-layout-item size="12" padding="around-small" >
			
			<lightning-button  variant="Brand" label="Reset Filter" title="Reset Filter"
			onclick={handleResetFilter}>
			</lightning-button>
			</lightning-layout-item>
			
		</lightning-layout>
		
		</template>
	</lightning-card>
</template>