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. Blog 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. Blog Pages

Blog listing

The blog listing page template is used for rendering the list of all of the available blogs' articles. This template will show an excerpt for each blog article along with the article title, summary, image, and author name. The developer has complete control over the appearance of this page.
Following is the page location and url:

Example#

Blog listing

Variables#

BlogListingPage
page
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 values:
blog.indexblog.index.authorblog.index.categoryblog.index.tag
slides
array[object (Article) {10}]  | null 
optional
title
string 
optional
Title of the article.
Example:
Top 10 items must have for 2022 Autumn.
body
string 
optional
Body of the the article. It may contain HTML codes.
url
string 
optional
Url link of the article.
has_image
boolean 
optional
Image avaialbility.
image
object 
optional
Image object.
thumbnail
string 
optional
A small image representation of a larger image of image.
created_at
string <date> | null 
optional
Article creation date. Carbon date collection collection is used.
author
object 
optional
Auther of the articles objects.
related
array [object] 
optional
Articles related to this article.
tags
array [object] 
optional
Tags attached to this article.
articles
array[object (Article) {10}] 
optional
title
string 
optional
Title of the article.
Example:
Top 10 items must have for 2022 Autumn.
body
string 
optional
Body of the the article. It may contain HTML codes.
url
string 
optional
Url link of the article.
has_image
boolean 
optional
Image avaialbility.
image
object 
optional
Image object.
thumbnail
string 
optional
A small image representation of a larger image of image.
created_at
string <date> | null 
optional
Article creation date. Carbon date collection collection is used.
author
object 
optional
Auther of the articles objects.
related
array [object] 
optional
Articles related to this article.
tags
array [object] 
optional
Tags attached to this article.
categories
array[object (BlogCategory) {3}] 
optional
is_current
boolean 
optional
Is the blog category currently selected.
name
string 
optional
Name of the blog category.
url
string 
optional
Url link of the blog category.

Components#

The blog page includes the Breadcrumbs component. Breadcrumbs are a set of links that indicate the current page and its "ancestors" leading back to the site's homepage.

JS Web Components#

The Blog Listing page may include the following JS Web Components, which are ready-made designs and style-sets of web components for Salla stores:
Infinite Scroll <salla-infinite-scroll>
Slider <salla-slider>

Hooks#

The blog listing page template allows calling the following hooks in order to inject more information:

Usage#

The blog listing page receives several objects containing the details of the whole blog. These objects are slides, articles, page, and categories.
Using the categories object, the developer may start by listing all of the available categories for the blog.
In the case of the availability of the object slides, which can be checked by slides.count, the blogs' short information can be displayed in form of slider. This can be used to display only the article image, summary, and author name for each blog article.
The core object for this page is the article object. Using the for-loop statement, the developer can display an excerpt for each blog article.
Previous
Blog Pages
Next
Single blog