Grid View y List View en Product-List

[SergioE]

Buenas tardes,

 

En una plantilla de Leo tengo puestas estas dos vistas y por defecto aparece la vista en quadrícula (grid).

 

Como puedo hacer para que en versión móviles salga por defecto la otra vista (list view) ??

 

Supongo tendré que modificar algo de javascript en el product.js o el global.js , pero no se cual es la función que debería añadir.

 

Alguien sabe como?

 

Gracias

 

[SergioE]

Sería modificando esta función del global.js?

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

        gridType = "grid";
        if($("#page").data("type") != 'undefined') gridType = $("#page").data("type");
        if(view && view != gridType) display(view);
        else display(gridType);
	$(document).on('click', '#grid', function(e){
		e.preventDefault();
		
		display('grid');
		$.totalStorage('display', 'grid');
	});

	$(document).on('click', '#list', function(e){
		e.preventDefault();
		
		display('list');
		$.totalStorage('display', 'list');
	});
}

Ahí sería añadir algún condicional para que cuando sea versión móvil, es decir, @media (max-width: 481px), tome el display 'list'. Es posible?

[SergioE]

Le he conseguido con esto, pero solamente funciona cuando lo miro desde el ordenador, en el móvil no funciona.

$(window).resize(function(){
		if ($(window).width() < 480)
		{
			$('.product_list').removeClass('grid').addClass('list');
		$('.product_list > div').removeClass(classGrid).addClass('col-xs-12');
		$('.product_list > div').each(function(index, element) {
			html = '';
			html = '<div class="product-container product-block text-center"><div class="row">';
				html += '<div class="left-block col-md-4 col-sm-4 col-xs-5">' + $(element).find('.left-block').html() + '</div>';
				html += '<div class="right-block col-md-8 col-sm-8 col-xs-7">' + $(element).find('.right-block').html() + '</div>';	
			html += '</div></div>';
		$(element).html(html);
		});		
		$('.display').find('li#list').addClass('selected');
		$('.display').find('li#grid').removeAttr('class');			
		}
		else if ($(window).width() > 768)
		{
			$('div.product_list').removeClass('list').addClass('grid');
		$('.product_list > div').removeClass('col-xs-12').addClass(classGrid);
		$('.product_list > div').each(function(index, element) {
		html = '';
		html += '<div class="product-container product-block text-center">';
			html += '<div class="left-block">' + $(element).find('.left-block').html() + '</div>';
			html += '<div class="right-block">' + $(element).find('.right-block').html() + '</div>';
		html += '</div>';		
		$(element).html(html);
		});
		$('.display').find('li#grid').addClass('selected');
		$('.display').find('li#list').removeAttr('class');
		}
	});