Примеры применения Liquid — различия между версиями

Материал из Insales Wiki
Перейти к: навигация, поиск
(→‎Вывод сообщения о малости остатка на витрину)
(→‎Вывод дополнительных полей товара в шаблоне Товар)
 
(не показаны 44 промежуточные версии 7 участников)
Строка 1: Строка 1:
 
__TOC__
 
__TOC__
  
−
 
+
=Вывод различных элементов страниц магазина=
−
=Кнопка «под заказ»=
+
==Кнопка «под заказ»==
  
 
Можно показывать закончившийся товар на сайте, но при этом  оповестить покупателей о том, что его можно получить «под заказ». Реализуется эта возможность в шаблоне. Например, в одном случае должна выводиться кнопка «Купить», а в другом случае – «Под заказ»:
 
Можно показывать закончившийся товар на сайте, но при этом  оповестить покупателей о том, что его можно получить «под заказ». Реализуется эта возможность в шаблоне. Например, в одном случае должна выводиться кнопка «Купить», а в другом случае – «Под заказ»:
Строка 19: Строка 19:
 
</blockquote>
 
</blockquote>
  
−
=Задать число отображаемых товаров на странице витрины=
+
==Дополнить кнопку "Купить" полем ввода для указания количества==
 +
 
 +
Там где есть кнопка "Купить" надо в форму добавить поле "quantity"
 +
<pre>
 +
<input type="text" name="quantity" value="1"/>
 +
</pre>
 +
Сделать это можно в разделе бэк-офиса "Сайт", подразделе "Дизайн", используя редакторе тем.
 +
Для страницы категории - в шаблоне "Категория".
 +
Для страницы товара - в шаблоне "Товар".
 +
 
 +
<blockquote>
 +
<i>Предложено [http://forum.insales.ru/viewtopic.php?pid=1897#p1897 на форуме] 31.08.2010 г.</i>
 +
</blockquote>
 +
 
 +
==Добавить метки к товарам через параметры==
  
−
Можно указать число товаров на странице витрины при просмотре:
+
Можно ставить различные маркеры для товаров:
  
−
В шаблоне "Категория" в строчках:
 
 
<pre>
 
<pre>
−
<ul>
+
{% if product.properties.skidka.characteristics.first.name != null %}
−
  {% paginate products by 9 %}
+
    <span class="product_action"/>{{ product.properties.skidka.characteristics.first.name }}</span>
−
  <table class="items">
+
{% else %}
 +
    {% if product.properties.marker.characteristics.first.name == 'хит' %}<img src="{{ 'hit.png' | asset_url }}" width="57" height="56" class="product_action"/>{% endif %}
 +
    {% if product.properties.marker.characteristics.first.name == 'акция' %}<img src="{{ 'action.png' | asset_url }}" width="57" height="56" class="product_action"/>{% endif %}
 +
    {% if product.properties.marker.characteristics.first.name == 'скидка' %}<img src="{{ 'sale.png' | asset_url }}" width="57" height="56" class="product_action"/>{% endif %}
 +
    {% if product.properties.marker.characteristics.first.name == 'новинка' %}<img src="{{ 'new.png' | asset_url }}" width="57" height="56" class="product_action"/>{% endif %}
 +
{% endif %}
 +
</pre>
 +
 
 +
В параметрах (/admin/properties) создайте новые параметры для скидки и маркеры с пермалинками skidka и marker соответственно, в товарах просто выберите что вам нужно. Если ставите скидку, то указывается число в процентах, которое и выведется на сайте. Маркеры делаете какие Вам надо. В данном примере - если есть скидка, то выводится она, иначе - первый маркер который есть у товара.
 +
 
 +
<blockquote>
 +
<i>Предложено пользователем <b>poison67</b> [http://forum.insales.ru/viewtopic.php?pid=3669#p3669 на форуме] 07.04.2011 г.</i>
 +
</blockquote>
 +
 
 +
==Дополнить отображение товара списком ссылок на все товары из той же категории==
  
−
  {% tablerow product in products cols: 3 %}
+
Список ссылок на все товары из той категории, в которой находится отображаемый товар можно вывести так:
−
</ul>
+
<pre>
 +
{% assign pt = product.title %}
 +
{{collection.title}}:
 +
{% for product in collection.products %}
 +
    {% if product.title == pt %}
 +
        {{product.title}}
 +
    {%else%}
 +
        <a href="{{product.url}}">{{product.title}}</a>
 +
    {%endif%}
 +
{%endfor%}
 
</pre>
 
</pre>
−
Измените числа 9 и 3 на нужные вам, первое число - это общее число товаров на странице, второе - число колонок.
 
 
<blockquote>
 
<blockquote>
−
<i>Из FAQ</i>
+
<i>Предложено пользователем '''poison67''' [http://forum.insales.ru/viewtopic.php?pid=1048#p1048 на форуме] 23.03.2010 г.</i>
 
</blockquote>
 
</blockquote>
  
−
=Отобразить все товары категории на одной странице=
+
==Переход к предыдущему и следующему товару==
  
−
Можно указать для отображения количество товаров, заведомо большее имеющегося реально:
+
Когда покупатель заходит в категорию и идет смотреть конкретный товар, ему может захотеться посмотреть на остальные товары этой категории. Для того чтобы пользователю не приходилось возвращаться назад и там выбирать другой товар, можно в карточке товара сделать ссылки на следующий и предыдущий товары в данной категории.
  
 
<pre>
 
<pre>
−
<a href="{{collection.url}}?page_size=1000">Показать все</a>
+
    {% if collection %}           
 +
        {% if collection.previous_product %}
 +
            {{ 'Предыдущий товар' | link_to: collection.previous_product.url }}
 +
        {% endif %}
 +
        {% if collection.next_product %}
 +
            {% if collection.previous_product %} | {% endif %}
 +
            {{ 'Следующий товар' | link_to: collection.next_product.url }}
 +
        {% endif %}
 +
    {% endif %}
 
</pre>
 
</pre>
  
−
=Выводить описания категорий=  
+
Обратите внимание, что весь блок помещен в условие {% if collection %} ... {% endif %}. Это нужно в тех случаях, когда блок находится в шаблоне, в который может не передаваться  объекта категории, например в шаблоне HTML. Если блок помещен в шаблон "Категория", то проверку {% if collection %} можно убрать.
 +
 
 +
==Вывод хлебных крошек==
 +
 
 +
Тут сложность в том, что информация о текущей категории передается в URL запроса, например:
 +
<pre>http://magaz.myinsales.ru/collection/collection_permalink/product/product_permalink</pre>
 +
но к конкретному товару можно обратиться так же при помощи URL:
 +
<pre>http://magaz.myinsales.ru/product/product_permalink</pre>
 +
или
 +
<pre>http://magaz.myinsales.ru/product/product_id</pre>
  
−
Чтобы описание выводилось всегда надо в шаблоне "Категория" заменить
+
Таким образом получаем:
 
<pre>
 
<pre>
−
    {% if products.size > 0 %}
 
  
−
        <div class="right_top">
+
  {% if current_collections.size > 0 %}
−
            <h1>{% for collection in current_collections %}{% if forloop.last %}{{ collection.title }} {% else %} <a href="{{ collection.url }}">{{ collection.title }}</a> / {% endif %}{% endfor %}</h1>
+
 
−
            {% if collection.description %}
+
    <!-- если находимся в глубине каталога то выводим хлебные крошки без корня -->
−
                <div class="category_description">
+
    {% for collection in current_collections %}
−
                    {{ collection.description }}
+
      {% if collection.level > 0 %}
−
                </div>
+
        <a href="{{ collection.url }}">{{ collection.title }}</a>
−
            {% endif %}
+
      {% endif %}
−
        </div>
+
      &nbsp;/&nbsp;
−
</pre>
+
    {% endfor %}
−
на
+
  {% else %}
−
<pre>
+
 
−
    <div class="right_top">
+
    <!-- если товар вне каталога то ищем из какой коллекции этот товар -->
−
          <h1>{% for collection in current_collections %}{% if forloop.last %}{{ collection.title }} {% else %} <a href="{{ collection.url }}">{{ collection.title }}</a> / {% endif %}{% endfor %}</h1>
+
    {% if product.collections.size > 0 %}
−
           {% if collection.description %}
+
   
−
              <div class="category_description">
+
      <!-- определяем самую глубокую категорию, в которой находится товар -->
−
                  {{ collection.description }}
+
      {% assign deep_collection = product.collections.first %}
−
              </div>
+
      {% for collection in product.collections %}
−
          {% endif %}
+
        {% if deep_collection.level < collection.level %}
−
    </div>
+
           {% assign deep_collection = collection %}
 +
        {% endif %}
 +
      {% endfor %}
  
−
    {% if products.size > 0 %}
+
      <!-- выводим хлебные крошки, без корневой категории -->
 +
      {% for collection in deep_collection.current_collections %}
 +
        {% if collection.level > 0 %}
 +
          <a href="{{ collection.url }}">{{ collection.title }}</a>
 +
        {% endif %}
 +
        &nbsp;/&nbsp;
 +
      {% endfor %}
 +
    {% endif %}
 +
  {% endif %}
 
</pre>
 
</pre>
−
<blockquote>
 
−
<i>Предложено [http://forum.insales.ru/viewtopic.php?pid=1770#p1770 на форуме] 18.07.2010 г.</i>
 
−
</blockquote>
 
  
−
=Вывод товаров из произвольной категории в любом из шаблонов сайта=
+
==Вывод товаров из произвольной категории в любом из шаблонов сайта==
  
 
В качестве примера создадим отдельную скрытую категорию на сайте c путем /collection/special
 
В качестве примера создадим отдельную скрытую категорию на сайте c путем /collection/special
Строка 132: Строка 190:
 
</blockquote>
 
</blockquote>
  
−
=Проверка количества товара на складе=
+
==Вывод капчи в комментариях к товару и к статье блога==
  
−
==Проверка количества при добавлении в корзину==
+
[[Основные определения, применяемые в документации#CAPTCHA|Капча]] к товару:
 +
<pre>
 +
{% if review.captcha_enabled? %}
 +
            <div id="captcha">
 +
                <div id="captcha_challenge">
 +
                    {{ review | captcha_challenge }}
 +
                </div>
 +
                <input type="text" name="review[captcha_solution]" id="review_captcha_solution" class="textfield {% if review.errors contains 'captcha_solution' %}input-error{% endif %}">
 +
                <br/><small>Наберите текст, изображённый на картинке</small>
 +
            </div>
 +
        {% endif %}
 +
</pre>
  
−
Можно сделать проверку количества товара на складе при добавлении в корзину на уровне шаблона. Цель - блокировка заказа большего, чем есть в наличии. Назначим свои переменные - '''"есть нехватка"''' и '''"предмет нехватки"'''. Количество товара в модификации [[Objects#product|известно]], количество его помещенного в корзину - [[Objects#cart|тоже]]. В шаблоне Корзины (меню Сайт->Дизайн->Редактор) дополним код с кнопкой заказа.
+
[[Основные определения, применяемые в документации#CAPTCHA|Капча]] к статье блога:
−
 
 
−
В теме "Техника" блок кнопок оформления заказа выглядит так:
 
 
<pre>
 
<pre>
−
<div class="cart_reserve">
+
{% if comment.captcha_enabled? %}
−
  <a href="#" class="cart_update" id="cart_update" style="display:none"><img src="{{ 'recalc.gif' | asset_url }}" /></a>
+
            <div id="captcha">
−
  <input id="create_order" type="submit" value="" name="make_order" />
+
                <div id="captcha_challenge">
−
</div>
+
                    {{ comment | captcha_challenge }}
 +
                </div>
 +
                <input type="text" size="30" name="comment[captcha_solution]" id="comment_captcha_solution" class="textfield {% if comment.errors contains 'captcha_solution' %}input-error{% endif %}">
 +
                <br/><small>Наберите текст, изображённый на картинке</small>
 +
            </div>
 +
        {% endif %}
 
</pre>
 
</pre>
  
−
Заменим предыдущий кусок на этот:
+
==Вывод дополнительных полей товара в шаблоне Товар==
  
 
<pre>
 
<pre>
−
{% assign nehvatka = false %}
+
{% for field in product.fields %}
−
{% for item in cart.items %}
+
  {% if field.value != blank %}
−
    {% if item.variant.quantity < item.quantity %}
+
      <div class="title">{{field.title}}</div>
−
        {% assign nehvatka = true %}
+
      <div class="content">
−
        {% assign vinovnik = item.title %}
+
            {{field.value}}
−
    {% endif %}
+
      </div>
 +
  {% endif %}
 
{% endfor %}
 
{% endfor %}
−
{% if nehvatka %}
 
−
    <p style="margin: 20px;">Извините!<br />На складе недостаточно товара "
 
−
    <strong>{{ vinovnik }}</strong>". <br />
 
−
    Попробуйте уменьшить количество в Вашем заказе.</p>
 
−
    <div class="cart_reserve">
 
−
        <a href="#" class="cart_update" id="cart_update" style="display:none">
 
−
        <img src="{{ 'recalc.gif' | asset_url }}" /></a>
 
−
    </div>
 
−
{% else %}
 
−
    <div class="cart_reserve">
 
−
        <a href="#" class="cart_update" id="cart_update" style="display:none">
 
−
        <img src="{{ 'recalc.gif' | asset_url }}" /></a>
 
−
        <input id="create_order" type="submit" value="" name="make_order" />
 
−
    </div>
 
−
{% endif %}
 
 
</pre>
 
</pre>
  
−
Теперь, если какого-то товара заказано больше чем есть на складе, умный код предупредит об этом и уберет кнопку чекаута.
+
=Задание вида отображения=
 +
==Задать число отображаемых товаров на странице витрины==
 +
 
 +
Можно указать число товаров на странице витрины при просмотре:
  
−
Если тема шаблона - не "Техника", то изменяете блоки
+
В шаблоне "Категория" в строчках:
 
<pre>
 
<pre>
−
<div class="cart_reserve">
+
<ul>
−
</pre>  
+
  {% paginate products by 9 %}
−
сообразно коду кнопок в шаблоне.
+
  <table class="items">
 +
 
 +
  {% tablerow product in products cols: 3 %}
 +
</ul>
 +
</pre>
 +
Измените числа 9 и 3 на нужные вам, первое число - это общее число товаров на странице, второе - число колонок.
 
<blockquote>
 
<blockquote>
−
<i>Предложено пользователем '''Victor''' [http://forum.insales.ru/viewtopic.php?pid=902#p902 на форуме] 21.02.2010 г.</i>
+
<i>Из FAQ</i>
 
</blockquote>
 
</blockquote>
  
−
==Показ максимально возможного для заказа количества товара==
+
==Отобразить все товары категории на одной странице==
 +
 
 +
Можно указать для отображения количество товаров, заведомо большее имеющегося реально:
 +
 
 +
<pre>
 +
<a href="{{collection.url}}?page_size=100">Показать все</a>
 +
</pre>
  
−
Можно проверить количество товара на складе при добавлении в корзину и показать максимально возможное для заказа количество товара.
+
Однако, больше 100 товаров на одной странице вывести не получится.
  
−
Это вариант предыдущего примера для шаблона «Техника»:
+
==Дать возможность посетителю выбрать количество товаров на странице==
  
 +
В шаблоне категория:
 
<pre>
 
<pre>
−
{% assign nehvatka = false %}
+
<div class="black-standart"><br />
−
{% for item in cart.items %}
+
            Страницы:&nbsp;&nbsp;
−
    {% if item.variant.quantity < item.quantity %}
+
            {% for part in paginate.parts %}
−
        {% assign nehvatka = true %}
+
            {% if part.is_link %}
−
    {% endif %}
+
            {{ part.title | link_to: part.url }}&nbsp;&nbsp;|&nbsp;
−
{% endfor %}
+
            {% else %}
−
{% if nehvatka %}
+
            <strong>{{ part.title }}</strong>&nbsp;&nbsp;|&nbsp;
−
<h2>Извините, но на складе недостаточно товара:</h2>
+
            {% endif %}
−
<ul class="error_list">
+
            {% endfor %}
−
    {% for item in cart.items %}
+
             <a href="{{collection.url}}?page_size=100">Показать все</a>&nbsp;&nbsp;|
−
        {% if item.variant.quantity < item.quantity %}
+
          </div>
−
             <li>{{item.title}}<br/><em>Максимальное доступное количество: <span>{{item.variant.quantity}}</span></em></li>
+
</pre>
−
        {% endif %}
+
Вместо ''показать все'' можете ставить что угодно, но на одной странице не может быть отображено больше 100 товаров за раз. Можно заменить на ''показать 50'', тогда соответственно  и ''page_size=50''. Можете несколько таких записей сделать: ''показать 25, показать 50, показать все''.
−
    {% endfor %}
+
 
−
</ul>
+
<blockquote>
−
<div class="cart_reserve">
+
<i>Предложено пользователем '''maritalia''' [http://forum.insales.ru/viewtopic.php?pid=2897#p2897 на форуме] 26.01.2011 г.</i>
−
    <a href="." class="cart_update" id="cart_update" style="display: none;">Пересчитать стоимость</a>
+
</blockquote>
−
    <div class="clear"></div>
+
 
−
</div>
+
Можно это сделать как dropdown menu:
−
{% else %}
+
<pre>
−
    <div class="cart_reserve">
+
<select name="page_size" id="page_size" onchange="$('#sortForm').submit();" class="params" style="width: 100px;">
−
        <a href="." class="cart_update" id="cart_update" style="display: none;">Пересчитать стоимость</a>
+
              <option value="15">15 товаров</option>
−
        <input class="create_order" id="create_order" type="submit" value="Оформить заказ" name="make_order"/>
+
              <option value="30">30 товаров</option>
−
        <div class="clear"></div>
+
              <option value="60">60 товаров</option>
−
    </div>
+
              <option selected="" value="100">Все</option>
−
{% endif %}
+
</select>
 
</pre>
 
</pre>
  
 
<blockquote>
 
<blockquote>
−
<i>Предложено пользователем '''poison67''' [http://forum.insales.ru/viewtopic.php?pid=938#p938 на форуме] 02.03.2010 г.</i>
+
<i>Предложено пользователем '''st.trophey''' [http://forum.insales.ru/viewtopic.php?pid=2940#p2940 на форуме] 26.01.2011 г.</i>
 
</blockquote>
 
</blockquote>
  
−
'''Примечание:''' ''напрямую указывать точный остаток всех товаров [http://forum.insales.ru/viewtopic.php?pid=950#p950 может быть вредно для бизнеса]''
+
Или так:
 +
<pre>
 +
<form method="get" id="sortForm">
  
−
==Вывод сообщения о малости остатка на витрину==
+
      На странице по:
 +
            <select name="page_size" id="page_size" onchange="$('#sortForm').submit();" class="params" style="">
 +
              {{ "18" | select_option: page_size, "18 товаров" }}
 +
              {{ "36"  | select_option: page_size, "36 товара" }}
 +
              {{ "54"  | select_option: page_size, "54 товаров" }}
 +
              {{ "72"  | select_option: page_size, "72 товаров" }}
 +
            </select>
 +
   
 +
    </form>
 +
</pre>
  
−
Проверка суммарного количества оставшихся модификаций товара на складе и, если количество менее заданного - вывод сообщения об оставшемся количестве возле кнопки добавления в корзину.
+
==Выводить описания категорий==
  
−
Сделаем расчет количества. В шаблоне Товара (меню Сайт->Дизайн->Редактор->Товар), ищем код кнопки добавления в корзину:
+
Чтобы описание выводилось всегда надо в шаблоне "Категория" заменить
 
<pre>
 
<pre>
−
<form action="{{ cart_url }}" method="post" id="order">
+
    {% if products.size > 0 %}
−
<div>
+
 
−
здесь
+
        <div class="right_top">
−
куча
+
            <h1>{% for collection in current_collections %}{% if forloop.last %}{{ collection.title }} {% else %} <a href="{{ collection.url }}">{{ collection.title }}</a> / {% endif %}{% endfor %}</h1>
−
текста
+
            {% if collection.description %}
−
<input class="buy add_button" type="submit" value="Добавить в корзину" />
+
                <div class="category_description">
−
</div>
+
                    {{ collection.description }}
 +
                </div>
 +
            {% endif %}
 +
        </div>
 +
</pre>
 +
на
 +
<pre>
 +
    <div class="right_top">
 +
          <h1>{% for collection in current_collections %}{% if forloop.last %}{{ collection.title }} {% else %} <a href="{{ collection.url }}">{{ collection.title }}</a> / {% endif %}{% endfor %}</h1>
 +
          {% if collection.description %}
 +
              <div class="category_description">
 +
                  {{ collection.description }}
 +
              </div>
 +
          {% endif %}
 +
    </div>
 +
 
 +
    {% if products.size > 0 %}
 
</pre>
 
</pre>
−
сразу после него добавляем:
+
<blockquote>
 +
<i>Предложено [http://forum.insales.ru/viewtopic.php?pid=1770#p1770 на форуме] 18.07.2010 г.</i>
 +
</blockquote>
 +
 
 +
==Не выводить пустых категорий==
 
<pre>
 
<pre>
−
{% assign panic = '' %}
+
{% if collection.products.size > 0 or collection.subcollections.size > 0 %}
−
{% for variant in product.variants %}
+
...тут вывод категории в списке...
−
    {% if variant.available %}
 
−
        {% capture panic %}
 
−
            {% if variant.quantity < 3 %}
 
−
                {{variant.quantity|times:5|append:panic}}
 
−
            {% else %}
 
−
                {{variant.quantity|times:300|append:panic}}
 
−
            {% endif%}
 
−
        {% endcapture %}
 
−
        {% assign panic = {{panic}} %}
 
−
    {% endif %}
 
−
{% endfor %}
 
−
{% if panic.size > 0 and panic.size < 4 %}
 
−
    <h3>Торопитесь!<br />осталось {{panic|size}} шт!</h3>
 
 
{% endif %}
 
{% endif %}
 
</pre>
 
</pre>
 +
<blockquote>
 +
<i>Предложено[http://forum.insales.ru/viewtopic.php?pid=3300#p3300 на форуме] 09.03.2011 г.</i>
 +
</blockquote>
  
−
Теперь, если какой-то товар есть в количестве менее 4 шт., то будет выводиться сообщение возле кнопки добавления его в корзину.
 
  
−
<blockquote>
 
−
<i>Предложено пользователем '''Victor''' [http://forum.insales.ru/viewtopic.php?pid=950#p950 на форуме] 05.03.2010 г.</i>
 
−
</blockquote>
 
  
 
=Цена товара=
 
=Цена товара=
Строка 310: Строка 400:
 
</blockquote>
 
</blockquote>
  
−
=Использование параметров товаров в качестве фильтров=
+
=Использование фильтров=
 +
==Использование свойств товаров в качестве фильтров==
 +
Можно вывести все свойства товаров из коллекции в качестве фильтров.
 +
Пример:
 +
<pre>
 +
{% for option in collection.options %}
 +
  {% if option.values.size > 1 %}
 +
    <td>
 +
    {{option.title}}:<br>
 +
    <select name="options[{{option.id}}][]">
 +
    <option value="">не важно</option>
 +
      {% for value in option.values %}
 +
        <option value="{{value.id}}" {% if value.selected %}selected{% endif %}>{{value.title}}</option>
 +
      {% endfor %}
 +
    </select>
 +
    </td>
 +
  {% endif %}
 +
{% endfor %}
 +
</pre>
 +
 
 +
==Использование параметров товаров в качестве фильтров==
 
Можно вывести все параметры товаров из коллекции в качестве фильтров.  
 
Можно вывести все параметры товаров из коллекции в качестве фильтров.  
 
Для темы "Зеленый лист" это выглядит так:
 
Для темы "Зеленый лист" это выглядит так:
Строка 343: Строка 453:
 
</blockquote>
 
</blockquote>
  
−
=Как добавить товар в корзину=
+
==Использование фильтра в комбинации {% if %}==
 +
Есть следующие варианты:
 +
<pre>
 +
{% if collection.title contains 'string1' %} ..
 +
</pre>
 +
<pre>
 +
{% capture collection_title %}{{collection.title | truncatewords:1,''}}{% endcapture %}
 +
    {% if collection_title == 'string1' %}
 +
</pre>
 +
 
 +
<blockquote>
 +
<i>Предложено [http://forum.insales.ru/viewtopic.php?pid=2663#p2663 на форуме] 28.12.2010г.</i>
 +
</blockquote>
 +
 
 +
==Использование ступенчатого фильтра==
 +
 
 +
 
 +
Скрипт, отправляющий данные формы при выборе варианта (в начале шаблона, в котором будет использоваться фильтр):
 +
 
 +
<pre>
 +
<script>
 +
  $(function(){
 +
    $(".characteristic").change(function(){
 +
      $("form#characteristics").submit();
 +
    });
 +
  });
 +
</script>
 +
</pre>
 +
 
 +
Собственно, сам фильтр:
 +
 
 +
<pre>
 +
<form id="characteristics" action="{{collection.url}}" method="get">
 +
        <table>
 +
          {% for property in collection.properties %}
 +
          <tr>
 +
            <td class="accent">
 +
              <b>{{property.name}} : </b>
 +
            </td>
 +
            <td>
 +
            <select name="characteristics[]" class="characteristic">
 +
              <option value="">выберите</option>
 +
              {% for characteristic in property.characteristics %}
 +
                <option value="{{characteristic.id}}" {% if characteristic.current? %} selected="selected" {% endif %}>{{characteristic.name}} ({{characteristic.products_count}})</option>
 +
              {% endfor %}
 +
            </select>
 +
            </td>
 +
          </tr>
 +
          {% endfor%}
 +
        </table>
 +
    </form>
 +
</pre>
 +
 
 +
=Работа с корзиной=
 +
==Как добавить товар в корзину==
  
 
Для того чтобы добавить товар в корзину нужно оправить пост запрос. Простой ссылкой тут не отделаться.  
 
Для того чтобы добавить товар в корзину нужно оправить пост запрос. Простой ссылкой тут не отделаться.  
Строка 391: Строка 555:
 
</blockquote>
 
</blockquote>
  
−
=Дополнить кнопку "Купить" полем ввода для указания количества=
+
==Вывод информации о скидке в корзине==
  
−
Там где есть кнопка купить надо в форму добавить поле "quantity"
 
 
<pre>
 
<pre>
−
<input type="text" name="quantity" value="1"/>
+
{% for discount in cart.discounts %}
 +
{{ discount.description }} - {{ discount.amount | money }}
 +
{% endfor %}
 
</pre>
 
</pre>
−
Сделать это можно в разделе бэк-офиса "Сайт", подразделе "Дизайн", используя редакторе тем.
+
 
−
Для страницы категории - в шаблоне "Категория".
+
<b>discount.amount | money</b> - выводит сумму скидки в рублях.<br>
−
Для страницы товара - в шаблоне "Товар".
+
<b>discount.description</b> - выводит описание скидки.
  
 
<blockquote>
 
<blockquote>
−
<i>Предложено [http://forum.insales.ru/viewtopic.php?pid=1897#p1897 на форуме] 31.08.2010 г.</i>
+
<i>Предложено пользователем <b>poison67</b> [http://forum.insales.ru/viewtopic.php?pid=3600#p3600 на форуме] 30.03.2011 г. </i>
 
</blockquote>
 
</blockquote>
  
−
=Дополнить отображение товара списком ссылок на все товары из той же категории=
+
==Вывод остатков и текущей суммы заказа в корзине в layout с помощью javascript==
 +
 
 +
Этот метод имеет два преимущества - при переходе назад по истории браузера количество отображаемых товаров в корзине не меняется и такой способ снижает нагрузку на сервер, особенно если у магазина много посетителей и они кладут в корзину много товаров.
 +
 
 +
Нужно обновить jquery до версии 1.4.3, добавить скрипт [http://plugins.jquery.com/project/ooCookie jquery.cookie.js], затем вставить функцию
  
−
Список ссылок на все товары из той категории, в которой находится отображаемый товар можно вывести так:
 
 
<pre>
 
<pre>
−
{% assign pt = product.title %}
+
function set_products_count(count) {
−
{{collection.title}}:
+
            $("#cart_items_count").html(count);
−
{% for product in collection.products %}
+
            var product = 'товаров';
−
    {% if product.title == pt %}
+
            if (count == 1) {
−
         {{product.title}}
+
                product = 'товар';
−
    {%else%}
+
            } else if (count == 2 || count == 3 || count == 4) {
−
         <a href="{{product.url}}">{{product.title}}</a>
+
                product = 'товара';
−
    {%endif%}
+
            }
−
{%endfor%}
+
            $("#word_product").html(product);
 +
        }
 +
 
 +
        var cart = $.parseJSON($.cookie('cart'));
 +
        var price  = 0;
 +
        var count = 0;   
 +
         if (cart) {
 +
            price = cart.total_price;
 +
            $.each(cart.order_lines, function(index, order_line) {
 +
                count += order_line.quantity;
 +
            });
 +
        }
 +
         $("#cart_total_price").html(InSales.formatMoney(price, "{{money_with_currency_format}}"));
 +
        set_products_count(count);
 
</pre>
 
</pre>
−
<blockquote>
 
−
<i>Предложено пльзователем '''poison67''' [http://forum.insales.ru/viewtopic.php?pid=1048#p1048 на форуме] 23.03.2010 г.</i>
 
−
</blockquote>
 
  
 +
в шаблон HTML перед объявлением функции updateCart <pre>var updateCart = function(response)</pre>
  
 +
При этом убрать liquid-вывод суммы и кол-ва товаров в корзине (оставить элементы пустыми) и проследить чтобы сумма заказа, кол-во товаров в корзине и слово "товар(ов)" находились в элементах с id cart_total_price, cart_items_count и word_product соответственно.
 +
Например:
  
−
=Переход к предыдущему и следующему товару=
+
<pre>
 +
В Вашей корзине: <a href="{{ cart_url }}"><u><span id="cart_items_count"></span> <span id="word_product"></span></u></a><br />
 +
    <a href="{{ cart_url }}">На сумму <span id="cart_total_price"></span>.</a>
 +
</pre>
  
−
Когда покупатель заходит в категорию и идет смотреть конкретный товар, ему может захотеться посмотреть на остальные товары этой категории. Для того чтобы пользователю не приходилось возвращаться назад и там выбирать другой товар, можно в карточке товара сделать ссылки на следующий и предыдущий товары в данной категории.
+
=Встроить отслеживание почтовых отправлений на сайт=
  
 +
Нужно вот этот код вставить на страничку:
 
<pre>
 
<pre>
−
    {% if collection %}           
+
<center><iframe src="http://info.russianpost.ru/servlet/post_item" frameborder="0" scrolling="no" height="700" idth="700"></iframe></center>
−
        {% if collection.previous_product %}
 
−
            {{ 'Предыдущий товар' | link_to: collection.previous_product }}
 
−
        {% endif %}
 
−
        {% if collection.next_product %}
 
−
            {% if collection.previous_product %} | {% endif %}
 
−
            {{ 'Следующий товар' | link_to: collection.next_product }}
 
−
        {% endif %}
 
−
    {% endif %}
 
 
</pre>
 
</pre>
 +
Естественно, что ''height'' и ''width'' ставим по своему усмотрению.
 +
Реализация на сайте: http://www.maritalia.ru/page/tracking
  
−
Обратите внимание, что весь блок помещен в условие {% if collection %} ... {% endif %}. Это нужно в тех случаях, когда блок находится в шаблоне, в который может не передаваться  объекта категории, например в шаблоне HTML. Если блок помещен в шаблон "Категория", то проверку {% if collection %} можно убрать.
+
<i>Предложено пользователем <b>maritalia</b> [http://forum.insales.ru/viewtopic.php?pid=2773#p2773 на форуме] 17.01.2011 г. </i>
 +
</blockquote>
  
−
=Вывод хлебных крошек=
+
=Полный урл к странице с товаром=
  
−
Тут сложность в том, что информация о текущей категории передается в URL запроса, например:  
+
Чтобы получить полный урл к странице с товаром можете в в шаблоне layout определить сами такую переменную: <pre>{% assign baseurl = ''http://myshop.myinsales.ru" %}</pre> и в последующем использовать: <pre>{{ baseurl }}{{ product.url }}</pre>
−
<pre>http://magaz.myinsales.ru/collection/collection_permalink/product/product_permalink</pre>
 
−
но к конкретному товару можно обратиться так же при помощи URL:
 
−
<pre>http://magaz.myinsales.ru/product/product_permalink</pre>
 
−
или
 
−
<pre>http://magaz.myinsales.ru/product/product_id</pre>
 
  
−
Таким образом получаем:
+
А можно и просто написать:
 
<pre>
 
<pre>
 +
{{ account.url }}{{ product.url }}
 +
</pre>
  
−
  {% if current_collections.size > 0 %}
+
=Обращение к отдельному свойству или значению свойства товара=
 +
 
 +
<pre>
 +
product.options - массив свойств товара,
 +
option.option_values - массив значений свойств определенного свойства
 +
</pre>  
  
−
    <!-- если находимся в глубине каталога то выводим хлебные крошки без корня -->
+
К i-му элементу массива можно обращаться следующим образом - array[i].
−
    {% for collection in current_collections %}
 
−
      {% if collection.level > 0 %}
 
−
        <a href="{{ collection.url }}">{{ collection.title }}</a>
 
−
      {% endif %}
 
−
      &nbsp;/&nbsp;
 
−
    {% endfor %}
 
−
  {% else %}
 
  
−
    <!-- если товар вне каталога то ищем из какой коллекции этот товар -->
+
Таким образом, получаем:
−
    {% if product.collections.size > 0 %}
 
−
   
 
−
      <!-- определяем самую глубокую категорию, в которой находится товар -->
 
−
      {% assign deep_collection = product.collections.first %}
 
−
      {% for collection in product.collections %}
 
−
        {% if deep_collection.level < collection.level %}
 
−
          {% assign deep_collection = collection %}
 
−
        {% endif %}
 
−
      {% endfor %}
 
  
−
      <!-- выводим хлебные крошки, без корневой категории -->
+
<pre>
−
      {% for collection in deep_collection.current_collections %}
+
{{product.variants[0].option_values[0].title}} - название первого значения первого свойства текущего товара
−
        {% if collection.level > 0 %}
 
−
          <a href="{{ collection.url }}">{{ collection.title }}</a>
 
−
        {% endif %}
 
−
        &nbsp;/&nbsp;
 
−
      {% endfor %}
 
−
    {% endif %}
 
−
  {% endif %}
 
 
</pre>
 
</pre>
  
−
=Полный урл к странице с товаром=
 
  
−
Чтобы получить полный урл к странице с товаром можете в в шаблоне layout определить сами такую переменную: <pre>{% assign baseurl = ''http://myshop.myinsales.ru" %}</pre> и в последующем использовать: <pre>{{ baseurl }}{{ product.url }}</pre>
+
=Добавление пагинации какой-либо категории на главной или иных страницах типа page=
  
−
А можно и просто написать:
 
 
<pre>
 
<pre>
−
{{ account.url }}{{ product.url }}
+
{% assign products = collections.frontpage.products %}
 +
{% paginate products by 8 %}
 +
{% for product in products %}
 +
{% include 'product_box' %}
 +
{% endfor %}
 +
{{paginate | default_pagination}}
 +
{% endpaginate %}
 
</pre>
 
</pre>

Текущая версия на 07:15, 11 декабря 2015

Содержание

Вывод различных элементов страниц магазина

Кнопка «под заказ»

Можно показывать закончившийся товар на сайте, но при этом оповестить покупателей о том, что его можно получить «под заказ». Реализуется эта возможность в шаблоне. Например, в одном случае должна выводиться кнопка «Купить», а в другом случае – «Под заказ»: 

     {% if product.available == true %}
          <input src="{{ 'buy.gif' | asset_url }}" type="image" />
     {% else %}
          <input src="{{ 'wait.gif' | asset_url }}" type="image" />
     {% endif %}

Такая логика работы поддерживается в стандартном шаблоне «Техника». В остальных шаблонах и в собственном дизайне её можно добавить, используя приведённый выше кусочек кода (естественно адаптировав его под себя).

Предложено в статье Какие товары показывать на сайте?

Дополнить кнопку "Купить" полем ввода для указания количества

Там где есть кнопка "Купить" надо в форму добавить поле "quantity" 

<input type="text" name="quantity" value="1"/>

Сделать это можно в разделе бэк-офиса "Сайт", подразделе "Дизайн", используя редакторе тем. Для страницы категории - в шаблоне "Категория". Для страницы товара - в шаблоне "Товар".

Предложено на форуме 31.08.2010 г.

Добавить метки к товарам через параметры

Можно ставить различные маркеры для товаров: 

{% if product.properties.skidka.characteristics.first.name != null %}
    <span class="product_action"/>{{ product.properties.skidka.characteristics.first.name }}</span>
{% else %}
    {% if product.properties.marker.characteristics.first.name == 'хит' %}<img src="{{ 'hit.png' | asset_url }}" width="57" height="56" class="product_action"/>{% endif %}
    {% if product.properties.marker.characteristics.first.name == 'акция' %}<img src="{{ 'action.png' | asset_url }}" width="57" height="56" class="product_action"/>{% endif %}
    {% if product.properties.marker.characteristics.first.name == 'скидка' %}<img src="{{ 'sale.png' | asset_url }}" width="57" height="56" class="product_action"/>{% endif %}
    {% if product.properties.marker.characteristics.first.name == 'новинка' %}<img src="{{ 'new.png' | asset_url }}" width="57" height="56" class="product_action"/>{% endif %}
{% endif %}

В параметрах (/admin/properties) создайте новые параметры для скидки и маркеры с пермалинками skidka и marker соответственно, в товарах просто выберите что вам нужно. Если ставите скидку, то указывается число в процентах, которое и выведется на сайте. Маркеры делаете какие Вам надо. В данном примере - если есть скидка, то выводится она, иначе - первый маркер который есть у товара.

Предложено пользователем poison67 на форуме 07.04.2011 г.

Дополнить отображение товара списком ссылок на все товары из той же категории

Список ссылок на все товары из той категории, в которой находится отображаемый товар можно вывести так: 

{% assign pt = product.title %}
{{collection.title}}:
{% for product in collection.products %}
    {% if product.title == pt %}
        {{product.title}}
    {%else%}
        <a href="{{product.url}}">{{product.title}}</a>
    {%endif%}
{%endfor%}

Предложено пользователем poison67 на форуме 23.03.2010 г.

Переход к предыдущему и следующему товару

Когда покупатель заходит в категорию и идет смотреть конкретный товар, ему может захотеться посмотреть на остальные товары этой категории. Для того чтобы пользователю не приходилось возвращаться назад и там выбирать другой товар, можно в карточке товара сделать ссылки на следующий и предыдущий товары в данной категории. 

    {% if collection %}            
        {% if collection.previous_product %}
            {{ 'Предыдущий товар' | link_to: collection.previous_product.url }}
        {% endif %}
        {% if collection.next_product %}
            {% if collection.previous_product %} | {% endif %}
            {{ 'Следующий товар' | link_to: collection.next_product.url }}
        {% endif %}
    {% endif %}

Обратите внимание, что весь блок помещен в условие {% if collection %} ... {% endif %}. Это нужно в тех случаях, когда блок находится в шаблоне, в который может не передаваться объекта категории, например в шаблоне HTML. Если блок помещен в шаблон "Категория", то проверку {% if collection %} можно убрать.

Вывод хлебных крошек

Тут сложность в том, что информация о текущей категории передается в URL запроса, например: 

http://magaz.myinsales.ru/collection/collection_permalink/product/product_permalink

но к конкретному товару можно обратиться так же при помощи URL: 

http://magaz.myinsales.ru/product/product_permalink

или 

http://magaz.myinsales.ru/product/product_id

Таким образом получаем: 


  {% if current_collections.size > 0 %}

    <!-- если находимся в глубине каталога то выводим хлебные крошки без корня -->
    {% for collection in current_collections %}
      {% if collection.level > 0 %}
        <a href="{{ collection.url }}">{{ collection.title }}</a>
      {% endif %}
       / 
    {% endfor %}
  {% else %}

    <!-- если товар вне каталога то ищем из какой коллекции этот товар -->
    {% if product.collections.size > 0 %}
     
      <!-- определяем самую глубокую категорию, в которой находится товар -->
      {% assign deep_collection = product.collections.first %}
      {% for collection in product.collections %}
        {% if deep_collection.level < collection.level %}
          {% assign deep_collection = collection %}
        {% endif %}
      {% endfor %}

      <!-- выводим хлебные крошки, без корневой категории -->
      {% for collection in deep_collection.current_collections %}
        {% if collection.level > 0 %}
          <a href="{{ collection.url }}">{{ collection.title }}</a>
        {% endif %}
         / 
      {% endfor %}
    {% endif %}
  {% endif %}

Вывод товаров из произвольной категории в любом из шаблонов сайта

В качестве примера создадим отдельную скрытую категорию на сайте c путем /collection/special

В эту категорию мы будем добавлять товары, которые хотим вывести на главной странице. Напомним, что на сайте один товар может быть в нескольких категориях, поэтому для вывода уже существующих товаров нужно всего лишь разместить их и в этой спец-категории.

Теперь добавим код для вывода товаров в шаблон главной страницы. В самом простейшем виде: 

{% for product in collections.special.products %}
{{ product.title }}
{% endfor %}

В качестве идентификатора категории используется ее пермалинк (постоянная ссылка), который мы указали в пути, в данном случае «special». Но этот пример выведет всего лишь список названий товаров, мы же хотим вывести полноценный список товаров с картинками, краткими описаниями и кнопками «Купить» и «Подробнее». Для этого на примере шаблона «Зеленый лист» скопируем код из шаблона «Категория» и слегка модифицируем его: 

<div class="view-catalog">
<TABLE id="products-in-collection">
{% tablerow product in collections.special.products cols: 3 %}
<div class="node node-teaser" style="height: 300px;">
<div class="node-inner" id="product_{{ product.id }}" style="height: 230px; overflow: hidden;">
<div class="img"><a href="{{ product.url }}"><img src="{{ product.first_image.thumb_url }}" alt="[IMG]" title="{{ product.title | escape }}" /></a></div>
<h3 class="title"><a href="{{ product.url }}">{{ product.title | escape }}</a></h3>
<div class="content">
<p class="short-description">{{ product.short_description | truncate:100 }}</p>
</div>
</div>
<div class="buyzone">
<div class="price">{{ product.sale_price | money }}</div>
{% if product.variants.size == 1 %}
<form action="{{ cart_url }}" method="post" id="order">
<input type="hidden" name="variant_id" value="{{ product.variants.first.id }}">
<input type="submit" class="buy" value="" title="Купить"/>
<div class="readmore"><a href="{{ product.url }}">подробнее...</a></div>
</form>
{% else %}
<a href="{{ product.url }}" class="buy" title="Купить"></a>
<div class="readmore"><a href="{{ product.url }}">подробнее...</a></div>
{% endif %}
<BR class='clear'>
</div>
<BR class="clear">
</div>
{% endtablerow %}
</TABLE>
</div>

Мы убрали постраничный вывод и вывод текущей категории. Вставляем его в шаблон главной страницы сразу после блока: 

<div class="content">{{ page.content }}</div>

Таким же образом можно выводить товары из произвольной категории в любом из шаблонов сайта.

Предложено в статье Вывод товаров на главной странице

Вывод капчи в комментариях к товару и к статье блога

Капча к товару: 

{% if review.captcha_enabled? %}
            <div id="captcha">
                <div id="captcha_challenge">
                    {{ review | captcha_challenge }}
                </div>
                <input type="text" name="review[captcha_solution]" id="review_captcha_solution" class="textfield {% if review.errors contains 'captcha_solution' %}input-error{% endif %}">
                <br/><small>Наберите текст, изображённый на картинке</small>
            </div>
        {% endif %}

Капча к статье блога: 

{% if comment.captcha_enabled? %}
            <div id="captcha">
                <div id="captcha_challenge">
                    {{ comment | captcha_challenge }}
                </div>
                <input type="text" size="30" name="comment[captcha_solution]" id="comment_captcha_solution" class="textfield {% if comment.errors contains 'captcha_solution' %}input-error{% endif %}">
                <br/><small>Наберите текст, изображённый на картинке</small>
            </div>
        {% endif %}

Вывод дополнительных полей товара в шаблоне Товар

{% for field in product.fields %}
   {% if field.value != blank %}
       <div class="title">{{field.title}}</div>
       <div class="content">
            {{field.value}}
       </div>
   {% endif %}
{% endfor %}

Задание вида отображения

Задать число отображаемых товаров на странице витрины

Можно указать число товаров на странице витрины при просмотре:

В шаблоне "Категория" в строчках: 

<ul>
  {% paginate products by 9 %}
  <table class="items">

  {% tablerow product in products cols: 3 %}
</ul>

Измените числа 9 и 3 на нужные вам, первое число - это общее число товаров на странице, второе - число колонок.

Из FAQ

Отобразить все товары категории на одной странице

Можно указать для отображения количество товаров, заведомо большее имеющегося реально: 

<a href="{{collection.url}}?page_size=100">Показать все</a>

Однако, больше 100 товаров на одной странице вывести не получится.

Дать возможность посетителю выбрать количество товаров на странице

В шаблоне категория: 

<div class="black-standart"><br />
            Страницы:  
            {% for part in paginate.parts %}
            {% if part.is_link %}
            {{ part.title | link_to: part.url }}  | 
            {% else %}
            <strong>{{ part.title }}</strong>  | 
            {% endif %}
            {% endfor %}
            <a href="{{collection.url}}?page_size=100">Показать все</a>  |
          </div>

Вместо показать все можете ставить что угодно, но на одной странице не может быть отображено больше 100 товаров за раз. Можно заменить на показать 50, тогда соответственно и page_size=50. Можете несколько таких записей сделать: показать 25, показать 50, показать все.

Предложено пользователем maritalia на форуме 26.01.2011 г.

Можно это сделать как dropdown menu: 

<select name="page_size" id="page_size" onchange="$('#sortForm').submit();" class="params" style="width: 100px;">
              <option value="15">15 товаров</option>
              <option value="30">30 товаров</option>
              <option value="60">60 товаров</option>
              <option selected="" value="100">Все</option>
</select>

Предложено пользователем st.trophey на форуме 26.01.2011 г.

Или так: 

<form method="get" id="sortForm">

      На странице по:
            <select name="page_size" id="page_size" onchange="$('#sortForm').submit();" class="params" style="">
              {{ "18" | select_option: page_size, "18 товаров" }}
              {{ "36"  | select_option: page_size, "36 товара" }}
              {{ "54"  | select_option: page_size, "54 товаров" }}
              {{ "72"  | select_option: page_size, "72 товаров" }}
            </select>
     
    </form>

Выводить описания категорий

Чтобы описание выводилось всегда надо в шаблоне "Категория" заменить 

    {% if products.size > 0 %}

        <div class="right_top">
            <h1>{% for collection in current_collections %}{% if forloop.last %}{{ collection.title }} {% else %} <a href="{{ collection.url }}">{{ collection.title }}</a> / {% endif %}{% endfor %}</h1>
            {% if collection.description %}
                <div class="category_description">
                    {{ collection.description }}
                </div>
            {% endif %}
        </div>

на 

    <div class="right_top">
          <h1>{% for collection in current_collections %}{% if forloop.last %}{{ collection.title }} {% else %} <a href="{{ collection.url }}">{{ collection.title }}</a> / {% endif %}{% endfor %}</h1>
          {% if collection.description %}
              <div class="category_description">
                  {{ collection.description }}
              </div>
          {% endif %}
    </div>

    {% if products.size > 0 %}

Предложено на форуме 18.07.2010 г.

Не выводить пустых категорий

{% if collection.products.size > 0 or collection.subcollections.size > 0 %}
...тут вывод категории в списке...
{% endif %}

Предложенона форуме 09.03.2011 г.


Цена товара

Размещение товаров в категории в порядке возрастания цены

Если в теме поддерживается сортировка, то можно по умолчанию товары в каталоге сортировать по возрастанию цены. Нужно в шаблоне HTML заменить 

<a href="{{ collection.url }}" 
{% if collection.current? %}
    class="active"
{% endif %}>

на 

<a href="{{ collection.url }}?order=price" 
{% if collection.current? %}
    class="active"
{% endif %}>

Предложено на форуме 16.10.2009г.

Показ диапазона цен всех модификаций товара

Если у модификаций одного товара разная цена, то можно в категории вывести диапазон цен: минимальная - максимальная. Для этого в шаблоне "Категория" и в шаблоне "Главная" надо найти: 

      {{ product.price | money }}

и заменить на: 

 {% if product.price_varies? %}
        {{ product.price_min | money }} - {{ product.price_max | money }}
    {% else %}
        {{ product.price | money }}
 {% endif %}

Предложено на форуме 03.08.2010г.

Использование фильтров

Использование свойств товаров в качестве фильтров

Можно вывести все свойства товаров из коллекции в качестве фильтров. Пример: 

{% for option in collection.options %}
  {% if option.values.size > 1 %}
    <td>
    {{option.title}}:<br>
    <select name="options[{{option.id}}][]">
     <option value="">не важно</option>
       {% for value in option.values %}
         <option value="{{value.id}}" {% if value.selected %}selected{% endif %}>{{value.title}}</option>
       {% endfor %}
    </select>
    </td>
  {% endif %}
{% endfor %}

Использование параметров товаров в качестве фильтров

Можно вывести все параметры товаров из коллекции в качестве фильтров. Для темы "Зеленый лист" это выглядит так: 

<DIV id="tag-filters">
    {% for property in collection.properties %}
        <DIV class="property-line">
            <DIV class="properties">
                {{property.name}}
            </DIV>
            <DIV class="separator">:
            </DIV>
            <DIV class="characteristics">
            {% for characteristic in property.characteristics %}
                {%if forloop.first == false %}, {%endif%}
                {% if characteristic.current? %}
                    <b>{{characteristic.name}} 
                    {{characteristic.products_count}})</b>
                {% else %}
                    <a href='{{characteristic.url}}'>{{characteristic.name}}                                                
                    ({{characteristic.products_count}})</a>
                {% endif%}
            {% endfor %}
            </DIV>
        </DIV>
    {% endfor%}
</DIV>

Предложено на форуме 31.08.2009г.

Использование фильтра в комбинации {% if %}

Есть следующие варианты: 

{% if collection.title contains 'string1' %} ..

{% capture collection_title %}{{collection.title | truncatewords:1,''}}{% endcapture %}
     {% if collection_title == 'string1' %}

Предложено на форуме 28.12.2010г.

Использование ступенчатого фильтра

Скрипт, отправляющий данные формы при выборе варианта (в начале шаблона, в котором будет использоваться фильтр): 

<script>
  $(function(){
    $(".characteristic").change(function(){
      $("form#characteristics").submit();
    });
  });
</script>

Собственно, сам фильтр: 

<form id="characteristics" action="{{collection.url}}" method="get">
        <table>
          {% for property in collection.properties %}
          <tr>
            <td class="accent">
              <b>{{property.name}} : </b>
            </td>
            <td>
            <select name="characteristics[]" class="characteristic">
              <option value="">выберите</option>
              {% for characteristic in property.characteristics %}
                <option value="{{characteristic.id}}" {% if characteristic.current? %} selected="selected" {% endif %}>{{characteristic.name}} ({{characteristic.products_count}})</option>
              {% endfor %}
            </select>
            </td>
          </tr>
          {% endfor%}
        </table>
     </form>

Работа с корзиной

Как добавить товар в корзину

Для того чтобы добавить товар в корзину нужно оправить пост запрос. Простой ссылкой тут не отделаться.

Если надо после добавления товара переместить покупателя в корзину, то так: 

<form action="/cart_items" id="variant-106835">
    <input type="hidden" name="variant_id" value="106835">
    <a href="#" onclick="$(variant-106835).submit();">В корзину</a>
</form>

Если надо оставить покупателя на странице, то так: 

<script type="text/javascript" src="/javascripts/shop/common.js"></script>
<script type="text/javascript">
    jQuery(function() {
        var updateCart = function(response) {
                    // Пример обновления данных в корзине
                    $("#cart_total_price").html(InSales.formatMoney(response.total_price, "{{amount_with_comma_separator}} руб"));
                    $("#cart_items_count").html(response.items_count);
                    // Вывод сообщения о том, что товар добавлен
                    set_preloaders_message('<div id="add_product_notification">Товар добавлен в корзину</div>');
                    window.setTimeout( hide_preloader, 1000);
        }
        initAjaxAddToCartButton('a.buy', updateCart);
    });
</script>


Товар 1
<form action="/cart_items" method="post">
    <input type="hidden" name="variant_id" value="58731">
    <a href="#" class="buy">В корзину</a>
</form>

 ....

Товар N
<form action="/cart_items" method="post">
    <input type="hidden" name="variant_id" value="58732">
    <a href="#" class="buy">В корзину</a>
</form>

Предложено на форуме 13.03.2010 г.

Вывод информации о скидке в корзине

{% for discount in cart.discounts %}
{{ discount.description }} - {{ discount.amount | money }}
{% endfor %}

discount.amount | money - выводит сумму скидки в рублях.
discount.description - выводит описание скидки.

Предложено пользователем poison67 на форуме 30.03.2011 г.

Вывод остатков и текущей суммы заказа в корзине в layout с помощью javascript

Этот метод имеет два преимущества - при переходе назад по истории браузера количество отображаемых товаров в корзине не меняется и такой способ снижает нагрузку на сервер, особенно если у магазина много посетителей и они кладут в корзину много товаров.

Нужно обновить jquery до версии 1.4.3, добавить скрипт jquery.cookie.js, затем вставить функцию 

function set_products_count(count) {
             $("#cart_items_count").html(count);
             var product = 'товаров';
             if (count == 1) {
                 product = 'товар';
             } else if (count == 2 || count == 3 || count == 4) {
                 product = 'товара';
             }
            $("#word_product").html(product);
         }

        var cart = $.parseJSON($.cookie('cart'));
        var price  = 0;
        var count = 0;    
        if (cart) {
            price = cart.total_price;
            $.each(cart.order_lines, function(index, order_line) {
                count += order_line.quantity;
            });
        }
        $("#cart_total_price").html(InSales.formatMoney(price, "{{money_with_currency_format}}"));
        set_products_count(count);
в шаблон HTML перед объявлением функции updateCart 
var updateCart = function(response)

При этом убрать liquid-вывод суммы и кол-ва товаров в корзине (оставить элементы пустыми) и проследить чтобы сумма заказа, кол-во товаров в корзине и слово "товар(ов)" находились в элементах с id cart_total_price, cart_items_count и word_product соответственно. Например: 

В Вашей корзине: <a href="{{ cart_url }}"><u><span id="cart_items_count"></span> <span id="word_product"></span></u></a><br />
     <a href="{{ cart_url }}">На сумму <span id="cart_total_price"></span>.</a>

Встроить отслеживание почтовых отправлений на сайт

Нужно вот этот код вставить на страничку: 

<center><iframe src="http://info.russianpost.ru/servlet/post_item" frameborder="0" scrolling="no" height="700" idth="700"></iframe></center>

Естественно, что height и width ставим по своему усмотрению. Реализация на сайте: http://www.maritalia.ru/page/tracking

Предложено пользователем maritalia на форуме 17.01.2011 г. </blockquote>

Полный урл к странице с товаром

Чтобы получить полный урл к странице с товаром можете в в шаблоне layout определить сами такую переменную: 
{% assign baseurl = ''http://myshop.myinsales.ru" %}
и в последующем использовать: 
{{ baseurl }}{{ product.url }}

А можно и просто написать: 

{{ account.url }}{{ product.url }}

Обращение к отдельному свойству или значению свойства товара

product.options - массив свойств товара, 
option.option_values - массив значений свойств определенного свойства

К i-му элементу массива можно обращаться следующим образом - array[i].

Таким образом, получаем: 

{{product.variants[0].option_values[0].title}} - название первого значения первого свойства текущего товара


Добавление пагинации какой-либо категории на главной или иных страницах типа page

{% assign products = collections.frontpage.products %}
{% paginate products by 8 %}
{% for product in products %}
{% include 'product_box' %}
{% endfor %}
{{paginate | default_pagination}}
{% endpaginate %}
Источник — «https://wiki.insales.ru/index.php?title=Примеры_применения_Liquid&oldid=6959»