Products

Overview

Products can be used for displaying multiple products or a single product. Products are accessible through:

products - acces all the products in the webshop or search page.
group.products - access all the products in the current group.

ProductsDrop (multiple)

Name	Description
total_count	Products count without any filters, besides search and group.
total_size	Same as "total_count"
count	Products count with filters.
filter	Applies filter to products. See note 1.
search	Applies the search term to products. See note 2.
max_price	Returns the highest price for the products. See note 3.
preload_prices	Preloads the product prices. May slow things down if not used properly.
preload_groups	Preloads the product groups.
sales	Only display products with ongoing sales.
random_4	Returns random products. The number specifies how many products are returned. Products are only filtered by store, group, campaign or sales. No other filters apply.
sort.name_asc	Orders the returned products by "Name ascending". Supported values: "rank", "name_asc", "name_desc", "position_asc", "position_desc", "price_asc", "price_desc"

Supported filers: min price, max price, properties and option types.

It will filter the products by the first of the following params: search, term, q

Variant prices will be included. Ignores filters except search and group.

sorting products

There are two ways of sorting products. The first allows sorting based on complex values, rank and price in particular. Rank is a search rating "how well the product matches the search". Price is based on campaigns, the customer et cetera. You use this sort method by using "_" to separate the property from the direction; id est price_desc.

The second way of sorting is simpler and because of this allows sorting on multiple values at the same time. This kind of sorting is used when you separate the direction with ":", position:asc for instance.

The main advantage of this sort method is that it allows you to sort on properties, property.name_of_property:asc, and that it allows sorting on more than one thing, position:asc property.height:asc property.width:asc property.weight:asc. Valid separators are " ", ";" and "," .

The second way of sorting is also available from GET parameters. ?order[]=property.text:asc&order[]=property.number:asc will sort products first by the property named "text", then by the property named "number"; unless the liquid overrides it. ?order=property.text:asc;property.number:asc will do the same.

ProductsDrop (single)

Name	Description
available_in_country?	Is the product available in the current country?
available_on	Date when product is available in webshop
description	Wysiwyg (What you see is what you get)
files	Array with ProductFileDrop(s)
files_distinct	Array with ProductFileDrop(s). Non-repeated files.
first_image	ProductFileDrop with the first image or nil if it does not exist.
has_variants?	True or false
id	Product url
images	Array with ProductFilesDrop(s). Returns only the images from the files array.
images_distinct	Array with ProductfileDrop(s). Non-repeated images.
master	VariantDrop
name	The name of the product
option_types	Array with OptionTypeDrop
option_types_with_variants	Preload variants
option_types_with_variants_and_prices	Preloads variants and variant prices
options	Same as "option_types"
options_with_variants	Same as "option_types_with_variants"
options_with_variants_and_prices	Same as "option_types_with_variants_and_prices"
price	Lowest product variant's price for current user.
prices	Returns PricesDrop. See variants page.
product_relations_foo	Array with ProductRelationDrop
properties	Array wtih ProductPropertyDrop
property_bar	ProductPropertyDrop representing the property with the name bar.
recommend_url	Path for sending an email recommendation for the master variant.
relation_foo	Array with ProductDrop representing the products of foo relation.
shipping_category	ShippingCategoryDrop
shipping_category_id	Integer. WM3 identifier for shipping category.
short_description	Wysiwyg (What you see is what you get)
url	Path for the product
variants	Array with VariantDrop
wm3_id	Unique database Identifier
groups	Array with GroupsDrop

Show product images

{% for image in product.images %}

  <a href="#" class="thumb-image" data-product-id="{{image.product_id}}" data-variant-id="{{image.variant_id}}" data-image="{{image.url}}" data-zoom-image="{{image.url}}">

    <div class="img-wrap">

      <img src="{{ image.small }}">

    </div>

  </a>

{% endfor %}

ProductsDrop Pagination

Name	Description
all	All products
count	Products count for current filters
size	Same as "count"
limit.10.all	First 10 products
offset.10.all	Skips the first 10 products
offset.10.limit.10.all	Skips the first 10 products and returns next 10
first	First product
offset.10.first	Skips the first 10 and returns the next product
paginate	Products for current page. Defaults to 10 per page
limit.10.paginate	Products for current page. 10 per page. Don't assign this in an include, assign form group or products template.
offset.5.paginate	Products for current page. Skips first 5 and shows 20 per page
offset.5.limit.10.paginate	Products for current page. Skips first 5 and shows 10 per page
page	Current page number

Pagination snippet

<ul class="products-wrapper clearfix">

  {% for product in products.filter.limit=10.paginate %}

    ....

  {% endfor %}

</ul>



{% unless total_pagination_pages == 1 %}

  <div class="col-12">

    <div class="pagination">

    {% assign previous_paginate_url = 'previous' | paginate_url %}

    {% assign next_paginate_url = 'next' | paginate_url %}

    {% if previous_paginate_url %}

      <span class="make-child btn-grey btn-prev">

        <a href="{{ previous_paginate_url }}" data-alt="#products-wrapper">

          ‹

        </a>

      </span>

    {% endif %}

    {% if products.page > 4 %}

      <span class="make-child btn-grey">

        <a href="{{ 1 | paginate_url }}" data-alt="#products-wrapper">

          {{ 1 }}

        </a>

      </span>

      {% if products.page != 5 %}

        <span>

          ...

        </span>

      {% endif %}

    {% endif %}

    {% assign lower_limit = products.page | minus: 3 %}

    {% assign upper_limit = products.page | plus: 3 %}

    {% for i in (lower_limit..upper_limit) %}

      {% if i < 1 %}

        {% continue %}

      {% endif %}

      <span class="make-child btn-grey {% if products.page == i %} active{% endif %}">

        <a href="{{ i | paginate_url }}" data-alt="#products-wrapper">

          {{ i }}

        </a>

      </span>

      {% if i >= total_pagination_pages %}

        {% break %}

      {% endif %}

    {% endfor %}

    {% if upper_limit < total_pagination_pages %}

      {% assign aux = total_pagination_pages | minus: 1 %}

      {% if aux > upper_limit %}

        <span>

          ...

        </span>

      {% endif %}

      <span class="make-child btn-grey">

        <a href="{{ total_pagination_pages | paginate_url }}" data-alt="#products-wrapper">

          {{ total_pagination_pages }}

        </a>

      </span>

    {% endif %}

    {% if next_paginate_url %}

      <span class="make-child btn-grey btn-next">

        <a href="{{ next_paginate_url }}" data-alt="#products-wrapper">

          ›

        </a>

      </span>

    {% endif %}

    </div>

  </div>

{% endunless %}

ProductRelation

Name	Description
description	Product relation description
related_product	new ProductDrop with related product.

Product Relations

{% for pr in product.product_relations_Foo %}

  {% assign related_product = pr.related_product %}

  {{ pr.description }}

  <div>

    {{ related_product.first_image.medium }} ...

  </div>

{% endfor %}

Recommend a product/variant snippet

{% wm3form variant.recommend_url %}

  <input name="sender[email]" type="email">

  <input name="sender[name]" type="text">

  <input name="sender[description]" type="text">

  <button type="submit">Recommend</button>

{% endwm3form %}

Buy product form

{% productform variant.id %}

  <div class="product-buy" data-product-wm3-id="{{ product.wm3_id }}">

    <div class="amount">

      <h3>Qty:</h3>

      <input class="order_item_quantity" name="order_item[quantity]" type="text" value="1">

    </div>

    <button type="submit">Buy</button>

  </div>

{% endproductform %}

Show variant selection

{% if product.has_variants? %}

  {% for option in product.options %}

  {% capture type_token %}option_type_{{option.name}}{% endcapture %}

  {% assign variant_value = variant[type_token] %}

    <h3>{{ option.name }}:</h3>

    <select class="option-value">

      <option value="">Välj {{ option.name }}</option>

      {% for value in option.values %}

        <option value="{{ value.id }}" {% if variant_value.id == value.id %}selected="selected"{% endif %} >{{ value.value }}</option>

      {% endfor %}

    </select>

  {% endfor %}

{% endif %}

Updated: 2020-11-19

Liqiud basics

Modules

API

Mailer