gistfile1.tpl

{* Получаем товары*}

{$section = $smarty.get.section|default:$modx->resource->id}

{$params = [
    "sort_weight" => $smarty.get.sort_weight,
    "sort_price" => $smarty.get.sort_price,
    "limit"     => 10,
    "getPage"   => 1
]}

{if $section != 33}
    {$params.parent = $section}
{/if} 

{processor action="web/catalog/products/getdata" ns="modxsite" params=$params assign=result}


{* Набиваем через единый шаблон листинга *}
{include file="shop/catalog/list/fetch.tpl" assign=products_html}


{block name=products_content}
    
    {include file="inc/blocks/crumbs/catalog.tpl"}
    
    
    <div class="pm-catalog">
         
        <noindex>
             
            <div class="pm-filter">
                <form id="mFilter" class="filters" method="get" action=""> 
                    
                    <input type="hidden" name="sort_field" value="">
                    <input type="hidden" name="sort_dir" value="">
                    <input type="hidden" name="page" value="">
                    <input type="hidden" name="section" value="{$section}">
                    
                    <div class="pm-sort">
                        
                        <div class="sr-inner">
                            <div class="sr-sec sr-gp-1 sr-pr__name">
                                <span>Сортировать по:</span>
                            </div>
                            <div class="sr-sec sr-gp-2 sr-pr__weight">
                                <div class="sr-fil-wrap">
                                    <span>весу</span>
                                    <div class="sr-fil">
                                        <button type="submit" name="sort_weight" value="asc" class="{if $smarty.get.sort_weight == 'asc'}selected{/if}">возрастанию</button>/<button type="submit" name="sort_weight" value="desc" class="{if $smarty.get.sort_weight == 'desc'}selected{/if}">убыванию</button> 
                                    </div>
                                </div>
                    		</div>
                    		<div class="sr-sec sr-gp-2 sr-pr__price">
                                <div class="sr-fil-wrap">
                            	    <span>цене</span>
                                    <div class="sr-fil">
                                        <button type="submit" name="sort_price" value="asc" class="{if $smarty.get.sort_price == 'asc'}selected{/if}">возрастанию</button>/<button type="submit" name="sort_price" value="desc" class="{if $smarty.get.sort_price == 'desc'}selected{/if}">убыванию</button> 
                            	    </div>
                                </div>
                    		</div>
                            <div class="clr"></div>
                    	</div>
            		 
                    </div>
            	</form>
             
            </div>
        
        
            <style>
                
                #mFilter{}
                
                #mFilter button{
                    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
                    border: medium none;
                    color: #4691c2;
                    cursor: pointer;
                    display: inline;
                    font-size: 13px;
                    font-weight: normal;
                    margin: 0 -2px;
                    padding: 0;
                    text-decoration: underline; 
                }
                
                #mFilter button.selected {
                    color: inherit;
                    cursor: auto;
                    text-decoration: none;
                }
                
            </style>
            
            
            <script type="text/javascript">
                // mFilter
                
                new (function(){
                    
                    var self = this;
                    
                    this.catalog = null;
                    this.form = null;
                    
                    this.init = function(){
                        this.addListeners();
                    }
                    
                    this.addListeners = function(){
                        this.catalog = $('.pm-catalog');
                        this.form = this.catalog.find('form.filters');
                        
                        var buttons = this.form.find('button');
                        
                        buttons.on('click', this, this.onSubmit);
                        
                        this.catalog.on('click', '.pagination a', this, this.onPageChange);
                        
                        $('.st-list a').on('click', this, this.onCategoryChange);
                    }
                    
                    this.onSubmit = function(e){ 
                        
                        var scope = e.data;
                        var form = scope.form;
                        
                        var button_element = this;
                        var button = $(this);
                        var name = button.attr('name');
                        var value = button.val();
                        
                        form.find('[name=sort_field]').val(name);
                        form.find('[name=sort_dir]').val(value);
                        
                        
                        form.find('button').each(function(){
                            var b = $(this);
                            if(this == button_element){
                                b.addClass('selected');
                            }
                            else{
                                b.removeClass('selected');
                            }
                        });
                        
                        
                        form.find('[name=page]').val('');
                        
                        
                        // var data = {};
                        // data[name] = value;
                        
                        // scope.loadCatalog(data);
                        scope.loadCatalog();
                        
                        
                        return false;
                    };
                    
                    this.onPageChange = function(e){
                        var scope = e.data;
                        var form = scope.form;
                        
                        form.find('[name=page]').val($(this).attr('data-page'));
                         
                        scope.loadCatalog();
                        return false;
                    }
                    
                    this.onCategoryChange = function(e){
                        var scope = e.data;
                        var form = scope.form;
                        
                        var element = this;
                        var a = $(this);
                        
                        var title = a.text();
                        
                        $('.pm-content .pagetitle').text(title);
                        $('.pm-breadcrumbs li:last').find('span').text(title);
                        
                        form.find('[name=page]').val('');
                        form.find('[name=section]').val($(this).attr('data-item'));
                        
                        $('.st-list a').each(function(){
                            var li = $(this).parent();
                            
                            if(this == element){
                                li.addClass('current');
                            }
                            else{
                                li.removeClass('current');
                            }
                        });
                         
                        scope.loadCatalog();
                        return false;
                    }
                    
                    this.loadCatalog = function(url){ 
                        
                        var scope = this;
                        var form = scope.form;
                        var catalog = scope.catalog;
                        catalog.css({ 'opacity': 0.5 });
                        var items = catalog.find('.mItems:first');
                        
                        var data = {};
                        
                        var sort_field = form.find('[name=sort_field]'); 
                        var sort_dir = form.find('[name=sort_dir]');
                        var page_field = form.find('[name=page]'); 
                        var name;
                        if(name = sort_field.val()){
                            data[name] = sort_dir.val() || "asc";
                        }
                        
                        var page = page_field.val();
                        if(page > 1){
                            data['page'] = page;
                        }
                        
                        data.section = form.find('[name=section]').val();
                        
                        $.ajax({
                            "url": 'ajax/catalog/products.html'
                            ,"type": "get"
                            ,data: data
                            ,success: function(response){
                                items.html(response);
                                catalog.css({ 'opacity': 1 });
                                
                                var destination = $('.pm-content').offset().top;
                
                                $("html:not(:animated)").animate({ scrollTop: destination }, 250);
                                
                            }
                            ,error: function(){
                                catalog.css({ 'opacity': 1 });
                                alert("Ошибка выполнения запроса");
                            }
                        });
                    }
                    
                })().init();
                
                
            </script>
            
        
        </noindex>
        
        {$products_html}
        
        
    </div>

{/block}