Using Your Own Product Navigation & Filters

Using Own Product Navigation and Filters

Example below for Media Boxes plug-in

Browse Content

<div class="row">

    <div class="col-md-12">

        <div class="col-md-12 text-center">

            {Notes}

        </div>

        <div class="col-md-12">

            <div class="col-md-9">

                <!-- The filter bar -->

                <ul class="media-boxes-filter" id="filter">

                    <li><a class='selected' href='#' {0}='*'>All</a></li>  First Filter Entry for All

                    {Filter}                                                                                Replaced with Filter Tag below

                </ul>

            </div>

            <div class="col-md-3 text-right">

                <input type="text" id="search" class="media-boxes-search" placeholder="Search By Title">

            </div>          

        </div>

        <div class="col-md-12">

                <div id="gridCatalogue">

                {Products}

            </div>

        </div>

    </div><!-- col-md-12 -->

</div><!-- row -->

Item Template

                      <div class="media-box {Categories}">

                            <div class="media-box-image">

                                <div data-width="320" data-height="214" data-thumbnail="{Thumbnail}"></div>

                                <div data-popup="{ProductImage}" title="{ProductName}"></div>                                       

                                <div class="thumbnail-overlay">

                                   <i class="fa fa-plus mb-open-popup"></i>

                                   <a href="{RunUrl}"><i class="fa fa-link"></i></a>

                                </div>

                            </div>

                                  <div class="media-box-content">

                                        <div class="media-box-title">{ProductName}</div>

                                        <div class="media-box-date">{SKU}</div>

                                        <div class="media-box-text">

                                             {Description}

                                        </div>

                                <div class="media-box-more"> <a href="{ProductImage}">Read more</a> </div>

                              </div>

                        </div>

Filter Tag

<li><a class='selected' href='#' data-filter='.{Category}'>{CategoryName}</a></li>

Meta Tags

<link rel="stylesheet" href="/path to folder/MediaBoxes/css/magnific-popup.css"/>

<link rel="stylesheet" type="text/css" href="/ path to folder /MediaBoxes/css/mediaBoxes.css"/>

Script Tags

<script src="/ path to folder /MediaBoxes/js/jquery.isotope.min.js"></script>

<script src="/ path to folder /MediaBoxes/js/jquery.imagesLoaded.min.js"></script>

<script src="/ path to folder /MediaBoxes/js/jquery.transit.min.js"></script>

<script src="/ path to folder /MediaBoxes/js/jquery.easing.js"></script>

<script src="/ path to folder /MediaBoxes/js/waypoints.min.js"></script>

<script src="/ path to folder /MediaBoxes/js/modernizr.custom.min.js"></script>

<script src="/ path to folder /MediaBoxes/js/jquery.magnific-popup.min.js"></script>

<script src="/ path to folder /MediaBoxes/js/jquery.mediaBoxes.js"></script>

<script type="text/javascript">

    $(function() {

                    $('#gridCatalogue').mediaBoxes({

                                filterContainer: '#filter',

                                search: '#search',

                                boxesToLoadStart: 8,

                                boxesToLoad: 5,

                                horizontalSpaceBetweenBoxes: 20,

                verticalSpaceBetweenBoxes: 20,

                    });

    });

</script>