Tweak Library

More From This Category

Emphasised "More from this category" products, to show customers other similar items that they might like.

Industries

  • Fashion
  • Bicycles
  • Computers & Electronics
  • Furniture & Homewares
  • Alcohol
  • Music & Instruments
  • Gifts
  • Toys & Games
  • Jewellery & Accessories
  • Food & Beverages

Wireframe

Brand Logo

Coding Instructions

Paste the below where required, changing the limit & template paramaters where necessary.

[%thumb_list type:'products' filter_category:'[@content_id@]' filter_exsku1:'[@sku@]' limit:'4'%]
    [%param *header%]
        <h4>More from this category</h4>
        <div class="row">
    [%/param%]
    [%param *body%]
        <div class="col-sm-6">
            <div class="thumbnail">
                <div class="row">
                    <div class="col-sm-12 col-md-5">
                        <a href="[@URL@]" title="[@model@]">
                            <img src="[%asset_url type:'product' thumb:'thumb' id:'[@SKU@]'%][%param default%][%ntheme_asset%]img/default_product.gif[%/ntheme_asset%][%/param%][%/asset_url%]" class="product-image img-responsive" alt="[@model@]" rel="itmimg[@SKU@]">
                        </a>
                        [%if [@inpromo@]%]
                            <div class="savings-container"><span class="label label-danger">On Sale</span></div>
                        [%/if%]
                    </div>
                    <div class="col-sm-12 col-md-7">
                        <h5 class="nSmallThumbTitle">
                            <a href="[@url@]">[@model@]</a>
                        </h5>
                        <p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                            [%if [@inpromo@]%]
                                <strong>Now [%if [@has_child@]%]from&nbps;[%/if%]</strong>
                                <span itemprop="price">[%format type:'currency'%][@promo_price@][%/format%]</span>
                            [%else%]
                                [%if [@has_child@]%]From&nbsp;[%/if%]
                                <span itemprop="price">[%format type:'currency'%][@store_price@][%/format%]</span>
                            [%/if%]
                            <meta itemprop="priceCurrency" content="[@config:defaultcurrency@]">
                        </p>
                        <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="1" class="input-tiny">
                            [%if [@extra@] or [@has_child@] or [@editable_bundle@]%]
                            <a href="[@URL@]" title="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 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 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 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@]" title="Notify Me When Back In Stock" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Out Of Stock</a>
                            [%/if%]
                        </form>
                    </div>
                </div>
            </div>
        </div>
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
[%/thumb_list%]

To maintain consistent heights for your thumbnails, add this CSS:

.nSmallThumbTitle {
    height:46px;
    overflow:hidden;
}

1 related articles found: