Примеры применения Liquid — различия между версиями
Vb (обсуждение | вклад) (→Вывод сообщения о малости остатка на витрину) |
(→Вывод дополнительных полей товара в шаблоне Товар) |
||
(не показаны 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> | ||
− | < | + | {% 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 %} | ||
+ | </pre> | ||
+ | |||
+ | В параметрах (/admin/properties) создайте новые параметры для скидки и маркеры с пермалинками skidka и marker соответственно, в товарах просто выберите что вам нужно. Если ставите скидку, то указывается число в процентах, которое и выведется на сайте. Маркеры делаете какие Вам надо. В данном примере - если есть скидка, то выводится она, иначе - первый маркер который есть у товара. | ||
+ | |||
+ | <blockquote> | ||
+ | <i>Предложено пользователем <b>poison67</b> [http://forum.insales.ru/viewtopic.php?pid=3669#p3669 на форуме] 07.04.2011 г.</i> | ||
+ | </blockquote> | ||
+ | |||
+ | ==Дополнить отображение товара списком ссылок на все товары из той же категории== | ||
− | + | Список ссылок на все товары из той категории, в которой находится отображаемый товар можно вывести так: | |
− | </ | + | <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> | ||
− | |||
<blockquote> | <blockquote> | ||
− | <i> | + | <i>Предложено пользователем '''poison67''' [http://forum.insales.ru/viewtopic.php?pid=1048#p1048 на форуме] 23.03.2010 г.</i> |
</blockquote> | </blockquote> | ||
− | = | + | ==Переход к предыдущему и следующему товару== |
− | + | Когда покупатель заходит в категорию и идет смотреть конкретный товар, ему может захотеться посмотреть на остальные товары этой категории. Для того чтобы пользователю не приходилось возвращаться назад и там выбирать другой товар, можно в карточке товара сделать ссылки на следующий и предыдущий товары в данной категории. | |
<pre> | <pre> | ||
− | + | {% 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 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 %} | ||
</pre> | </pre> | ||
− | |||
− | |||
− | |||
− | =Вывод товаров из произвольной категории в любом из шаблонов сайта= | + | ==Вывод товаров из произвольной категории в любом из шаблонов сайта== |
В качестве примера создадим отдельную скрытую категорию на сайте 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> | ||
− | + | [[Основные определения, применяемые в документации#CAPTCHA|Капча]] к статье блога: | |
− | |||
− | |||
<pre> | <pre> | ||
− | <div | + | {% if comment.captcha_enabled? %} |
− | + | <div id="captcha"> | |
− | + | <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> | ||
− | + | {% for field in product.fields %} | |
− | {% for | + | {% if field.value != blank %} |
− | + | <div class="title">{{field.title}}</div> | |
− | + | <div class="content"> | |
− | + | {{field.value}} | |
− | + | </div> | |
+ | {% endif %} | ||
{% endfor %} | {% endfor %} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
− | + | =Задание вида отображения= | |
+ | ==Задать число отображаемых товаров на странице витрины== | ||
+ | |||
+ | Можно указать число товаров на странице витрины при просмотре: | ||
− | + | В шаблоне "Категория" в строчках: | |
<pre> | <pre> | ||
− | < | + | <ul> |
− | </pre> | + | {% paginate products by 9 %} |
− | + | <table class="items"> | |
+ | |||
+ | {% tablerow product in products cols: 3 %} | ||
+ | </ul> | ||
+ | </pre> | ||
+ | Измените числа 9 и 3 на нужные вам, первое число - это общее число товаров на странице, второе - число колонок. | ||
<blockquote> | <blockquote> | ||
− | <i> | + | <i>Из FAQ</i> |
</blockquote> | </blockquote> | ||
− | == | + | ==Отобразить все товары категории на одной странице== |
+ | |||
+ | Можно указать для отображения количество товаров, заведомо большее имеющегося реально: | ||
+ | |||
+ | <pre> | ||
+ | <a href="{{collection.url}}?page_size=100">Показать все</a> | ||
+ | </pre> | ||
− | + | Однако, больше 100 товаров на одной странице вывести не получится. | |
− | + | ==Дать возможность посетителю выбрать количество товаров на странице== | |
+ | В шаблоне категория: | ||
<pre> | <pre> | ||
− | + | <div class="black-standart"><br /> | |
− | {% for | + | Страницы: |
− | + | {% 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> | |
− | < | + | </pre> |
− | + | Вместо ''показать все'' можете ставить что угодно, но на одной странице не может быть отображено больше 100 товаров за раз. Можно заменить на ''показать 50'', тогда соответственно и ''page_size=50''. Можете несколько таких записей сделать: ''показать 25, показать 50, показать все''. | |
− | + | ||
− | < | + | <blockquote> |
− | < | + | <i>Предложено пользователем '''maritalia''' [http://forum.insales.ru/viewtopic.php?pid=2897#p2897 на форуме] 26.01.2011 г.</i> |
− | + | </blockquote> | |
− | + | ||
− | < | + | Можно это сделать как dropdown menu: |
− | + | <pre> | |
− | + | <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> | |
</pre> | </pre> | ||
<blockquote> | <blockquote> | ||
− | <i>Предложено пользователем ''' | + | <i>Предложено пользователем '''st.trophey''' [http://forum.insales.ru/viewtopic.php?pid=2940#p2940 на форуме] 26.01.2011 г.</i> |
</blockquote> | </blockquote> | ||
− | + | Или так: | |
+ | <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> | ||
− | < | + | {% 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 %} | |
− | < | + | <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> | ||
− | + | {% if collection.products.size > 0 or collection.subcollections.size > 0 %} | |
− | + | ...тут вывод категории в списке... | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{% endif %} | {% endif %} | ||
</pre> | </pre> | ||
+ | <blockquote> | ||
+ | <i>Предложено[http://forum.insales.ru/viewtopic.php?pid=3300#p3300 на форуме] 09.03.2011 г.</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> | ||
− | = | + | ==Вывод информации о скидке в корзине== |
− | |||
<pre> | <pre> | ||
− | + | {% 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= | + | <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> | ||
− | { | + | 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); | ||
</pre> | </pre> | ||
− | |||
− | |||
− | |||
+ | в шаблон 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> | ||
− | + | <center><iframe src="http://info.russianpost.ru/servlet/post_item" frameborder="0" scrolling="no" height="700" idth="700"></iframe></center> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
+ | Естественно, что ''height'' и ''width'' ставим по своему усмотрению. | ||
+ | Реализация на сайте: http://www.maritalia.ru/page/tracking | ||
− | + | <i>Предложено пользователем <b>maritalia</b> [http://forum.insales.ru/viewtopic.php?pid=2773#p2773 на форуме] 17.01.2011 г. </i> | |
+ | </blockquote> | ||
− | = | + | =Полный урл к странице с товаром= |
− | + | Чтобы получить полный урл к странице с товаром можете в в шаблоне layout определить сами такую переменную: <pre>{% assign baseurl = ''http://myshop.myinsales.ru" %}</pre> и в последующем использовать: <pre>{{ baseurl }}{{ product.url }}</pre> | |
− | <pre>http:// | ||
− | |||
− | <pre> | ||
− | |||
− | |||
− | + | А можно и просто написать: | |
<pre> | <pre> | ||
+ | {{ account.url }}{{ product.url }} | ||
+ | </pre> | ||
− | + | =Обращение к отдельному свойству или значению свойства товара= | |
+ | |||
+ | <pre> | ||
+ | product.options - массив свойств товара, | ||
+ | option.option_values - массив значений свойств определенного свойства | ||
+ | </pre> | ||
− | + | К i-му элементу массива можно обращаться следующим образом - array[i]. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | Таким образом, получаем: | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <pre> | |
− | + | {{product.variants[0].option_values[0].title}} - название первого значения первого свойства текущего товара | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
− | |||
− | + | =Добавление пагинации какой-либо категории на главной или иных страницах типа page= | |
− | |||
<pre> | <pre> | ||
− | {{ | + | {% 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
Содержание
- 1 Вывод различных элементов страниц магазина
- 1.1 Кнопка «под заказ»
- 1.2 Дополнить кнопку "Купить" полем ввода для указания количества
- 1.3 Добавить метки к товарам через параметры
- 1.4 Дополнить отображение товара списком ссылок на все товары из той же категории
- 1.5 Переход к предыдущему и следующему товару
- 1.6 Вывод хлебных крошек
- 1.7 Вывод товаров из произвольной категории в любом из шаблонов сайта
- 1.8 Вывод капчи в комментариях к товару и к статье блога
- 1.9 Вывод дополнительных полей товара в шаблоне Товар
- 2 Задание вида отображения
- 3 Цена товара
- 4 Использование фильтров
- 5 Работа с корзиной
- 6 Встроить отслеживание почтовых отправлений на сайт
- 7 Полный урл к странице с товаром
- 8 Обращение к отдельному свойству или значению свойства товара
- 9 Добавление пагинации какой-либо категории на главной или иных страницах типа page
Вывод различных элементов страниц магазина
Кнопка «под заказ»
Можно показывать закончившийся товар на сайте, но при этом оповестить покупателей о том, что его можно получить «под заказ». Реализуется эта возможность в шаблоне. Например, в одном случае должна выводиться кнопка «Купить», а в другом случае – «Под заказ»:
{% 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 %}