On Sale Products

Industries

  • Fashion
  • Bicycles
  • Computers & Electronics
  • Fitness & Supplements
  • Furniture & Homewares
  • Health & Beauty
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Gifts
  • Toys & Games
  • Jewellery & Accessories
  • Animal & Pet Care
  • Arts & Crafts
  • Events & Party Supplies
  • Food & Beverages

Wireframe

On Sale Products

Coding Instructions

Paste this code, adjusting the limit as necessary:

[%list type:'product' template:'' filter:'promo_current=y' limit:'4'%]
    [%param *header%]
        <h3>On Sale</h3>
        <div class="row">
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
[%/list%]

With the list tag you can sort which type of products will display, so for instances, you might want to show on sale products with promotion prices ending soon. To do this we just need to give the list function a sort parameter:

[%list type:'product' template:'' filter:'promo_current=y' sort:'promo_end' limit:'4'%]

Note - Ensure all products in promotion have a start/end date on each individual product and a promotion price that is lower than the store price.

Create a new product list template

Create a new template under /assets/themes/THEME-NAME/templates/list/product called "template.html", and copy the same code from the following template: /assets/themes/THEME-NAME/templates/thumb/product/template.html.

Note: The [%list%] is a new function that replaces many other Neto B@SE functions such as [%thumb_list%], [%content_menu%] and many other functions. While the [%thumb_list%] function takes it's body template from the thumbs directory, the [%list%] function takes it's body template from the list directory, which isn't in a theme directoy by default. If you want the exact templates from your thumbs directory then you could copy /assets/themes/THEME-NAME/templates/thumb/product/*.html into /assets/themes/THEME-NAME/templates/list/product.

This will use the default product list template: /assets/themes/THEME-NAME/templates/list/product/template.html:

<article class="wrapper-thumbnail col-xs-8 col-sm-6 col-md-4 col-lg-3" role="article" aria-label="Product Thumbnail">
    <div class="thumbnail" itemscope itemtype="http://schema.org/Product">
        <meta itemprop="brand" content="[@brand@]"/>
        <a href="[%url type:'item' id:'[@sku@]' /%]" class="thumbnail-image">
            <img src="[%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%]" class="product-image" alt="[@model@]" rel="itmimg[@SKU@]">
        </a>
        <div class="caption">
            <h3 itemprop="name"><a href="[%url type:'item' id:'[@sku@]' /%]">[%format type:'text' truemaxlength:'50' rmhtml:'1'%][@model@][%/FORMAT%]</a></h3>
            <p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer" aria-label="[@model@] price">
                [%if [@inpromo@]%]
                    Now [%if [@has_child@]%]from [%/if%]
                    <meta itemprop="priceValidUntil" content="[%format type:'date' format:'#Y-#M-#d'%][@promo_end@][%END format%]"/>
                    <span itemprop="price" content="[@promo_price@]">[%format type:'currency'%][@promo_price@][%/format%]</span>
                [%else%]
                    [%if [@has_child@]%]From [%/if%]
                    <span itemprop="price" content="[@store_price@]">[%format type:'currency'%][@store_price@][%/format%]</span>
                [%/if%]
                <meta itemprop="priceCurrency" content="[@config:defaultcurrency@]">
            </p>
            [%tracking_code type:'Thumbnails' /%]
            <!-- Purchase Logic -->
            <form class="form-inline buying-options">
                <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku[@rndm@][@SKU@]" value="[@SKU@]">
                <input type="hidden" id="model[@rndm@][@SKU@]" name="model[@rndm@][@SKU@]" value="[@model@]">
                <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb[@rndm@][@SKU@]" value="[@thumb@]">
                <input type="hidden" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="[%if [@min_qty@] > 0%][@min_qty@][%else%]1[%/if%]" class="input-tiny">
                [%if [@extra@] or [@has_child@] or [@editable_bundle@]%]
                    <a href="[%url type:'item' id:'[@sku@]' /%]" title="View [@model@] Buying Options" class="btn btn-primary btn-block btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">See Options</a>
                [%elseif [@store_quantity@] > 0 AND [@preorder@] %]
                    <button type="button" title="Pre-Order [@model@] Now!" class="addtocart btn btn-warning btn-block btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Pre-Order</button>
                [%elseif [@store_quantity@] > 0 AND ![@preorder@] %]
                    <button type="button" title="Add [@model@] to Cart" class="addtocart btn-primary btn btn-block btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Add to Cart</button>
                [%elseif [@store_quantity@] < 1 AND [@config:ALLOW_NOSTOCK_CHECKOUT@] %]
                    <button type="button" title="Add [@model@] to Cart" class="addtocart btn-primary btn btn-block btn-loads" rel="[@rndm@][@SKU@]" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Backorder</button>
                [%else%]
                    <a class="notify_popup btn btn-default btn-block btn-loads" href="[%url type:'item' id:'[@sku@]' /%]" title="Notify Me When [@model@] Is Back In Stock" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Out Of Stock</a>
                [%/if%]
            </form>
            <!-- /Purchase Logic -->
        </div>
        <div class="savings-container">
            [%if [@inpromo@]%]
                <span class="label label-danger">On Sale</span>
            [%/if%]
            [%if [@save@] > 0 AND ![@has_child@] %]
                <span class="label label-warning">
                [%format type:'percent'%][@save@][%/format%] OFF</span>
            [%/if%]
            [%if [@save@] > 0%]
                <span class="label label-default">RRP [%format type:'currency'%][@retail@][%/format%]</span>
            [%/if%]
        </div>
    </div>
</article>

Was this article useful?

Be notified when this page is updated. Optional.