Отобразить цены продуктов для конкретного продукта в Shopify
В настоящее время я пытаюсь отобразить цены на все мои товары в моем магазине shopify. Мне удалось показать это для моего первого продукта, используя следующий код:
<div class="grid__item">
{% for collection in collections %}{% for product in collection.products %}
{% for variant in product.variants %}{% if forloop.index <=1 %}
<div id="temp_first" style="display:none;">
<div class="style14">Style</div>
<div class="style11">(No)</div>
<div class="front"><img src="//files/front.jpg?v=1473520767" title="1 Sided Full Color" /></div>
<div class="reverse"><img src="//1/1265/7581/files/reverse.jpg?v=1473520807" title="1 Sided Only" /></div>
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
{% elsif forloop.index <7 %}
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
{% elsif forloop.index <10 %}
<div class="price2"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
{% elsif forloop.index <13 %}
<div class="price3"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
{% elsif forloop.index ==13 %}
<div class="price3"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
</div>
{% endif %}
{% endfor %}
{% endfor %}{% endfor %}
Теперь это прекрасно работает. Проблема, с которой я столкнулся сейчас, заключается в том, что я хотел бы отобразить цены на второй продукт, и я продублировал вышеуказанный код и изменил ссылки, чтобы связать это с правильной страницей и вариантом продукта, и это прекрасно работает. Проблема в том, что цены указаны для первого продукта, и я не знаю, что мне нужно изменить в коде, чтобы настроить таргетинг на второй продукт. Является ли это его именем ручки или чем-то, я просто не уверен, следовательно потребность в некоторой помощи.
Если кто-то мог бы посоветовать, как я могу нацелиться на второй продукт, был бы очень благодарен.
Заранее спасибо.
Решение
Вы можете получить произвольную переменную продукта, используя следующий синтаксис:
{% assign custom_product = all_products['product-handle'] %}
(где ‘product-handle’ будет заменен на ручку продукта, который вы хотите взять).
Это можно сделать динамически:
{% assign some_handle = 'product-handle' %}
{% assign custom_product = all_products[some_handle] %}
Если у вас есть какой-то атрибут основного продукта, в котором указано, каким будет вторичный продукт (например, метаполе, которое было задано с помощью приложения или расширения браузера Shopify FD), вы можете сослаться на него примерно так:
{% assign some_handle = product.metafields.custom_namespace.related_product %}
{% assign custom_product = all_products[some_handle] %}
Переменная custom_product в любом из приведенных выше примеров является переменной, представляющей соответствующий продукт на данном этапе, поэтому мы можем ссылаться на любые свойства продукта для этого продукта точно так же, как и для основного продукта. Например:
<h3>{{ product.title }} is {{ product.price | money }}, but {{ custom_product.title }} is {{ custom_product.price | money }}</h3>
PS — Кроме того, вы можете использовать {{ variant.price | money_without_trailing_zeros }} вместо цепочки денег и удаления фильтров.
PPS — Глядя на исходный код еще раз, обратите внимание, что вы можете избавить себя от головной боли, сделав ссылки динамическими: <a href="/products/{{ product.handle }}?variant={{ variant.id }}">
PPPS — Ваш код, как написано, пытается перебрать каждый вариант в каждом продукте в каждой коллекции. В зависимости от того, насколько велик ваш список товаров, это может не сработать — Shopify имеет жесткий верхний предел количества товаров, возвращаемых для коллекции, когда вы не разбиваете на страницы. В зависимости от того, что именно вы пытаетесь достичь, вы можете лучше использовать язык шаблонов Liquid, чтобы все работало более лаконично и управляемо. 🙂
ПРИМЕР (после пояснения оригинального плаката)
Если вы создаете несколько сеток для отображения на заднем плане вашей страницы, что насчёт этого?
<div class="product_grid_container">
{% for custom_product in collection.products %}
<div class="price_grid" data-product-id="{{ custom_product.id }}" data-index="{{ forloop.index }}">
<a href="/products/{{ custom_product.handle }}">{{ custom_product.title }}</a>
<!-- Any other header information here -->
{% for variant in custom_product.variants %}
<!-- Logic/structure for displaying variants for the product in the grid here. If it's complicated, you might want to move it to a separate snippet and then use an include statement. -->
{% endfor %}
</div>
{% endfor %}
</div>
Это создаст отдельную HTML-сетку для каждого из продуктов, которые вас интересуют, и затем вы можете использовать правила CSS для их правильного позиционирования / стиля.
Это приближает вас к тому, что вы ищете?
Другие решения
Других решений пока нет …