<ul class="ProductList List">
    {{#variants}}
        <li class="ListView QuickView" data-product="{{ product.id }}">
            <div class="ProductImage">
                <a href="{{ product.url }}">
                    <img src="{{ product.default_image.thumbnail_url }}" alt="{{ product.name }}" />
                </a>
            </div>
            <div class="ProductDetails cf">
                <div class="ProductRightCol">
                    {{#if product.rating}}
                        <div class="ProductPriceRating">
                            <span class="Rating Rating{{ product.rating }}">
                                <img src="%%GLOBAL_TPL_PATH%%/images/IcoRating{{ product.rating }}.gif" alt="" style="" />
                            </span>
                        </div>
                    {{/if}}
                </div>
                <p class="p-name">
                    <a href="{{ product.url }}">{{ product.name }}</a>
                    <em class="p-price">
                        {{{ formatProductCatalogPrice . }}}
                    </em>
                </p>
                <p class="ProductDescription">{{{  product.description }}}</p>
                {{#if product.add_text }}
                    <div class="ProductActionAdd">
                        <a href="{{ product.add_url }}" class="btn icon-{{ product.add_text }}" title="{{ product.add_text }}">&nbsp;</a>
                    </div>
                {{/if}}
                {{#ifStoreConfig 'EnableProductComparisons'}}
                    <div class="ProductCompareButton">
                        <input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_{{ product.id }}" value="{{ product.id }}" onclick="product_comparison_box_changed(this.checked)" />
                        <label for="compare_{{ product.id }}">{{ getLang 'compare' }}</label>
                    </div>
                {{/ifStoreConfig}}
            </div>
        </li>
    {{/variants}}
</ul>
