Masonry to Product Thumbnails

1.md

Add Masonry to Product Thumbnails

Allow for a stone masonry style product thumbnail grid.

Note: on the home.template.html template we changed the limit to 6, this was to suit this particular layout and the logic in the masonry.template.html template.

Also the event listeners on 'mouseenter mouseleave' are not needed, jsut a style effect.

Note: on the masonry.template.html template very little has changed, we didn't need to add a new selector and could of used .wrapper-thumbnail.

Demo:

http://devphil.neto.com.au/?nview=leftside

Create for:

https://github.com/NetoECommerce/Designer-Docs/tree/master/src/tweaklibrary/productthumbnails

Scripts needed in footer:

http://masonry.desandro.com/ http://imagesloaded.desandro.com/

<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>
<script src="https://npmcdn.com/[email protected]/imagesloaded.pkgd.min.js"></script>

home.html

[%site_value id:'footer_javascript'%]
	<script type="text/javascript" language="javascript">
		var $container = $('.masonry-container');
		$container.imagesLoaded( function () {
		  $container.masonry({
		    columnWidth: '.wrapper-masonry-thumbnail',
		    itemSelector: '.wrapper-masonry-thumbnail'
		  });   
		});	

	var productThumb = $('.wrapper-masonry-thumbnail');
	productThumb.on('mouseenter mouseleave', function(e) {
	    productThumb.not(this).stop(true).fadeTo('fast', e.type=='mouseenter'?0.2:1);
	});								
	</script>
[%/site_value%]

	[%if [@config:show_home_ads@]%]
		[%advert type:'product' limit:'6' template:'masonry' ad_group:''%]
			[%param *header%]
				<hr />
				<div class="row masonry-container">
			[%/param%]
			[%param footer%]
				</div>
			[%/param%]
			[%param *ifempty%]
				[%random_products category:'0' template:'masonry' limit:'6'%]
					[%param *header%]
						<hr />
						<div class="row">
					[%/param%]
					[%param *footer%]
						</div>
					[%/param%]
				[%/random_products%]
			[%/param%]
		[%/advert%]
	[%/if%]

masonry.template.html

	<div class="wrapper-masonry-thumbnail wrapper-thumbnail [%if [@count@] eq 2 || [@count@] eq 3%]col-xs-12 col-md-6[%else%]col-xs-6 col-md-3[%/if%]">
		<div class="thumbnail" itemscope itemtype="http://schema.org/Product">
			<meta itemprop="brand" content="[@brand@]"/>
			<a href="[@URL@]" class="thumbnail-image">
				[%if [@count@] eq 2 || [@count@] eq 3%]
					<img src="[%asset_url type:'product' thumb:'thumbL' 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@]">
				[%else%]
					<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@]">
				[%/if%]
			</a>
			<div class="caption">
				<h3 itemprop="name"><a href="[@URL@]" title="[@model@]">[%format type:'text' truemaxlength:'50' rmhtml:'1'%][@model@][%/FORMAT%]</a></h3>
				<p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
					[%if [@inpromo@]%]
						Now&nbsp;[%if [@has_child@]%]from&nbsp;[%/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&nbsp;[%/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@]" 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>
				<!-- /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>
	</div>