Доступ к указанному элементу массива c в руле внутри условия IF - PullRequest
Новая
       129

Доступ к указанному элементу массива c в руле внутри условия IF

1 голос
/ 04 мая 2020

Первые несколько раз я работаю с рулем и не могу найти никакого ответа на этот вопрос.

У меня есть объект handlebars: {{product.options}}, который выводит количество образцов, которые активны для определенного продукта.

Таким образом, если у меня будет 3 образца цвета, вывод для {{product.options}} будет [объект объекта], [объект объекта], [объект объекта].

Чего я пытаюсь достичь , предназначается для каждого вывода образца цвета и назначает ему уникальный медиаэлемент источника. Так что после того, как пользователь щелкнет по указанному c образцу, будет загружено репрезентативное уменьшенное изображение для этого образца.

Теперь это делается по умолчанию на панели для продукта для каждого отдельного 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}}

Он загружает альтернативные изображения для рабочего стола, но я не знаю, как конкретно назначить их конкретному c образцу цвета. Я пробовал это с {{#if @index '===' 0}} и так далее, для указания другого сценария ios, но ничего не получалось.

А вот и весь класс изображений 

<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>

Миниатюрные изображения «по умолчанию» корректно переключаются при щелчке по другому образцу, что является основной c функциональностью основной темы Bigcommerce. , но я не знаю, как повторить эти условия.

1 Ответ

2 голосов
/ 04 мая 2020

Вы можете использовать комбинацию помощников #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);
};
...