Показать ссылки на другие цвета на странице товара Shopify - PullRequest
0 голосов
/ 24 сентября 2018

У меня есть интернет-магазин на Shopify с одним товаром в 10 разных цветах.Поэтому для целей SEO я создал 10 продуктов, таких как T-Shirt Black, T-Shirt Blue, T-Shirt Red и т. Д. Для каждого продукта я назначил собственный тег и уникальное описание.

Я пытаюсь связать все продукты друг с другом на каждой странице продукта, например, текущий продукт для просмотра - футболка черного цвета, на этой странице я хотел бы показать 10 * 1003.* clickable colors / swatch с изображениями каждого цвета и к текущему просмотру добавить активный класс, при нажатии на другой цвет он переносит пользователя на другую страницу продукта.Как мне это сделать?

Любая помощь будет высоко ценится!

1 Ответ

0 голосов
/ 27 сентября 2018

Я хотел бы поделиться с другими людьми, которым, возможно, потребуется решить ту же задачу.

Вот что я сделал, чтобы получить эту работу;

Во-первых, я добавил тег для каждого продукта на основе его коллекции, в качестве примера для всех продуктов в коллекции SMALL I 'мы добавили тег small , затем мне пришлось написать этот код, чтобы получить список всех продуктов с одинаковым тегом.

  {% if product.tags contains "small" %}
        {% assign current_product_tag = "small" %}
  {% elsif product.tags contains "medium" %}
        {% assign current_product_tag = "medium" %}
  {% elsif product.tags contains "large" %}
        {% assign current_product_tag = "large" %}
  {% endif %}

  {% assign current_product = product %}
    <div id="sw_container">
      <p class="sw_title">Select Colour</p>
      <ul class="sw_list">
  {% for product in collections.all.products %}
  {% if product.tags contains current_product_tag %}
        <li class="sw_item{% if product.handle == current_product.handle %} active{% endif %}">
          <a title="{{ product.title | escape }}" href="{% if product.handle == current_product.handle %}#{% else %}{{ product.url }}{% endif %}">
            <img src="{{ product.images.last  | product_img_url: 'small' }}" alt="{{ product.title | escape }}">
          </a>
        </li>
  {% endif %}
  {% endfor %}
      </ul>
    </div>
...