List or Grid Switch v 1.2

Forum topic:
http://www.prestashop.com/forums/topic/141303-free-prestashop-module-products-in-categories-as-list-or-grid-using-jquery/


This module displays products lists (products in category, new products, prices drop, best sales...) as a list or as a grid when clicking the switcher using jQuery and css. Tested with PS 1.3.7.0 and PS 1.4.5.1 Original jQuery code from: http://designm.ag/tutorials/jquery-display-switch/

List is the default display used in Prestashop theme and with this module.
If you want to display grid as default theme you have to modify your .css for the default display and modify listorgridswitch.css for the alternate display.

Install the module as usual
and make these 2 modifications in tpl files in your theme:

When you modify tpl files, be sure you set force compile in BO to clear smarty folder, if not modification will not appears.

1 --------------------------------------------------------------------------------------------------------------------------------------------------

in product-sort.tpl


find:

    <form id="productsSortForm" action="{$request}">
	<p class="select">

Add below:

	<a href="#" class="switch_but"></a><span>{l s='Switch View'}</span>{* List or grid switcher *}

You will have:

     <form id="productsSortForm" action="{$request}">
	<p class="select">
	<a href="#" class="switch_but"></a><span>{l s='Switch View'}</span>{* List or grid switcher *}
		<select id="selectPrductSort" onchange="document.location.href = $(this).val();">


2 --------------------------------------------------------------------------------------------------------------------------------------------------

In product-list.tpl


find:

	<ul id="product_list" class="clear">


Add "def_view" class  after "clear" class

You will have:

	<ul id="product_list" class="clear def_view">

--------------------------------------------------------------------------------------------------------------------------------------------------

To translate " Switch View " go to BO, Tools tab / Translations / Front Office Translations

That's all

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Franais:

Ce module affiche les listes de produits (produits d'une catgorie, nouveaux produits, promotions, meilleures ventes..) sous forme de liste ou de grille en utilisant jQuery et le css. Test avec PS 1.3.7.0 et PS 1.4.5.1. Code original: http://designm.ag/tutorials/jquery-display-switch/

Installer le module normalement

et faire ces 2 modifications dans les fichiers tpl de votre theme pour que le module soit fonctionnel:

Lorsque vous modifiez un fichier tpl, assurez-vous que vous avez : Forcer la compilation x oui dans l'onglet Prfrences/Performances du BO pour voir les modifications.

1 --------------------------------------------------------------------------------------------------------------------------------------------------

Dans product-sort.tpl


Chercher:

     <form id="productsSortForm" action="{$request}">
	<p class="select">

Ajouter en dessous:

	<a href="#" class="switch_but"></a><span>{l s='Switch View'}</span>{* List or grid switcher *}

Ce qui donnera:


     <form id="productsSortForm" action="{$request}">
	<p class="select">
	<a href="#" class="switch_but"></a><span>{l s='Switch View'}</span>{* List or grid switcher *}
		<select id="selectPrductSort" onchange="document.location.href = $(this).val();">



2 --------------------------------------------------------------------------------------------------------------------------------------------------

Dans le fichier product-list.tpl


Chercher la ligne:

	<ul id="product_list" class="clear">


Ajouter la classe "def_view" aprs la classe "clear"

Ce qui donnera:

	<ul id="product_list" class="clear def_view">

--------------------------------------------------------------------------------------------------------------------------------------------------

Pour traduire le terme " Switch View " allez dans le BO, onglet outils / Traductions / Traductions Front Office