Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Common Pages
  • Getting Started
    • Create a theme
    • Develop a theme
    • Setup a theme
    • Publish a theme
  • Requirements & Review
    • Overview
    • Main Requirements
    • Review Process
      • UI / UX Review
      • Technical Review
      • Metadata Review
      • Pre-Launch Review
  • Files and Folders Structure
    • Directory structure
    • Twilight.json
  • Twig Template Engine
    • Basic syntax
    • Twilight flavoured twig
  • Theme Architecture
    • Layouts
      • Overview
      • Master Layout
      • Global Variables
      • CSS Variables
      • Salla Icons
      • Custom Fonts
      • Hooks
      • Localizations
    • Pages
      • Overview
      • Home Page
      • Product Pages
        • Products listing
        • Single product
      • Customer Pages
        • Profile
        • Orders list
        • Order details
        • Wishlist
        • Notifications
      • Blog Pages
        • Blog listing
        • Single blog
      • Brand Pages
        • Brands listing
        • Single brand
      • Common Pages
        • Cart
        • Loyalty
        • Thank you
        • Single page
        • Landing Page
    • Componenets
      • Overview
      • Home Components
        • Youtube
        • Fixed banner
        • Testimonials
        • Parallax background
        • Photos slider
        • Store features
        • Square photos
        • Fixed products
        • Products slider
        • Featured products - Style 1
        • Featured Products - Style 2
        • Featured Products - Style 3
        • Brands
        • Enhanced Square Banners
        • Main Links
        • Enhanced Slider
        • Slider Products with Headers
        • Latest Products
        • Vertical Menu with Slider
      • Product Components
        • Essentials
        • Options
      • Common Components
        • Header Components
        • Footer Components
        • Comments component
  • Change Log
  1. Common Pages

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#

Thank you

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
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
Previous
Cart
Next
Thank you