在prestashop中添加第三个类别视图

Question

prestashop中的大多数主题只有2个选项来显示产品，列表和网格我想在default-bootstrap主题prestashop v1.6中添加第三个选项，所以首先我编辑product-sort.tpl并添加：

<li id="listsm">
    <a rel="nofollow" href="#" title="{l s='Listsm'}">
        <i class="icon-list"></i>{l s='Listsm'}
    </a>
</li>

接下来，我修改global.js文件并将function bindGrid()和function display(view)更改为：

function bindGrid()
{
    var view = $.totalStorage('display');

    if (!view && (typeof displayList != 'undefined') && displayList)
        view = 'list';

    if (view && view != 'grid')
        display(view);
    else if (view && view != 'listsm')
        display(view);
    else
        $('.display').find('li#grid').addClass('selected');

    $(document).on('click', '#grid', function(e){
        e.preventDefault();
        display('grid');
    });

    $(document).on('click', '#list', function(e){
        e.preventDefault();
        display('list');
    });

    $(document).on('click', '#listsm', function(e){
        e.preventDefault();
        display('listsm');
    });
}

function display(view)
{
if (view == 'list')
{
    $('ul.product_list').removeClass('grid').addClass('list row');
    $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
    $('.product_list > li').each(function(index, element) {
        html = '';
        html = '<div class="product-container"><div class="row">';
            html += '<div class="left-block col-xs-2 col-xs-3 col-md-2">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="center-block col-xs-7 col-xs-9 col-md-7">';
                html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
                html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
                var rating = $(element).find('.comments_note').html(); // check : rating
                if (rating != null) {
                    html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
                }
                html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
                //var colorList = $(element).find('.color-list-container').html();
                //if (colorList != null) {
                    //html += '<div class="color-list-container">'+ colorList +'</div>';
                //}
                var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
                if (availability != null) {
                    html += '<span class="availability">'+ availability +'</span>';
                }
                var price = $(element).find('.content_price').html();       // check : catalog mode is enabled
                if (price != null) {
                    html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
                }
            html += '</div>';
            html += '<div class="right-block col-xs-3 col-xs-12 col-md-3"><div class="right-block-content row">';
                //var price = $(element).find('.content_price').html();       // check : catalog mode is enabled
                //if (price != null) {
                //  html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
                //}
                html += '<div class="button-container col-xs-7 col-md-12">'+ $(element).find('.button-container').html() +'</div>';
                html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
            html += '</div>';
        html += '</div></div>';
    $(element).html(html);
    });
    $('.display').find('li#list').addClass('selected');
    $('.display').find('li#listsm').removeAttr('class');
    $('.display').find('li#grid').removeAttr('class');
    $.totalStorage('display', 'list');
}
else if (view == 'listsm')
{
    $('ul.product_list').removeClass('grid list').addClass('listsm row');
    $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
    $('.product_list > li').each(function(index, element) {
        html = '';
        html = '<div class="product-container"><div class="row">';
            html += '<div class="left-block col-xs-2 col-xs-3 col-md-2">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="center-block col-xs-7 col-xs-9 col-md-7">';
                html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
                html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
                var rating = $(element).find('.comments_note').html(); // check : rating
                if (rating != null) {
                    html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
                }
                html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
                //var colorList = $(element).find('.color-list-container').html();
                //if (colorList != null) {
                    //html += '<div class="color-list-container">'+ colorList +'</div>';
                //}
                var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
                if (availability != null) {
                    html += '<span class="availability">'+ availability +'</span>';
                }
                var price = $(element).find('.content_price').html();       // check : catalog mode is enabled
                if (price != null) {
                    html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
                }
            html += '</div>';
            html += '<div class="right-block col-xs-3 col-xs-12 col-md-3"><div class="right-block-content row">';
                //var price = $(element).find('.content_price').html();       // check : catalog mode is enabled
                //if (price != null) {
                //  html += '<div class="content_price col-xs-5 col-md-12">'+ price + '</div>';
                //}
                html += '<div class="button-container col-xs-7 col-md-12">'+ $(element).find('.button-container').html() +'</div>';
                html += '<div class="functional-buttons clearfix col-sm-12">' + $(element).find('.functional-buttons').html() + '</div>';
            html += '</div>';
        html += '</div></div>';
    $(element).html(html);
    });
    $('.display').find('li#listsm').addClass('selected');
    $('.display').find('li#list').removeAttr('class');
    $('.display').find('li#grid').removeAttr('class');
    $.totalStorage('display', 'listsm');
}
else
{
    $('ul.product_list').removeClass('list listsm').addClass('grid row');
    $('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');
    $('.product_list > li').each(function(index, element) {
    html = '';
    html += '<div class="product-container">';
        html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
        html += '<div class="right-block">';
            html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
            html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';
            var rating = $(element).find('.comments_note').html(); // check : rating
                if (rating != null) {
                    html += '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="comments_note">'+ rating + '</div>';
                }
            html += '<p itemprop="description" class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';
            var price = $(element).find('.content_price').html(); // check : catalog mode is enabled
                if (price != null) {
                    html += '<div class="content_price">'+ price + '</div>';
                }
            html += '<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="button-container">'+ $(element).find('.button-container').html() +'</div>';
            var colorList = $(element).find('.color-list-container').html();
            if (colorList != null) {
                html += '<div class="color-list-container">'+ colorList +'</div>';
            }
            var availability = $(element).find('.availability').html(); // check : catalog mode is enabled
            if (availability != null) {
                html += '<span class="availability">'+ availability +'</span>';
            }
        html += '</div>';
        html += '<div class="functional-buttons clearfix">' + $(element).find('.functional-buttons').html() + '</div>';
    html += '</div>';
    $(element).html(html);
    });
    $('.display').find('li#grid').addClass('selected');
    $('.display').find('li#list').removeAttr('class');
    $('.display').find('li#listsm').removeAttr('class');
    $.totalStorage('display', 'grid');
}

}

现在在类别页面上显示第三个视图选项，但点击时只会将＃添加到页面网址并将我重定向到页面顶部。我错过了什么？