Loyalty

The loyalty page template shows the content of the loyalty program, which is meant to enable the store's customers to benefit from collecting the points for vouchers and offers provided by the store. Once they have collected enough points, the customers will be eligible to redeem them for exciting gifts or products.

Following is the page location and url:

Example

Variables

LoyaltyPage

page

string | object

optional

title

string

optional

Title of the page. May include html tags.

slug

enum<string>

optional

Meaningful unique identifier that is readable by users. Slug are predifned valued in which each page has a list of allowed values. Below are the allowed values for this page.

Allowed value:

loyalty

object

optional

The object the contain the Loyalty Program details

name

string

optional

The title name of the loyalty program.

description

string

optional

The description of the loyalty program.

image

string

optional

The images associated to the loyalty program.

promotion_title

string

optional

The title of the promotion.

promotion_description

string

optional

The description of the promotion

points

array[object (Point) {7}]

optional

A list of the possible methods for collecting points.

prizes

array[object (PrizesGroup) {3}]

optional

List of the possible awards for collecting points.

user

object

optional

The logged in user related information.

loyalty_points

string

optional

The number of the collected points for the logged in user.

is_profile_completed

boolean

optional

Checks if the profile of the logged in user is completed or not.

Components

Besides extending the master layout to show the common header and footer, this page starts by displaying the breadcrumbs component. The {% component breadcrumbs %} line returns the current navigation for the user:

JS Web Components

The Loyalty page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores:

Button <salla-button>

Loyalty <salla-loyalty>

Slider <salla-slider>

Usage

This page template receives the loyalty object, which contains all of the information related to the loyalty program, such as its name and description. The developer may show the collected points of a logged in user by using the variable user.loyalty_points.

A for-loop statement can be used to display a list of the possible methods for collecting points as follows:

In case of the method for collecting points is to here a link, the developer may show the sharing link as follows:

After all, the developer can display the list of prizes using the following for loop statement, noting that another nested loop can be used to display any awarded products:

Educational Clip

Example#

Variables#

Components#

JS Web Components#

Usage#

Example

Variables

Components

JS Web Components

Usage