Примеры применения Liquid — различия между версиями
Vb (обсуждение | вклад) (→Использование параметров товаров в качестве фильтров) |
Vb (обсуждение | вклад) (→Использование фильтра в комбинации {% if %}) |
||
Строка 363: | Строка 363: | ||
</blockquote> | </blockquote> | ||
− | =Использование фильтра в комбинации {% if %}= | + | ==Использование фильтра в комбинации {% if %}== |
Есть следующие варианты: | Есть следующие варианты: | ||
<pre> | <pre> |
Версия 08:45, 10 апреля 2011
Содержание
- 1 Кнопка «под заказ»
- 2 Задать число отображаемых товаров на странице витрины
- 3 Отобразить все товары категории на одной странице
- 4 Выводить описания категорий
- 5 Вывод товаров из произвольной категории в любом из шаблонов сайта
- 6 Проверка количества товара на складе
- 7 Цена товара
- 8 Использование фильтров
- 9 Использование ступенчатого фильтра
- 10 Как добавить товар в корзину
- 11 Вывод информации о скидке в корзине
- 12 Дополнить кнопку "Купить" полем ввода для указания количества
- 13 Дополнить отображение товара списком ссылок на все товары из той же категории
- 14 Переход к предыдущему и следующему товару
- 15 Вывод хлебных крошек
- 16 Полный урл к странице с товаром
- 17 Обращение к отдельному свойству или значению свойства товара
- 18 Вывод капчи в комментариях к товару и к статье блога
Кнопка «под заказ»
Можно показывать закончившийся товар на сайте, но при этом оповестить покупателей о том, что его можно получить «под заказ». Реализуется эта возможность в шаблоне. Например, в одном случае должна выводиться кнопка «Купить», а в другом случае – «Под заказ»:
{% if product.available == true %} <input src="{{ 'buy.gif' | asset_url }}" type="image" /> {% else %} <input src="{{ 'wait.gif' | asset_url }}" type="image" /> {% 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>
Выводить описания категорий
Чтобы описание выводилось всегда надо в шаблоне "Категория" заменить
{% 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 г.
Вывод товаров из произвольной категории в любом из шаблонов сайта
В качестве примера создадим отдельную скрытую категорию на сайте 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>
Таким же образом можно выводить товары из произвольной категории в любом из шаблонов сайта.
Предложено в статье Вывод товаров на главной странице
Проверка количества товара на складе
Проверка количества при добавлении в корзину
Можно сделать проверку количества товара на складе при добавлении в корзину на уровне шаблона. Цель - блокировка заказа большего, чем есть в наличии. Назначим свои переменные - "есть нехватка" и "предмет нехватки". Количество товара в модификации известно, количество его помещенного в корзину - тоже. В шаблоне Корзины (меню Сайт->Дизайн->Редактор) дополним код с кнопкой заказа.
В теме "Техника" блок кнопок оформления заказа выглядит так:
<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>
Заменим предыдущий кусок на этот:
{% assign nehvatka = false %} {% for item in cart.items %} {% if item.variant.quantity < item.quantity %} {% assign nehvatka = true %} {% assign vinovnik = item.title %} {% endif %} {% 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 %}
Теперь, если какого-то товара заказано больше чем есть на складе, умный код предупредит об этом и уберет кнопку чекаута.
Если тема шаблона - не "Техника", то изменяете блоки
<div class="cart_reserve">
сообразно коду кнопок в шаблоне.
Предложено пользователем Victor на форуме 21.02.2010 г.
Показ максимально возможного для заказа количества товара
Можно проверить количество товара на складе при добавлении в корзину и показать максимально возможное для заказа количество товара.
Это вариант предыдущего примера для шаблона «Техника»:
{% assign nehvatka = false %} {% for item in cart.items %} {% if item.variant.quantity < item.quantity %} {% assign nehvatka = true %} {% endif %} {% endfor %} {% if nehvatka %} <h2>Извините, но на складе недостаточно товара:</h2> <ul class="error_list"> {% for item in cart.items %} {% if item.variant.quantity < item.quantity %} <li>{{item.title}}<br/><em>Максимальное доступное количество: <span>{{item.variant.quantity}}</span></em></li> {% endif %} {% endfor %} </ul> <div class="cart_reserve"> <a href="." class="cart_update" id="cart_update" style="display: none;">Пересчитать стоимость</a> <div class="clear"></div> </div> {% else %} <div class="cart_reserve"> <a href="." class="cart_update" id="cart_update" style="display: none;">Пересчитать стоимость</a> <input class="create_order" id="create_order" type="submit" value="Оформить заказ" name="make_order"/> <div class="clear"></div> </div> {% endif %}
Предложено пользователем poison67 на форуме 02.03.2010 г.
Примечание: напрямую указывать точный остаток всех товаров может быть вредно для бизнеса
Вывод сообщения о малости остатка на витрину
Проверка суммарного количества оставшихся модификаций товара на складе и, если количество менее заданного - вывод сообщения об оставшемся количестве возле кнопки добавления в корзину.
Сделаем расчет количества. В шаблоне Товара (меню Сайт->Дизайн->Редактор->Товар), ищем код кнопки добавления в корзину:
<form action="{{ cart_url }}" method="post" id="order"> <div> здесь куча текста <input class="buy add_button" type="submit" value="Добавить в корзину" /> </div>
сразу после него добавляем:
{% assign panic = '' %} {% 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 %}
Теперь, если какой-то товар есть в количестве менее 4 шт., то будет выводиться сообщение возле кнопки добавления его в корзину.
Предложено пользователем Victor на форуме 05.03.2010 г.
Цена товара
Размещение товаров в категории в порядке возрастания цены
Если в теме поддерживается сортировка, то можно по умолчанию товары в каталоге сортировать по возрастанию цены. Нужно в шаблоне 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 г.
Дополнить кнопку "Купить" полем ввода для указания количества
Там где есть кнопка купить надо в форму добавить поле "quantity"
<input type="text" name="quantity" value="1"/>
Сделать это можно в разделе бэк-офиса "Сайт", подразделе "Дизайн", используя редакторе тем. Для страницы категории - в шаблоне "Категория". Для страницы товара - в шаблоне "Товар".
Предложено на форуме 31.08.2010 г.
Дополнить отображение товара списком ссылок на все товары из той же категории
Список ссылок на все товары из той категории, в которой находится отображаемый товар можно вывести так:
{% 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 %}
Полный урл к странице с товаром
Чтобы получить полный урл к странице с товаром можете в в шаблоне 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}} - название первого значения первого свойства текущего товара
Вывод капчи в комментариях к товару и к статье блога
К товару:
{% 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 %}