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. Product Components
  • 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. Product Components

Essentials

The product page template consists of several essential components that give a look at the product details. For example, the product's brands, similar products, and product tags components.
In this article, we will explore the essential components for every product template page.
Following is the location of the header components:
Following are the essential components which can be used within product page template:
Donation Progress Bar
Offer
Similar Products

Donation Progress Bar#

The donation progress bar is used to show a donation's amount up to date, as well as how much time is left in which a user can contribute towards the fundraising campaign.

Example#

Essentials Components

Variables#

donation-progress-bar
product
object 
optional
donation
object (donation) 
optional

Usage#

The donation object contains all of the donation related values and messages. For example;
product.donation.collected_amount: shows the collected amount up to date.
product.donation.target_amount: shows the targeted amount to be collected.
product.donation.target_percent: shows the percentage of the targeted amount.

Offer#

This component shows a slider of products that have special offers. In this way, the customer is able to check all of the offers related to the currently being viewed product in one place.

Example#

Footer

Variables#

offer
id
integer 
optional
Id of the offer.
name
string 
optional
Name of the offer.
description
string 
optional
Description of the offer.
categories
array[object (Category) {14}] 
optional
Categories of the offer.
id
number 
required
Category ID, is a unique identifier assigned to a specific product category, facilitating organized classification and efficient management of products within a similar group. List of categories can be found here.
name
string 
required
Category name is a descriptive label assigned to a product category, aiding in clear identification and organization of related products. 🌐 Support multi-language
image
string 
required
The category image
urls
object (Urls) 
required
To help companies and merchants, Salla provides a “urls” attribute that has been added to different modules to guide the merchants to have the full URL of this module from both scopes, the dashboard scope as a store admin, and as a customer.
parent_id
integer 
required
Category Parent ID refers to the unique identifier assigned to the parent category of a subcategory, establishing a hierarchical relationship between different levels of product classification.
sort_order
integer  | null 
required
The sequence or arrangement of categories when displayed to users.
status
enum<string> 
required
The category status indicates whether the category is currently visible and accessible to users active or intentionally concealed from view hidden. It essentially controls whether the category is publicly displayed or kept private within the system.
Allowed values:
activehidden
show_in
object 
required
has_hidden_products
boolean 
required
Whether or not the category has hidden products.
update_at
string 
required
The date where the category is updated in.
metadata
object 
required
sub_categories
array[string]
required
The subcategories list of the main category.
translations
object 
required
You will get this object in the response if you use with=translations query parameter.
Category translations are based on the store's enabled language locale. For instance, if the store supports both Arabic and English, the translations object will return two entries: ar for Arabic and en for English.
items
array[object (Category) {14}] 
required
You will get this array in the response if you use with=items query parameter.
products
array[object (Product) {43}] 
optional
Products included in the offer.
id
integer 
optional
Id of the product.
name
string 
optional
Title for the product.
Example:
HUAWEI Band 6 Smart Band 96
description
string 
optional
Description of the product. May include HTML tags.
Example:
Light material for designed to your comfort while exercising.
url
string 
optional
Url link of the product.
promotion_title
string 
optional
Promotion title for the product.
subtitle
string 
optional
Subtitle for the product.
type
enum<string> 
optional
Type of the product.
Allowed values:
productservicegroup_productscodesdigitalfooddonating
status
enum<string> 
optional
Product status to indicate if it is available.
Allowed values:
saleout
weight
string  | null 
optional
Product weight is the total weight of a product and its packaging
calories
integer  | null 
optional
Product calories is to indicate calories in the product.
sku
string  | null 
optional
Product Stock Keeping Unit assigned to products to keep track of stock levels.
rating
object 
Rating | null
optional
Product rating.
price
number 
optional
The price of the product at its current state, which can be a regular or sale price.
sale_price
number 
optional
The discounted price of the product during a promotional sale or special offer.
regular_price
number 
optional
The standard or original price of the product before any discount or promotional offer is applied.
starting_price 
number 
optional
The starting price of the product.
Example:
Price start from ٨٣٠ ر.س
quantity
integer  | null 
optional
If it's null, means it's unlimited.
Example:
500
sold_quantity
integer 
optional
Quantity of the sold product.
Example:
450
max_quantity
integer 
optional
Maximum quantity of the product.
Example:
1000
discount_ends
string  | null 
optional
Ending period of the discount.
is_taxable
boolean 
optional
Is the tax included in the price
category
object 
optional
The product cateogry.
image 
object 
optional
Image of the product.
images
array [object {5}] 
optional
Images for a single product. Accessible for the single product page
brand
object 
optional
Brand of the product.
tags
array [object {2}] 
optional
Tags of the product.
options
object (ProductOption) 
optional
notify_availability
object  | null 
optional
Object for a single product notify-availability. Accessible for the single product page
donation
object 
object | null
optional
Object contains the details of the donation, if any; otherwise, it can be null.
has_read_more 
boolean 
optional
Show read more availability.
can_add_note  
boolean 
optional
Can add note availability.
can_show_sold
boolean 
optional
Availability to show sold products.
can_show_remained_quantity
boolean 
optional
Availability to show remaind quantity.
can_upload_file 
boolean 
optional
Can upload file availability.
has_custome_form
boolean 
optional
Is it for Food or Custom Service product.
has_options
boolean 
optional
Availability of product options.
is_on_sale
boolean 
optional
Is the product on sale.
is_hidden_quantity 
boolean 
optional
The quantity is hidden by merchant, or product not available.
is_available
boolean 
optional
Product availability.
is_donation
boolean 
optional
Donation availability.
is_in_wishlist 
boolean 
optional
Is the product added to any of the customer's wishlists.
is_out_of_stock
boolean 
optional
Is the product out of stock.
is_require_shipping
boolean 
optional
Does product require shipping.
discounts_table
array [object {6}] 
optional
Offer discount table, to display discount details.
show_discounted_price
boolean 
optional
The discounted amount.
regular_price
number 
optional
The product price before discounted amount is deducted.
quantity
integer 
optional
Number of product items.
Example:
2
quantity_text
string 
optional
Quantity in text form.
Example:
قطعتين
percent
string 
optional
Discount percentage.
Example:
20%
price
number 
optional
The product price after discounted amount is deducted.

Usage#

For this component, the main variable is the offer object. Using this component, the developer can show both offer.name and offer.description. It contains a list of the related products that include offers. Using for-loop statement such as {% for product in offer.products %} , the list of the offered products can be retrieved and displayed using a slider with cards, for example. 

Similar Products#

This component displays a list of similar and related products to the currently beviewed product. This is to assist the customers in discovering and buying products that best meet their needs. Showing similar products helps to find complementary products to the ones the customer is viewing, Cross-selling, or offer a better and more expensive alternative product, Upsells.

Example#

image

Variables#

similar-products
products
array[object (Product) {28}] 
optional
name
string 
required
A label to identify and categoriz a product listing.
price
number 
required
The specified cost assigned to a particular item.
status
enum<string> 
required
The current state of availability of an item within a product inventory.
Allowed values:
hiddensaleout
product_type
enum<string> 
required
Type of the product.
Allowed values:
productservicegroup_productscodesdigitalfooddonatingbooking
quantity
number 
required
The count of an item in inventory.
unlimited_quantity
boolean 
required
Display whether this product has an infinite quantity or is limited.
description
string 
required
The detailed information about an item.
categories
array[string]
required
A group of category IDs that connect to the product.
min_amount_donating
number 
required
The minimum amount of donation.
max_amount_donating
number 
required
The maximum amount of donation.
sale_price
number 
required
The reduced cost assigned to an item for a limited period.
cost_price
number 
required
The cost of a produce before additional costs or profit margins.
sale_end
string 
required
The end of a period when an item is available at a discounted price.
require_shipping
boolean 
required
To specify if a product needs physical delivery or can be provided digitally.
maximum_quantity_per_order
number 
required
Maximum product quantity for a single order.
weight
number 
required
The weight of the order in numerical form.
sku
string 
required
Stock Keeping Unit is a unique alphanumeric code for identifying and managing products in inventory.
hide_quantity
boolean 
required
Whether or not to hide product quantity.
enable_upload_image
boolean 
required
Whether or not to allow uploading an image for a product when adding it to their cart.
enable_note
boolean 
required
Whether or not to add a note to a product when adding product to the cart.
pinned
boolean 
required
Whether or not the product is pinned in the categories page.
active_advance
boolean 
required
Whether or not to enable product active advance.
subtitle
string 
required
A brief additional description for a product.
promotion_title
string 
required
A concise label or heading used to highlight a specific promotion.
metadata_title
string 
required
Product SEO Metadata Title which is a label used to optimize search engine results and enhance the visibility of a product page.
metadata_description
string 
required
A succinct summary crafted to enhance search engine optimization .
brand_id
number 
required
A unique identifier assigned to a specific brand.
tags
array[number]
required
Labels used to categorize and identify products.

Usage#

In order to display the list of similar products, a for-loop is used to iterate through the products objects, and then display the information for each product in the list.
Previous
Product Components
Next
Options