В настоящее время я использую сценарий для вывода связанных продуктов на управляемом мной веб-сайте Shopify, но я хочу изменить этот сценарий, чтобы захватить тег «color» текущего продукта (например, «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 %}Любые мысли / помощь будут очень признательны.
