Skip to content

Loyalty Program Points

This webcomponent is responsible for managing and displaying points related to a loyalty program.

It listens for the - product.stockChanged event, so when a different product variant is selected, the component updates the loyalty points accordingly.

Children of the Loyalty Program Points

As mentioned above in the introduction section the component changes the points properly with the event it listens to. In order for that to happen children with specific class names need to be put inside the <loyalty-program-points>. There are several classes, each having it's own responsibility:

  • js__points-required - the number of points required to purchase a product within the loyalty program
  • js__points-earned - the number of points earned from purchasing a product within the loyalty program

Here is an example of <loyalty-program-points> element usage.

<loyalty-program-points>
    <div>
        The product is available within the loyalty program for
        <span class="js__points-required">
            100 pts
        </span>
    </div>
    <div>
        By purchasing the product, you will receive
        <span class="js__points-earned">
            20 pts 
        </span>
    </div>
</loyalty-program-points>

Modules reference