Другой вид сортировки продукта в Prestashop

Question

Я хочу добавить третий вид в сортировку продукта в моей теме Prestashop. Я дублировал код из списка и создавал его. Но есть одна проблема. Когда я показываю список продуктов в режиме сетки, все в порядке, измените вид на список - ok. Перейти к новому виду - нормально. В этом представлении я не хочу видеть описание продукта. Я возвращаюсь к просмотру списка, и я вижу неопределенное место, где указано описание продукта. Я не знаю почему.

<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>';