переключение короткой новости

На сайте переключение короткой новости переключается вот такими кнопками

<a href="javascript:void(0);" id="list" data-template="list" class="btn btn-default btn-sm">List</a>
<a href="javascript:void(0);" id="grid" data-template="default" class="btn btn-default btn-sm active">Grid</a>

Как сохранить переключение в куки, jquery.cookie.js подключил, а дальше, что делать мозгов не хватает?
Как пример, что я имею ввиду можно посмотреть у SANDERA
сайт
.

Но в моем шаблоне новость не дублируется, в отличии от примера

Шаблон краткой новости

                    <div class="item col-sm-4">
                        <div class="product"> 
                            <div class="product-group">
                                <div class="product-thumbnail">
                                       <img alt="" src="[xfvalue_img]">
                                </div>
                                <div class="product-meta">
                                    <h3 class="product-title">{title}</h3>
                                    <h4 class="product-price">$130</h4>
                                    <div class="rating">
                                        <span class="rating-star"></span>
                                        <span class="rating-star"></span>
                                        <span class="rating-star"></span>
                                        <span class="rating-star"></span>
                                        <span class="rating-star"></span>                                    
                                    </div>
                                    <div class="product-description">
                                        <p>{short-story}</p>
                                    </div>
                                </div>
                                <div class="product-actions">
                                    <a class="btn btn-sm btn-default">Подробнее</a>
                                    <ul class="clearfix">
                                        <li><a href="#">Details<span class="fa fa-search"></span></a></li>
                                        <li><a href="#">Wishlist<span class="fa fa-heart-o"></span></a></li>
                                        <li><a href="#">Compare<span class="fa fa-exchange"></span></a></li>
                                        <li><a href="#">Share<span class="fa fa-share"></span></a></li>
                                    </ul>
                                </div>
                                <div class="ribbon-wrapper"><div class="ribbon">{category}</div></div>
                            </div>
                        </div>
                    </div>

 Источник:dle-faq.pro, DLE