I want to add third view in product sort in my Prestashop theme. I duplicated code from list view and create view one. But there is one problem. When I display product list in grid view everything is ok, change view to list - ok. Go to new view - ok. In this view I don’t want to see product description. I back to list view and I see undefined in place where is product description. I don't know why.
<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');
}
}
Thanks for help and explanation what is wrong in my code.
King regards
The problem in your code is when you change to flatview, it doesn't "use" product description and is not present in the code after the change. So when you change from flatview to another view, there is no html $(element).find('.product-desc').html() to find.
To solve this, instead of commenting that line, just hide the element:
html += '<p class="product-desc hide">'+ $(element).find('.product-desc').html() + '</p>';