【发布时间】：2016-02-17 12:54:56
【问题描述】：
我目前正在使用脚本在我管理的 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 %}任何想法/帮助将不胜感激。
【问题讨论】：
标签： javascript jquery shopify liquid