我是第一次使用车把,但我找不到任何答案。
我有一个handlebars对象。{{product.options}}
它输出了一个特定产品的活动色板数量。
所以,如果我有3个颜色的色板,那么输出的结果是 {{product.options}}
会是[对象对象]、[对象对象]、[对象对象]。
我试图实现的是,针对每一个色板输出,并为其分配一个独特的源媒体元素,所以当用户点击一个特定的色板后,将加载该色板的代表性缩略图。
现在,这是在产品的面板中为每个单独的SKU默认完成的,但你可以只上传一张图片。我需要这样做,因为我想为手机和桌面上的所有色板提供不同的图片。
到目前为止,我得到了这个代码
{{#if product.options}}
<source media="(min-width: 768px)"
srcset="{{getImage ../product.images.[6] (cdn theme_settings.default_image_product)}}">
<source media="(min-width: 768px)"
srcset="{{getImage ../product.images.[7] (cdn theme_settings.default_image_product)}}">
{{/if}}
它加载了桌面的替代图像,但我不知道如何将它们具体分配到特定的颜色样本。我尝试用 {{#if @index '===' 0
}}等等,用于指定不同的场景,但没有任何效果。
这里是整个图片类
<picture class="productLayout-one-picture fullwidth-image-container productView-image is-ready" data-image-gallery-main>
{{#if product.options}}
<source media="(min-width: 768px)"
srcset="{{getImage ../product.images.[6] (cdn theme_settings.default_image_product)}}">
<source media="(min-width: 768px)"
srcset="{{getImage ../product.images.[7] (cdn theme_settings.default_image_product)}}">
{{/if}}
<img class="productView-image--default fullwidth-image"
data-sizes="auto"
src="{{getImage product.main_image (cdn theme_settings.default_image_product)}}"
alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-main-image >
</picture>
'默认'的缩略图在点击不同的swatch时正确切换,这是bigcommerce基石主题的基本功能,但我不知道如何复制这些情况。
你可以使用以下组合 #each
和 #if_eq
帮助者进行比较。
{{#if product.options}}
{{#each product.options}}
{{#if_else index compare=0 }}
// .. do something specific
{{/if_else}}
{{/each}}
{{/if}}
if_eq.js
export default function(context, options) {
var compare = options.hash.compare;
if(compare && context) {
compare = compare.toString();
context = context.toString()
}
if (context === compare) {
return options.fn(this);
}
return options.inverse(this);
};