В настоящее время я работаю над проектом Shopify, и мне нужно добавить color swatches на страницы продукта. Я уже делал это в других проектах, используя product variants. Но в этом случае расцветки изделий разные. Я нашел несколько примеров на shopify:
В этих примерах, когда вы нажимаете на нужный цвет, страница меняет страницу. В коде это простая HTML-ссылка на другие продукты.
Возможно, эти бренды используют приложение, но я не уверен.
Спасибо.
Я сделал это с помощью приложения для компании по производству купальных костюмов. Из-за того, как работала их навигация, было ясно, что у них есть продукт для каждого цвета. Не цвет для варианта. Приложение, которое я им предоставил, предназначалось для тщательно отобранных ссылок. Таким образом, они могли соединять одни и те же продукты с разными цветами и легко предоставлять интерактивные ссылки на каждый, что делало очень простой способ управления запасами.
Я сделал несколько тестов, и мне в голову пришла идея. Мне все еще нужно поработать над этим, но я думаю, что это могло бы быть решением.
Я использую теги, чтобы связать товары вместе. Мне нужно протестировать с другими продуктами, как они работают, но это могло бы стать хорошим началом.
<div class="swatches">
<label>Colors</label>
<br />
<div class="related-colors">
{% for relatedProduct in collections.all.products %}
{% if product.tags contains relatedProduct.handle %}
{% for tag in relatedProduct.tags %}
{% if tag contains 'color-' %}
{% assign color = tag | replace: 'color-', '' %}
<a href="{{ relatedProduct.url }}">
<div class="color-swatches" style="background-color: {{color}}"></div>
</a>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
<style>
.swatches{
width:100%;
padding-left:5px;
}
.color-swatches
{
margin-top:10px;
display: inline-block;
margin-right: 0px;
margin-bottom: 10px;
width: 30px;
height: 30px;
border: 1px solid #dedede;
border-radius: 30px;
}
</style>
