Cacher is the code snippet organizer for pro developers

\!h product.html

{{#if product.related_products}}
<div class="related-products" style="background: url({{cdn '/img/bg-3.png'}})">
    <h2>{{lang 'products.related_products'}}</h2>
    <div class="related-products-holder">
        {{#if settings.data_tag_enabled}}
            {{> components/products/carousel products=product.related_products columns=6 list="Related Products"}}
        {{else}}
            {{> components/products/carousel products=product.related_products columns=6}}
        {{/if}}
    </div>
</div>
{{/if}}

\!h carousel.html

{{#each products}}
    {{> components/products/related-product settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1)}}
{{/each}}

\!h related-product.html

 <article class="card product-preview-card {{#if alternate}}card--alternate{{/if}}" {{#if settings.data_tag_enabled}} data-event-type="{{event}}" data-entity-id="{{id}}" data-position="{{position}}" data-name="{{name}}" data-product-category="{{#each category}}{{#if @last}}{{this}}{{else}}{{this}}, {{/if}}{{/each}}" data-product-brand="{{brand.name}}" data-product-price="{{#if price.with_tax}}{{price.with_tax.value}}{{else}}{{price.without_tax.value}}{{/if}}"  {{/if}}>

    <div class="card-image-holder">
        {{#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}}
            <div class="card-img-container">
                <img class="card-image lazyload" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'related_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
            </div>
        {{else}}
            <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>
                <div class="card-img-container">
                    <img class="card-image lazyload" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'related_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
                </div>
            </a>
        {{/if}}

    </div>
    <div class="card-body">

        {{#and rating show_rating}}
            <p class="card-text" data-test-info-type="productRating">
                <span class="rating--small">
                    {{> components/products/ratings rating=rating}}
                </span>
            </p>
        {{/and}}

        {{#each custom_fields}}
            {{#if name '==' 'preview_title' }}
                <h3 class="preview-title"><a href="{{../../url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>{{value}}</a></h3>
            {{else}}
            {{/if}}
            {{#if name '==' 'preview_subtitle' }}
                <h4 class="preview-subtitle">{{value}}</h4>
            {{/if}}
        {{/each}}

        <h3 class="main-title">
            {{#if demo}}
                {{name}}
            {{else}}
                <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>{{name}}</a>
            {{/if}}
        </h3>

        <div class="card-text" data-test-info-type="price">
            {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
                {{> components/products/price price=price}}
            {{else}}
                {{> components/common/login-for-pricing}}
            {{/or}}
        </div>

        {{> components/products/bulk-discount-rates}}

        <div class="product-card-actions">
            {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
                {{#if show_cart_action}}
                    {{#if has_options}}
                        <a href="{{url}}" data-event-type="product-click" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>
                    {{/if}}
                    {{#if pre_order}}
                        <a href="{{pre_order_add_to_cart_url}}" data-event-type="product-click" class="button button--small card-figcaption-button">{{lang 'products.pre_order'}}</a>
                    {{/if}}
                    {{#if add_to_cart_url }}
                        <a href="{{add_to_cart_url}}" data-event-type="product-click" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
                    {{/if}}
                    {{#if out_of_stock_message }}
                        <a href="{{url}}" data-event-type="product-click" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{out_of_stock_message}}</a>
                    {{/if}}
                {{/if}}
            {{/or}}
        </div>

    </div>
</article>