Jump to content

¿Como habilitar y deshabilitar las vistas Cuadrícula y Lista en productos? - Prestashop 1.6.1.17

Oscar

By Oscar
in Discusión general

 Share

Recommended Posts

Oscar Newbie

Oscar

Posted
Posted (edited)

Hola,

 

en la versión de Prestashop 1.6.1.17, alguien podría indicarme ¿como habilitar y deshabilitar las vistas Cuadrícula y Lista en productos? He buscado información en internet, en foros, he revisado los ficheros global.js y global.css entre otros y no lo localizo. Lo que detecto, al inspeccionar la página (F12) es que los botones de Vista Cuadrícula y Lista no efectúan ningún cambio ni constan como Selected, cuando una de ellos es seleccionado, lo que he visto que sucede en otras webs (pongo en rojo como aparece en otras webs) :

<ul class="display hidden-xs">
    <li class="display-title">Vista:</li>
    <li id="grid" class="selected"> == $0
        <a rel="nofollow" href="#" title="Cuadrícula">
            <i class="icon-th-large">
                ::before
            </i>
            "Cuadrícula"</a>
    </li>
    <li id="list">
        <a rel="nofollow" href="#" title="Lista">
            <i class="icon-th-list">
              ::before
            </i>
            "Lista"
        </a>
    </li>
</ul>

 

Muchas gracias por anticipado,

 

Oscar

Edited by nadie
Moderación del foro edita el título del tema para ser más descriptivo con la duda (see edit history)
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted (edited)

Es importante que indiques la plantilla que usas.

En la plantilla por defecto de Prestashop 1.6, vemos varias cositas.

Por partes, en el fichero:
  

/themes/default-bootstrap/js/global.js

Tienes este código JS en referencia: (Lo que de un modo u otro acciona los botones y hace cambiar otros aspectos. 

function display(view)
{
	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');
		$.totalStorage('display', 'list');
	}
	else
	{
		$('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 += '<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');
		$.totalStorage('display', 'grid');
	}
}


  

function blockHover(status)
{
	var screenLg = $('body').find('.container').width() == 1170;

	if ($('.product_list').is('.grid'))
		if (screenLg)
			$('.product_list .button-container').hide();
		else
			$('.product_list .button-container').show();

	$(document).off('mouseenter').on('mouseenter', '.product_list.grid li.ajax_block_product .product-container', function(e){
		if (screenLg)
		{
			var pcHeight = $(this).parent().outerHeight();
			var pcPHeight = $(this).parent().find('.button-container').outerHeight() + $(this).parent().find('.comments_note').outerHeight() + $(this).parent().find('.functional-buttons').outerHeight();
			$(this).parent().addClass('hovered').css({'height':pcHeight + pcPHeight, 'margin-bottom':pcPHeight * (-1)});
			$(this).find('.button-container').show();
		}
	});

	$(document).off('mouseleave').on('mouseleave', '.product_list.grid li.ajax_block_product .product-container', function(e){
		if (screenLg)
		{
			$(this).parent().removeClass('hovered').css({'height':'auto', 'margin-bottom':'0'});
			$(this).find('.button-container').hide();
		}
	});
}
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');
	});
}

Los botones de grid/list que ves en los listados de productos 

Adjunto Captura

gridlist.png.6dc4869c870b66fe2ded0f68b6e6b097.png

Se encuentran en el fichero:
  

/themes/default-bootstrap/product-sort.tpl

Aquí:
  

<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>
</ul>

 

Si nos vamos al fichero: (Listado productos)
  

/themes/default-bootstrap/product-list.tpl

Y si por ejemplo entre otras te fijas aquí: 

	<ul{if isset($id) && $id} id="{$id}"{else} id="product_list"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}">


Veras que el class "de dicho ul" cambia según hayas pulsado un botón u otro. (Lo puedes ver desde inspeccionar elemento). Tambien cambian otras cositas que puedes ir viendo. Comandado por el JS que hemos comentado anteriormente.

Adjunto Captura

gla.thumb.png.d93caf4d8feea115cf93abb92f165f80.png

 

Donde puede ver que la clase asociada en el CSS varia. Ademas como es lógico cambian mas cosas

Luego también en el CSS: 

/themes/default-bootstrap/css/product_list.css

Veras que se introducen estilos  para cuando cambia la clase asociada, etc..

Es un repaso muy rapido y escribiendo en el movil, por lo que es posible que me haya saltado varios cositas.

------

Si estas usando otra plantilla es posible que todo esto sea diferente.

Edited by nadie (see edit history)
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted
hace 4 minutos, Oscar dijo:

Muchas gracias, voy a revisar lo que me comentas y informaré del resultado. Efectivamente el tema es la plantilla por defecto: default-bootstrap.

¿Pero no te funcionan los botones?

Si los botones no te funcionan, mira por ejemplo en Chrome, (Boton derecho raton ->Inspeccionar elemento -> Console) si al pulsar el boton te salen errores de JS

Link to comment
Share on other sites
Oscar Newbie

Oscar

Posted
  • Author
Posted (edited)
hace 19 horas, nadie dijo:

¿Pero no te funcionan los botones?

Si los botones no te funcionan, mira por ejemplo en Chrome, (Boton derecho raton ->Inspeccionar elemento -> Console) si al pulsar el boton te salen errores de JS

Efectivamente, no funcionan los botones.

Adjunto la url de la página que estoy analizando:
https://www.plusexpress.es/-lectores-de-codigos-de-barra-7#

Por cierto, en tu pantalla de ejemplo los botones tienen como id=product_list y la clase=product_list row list, en cambio, en mi PS son id=grid e id=list y ya está.

Los errores que aparecen son: hay enlaces a imágenes no seguras (http en vez de https)  y uno al chat de zopim, cunado el chat que se ve es de zendesk (de www.zopim.com). He intentado deshabilitar el modulo del chat para ver si el problema era este, y, misterio, no está ni instalado ni activado. Hay la opción de bajarlo Gratis, pero no entiendo como funciona si en teoría no hay el modulo instalado ni activado.

Edited by Oscar (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
Oscar Newbie

Oscar

Posted
  • Author
Posted

He puesto las configuraciones que me habéis indicado, pero no funciona, Voy a intentar inhabiltar el Chat, aunque me comentan que antes de actualizar a Prestashop 1.6.1.17, funcionaban simultáneamente el chat y los botones de Vista Cuadrícula y Lista en Productos. Quizás el problema venga de la actualización de PS y mantener la versión antigua del chat zendesk, que no aparece en ningún módulo pero está funcionando.

Link to comment
Share on other sites
Oscar Newbie

Oscar

Posted
  • Author
Posted

Ya he cambiado la configuración del chat zopim (por el nuevo de zendesk) y no aparecen los errores de JS que aparecían. No obstante, si uso la versión inicial de tu mail de la function display(view) (de 81 líneas) el chat se vé y el menú de la izquierda de productos y categorías no está desplegado a todo nivel, lo cual es correcto. No obstante, si aplico la versión ampliada de 113 líneas de la function display(view), el chat desaparece (Nota: está declarado en el footer.tpl) y todas las categorías de la columna izquierda con todos los productos aparece desplegada.

Muchas gracias por una solución.

 

Oscar

Link to comment
Share on other sites
Oscar Newbie

Oscar

Posted
  • Author
Posted (edited)

Ya hay la versión nueva del chat y no da problemas de JS. En una página donde sólo había un error de JS, he pasado una imágen de http a https y ya sin errores de JS siguen sin funcionar los botones Vista Cuarícula y Vista Lista:

https://www.plusexpress.es/datalogic-terminales-pda-92#

¿Que puede ser?

 

Muchas gracias.

Edited by Oscar (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...