javascript - Bigcommerce - 在特定类别/产品上显示特定消息/图像

Question

我是 Big Commerce 的新手，对如何在特定类别上显示图像/特定消息有疑问。

我目前在所有产品上都显示了免费送货图片，但我不希望在某个类别中显示该代码片段。

我怎样才能做到这一点？

显示免费送货图片的方法是修改 card.html 文件

模板>组件>产品>card.html

谢谢!

Answer 1

您可以考虑在特定类别上通过横幅插入图片。 在此之后，您可以通过 jQuery 注入(inject) css 或使用纯 css 覆盖以在任何您喜欢的地方显示横幅。

yourstore.xyz/manage/marketing/banners/create

编辑 1

将您的 div 包装到 if 也应该可以解决您在某些产品中显示该图像的问题。

{{#if product.shipping}}
{{#if product.shipping.price.value '===' 0}}
   <img class="yourImgClass">{{imgURL}}
{{/if}}
{{/if}}

编辑2

这是从特定类别中删除某些元素的 JS 方法:

var url = location.href; 

if ( url.indexOf( 'your-url' ) !== -1 ) { 
document.getElementById('your-free-shipping-image-id').remove();
console.log("yay, image bye");
}
else {
console.log("nay, image stays");
}

编辑 3 这是一种对 jQuery 知识有限的轮类变通方法。如果您可以将 ID 放在图像环绕 span 元素上，这会容易得多，但我认为您会接受的。 将其放在页脚上，在括号内。

$(document).ready(function() {
var s = $('img[src*="https://cdn7.bigcommerce.com/s-7iywz/product_images/uploaded_images/free-shipping-banner.jpg"]');
var url = location.href;
console.log(s.length);

if ( url.indexOf( 'framed' ) !== -1 ) {
s.remove();
}
});