尝试在Shopify上使用特定的产品标签显示相关产品

Question

我目前正在使用一个脚本在我管理的Shopify网站上输出相关产品，但我想修改此脚本，以获取当前产品的“颜色”标签（例如“color_Jet Black（#1）”），然后使用此标签生成也有此标签的相关产品。

下面的代码是我当前使用的代码。

<div class="related-products">
    <div class="container-fluid nopadding">
        <div class="row grid">

        </div>
    </div>
</div>
<script>
$( document ).ready(function() {
    // Variables
      var related = $('.related-products');
      var handle = "{{ product.handle }}";
      var tags = [];
      var appendLocation = $(".related-products .row");
      var relatedProductsList = [];
      var maxOutput = 4
      var count = 0;
    // Get Product Tags
    {% for tag in product.tags %}
      tags.push("{{ tag }}");
}
    {% endfor %}
    // Get Run JSON product tags against this product's tags
    jQuery.getJSON( document.location.origin + "/products.json", function(obj) {
        // Build List
        jQuery.each(obj.products, function(dontcare, product) {
            hasMatch(tags, product);
        });
        // Shuffle List
        shuffle(relatedProductsList);
        // Output List
        jQuery.each(relatedProductsList, function( dontcare, product) {
            if(count < maxOutput) {
                outputMatch(product);
            }
            count++;
        });
    }).complete(function() {
        // Wait for products to load
        $('.product-item img').load(function() {
            var item = $('.product-item');
            setProductItemHeight(item);
        });
    });
    // Checks for a match between product tags and JSON tags
    function hasMatch(tags, product) {
        jQuery.each(tags, function(dontcare, tag) {
            if(jQuery.inArray(tag, product.tags) >= 0 && product.handle != handle) {
                relatedProductsList.push(product);
            }
        });
    }
    // Outputs matches
    function outputMatch (product) {
        // If product has a featured image
        if(product.images[0] != null) {
            // Create Item
            $item = $("<div class='col-md-3'><article class='product-item'><a href=" +
                document.location.origin + "/products/" +
                product.handle +"><div class='image-wrapper'><img class='img-responsive' src='" +
                product.images[0].src + "'></div><div class='product-wrapper prod-caption caption'><h6>" +
                product.title + "</h6></a><p>" + product.variants[0].price + "</p><a class='btn btn-default' href=" + document.location.origin + "/products/" + product.handle +">Buy Now</a></div></article></div>");
            appendLocation.append($item);
        } else if (product.images[0] == null) {
            // Fallback if product object has no images
            appendLocation.append("<div class='col-md-3'><article class='product-item'><a href=" + document.location.origin + "/products/" + product.handle +"><div class='image-wrapper'><img class='img-responsive' src='//cdn.shopify.com/s/files/1/0878/7440/t/2/assets/default.png'></div><div class='product-wrapper prod-caption'><h3>" + product.title + "</h3><p>" + product.tags[0] + "</p><em>" + product.variants[0].price + "</em><br><a class='btn btn-default' href=" + document.location.origin + "/products/" + product.handle +">Buy Now</a></div></article></div>");
        }
    }
    // Randomizes relatedProductsList
    function shuffle(relatedProductsList) {
        for (var n = 0; n < relatedProductsList.length - 1; n++) {
            var k = n + Math.floor(Math.random() * (relatedProductsList.length - n));
            var temp = relatedProductsList[k];
            relatedProductsList[k] = relatedProductsList[n];
            relatedProductsList[n] = temp;
        }
    }
});
</script>

我试图修改代码以获取当前产品的颜色标签，这是可行的，但它不会像原始脚本那样输出任何产品。很多产品都有这种颜色标签，所以这不是问题所在。

下面的代码是我用来获取当前产品的颜色标签的，它确实有效，但在DOM中没有输出。

$( document ).ready(function() {
    // Variables
      var related = $('.related-products');
      var handle = "{{ product.handle }}";
      var tags = [];
      var appendLocation = $(".related-products .row");
      var relatedProductsList = [];
      var maxOutput = 4
      var count = 0;
    // Get Product Tags
    {% assign color = "Color_" %}
    {% for tag in product.tags %}
      {% if tag contains color %}
        tags.push("{{ tag }}");
}
      {% endif %}
    {% endfor %}

如有任何想法/帮助，将不胜感激。

Answer 1

一种方法是创建一个输出json的新集合模板，并使用view参数将该模板应用于json请求。

“视图”参数只允许您动态使用不同的模板来呈现内容。https://docs.shopify.com/manual/configuration/store-customization/page-specific/collections/add-view-all-to-collection-pages

下面是一个json liquid模板示例（在我的脑海中完成-您需要检查要使用哪些liquid标记）：

   {% layout none %} // tells shopfify not to render layout template
   {
      "products": [
        {% for product in collection.products %}
    ...
     {
        "id": "{{product.id}}",
        "title": "{{product.title}}",
        "handle": "{{product.handle}}",
        "image" : "{{product.featured_image}}",
        "price" : "{{product.price}}"
    }
    {% if forloop.last == false %},{% endif %} ... don't forget the , - it mustn't be on the last entry.
    ....
        {% endfor %}
      ]
    }

因此，当呈现模板时，您将得到一个json格式的产品列表。大概是这样的：

{
  "products": [
    {
      "id": "12234",
      "title": "foo",
      "handle": "bar",
      "image": "blah.jpg",
      "price": "12345"
    },
    {
      "id": "12235",
      "title": "foo1",
      "handle": "bar1",
      "image": "blah1.jpg",
      "price": "12346"
    },
    {
      "id": "12239",
      "title": "foo2",
      "handle": "bar2",
      "image": "blah2.jpg",
      "price": "12375"
    }
  ]
}

在发出ajax请求时，需要请求带有标记和视图的URL。因此，如果您将新模板称为json。那么你会要求：

/collections/frontpage/Color_Jet-Black-(#1)?view=json

如：

jQuery.getJSON( '/collections/frontpage/Color_Jet-Black-(#1)?view=json", function(obj) {

因此，在本例中，“Color_Jet Black（#1）”是标记。您应该只收到Frontpage集合中已标记为黑色（#1）的产品。因为我们在追加？view=json根据我们的请求，Shopify将使用我们创建的json模板发送这些产品*。然后，您可以随意将json随机化，并通过JavaScript将其呈现到页面上。

• 注意，在我的例子中，我已经调用了新的集合模板json.liquid因为它被用来呈现Json-但是你可以随意调用它。注：featured_products.liquid。然而，因为它被用来输出Json，所以称之为json.liquid.

Shopify收藏网址的格式如下：

http://example.com/collections/collectionname/tags?view=CustomTemplate

所以

http://example.com/collections/classic/watches?view=json

将为您提供经典系列中所有标有手表的产品

http://example.com/collections/classic/watches+home?view=json

会让你所有的产品从经典的收藏标签与手表和家庭。

您不需要将集合硬连接到新的json模板中。您只需请求所需的集合，并告诉shopify将其呈现为json（使用您创建的json模板）。

一旦你有了json格式的产品，你可以对它们做任何你喜欢的事情。