product_items.html


Purpose: This template is used to display the default layout for your store’s products. In order to call this template, you will use the following variable "[product items]".

Code Blocks

Note: It is important to preserve the commented tags to ensure the software performs correctly.

<div class="product-item" data-catalogid="[catalogid]" data-ajaxcart="1" data-addcart-callback="addcart_callback">
    <div class="img">
        <a href="product.asp?itemid=[catalogid]">
            <img src="[THUMBNAIL]" alt="[name]" class="img-responsive" />
        </a>
        <!--START: quickview-->
        <button class="quickview" data-toggle="modal">Quick View</button>
        <!--END: quickview-->
    </div>
    <div class="name">
        <a href="product.asp?itemid=[catalogid]">[name]</a>
    </div>

    <div class="price">
        <!--START: ITEMPRICE-->
        <span class="regular-price">[ITEMPRICE]</span>
        <!--END: ITEMPRICE-->
        <!--START: SALEPRICE-->
        <del class="regular-price">[ITEMPRICE]</del>
        <span class="sale-price">[ITEMSALEPRICE]</span>
        <span class="on-sale-badge">[product_sale]</span>
        <!--END: SALEPRICE-->
    </div>

    <div class="status">
        <!--START: product_availability-->
        <span class="availability">[availability]</span>
        <!--END: product_availability-->
        <!--START: freeshippingblock-->
        <span class="freeshipping">[freeshipping]</span>
        <!--END: freeshippingblock-->
    </div>

    <div class="reviews">
        <!--START: product_review-->
        <!--START: product_review_average-->
        <span class="reviews-stars rating-[review_average]"></span> <span class="reviews-count">([review_count])</span>
        <!--END: product_review_average-->
        <!--END: product_review-->
    </div>

    <div class="action">
        <a href="add_cart.asp?quick=1&amp;item_id=[catalogid]" class="add-to-cart btn btn-default">
            <span class="buyitlink-text">[category_buyitlink]</span>
            <span class="ajaxcart-loader icon-spin2 animate-spin"></span>
            <span class="ajaxcart-added icon-ok"></span>
        </a>
    </div>
</div>

Variables

  • [catalogid] – Inserts the individual product Database ID numbers where products are displayed.
  • [thumbnail] – Inserts the individual product Thumbnails where products are displayed.
  • [name] – Inserts the individual product Name information where products are displayed.
  • [ITEMPRICE] – Inserts the individual product Price information where products are displayed.
  • [ITEMSALEPRICE] – Inserts the individual product Sale Price information where products are displayed.
  • [product_sale] Inserts the badge for the on sale item
  • [availability] – Used for scripting product’s inventory control options.
  • [freeshipping] – Inserts “Free Shipping” icon when item is marked for Free Shipping. Note: IMage path can be edited in Store Language. (See Settings ->Design ->Store Language)
  • [review_average]  Inserts the number of the stars/reviews the product have
  • [category_buyitlink] – Inserts related and upsell item buy links. (See Settings ->Design ->Store Language)
X