Light Mode

Landing Page

A landing page template for a Twilight theme is a pre-suggested web page that serves as the entry point for the online store. It provides a foundation for developers to build upon and typically includes an offer with a countdown timer to encourage conversions. It should be visually appealing, user-friendly, and align with your goals and target audience.

Following is the page location and url:

└── src
    ├── views
      ├── pages
      |   ...
      |   ├── landing-page.twig
      |   ...
      ...

Example

Landing Page

Variables

Components

Besides extending the master layout to show the common header and footer, this page may display different sort of Product components such us home.store-features, home.testimonials, components.home.fixed-products, and components.home.products-slider:

{% component 'home.store-features' %}
{% component 'home.testimonials' with{type:landing.testimonials_type} %}
{% include 'components.home.fixed-products' %}
{% include 'components.home.products-slider' %}

JS Web Component

The Landing 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>
Count Down <salla-count-down>
Products Slider <salla-products-slider>
Products List <salla-products-list>

Usage

This page template receives the landing object, which contains all of the information related to the landing page. If this object was not received, the developer may show the 404 not found error page:

{% if not landing %}
<div>
  <header>
    <div><a href="{{ store.url }}"><img src="{{ store.logo }}" alt="logo" /></a>
      <h1>{{trans('common.errors.404')}}</h1>
      <div>{{trans('common.elements.back_home')}}</div>
    </div>
  </header>
</div>

If the landing object has been received, the developer may check different thing such as if the Landing Page offer is_expired or not:

{% if landing.is_expired %}
<div>
  <header>
    <div><a href="{{ store.url }}"><img src="{{ store.logo }}" alt="logo" /></a>
      <h1>{{trans('pages.offer.offer_finished')}}</h1>
      <p>{{ trans('pages.offer.offer_expired_message') }}</p>
      <div>{{trans('common.elements.back_home')}}</div>
    </div>
  </header>

On the other hand, if the landing object has been received and there is ongoing offer, the developer would need to set the values of the following in order to start showing the related products:

{% set products=landing.products %}
{% set hide_add_btn=true %}
{% set show_quantity=landing.show_quantity %}
{% set title=trans('pages.offer.included_products') %}

Besed on the above, the developer may show the products as follows:

{% if landing.is_slider %}
  {% include 'components.home.products-slider' %}
{% else %}
  {% include 'components.home.fixed-products' %}
{% endif %}

Last modified: 10 months ago