Question

我目前正在从事Shopify项目，我需要在产品页面上添加rabbitmq-users。我已经在其他项目中使用color swatches了。但是在这种情况下，颜色是不同的产品。我在shopify上找到了一些示例：

Fashion Nova。
doyoueven。

在这些示例中，当您单击所需的颜色时，它将更改页面。在代码中，它是指向其他产品的简单html链接。

这些品牌可能正在使用应用程序，但我不确定。

谢谢。

Answer 1

我是通过一家泳衣公司的应用程序做到这一点的。由于导航的工作方式，很明显，每种颜色都有一个产品。不是每个变体的颜色。我提供给他们的应用是用于策划的链接。因此，他们可以使用不同的颜色连接所有相同的产品，并轻松提供每个产品的可点击链接，从而为管理库存提供了一种非常简单的方法。

Answer 2

我做了一些测试，然后想到了一个主意。我仍然需要努力，但是我认为这可能是一个解决方案。

我正在使用标签将产品链接在一起。我需要对更多产品进行测试，但这可能是一个好的开始。

<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>

Shopify模板-使用链接而不是变体的颜色色板

2 个答案: