Eine andere Ansicht in Sortierung in Prestashop

Question

Ich möchte dritte Ansicht in Produktsortierung in meinem Prestashop Theme hinzufügen. Ich habe den Code aus der Listenansicht dupliziert und die Ansicht eins erstellt. Aber es gibt ein Problem. Wenn ich die Produktliste in der Rasteransicht anzeige, ist alles in Ordnung, ändere die Ansicht in die Liste - ok. Gehe zur neuen Ansicht - ok. In dieser Ansicht möchte ich keine Produktbeschreibung sehen. Ich zurück zur Listenansicht und ich sehe nicht definiert, wo ist die Produktbeschreibung. Ich weiß nicht warum.

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

Vielen Dank für Hilfe und Erklärung, was in meinem Code falsch ist.

König in Bezug auf

Answer 1

Das Problem in Ihrem Code ist, wenn Sie flatview ändern, spielt es keine Produktbeschreibung „verwenden“ und ist im Code nach der Änderung nicht vorhanden. Wenn Sie von flatview zu einer anderen Ansicht wechseln, gibt es kein HTML $(element).find('.product-desc').html() zu finden. Um dies zu lösen, statt diese Zeile zu kommentieren, verstecken gerade das Element:

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