Blinker App BigCommerce Integration - Related products grid template

blinker-related-products.html

<article class="card" data-test="card-{{product.id}}">
    <figure class="card-figure">
        <a href="{{product.url}}" class="card-figure__link">
            <div class="card-img-container">
                {{> components/common/responsive-img
                    image=product.main_image
                    class="card-image"
                    fallback_size=theme_settings.productgallery_size
                    lazyload=theme_settings.lazyload_mode
                    default_image=theme_settings.default_image_product
                }}
            </div>
        </a>
    </figure>
    
    <div class="card-body">
        <p class="card-text" data-test-info-type="productRating">
            <span class="rating--small">
                {{> components/products/ratings rating_target=name rating=product.rating}}
            </span>
        </p>
        <h3 class="card-title">
            <a href="{{product.url}}">
                {{product.title}}<br>{{product.image}}
            </a>
        </h3>

        <div class="card-text" data-test-info-type="price">
            {{> components/products/price price=product.price}}
        </div>
    </div>
</article>