Get a Quote

Hey, do you want to share your amazing ideas with us, drop your requirements, we are keen to work with you on your fantastic project. We will try to reach you shortly, SEE YOU !

Tell us about you

Tell us about your Project

How To Build Star Rating Component Using LWC In Salesforce

In this blog, we will learn how to build a rating component using LWC. A rating component is required in different aspects whether you are holding an event, launching a product, running a food delivery, or anything else customer feedback has the most importance.

How it will look like.

Rating Component Using LWC
Let’s start coding. We build two components.

ratingCmp.html

<template>
    <div class="rate">
        <input type="radio" id="star15" name={name} value="5" onchange={rating} />
        <label for="star15" title="text">5 stars</label>
        <input type="radio" id="star14" name={name} value="4" onchange={rating} />
        <label for="star14" title="text">4 stars</label>
        <input type="radio" id="star13" name={name} value="3" onchange={rating} />
        <label for="star13" title="text">3 stars</label>
        <input type="radio" id="star12" name={name} value="2" onchange={rating} />
        <label for="star12" title="text">2 stars</label>
        <input type="radio" id="star11" name={name} value="1" onchange={rating} />
        <label for="star11" title="text">1 star</label>
    </div>
</template>

ratingCmp.js

import { LightningElement, api } from "lwc";

export default class RatingCmp extends LightningElement {
  static pizzarating;
  static deliveryrating;
  static burgerrating;
  static  packagerating;
  @api name;
  rating(event) {
    if (event.target.name === "Pizza") {        
      RatingCmp.pizzarating = event.target.value;        
    }
    if (event.target.name === "Burger") {
      RatingCmp.burgerrating = event.target.value;
    }
    if (event.target.name === "Package") {
      RatingCmp.packagerating = event.target.value; 
    }
    if (event.target.name === "Delivery") {
      RatingCmp.deliveryrating = event.target.value;
    }
  }
@api
  getvalues() {
    alert(
      "DeliveryRating:" +
      RatingCmp.deliveryrating +
        ", PizzaRating:" +
        RatingCmp.pizzarating +
        ", BurgerRating:" +
        RatingCmp.burgerrating +
        ", PackageRating:" +
        RatingCmp.packagerating
    );
  }
}

ratingCmp.css

* {
    margin: 0;
    padding: 0;
}

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked)>label:before {
    content: '★ ';
}

.rate>input:checked~label {
    color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #deb217;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #c59b08;
}

feedbackCmp.html

<template>
    <lightning-tile title='Provide Feedback'>
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <div class="slds-p-around_medium lgc-bg">
                <lightning-tile label="Delivery Service" type="media">
                    <lightning-avatar slot="media"
                        src="https://tse1.mm.bing.net/th?id=OIP.DrJx7TuzS4K3-AWQGM0-pwHaE5&pid=Api&P=0&w=50&h=100"
                        fallback-icon-name="standard:person_account" alternative-text="Delivery Service"></lightning-avatar>
                        <c-rating-cmp name='Delivery'></c-rating-cmp>
                </lightning-tile>    
            </div>
        </div>
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <div class="slds-p-around_medium lgc-bg">
                <lightning-tile label="Pizza" type="media">
                    <lightning-avatar slot="media"
                        src="https://res.cloudinary.com/teepublic/image/private/s--vVWQvPyW--/ar_1:1,c_fill,h_300,w_300/d_misc:avatars:f_5.png,f_jpg,q_90/v1476802496/production/stores/4367/avatar.jpg"
                        fallback-icon-name="standard:person_account" alternative-text="Pizza"></lightning-avatar>
                        <c-rating-cmp name='Pizza'></c-rating-cmp>
                </lightning-tile>
            </div>
        </div>
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <div class="slds-p-around_medium lgc-bg">
                <lightning-tile label="Burger" type="media">
                    <lightning-avatar slot="media" src="https://webstockreview.net/images/burger-clipart-bread-12.jpg"
                        fallback-icon-name="standard:person_account" alternative-text="Burger"></lightning-avatar>
                        <c-rating-cmp name='Burger'></c-rating-cmp>
                </lightning-tile>    
            </div>
        </div>
        <div class="slds-m-top_medium slds-m-bottom_x-large">
    
            <div class="slds-p-around_medium lgc-bg">
                <lightning-tile label="Packaging" type="media">
                    <lightning-avatar slot="media"
                        src="https://us.123rf.com/450wm/theblackrhino/theblackrhino1410/theblackrhino141000154/33177495-stock-vector-yellow-generic-food-package-over-blue-background.jpg?ver=6"
                        fallback-icon-name="standard:person_account" alternative-text="Packaging"></lightning-avatar>
                    <c-rating-cmp name='Package'></c-rating-cmp>
                </lightning-tile>
                <lightning-button label="Submit" onclick={showRating}> </lightning-button>
            </div>
        </div>
    </lightning-tile>
</template>

feedbackCmp.js

import { LightningElement } from 'lwc';

export default class FeedbackCmp extends LightningElement {
    showRating(){
        this.template.querySelector('c-rating-cmp').getvalues();
    }
}

feedbackCmp.css

* {
    margin: 0;
    padding: 0;
}

feedbackCmp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

Code Explanation

  • In this we written a ratingCmp component to build the star view and used this child component to feedback component.
    <c-rating-cmp name='Package'></c-rating-cmp>
  • I declared a name public variable and passed the value from feedbackCmp for all options.
  • This way you can edit the rating component if you need no need to change code multiple time. Way to write a reusable code.
  • In xml file add target values as App page, Record Page or Home page. You can use community page as well.

On submit showRating called and in this I have called a public method of child component

this.template.querySelector('c-rating-cmp').getvalues()
author profile
About Author
Author Name:
Virendra Sharma

Certified Magento 2 Consultant

Author Bio:

Virendra Sharma is an ecommerce tech-enthusiast and certified Magento Developer. With a decade of experience in Magento ecommerce development, he has been assisting ecommerce businesses across the globe to harness Magento capabilities by developing, maintaining, and improving clients’ eCommerce websites. A leader in his own rights his teammates see him as an avid researcher and a Magento evangelist.

About Emizentech:

An acclaimed IT solution provider and a leading Magento 2 development company with its expertise lies in delivering top of the line ecommerce solutions, Salesforce commerce cloud services, mobile app development and many more verticals.

 
Develop Car Buy Sell App
06 Jul, 2020

Car Buy-Sell Mobile App Development - Cost & Features

Technology has changed the shopping habits and the needs of the customers. It has changed the way people have started […]
Read more
Mobile App Development
Convert Ecommerce Store to Mobile Commerce App
03 Jul, 2020

Why Convert Your Ecommerce Store To Mobile Commerce App

While running towards success, an eCommerce business everyone just dreams about living in the heart of the audience and ruling […]
Read more
Ecommerce Development
On Demand Laundry Mobile App Development Cost & Features
02 Jul, 2020

On-Demand Laundry Mobile App Development - Cost and Features

Home services, handyman services, food, and cab services are amongst the greatest beneficiaries of the evolving on-demand economy. Whether it […]
Read more
Mobile App Development

Let’s Talk Business

Reach out to us by following below given details, or simply drop us a text to start a conversation, we are here to provide best in class business solutions.

SAY SOMETHING