Prestashop 中产品排序的另一种视图

Question

我想在我的 Prestashop 主题中的产品排序中添加第三个视图。我从列表视图复制代码并创建视图一。但是有一个问题。当我在网格视图中显示产品列表时，一切正常，将视图更改为列表 - 好的。转到新视图 - 好的。在这个视图中，我不想看到产品描述。我回到列表视图，我看到未定义的地方是产品描述。我不知道为什么。

<ul class="display hidden-xs">
    <li class="display-title">{l s='View:'}</li>
    <li id="grid"><a rel="nofollow" href="#" title="{l s='Grid'}"><i class="icon-th-large"></i>{l s='Grid'}</a></li>
    <li id="list"><a rel="nofollow" href="#" title="{l s='List'}"><i class="icon-th-list"></i>{l s='List'}</a></li>
    <li id="flatlist"><a rel="nofollow" href="#" title="{l s='Flat list'}"><i class="icon-th-list"></i>{l s='Flat list'}</a></li>
</ul>


function bindGrid()
{
    var storage = false;
    if (typeof (getStorageAvailable) !== 'undefined') {
        storage = getStorageAvailable();
    }
    if (!storage) {
        return;
    }

    var view = $.totalStorage('display');

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

    if (view && view != 'grid')
        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', '#flatlist', function (e) {
        e.preventDefault();
        display('flatlist');
    });
}
function display(view)
{
    if (view == 'flatlist')
    {
        $('ul.product_list').removeClass('grid').addClass('flatlist 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) {
            var html = '';
            html = '<p>Flat list</p>';
            html += '<div class="product-container"><div class="row">';
            html += '<div class="left-block col-xs-4 col-sm-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="center-block col-xs-4 col-sm-7 col-md-4">';
            html += '<div class="product-flags">' + $(element).find('.product-flags').html() + '</div>';
            html += '<h5 itemprop="name">' + $(element).find('h5').html() + '</h5>';

            //html += '<p class="product-desc">'+ $(element).find('.product-desc').html() + '</p>';

            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="right-block col-xs-4 col-sm-12 col-md-4"><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#flatlist').addClass('selected');
        $('.display').find('li#grid').removeAttr('class');
        $('.display').find('li#list').removeAttr('class');
        $.totalStorage('display', 'flatlist');
    }
    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) {

            var html = '';

            html = '<div class="product-container"><div class="row">';
            html += '<div class="left-block col-xs-4 col-sm-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
            html += '<div class="center-block col-xs-4 col-sm-7 col-md-4">';
            html += '<div class="product-flags">' + $(element).find('.product-flags').html() + '</div>';
            html += '<h5 itemprop="name">' + $(element).find('h5').html() + '</h5>';
            var hookReviews = $(element).find('.hook-reviews');
            if (hookReviews.length) {
                html += hookReviews.clone().wrap('<div>').parent().html();
            }
            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>';
            }
            html += '</div>';
            html += '<div class="right-block col-xs-4 col-sm-12 col-md-4"><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#grid').removeAttr('class');
        $('.display').find('li#flatlist').removeAttr('class');
        $.totalStorage('display', 'list');
    }
    if (view == 'grid')
    {
        $('ul.product_list').removeClass('list').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) {
            var html = '';
            html = '<p>Grid</p>';
            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 hookReviews = $(element).find('.hook-reviews');
            if (hookReviews.length) {
                html += hookReviews.clone().wrap('<div>').parent().html();
            }
            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="https://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#flatlist').removeAttr('class');
        $.totalStorage('display', 'grid');
    }
}

感谢您的帮助和解释我的代码有什么问题。

国王的问候

Answer 1

您的代码中的问题是，当您更改为 flatview 时，它不会“使用”产品描述，并且更改后的代码中也不存在。因此，当您从 flatview 更改为另一个视图时，找不到 html $(element).find('.product-desc').html()。 要解决这个问题，不要注释该行，只需隐藏元素：

html += '<p class="product-desc hide">'+ $(element).find('.product-desc').html() + '</p>';