Примеры применения Liquid
Материал из Insales Wiki
Вывод различных элементов страниц магазина
Кнопка «под заказ»
Можно показывать закончившийся товар на сайте, но при этом оповестить покупателей о том, что его можно получить «под заказ». Реализуется эта возможность в шаблоне. Например, в одном случае должна выводиться кнопка «Купить», а в другом случае – «Под заказ»:
{% 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 }}
{% endif %}
{% if collection.next_product %}
{% if collection.previous_product %} | {% endif %}
{{ 'Следующий товар' | link_to: collection.next_product }}
{% 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 %}
Задание вида отображения
Задать число отображаемых товаров на странице витрины
Можно указать число товаров на странице витрины при просмотре:
В шаблоне "Категория" в строчках:
<ul>
{% paginate products by 9 %}
<table class="items">
{% tablerow product in products cols: 3 %}
</ul>
Измените числа 9 и 3 на нужные вам, первое число - это общее число товаров на странице, второе - число колонок.
Из FAQ
Отобразить все товары категории на одной странице
Можно указать для отображения количество товаров, заведомо большее имеющегося реально:
<a href="{{collection.url}}?page_size=1000">Показать все</a>
Дать возможность посетителю выбрать количество товаров на странице
В шаблоне категория:
<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=1000">Показать все</a> |
</div>
Вместо показать все можете ставить что угодно. Можно заменить на показать 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="1000">Все</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}} - название первого значения первого свойства текущего товара
