3 e. Snippets [NB]

These snippets can help you with validation or to get started with specific functionality that may seem a bit confusing at first.

Fixed.rain

See Custom.rain ¸

Custom.rain

Cart preview

You can use this snippet to display a cart preview on all pages (can be useful in fixed.rain also) and is usually displayed in the header.

{% for product in page.cart.products %}
      
              {% if product.bundled %}
              {# SHOW THE BUNDLE'S MAIN PRODUCT IMAGE #}
              <a href="{{ product.url }}"><img src="{{ product.image | url_image('50x100x2', product.fulltitle) }}" /></a>

                {# SHOW THE BUNDLED PRODUCT IMAGES #}
                {% for product in product.bundled |slice(1, 2) %}
                + <a href="{{ product.url }}"><img src="{{ product.image | url_image('25x50x2', product.fulltitle) }}" /></a>
                {% endfor %}
                
                {# SHOW THE BUNDLED PRODUCT TOTAL PRICE #}
                  {% set bundleprice = 0 %}
                  {% for product in product.bundled  %}
                    {% set bundleprice = bundleprice + product.price.price %}
                  {% endfor %}
                  <div style="float: right; height: 100px; line-height: 100px;">
                    <small style="opacity: 0.6;">(x{{ product.quantity }})</small> {{ bundleprice | money_with_currency }}
                  </div>
                  <br /><small>{{ product.title }}</small>
                  {% else %}
                  
              {# OTHERWISE SHOW NORMAL PRODUCT + IMAGES + PRICE #}    
              <a href="{{ product.url }}">
              <img src="{{ product.image | url_image('50x100x2', product.fulltitle) }}" />
              </a>
               <div style="float: right; height: 100px; line-height: 100px;">
                 <small style="opacity: 0.6;">(x{{ product.quantity }})</small> {{ product.price.price | money_with_currency }}
               </div>
               <br /><small>{{ product.title }}</small>
               
              {% endif %}
              <br />
{% endfor %}

Default Navigation

Default Navigation is located in the Design > Navigation area of the backoffice and allows the users more control over their shop’s navigation. We ask that you allow this control in your themes.

<ul>
 {% for link in shop.links.main %}
 <li>
   <a href="{{ link.url | url }}" title="{{ link.title }}"{% if link.new_window %} target="_blank"{% endif %}>
     {{ link.title }}
   </a>
 </li>
 {% endfor %}
</ul>

Language Switcher

We ask that users remain on the same page while switching languages so that they are not lost while being redirected to the home page, which should help with conversion. For this example you need to create a new snippet (in this case called languages.rain) and is included in custom.rain.

{# snippets/languages.rain #}
{% set customLanguages = [] %}
{% set curUrl = '' %}
{% for language in shop.languages %}
{% if template == 'pages/collection.rain' or template == 'pages/catalog.rain' %}
  {% if page.breadcrumbs[0].url == 'collection' %}
    {% set curUrl = ((language.url ~'collection') | url) %}
  {% elseif page.breadcrumbs[0].url == 'catalog' %}
    {% set curUrl = ((language.url ~'catalog') | url) %}
  {% elseif page.breadcrumbs[0].url == 'brands' %}
    {% set curUrl = ((language.url ~'go/brand/'~ collection.brand_id) | url) %}
  {% elseif page.search %}
    {% set curUrl = ((language.url ~'search/'~ page.search) | url) %}
  {% else %}
    {% if template == 'pages/collection.rain' %}
      {% set curUrl = ((language.url ~'go/category/'~ collection.category_id) | url) %}
    {% elseif template == 'pages/catalog.rain' %}
      {% set curUrl = ((language.url ~'go/category/'~ catalog.category_id) | url) %}
    {% endif %}
  {% endif %}
{% elseif template == 'pages/product.rain' %}
  {% set curUrl = ((language.url ~'go/product/'~ product.id) | url) %}
{% elseif template == 'pages/textpage.rain' %}
  {% if textpage.category_id %}
    {% set curUrl = ((language.url ~'go/category/'~ textpage.category_id) | url) %}
  {% else %}
    {% set lastPart = request.url | split('/') %}
    {% set lastPartLength = (lastPart | length-2) %}
    {% set serviceUrl = '' %}
    {% set serviceUrl = lastPart[lastPartLength] %}
    {% set curUrl = ((language.url ~'service/'~ serviceUrl) | url) %}
  {% endif %}
{% elseif template == 'pages/blog.rain' %}
  {% set curUrl = ((language.url ~ blog.url) | url) %}
{% else %}
  {% if template != 'pages/index.rain' %}
    {% if template != 'pages/account-dashboard.rain' %}
      {% set lastPart = template | replace({'pages/': '', '.rain': '', '-': '/'}) %}
    {% else %}
      {% set lastPart = 'account' %}
    {% endif %}
  {% else %}
    {% set lastPart = '' %}
  {% endif %}
  {% set curUrl = ((language.url ~ lastPart) | url) %}
{% endif %}
{% set customLanguages = customLanguages | merge({ (language.code) : {'url': curUrl, 'title': language.title, 'code': language.code, 'active': language.active} }) %}
{% endfor %}


{% for language in customLanguages %}
<a lang="{{ language.code }}" title="{{ language.title }}" href="{{ language.url | url }}">
{{ language.code }}
</a> {% endfor %}

Mastercard logos

Some themes use customized versions of payment provider logos. Mastercard and/or Maestro logos and will have to be updated if you are using the older versions of these logos. Please consult the official branding guides at the following url:

https://brand.mastercard.com/brandcenter/mastercard-brand-mark/downloads.html

Tags.rain

Use this snippet to display all shop tags at shop.url/tags

{% for tag in tags%}
<li>{{ tag.title }}</li>
{% endfor %}

Products.rain

Products.rain (not to be confused with product.rain) can be created in order to display repeated product information in a grid. In this example, we display the product’s main image:

{% for products in collection.products %} 
<img src="{{ product.image | url_image('262x276x1', product.fulltitle) }}" width="262" height="276" alt="{{ product.fulltitle }}" title="{{ product.fulltitle }}" />
{% endfor %}

Messages.rain

This outputs messages from the platform (error messages, added to cart etc...)

{% if page.messages %}
  <div class="messages">
    {% if page.messages.info %}
      <ul class="info">
        {% for message in page.messages.info %}
          <li>{{ message }}</li>
        {% endfor %}
      </ul>
    {% endif %}
    {% if page.messages.success %}
      <ul class="success">
        {% for message in page.messages.success %}
          <li>{{ message }}</li>
        {% endfor %}
      </ul>
    {% endif %}
    {% if page.messages.error %}
      <ul class="error">
        {% for message in page.messages.error %}
          <li>{{ message }}</li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
{% endif %}

Product.rain

Unit pricing

Certain users may need to display unit prices to indicate certain prices affected by weight or volume, to charge a certain price per kilo, for example. There is a global setting and these prices are set at the product level. If it exists, this price must be displayed in both the product page and the collection/category pages, in the same view as the the price.

{% if shop.settings.price_per_unit == 'enabled' and product.unit %}
          {{ 'Unit price' | t }}: {{ product.unit.price | money }} / {{ product.unit.unit }}
{% endif %}

Strict Legal mode

Strict legal mode is a setting activated through Settings > Advanced that should display an indication of whether tax is included or not and a link to the Shipping Rules page. This must be displayed in both the product page and the collection/category pages, in the same view as the the price.

{% if shop.settings.legal.mode == 'strict' %}
        
        {% if shop.b2b %}
        {{ 'Excl. VAT' | t }}
        {% else %}
        {{ 'Incl. VAT' | t }}
        {% endif %} 
        {{ 'Excl. $1' | t('<href="' ~ 'service/shipping-returns' | url ~ '">' ~ 'Shipping costs' | t ~ '</a>') | raw }}
{% endif %}

Discount rules

This code will correctly show the discount codes set up by your users.

{% if product.discounts or product.discount_rules %}
<ul>
{% if product.discounts %}
{% for discount in product.discounts %}
<li>
<strong>
{{ 'Buy $1 for $2 each and save $3' | t (discount.quantity, discount.price | money, discount.percentage | percentage) }}
{% if discount.unit and shop.settings.legal.mode == 'strict' %}
({{ discount.unit.price | money }} / {{ discount.unit.unit }})
{% endif %}
</strong>
</li>
{% endfor %}
{% endif %}

{% if product.discount_rules %}
{% for discount_rule in product.discount_rules %}
<li>
<strong>{{ discount_rule }}</strong>
</li>
{% endfor %}
{% endif %}
</ul>
{% endif %}

Add variants to Wishlist

You now have the ability to add separate variants to the wishlist:

{{ ('account/wishlistAdd/' ~ product.id ~ '?variant_id=' ~ product.vid) | url }}" title="{{ 'Add to wishlist' | t }}">{{ 'Add to wishlist' | t }}</a>

New / On Sale buttons

{% if template == 'pages/index.rain' %}
  {% for id in newest %}
    {% if product.id == id.id %}
    <div class="sale-new">
      New
    </div>
    {% elseif product.price.price_old %}
    <div class="sale-new">
      Sale
    </div>
    {% endif %}
  {% endfor %} 
{% elseif product.price.price_old %}
  <div class="sale-new">
    Sale
  </div>
{% endif %}

Add to cart Button

<form action="{{ ('cart/add/' ~ product.vid) | url }}" id="product_configure_form" method="post">
  {% if product.options or product.variants or product.custom %}
  <div class="product-option row">
    <div class="col-md-12">
      {{ product | html_product_configure | raw }}
    </div>
  </div>
  {% else %}
  <input type="hidden" name="bundle_id" id="product_configure_bundle_id" value="">
  {% endif %}
  <div class="product-price row">
    <div class="price-wrap col-xs-5 col-md-5">
      {% if product.price.price_old %}
      <span class="old-price">{{ product.price.price_old | money }}{% if shop.settings.legal.mode == 'strict' %} {{ 'SRP' | t }}{% endif %}</span>
      {% endif %}
      <span class="price">{{ product.price.price | money }}{% if shop.settings.legal.mode == 'strict' %} <small>*</small>{% endif %}</span>
      {% if shop.b2b %}<small class="price-tax">{{ 'Excl. VAT' | t }}</small>{% else %}<small class="price-tax">{{ 'Incl. VAT' | t }}</small>{% endif %}
    </div>
    <div class="cart col-xs-7 col-md-7">
      <div class="cart">
        {% if product.stock.available %}
        <input type="text" name="quantity" value="{{ product.quantity }}" />
        <div class="change">
          <a href="javascript:;" onclick="updateQuantity('up');" class="up">+</a>
          <a href="javascript:;" onclick="updateQuantity('down');" class="down">-</a>
        </div>
        <a href="javascript:;" onclick="$('#product_configure_form').submit();" class="btn glyphicon glyphicon-shopping-cart" title="{{ 'Add to cart' | t }}" {% if shop.language == 'de' %}style="padding: 0px 10px;"{% endif %}>
          <span>{{ 'Add to cart' | t }}</span>
        </a>
        {% endif %}
      </div>
    </div>
  </div>
</form>

Review stars

Displays product reviews with stars

{% set productScore = product.score * 5 | number_format(0) %}  
<div class="stars">
  {% for i in 1..productScore %}
  <span class="glyphicon glyphicon-star"></span>
  {% endfor %}
</div>

Rich Snippets

Rich Snippets (also known as Structured Data) affect the way that Google sees and displays products from Lightspeed shops.

You can validate your product pages at the following url:

https://search.google.com/structured-data/testing-tool/u/0/

Necessary items:

Product

Review

@type

@type

name

datePublished

image

description

description

itemReviewed

@type

name

itemCondition

author

@type

name

aggregateRating

@type

ratingValue

bestRating

reviewCount

reviewRating

@type

worstRating

ratingValue

bestRating

offers

@type

priceCurrency

price

availability

 

Google and Schema.org both provide guides and examples on how to add these properties:

Product:

Google, Schema.org

Reviews:

Google, Schema.org

Bundleproduct.rain

v2 Product Bundles

Note: Product Bundles were updated in October 2016, please update your code.

v2 bundles

Merchants are now able to add more than 5 products and product variables or product sets are now available as drop-downs within the bundles.

Enabling v2 bundles

Please make sure the gui.js core file is included in your custom.rain file and that the bundles were created under the v2 backoffice.

In your product.rain file or bundleproduct.rain file, first open a loop that checks for each bundle:

{% if product.bundles %}

{% for bundle in product.bundles %} 

Inside that loop, you will need a form and a hidden input using the following:

<form id="bundle_configure_form_{{ bundle.id }}"><input name="main_product_variant" value="{{ product.vid }}" type="hidden">

Then we need another for loop for all the products involved in the bundle

{% for bundleProduct in bundle.products %}

To display dropdowns with variants & product sets, add this snippet:

{{ bundleProduct | html_bundle_item_configure(product, bundle) | raw }}
We now need to add Stock display and an Add to cart button : 

<a href="#" class="btn add-bundle-btn" {% if not bundle.stock.available %} style="display:none"{% endif %} onclick="javascript: add_product_bundle('{{ bundle.id }}'); return false;"> {{ 'Add to cart' | t }} </a>
<span class="out-of-stock" {% if bundle.stock.available %} style="display:none"{% endif %}><em>{{ 'Out of stock' | t }}</em></span>

Make sure you close all the forms and loops correctly, go back your product.rain and make sure this if clause is present after opening your main product form:

{% if product.options or product.variants or product.custom %}
{{ product | html_product_configure | raw }}
{% else %}
<input type="hidden" name="bundle_id" id="product_configure_bundle_id" value="">
{% endif %}

Categories.rain

This will display categories from within any page.

<div class="row">
<ul>
  {% for category in shop.categories %}
  <li class="item{% if category.url is active %} active{% endif %}">
    <a class="itemLink {% if category.url is active %} active{% endif %}" href="{{ category.url | url }}" title="{{ category.title }}">{{ category.title }}</a>
    {% if category.subs %}
    <ul class="subnav">
      {% for category in category.subs %}
      <li class="subitem">
        <a class="subitemLink{% if category.url is active %} active{% endif %} " href="{{ category.url | url }}" title="{{ category.title }}">{{ category.title }}</a>
        {% if category.subs %}
        <ul class="subnav">
          {% for category in category.subs %}
          <li class="subitem">
            <a class="subitemLink{% if category.url is active %} active{% endif %}" href="{{ category.url | url }}" title="{{ category.title }}">{{ category.title }}</a>
          </li>
          {% endfor %}
        </ul>
        {% endif %}
      </li>
      {% endfor %}
    </ul>
    {% endif %}
  </li>
  {% endfor %}
</ul>
</div>    

Index.rain

Index.rain displays the home page of your theme. There are many values that are unique to the home page, accessing the featured products for example:

{% for product in featured %}
<li>{{ product.title }}</li>
{% endfor %}

You can also display the headlines users upload to Design > Headlines in a slider:

 {% for headline in headlines %}
<li>
{% if headline.image %}
{% if headline.url %}<a href="{{ headline.url | url }}" title="{{ headline.title }}">{% endif %}
<img src="{{ headline.image | url_image('', headline.title) }}" width="1138" height="400" alt="{{ headline.title }}" />
{% if headline.url %}</a>{% endif %}
{% endfor %}

Brands.rain

Use this snippet to display all shop brands at shop.url/brands

Note: the values contained within shop.brands will allow you to access brands from any page of the store, but will be limited to 10 brands that contain the most products. Use the following snippet, only in brands.rain, to display every single brand used in your shop through the /brands page.

Changes to all Asset files may require some time to get "pushed" to all users of your theme.

{% for category in brands %}
      <li>
        <a href="{{ category.url | url }}">
        {% if category.image %}
          <img src="{{ category.image | url_image('200x100x2') }}" width="150" height="75" alt="" />
        {% else %}
          <span>{{ category.title }}</span>
        {% endif %}
        </a>
      </li>
  {% endfor %}
  

Collection.rain

Collection.rain is used to display the shop’s full line of products at shop.url/collection . You can use the following snippet to add pagination within your collection pages

{% set pagination = collection | paginate %}
{% if collection.pages > 1 %}
<div>
  <div>{{ 'Page $1 of $2' | t(collection.page, collection.pages) }}</div>
  <ul>
    <li class="prev{% if pagination.previous %} enabled{% else %} disabled{% endif %}"><a href="{{ pagination.previous.url | url }}" title="{{ 'Previous page' | t }}"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
    {% for part in pagination.parts %}
    {% if part.url %} 
    <li class="number{% if part.active %} active{% endif %}"><a href="{{ part.url | url }}">{{ part.title }}</a></li>
    {% endif %}
    {% endfor %}
    <li class="next{% if pagination.next %} enabled{% else %} disabled{% endif %}"><a href="{{ pagination.next.url | url }}" title="{{ 'Next page' | t }}"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
  </ul>
</div>
{% endif %}  

 

What's next?

Have more questions? Submit a request