There are two types of displaying products listing:
- ct-showProducts–default
Product listing
- ct-showProducts–list
Products list
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<ul class="ct-productsList list-unstyled list-inline"> <li> <div class="ct-productShop ct-productShop--zoom ct-productShop--smaller"> <div class="ct-productShop-category"> <span class="ct-productShop-h5">Rings</span> <div class="clearfix"></div> <div class="text-center"> <img class="ct-js-zoomImage" src="./assets/images/demo-content/featured-item2.jpg" data-zoom-image="assets/images/demo-content/featured-item2-large.jpg" alt=""> </div> </div> <div class="ct-productShop-content"> <div class="ct-productShop-content-description"> <div class="ct-productShop-content-description-h5 text-uppercase">Best Seller</div> <a href="single-product.html"> <h3>Charleso Krypell Sterlingoinum & 14K Yellow Gold</h3> <span>$290.99</span> </a> <div class="ct-listElementDescription"> <div class="ct-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star ct-u-colorGrey"></i> <i class="fa fa-star ct-u-colorGrey"></i> <div class="ct-reviews"> <a href="single-product.html">2 customer reviews</a> </div> </div> <div class="ct-u-paddingTop10 ct-u-paddingBottom15"> <a class="ct-detailsLink" href="#"><i class="fa fa-long-arrow-right fa-fw"></i> details</a> </div> <div> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart"></i></a> <div class="ct-or text-uppercase ct-u-paddingBottom20"> OR </div> <a class="btn btn-default" href="#" role="button">Speed Buy <i class="fa fa-long-arrow-right ct-u-paddingLeft10"></i></a> </div> </div> <span class="ct-productShop-shopCart"> <a class="btn btn-default" href="#" role="button"><i class="fa fa-shopping-cart fa-fw"></i></a> <a class="btn btn-default btn-hidden" href="#" role="button"><i class="fa fa-chain fa-fw"></i></a> </span> </div> </div> <div class="clearfix"></div> </div> </li> |
Javascript code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
$(document).ready(function () { var $tilesItems = $("#ct-js-showTiles"); var $listItems = $("#ct-js-showList"); var $showProducts = $(".ct-showProducts"); if($tilesItems && $listItems){ $tilesItems.click(function(e){ e.preventDefault(); var $existListClass = $(".ct-showProducts--list"); if($existListClass){ $showProducts.removeClass("ct-showProducts--list"); $showProducts.addClass("ct-showProducts--default"); $showProducts.css("display", "none"); $showProducts.fadeIn(); $(this).addClass("is-active"); $listItems.removeClass("is-active"); } }); $listItems.click(function(e){ e.preventDefault(); var $existDefaultClass = $(".ct-showProducts--list"); if($existDefaultClass){ $showProducts.removeClass("ct-showProducts--default"); $showProducts.addClass("ct-showProducts--list"); $showProducts.css("display", "none"); $showProducts.fadeIn(); $(this).addClass("is-active"); $tilesItems.removeClass("is-active"); } }); } }); |