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请求。

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

这是一个json液体模板示例（在我的头顶完成 - 您需要检查要使用的液体标签）：

   {% 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.liquid，那么你会要求：

/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集合中标有Color_Jet Black（＃1）的产品。因为我们将?view=json附加到我们的请求，Shopify将使用我们创建的json模板发送这些产品*。然后，您可以随意将json随机化并通过JavaScript将其呈现给页面。

请注意，在我的示例中，我调用了新的集合模板json.liquid，因为它用于呈现Json - 但您可以随意调用它。 Nb：'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

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

您无需将集合硬连线到新的json模板中。您可以简单地请求您需要的集合 - 并告诉shopify将其渲染为json（使用您创建的json模板）。

一旦您拥有json格式的产品 - 您可以随心所欲地做任何事情。

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

1 个答案: