Не переключаться вид отображения товара. Переключаться с grid на list, а вот с price на list и grid не работает. Как поправить?

Question

[Mracula]

Не переключаться вид отображения товара. Переключаться с grid на list и наоборот, а вот с price на list и grid не работает. Как поправить?

// Product List
	$('#list-view').click(function() {
		$('#content .product-grid > .clearfix').remove();

		 $('#content .product-layout').attr('class', 'product-layout product-list col-xs-12');

    localStorage.setItem('display', 'list');
    $(this).addClass('btn-danger');
    $('#grid-view').removeClass('btn-danger');
    $('#price-view').removeClass('btn-danger');
  });

// Product Grid
	$('#grid-view').click(function() {
		// What a shame bootstrap does not take into account dynamically loaded columns
		var cols = $('#column-right, #column-left').length;

		if (cols == 2) {
			$('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
		} else if (cols == 1) {
			$('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-4 col-sm-6 col-xs-12');
		} else {
			$('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');
		}

	    localStorage.setItem('display', 'grid');
     $(this).addClass('btn-danger');
     $('#list-view').removeClass('btn-danger');
     $('#price-view').removeClass('btn-danger');
     });
	
	
// Product Price
 $('#price-view').click(function() {

        $('#content .product-layout').attr('class', 'product-layout product-price col-xs-12');

      $('.product-price > div').each(function(index, element) {
          html = '';

          var image = $(element).find('.image').html();
          var name = $(element).find('.caption h4').html();
          var description = $(element).find('.caption p').html();
          var price = $(element).find('.price').html();
          var cart = $(element).find('.button-group').html();
          var rating = $(element).find('.rating').html();
          var labels = $(element).find('.product-label').html();

          if (labels != null) {
              labels = '<div class="product-label">' + labels + '</div>';
          }
          if (labels == undefined) {
          	  labels = '';
          }
          if (rating != null) {
              rating = '<p class="rating">' + rating + '</p>';
          }
          if (rating == undefined) {
          	  rating = '';
          } 
          if (image != null) {
              html += '<tr class="noparent"><td class="image">' + image + labels + '</td>';
          }
          if (name != null) {
              html += '<td class="name"><h4>' + name + '</h4></td>';
          }
          if (description != null) {
              html += '<td><p class="description">' + description + '</p>' + rating +'</td>';
          } 
          if (price != null) {
              html += '<td class="price">' + price + '</td>';
          }
          if (cart != null) {
              html += '<td class="button-group">' + cart + '</td></tr>';
          }                       

          $(element).html(html);        
    });
        if (localStorage.getItem('display') == 'list' || localStorage.getItem('display') == 'grid') {
      $('.noparent').unwrap().unwrap();
          $(".noparent").wrapAll('<div class="col-sm-12 price-view"><table class="table table-hover product-price"><tbody></tbody></table></div>');
          $('thead').remove();
          $('.noparent').parent().before('<thead><tr> <th>фото</th><th>Название</th><th>Описание</th><th>Цена</th> <th></th> </tr></therd>');
	    } else {
	      $('.noparent').unwrap().unwrap();
	          $(".noparent").wrapAll('<div class="row"><div class="col-sm-12 price-view"><table class="table table-hover product-price"><tbody></tbody></table></div></div>');
	          $('thead').remove();
	          $('.noparent').parent().before('<thead><tr> <th>фото</th><th>Название</th><th>Описание</th><th>Цена</th> <th></th> </tr></therd>');
	    }        

        localStorage.setItem('display', 'price');
        $(this).addClass('btn-danger');
        $('#grid-view').removeClass('btn-danger');
        $('#list-view').removeClass('btn-danger');
     
    });

	if ($(window).width() <= 768){
	localStorage.setItem('display', 'grid');
	}

	if (localStorage.getItem('display') == 'list') {
	$('#list-view').trigger('click');
	} else if (localStorage.getItem('display') == 'grid') {
	$('#grid-view').trigger('click');
	} else {
	$('#price-view').trigger('click');
	}

Answer 1

[Mracula]

Решил добавить еще один способ показа товара прайсом. Вот таким скриптом. Добавил price-view в tpl, кнопочки появились. С прайса переключаться на сетку, при нажатии кнопки лист, снова отображается сетка,


Убрал из common.js строки

// Product List
$('#list-view').click(function() {
$('#content .product-grid > .clearfix').remove();

$('#content .row > .product-grid').attr('class', 'product-layout product-list col-xs-12');
$('#grid-view').removeClass('active');
$('#list-view').addClass('active');

localStorage.setItem('display', 'list');
});
Получается переключаться с прайса на лист и сетку а вот с сетки или листа только на прайс. Как решить проблему?