Bigcommerce

Question

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

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

我怎样才能做到这一点？

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

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

谢谢！

Answer 1

您可以尝试豁免该类别（通过 ID 或名称），特别是使用条件语句。

例如，您可以尝试：

{{#unless category.id '==' 5321}}
    Free shipping!
{{/unless}}

或 if/else:

{{#if category.id '==' 5321}}
    No free shipping!
{{else}
    Free shipping!
{{/if}}

Answer 2

谢谢，但它似乎仍然无法正常工作。

你的代码也有问题

你有{{/unless}} instead of {{/if}}

所以这就是我使用的：

{{#if category.id '==' 70}} No free shipping! {{else}} Free shipping! {{/if}}

I've attached the Category ID which is 70

商店中的所有商品仍然显示免费送货

Answer 3

如果您想从单个类别中删除 "Free Shipping"，请使用以下代码修复它。

{{#if id '!=' 70 }} Free Shipping Message}} {{/if}}

如果它对你不起作用，那么我建议你 post 此处的 "Card File" 代码，以便我可以检查你在代码中到底写了什么。

Answer 4

<article class="card {{#if alternate}}card--alternate{{/if}}">
<figure class="card-figure">
    {{#or price.non_sale_price_with_tax price.non_sale_price_without_tax}}
        {{#if theme_settings.product_sale_badges '===' 'sash'}}
            <div class="sale-flag-sash">
                <span class="sale-text">On Sale!</span>
            </div>
        {{else if theme_settings.product_sale_badges '===' 'topleft'}}
            <div class="sale-flag-side">
                <span class="sale-text">On Sale!</span>
            </div>
        {{else if theme_settings.product_sale_badges '===' 'burst'}}
            <div class="starwrap">
                <div class="sale-text-burst">On Sale!</div>
                <div class="sale-flag-star"></div>
            </div>
        {{/if}}
    {{/or}}
    {{#if demo}}
        <img class="card-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
    {{else}}
    <div class="card-image-container">
        <a href="{{url}}">
            <img class="card-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
        </a>
    </div>
    {{/if}}
</figure>
<div class="card-body">
    <h4 class="card-title">
        {{#if demo}}
            {{name}}
        {{else}}
            <a href="{{url}}">{{name}}</a>
        {{/if}}
    </h4>
    <div class="card-text" data-test-info-type="price">
        {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
            {{> components/products/price price=price customer=customer}}
        {{else}}
            {{> components/common/login-for-pricing}}
        {{/or}}
    </div>
    <p class="card-text" data-test-info-type="productRating">
        <span class="rating--small">
            {{> components/products/ratings rating=rating}} <span style="color:gray;">{{#if num_reviews '>' 0}}</span>
   &nbsp; ({{num_reviews}}) Review{{#if num_reviews '>' 1}}s
{{/if}}{{/if}}
        </span>
    </p>
{{#if id '!=' 70 }}
<span><img src="https://cdn7.bigcommerce.com/s- 7iywz/product_images/uploaded_images/free-shipping-banner.jpg?t=1525811996&_ga=2.165904830.1847420277.1525706943-52562068.1494873040"></span>
{{/if}}
</div>
</article>

我已经修改了你的代码，只需复制并粘贴到你的主题中即可。

Answer 5

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

你的商店。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();
}
});

Bigcommerce - 在特定 Category/Product 上显示某些 Message/Image

Bigcommerce - Display Certain Message/Image on a specific Category/Product

javascript

php

product

e-commerce