Jump to content
jolvil

[FREE PRESTASHOP MODULE ] Products in categories as LIST OR GRID using jQuery for PS1.3 and PS1.4

Recommended Posts

Hi, I`ll contribute a little bit.

To have it work with layered navigation, put those lines:

 

{cycle name="clorg" values="prolog,epilog" assign="clorg"}{include file="$lorg_tpldir./modules/listorgridswitch/listorgridswitch.tpl" cycle=$clorg}

 

 

in category.tpl right before and after product-list.tpl, so it looks like this:

{cycle name="clorg" values="prolog,epilog" assign="clorg"}{include file="$lorg_tpldir./modules/listorgridswitch/listorgridswitch.tpl" cycle=$clorg}

{include file="$tpl_dir./product-list.tpl" products=$products}

{cycle name="clorg" values="prolog,epilog" assign="clorg"}{include file="$lorg_tpldir./modules/listorgridswitch/listorgridswitch.tpl" cycle=$clorg}

and dont forget to remove them from product-sort un pagination .tpl files.

 

Also I removed div element, that`s around the switch button image, and (that`s why) modiffied js like this:

function listorgrid(el, event)
{
 event.preventDefault();
 var mode = el.hasClass('lg_grid');
 if (mode)
 {
el.removeClass('lg_grid');
el.parent().find('.listorgridcanvas').removeClass('lg_grid');
el.parent().find('ul').fadeOut("fast", function() { $(this).fadeIn("fast"); });
 }
 else
 {
el.addClass('lg_grid');
el.parent().find('.listorgridcanvas').addClass('lg_grid');
el.parent().find('ul').fadeOut("fast", function() {$(this).fadeIn("fast");});
 }
 jQuery.ajax({
	type: 'POST',
	url: baseDir + 'modules/listorgridswitch/listorgridswitch.php',
	async: false,
	cache: false,
	type : "POST",
	dataType : "json",
	data: { listorgridajax: true, listorgridmode: (mode?0:1) },
	success: function(jsonData)
	{
	  return;
	}
 });
 return false;
}
$(document).ready(function(){
 $("a.switch_but")
.toggle(
  function( event ){ listorgrid($(this), event); },
  function( event ){ listorgrid($(this), event); }
);
});

 

Next, you`ll need to modiffy a css file, to have grid view, when your html has condition ".lg_grid #product_list" vs list view, when there`s only "#product_list" . (you can simply try to find-and-replace the "ul.sw_view" with "div.lg_grid " - space after is true)

 

I think for basic this will work. For my needs I compleatelly modiffied every file.

Edited by Artx

Share this post


Link to post
Share on other sites

Big thanks to module creator and Artx for making it available to use with layered navigation. Everything works great.

Share this post


Link to post
Share on other sites

I figured out how to get this to work with the new prestashop theme but after I can't get the view to change back to list? Any ideas?

Share this post


Link to post
Share on other sites

Thanks a lot to the creator of this Module, Its workig perfect on my web page.

 

I have an issue... I know it doesnt deppend directly of the module... i need to set as default 20 products not 10, because with 10 products the page doesnt look good, looks like incomplete.

 

i have attached an screenshot to picture the situation.

 

Thanks, i hope anybody can help :)

 

Madh

 

to_solve.jpg

Share this post


Link to post
Share on other sites

Hi, I`ll contribute a little bit.

To have it work with layered navigation, put those lines:

 

{cycle name="clorg" values="prolog,epilog" assign="clorg"}{include file="$lorg_tpldir./modules/listorgridswitch/listorgridswitch.tpl" cycle=$clorg}

 

 

in category.tpl right before and after product-list.tpl, so it looks like this:

{cycle name="clorg" values="prolog,epilog" assign="clorg"}{include file="$lorg_tpldir./modules/listorgridswitch/listorgridswitch.tpl" cycle=$clorg}

{include file="$tpl_dir./product-list.tpl" products=$products}

{cycle name="clorg" values="prolog,epilog" assign="clorg"}{include file="$lorg_tpldir./modules/listorgridswitch/listorgridswitch.tpl" cycle=$clorg}

and dont forget to remove them from product-sort un pagination .tpl files.

 

Also I removed div element, that`s around the switch button image, and (that`s why) modiffied js like this:

function listorgrid(el, event)
{
 event.preventDefault();
 var mode = el.hasClass('lg_grid');
 if (mode)
 {
el.removeClass('lg_grid');
el.parent().find('.listorgridcanvas').removeClass('lg_grid');
el.parent().find('ul').fadeOut("fast", function() { $(this).fadeIn("fast"); });
 }
 else
 {
el.addClass('lg_grid');
el.parent().find('.listorgridcanvas').addClass('lg_grid');
el.parent().find('ul').fadeOut("fast", function() {$(this).fadeIn("fast");});
 }
 jQuery.ajax({
	type: 'POST',
	url: baseDir + 'modules/listorgridswitch/listorgridswitch.php',
	async: false,
	cache: false,
	type : "POST",
	dataType : "json",
	data: { listorgridajax: true, listorgridmode: (mode?0:1) },
	success: function(jsonData)
	{
	  return;
	}
 });
 return false;
}
$(document).ready(function(){
 $("a.switch_but")
.toggle(
  function( event ){ listorgrid($(this), event); },
  function( event ){ listorgrid($(this), event); }
);
});

 

Next, you`ll need to modiffy a css file, to have grid view, when your html has condition ".lg_grid #product_list" vs list view, when there`s only "#product_list" . (you can simply try to find-and-replace the "ul.sw_view" with "div.lg_grid " - space after is true)

 

I think for basic this will work. For my needs I compleatelly modiffied every file.

 

Hi,

 

I'm trying to get listeorgrid and layered navigation to work but i'm not sure i'm doing it right.

 

After placing the lines, You write "and dont forget to remove them from product-sort un pagination .tpl files." What and where is this?

 

Further on, should i make a file for the css/grid view and kan i use your example.

 

Thanks for your time.

Share this post


Link to post
Share on other sites

Hi,

 

Here is working fine with my layered navigation, meaning I can switch from one view to the other.

 

But when, after switched to grid view, I click on the select form to sort products and the loading is completed correctly, the view is switched back to list (the grid icon remains active by the way).

 

This problem comes out even if I use the pagination.

 

module version: 1.9

prestashop version: 1.4.8.2

 

I recently upgraded ps from 1.4.2. It was working fine before the last upgrade.

I believe it should be something in blocklayered, as they changed it a lot.

 

Any idea?

Share this post


Link to post
Share on other sites

Thanks for this module. :)

 

I have downloaded and installed version 1.9.

I have version 1.4.8.3 of prestashop using a custom theme.

 

I have checked the product-sort.tpl and pagination.tpl and they have been patched correctly.

 

I can see the module in the BO and it is installed.

 

But i cannot get it to work at all.

I am new to this so i feel like i have missed a step somewhere. :unsure:

Any help would be appreciated.

Share this post


Link to post
Share on other sites

Hello. Working on the problem list display of 3 systems. As the filter http://filtersearchpro.co.uk

 

Transfer position can be a browser cookie.

 

Here's what the code is, but it is not working properly. I would be grateful for your help!

(function($) {
$(function() {
function createCookie(name,value,days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString();
 }
 else var expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i < ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
}
function eraseCookie(name) {
 createCookie(name,"",-1);
}

$('ul.product_view').each(function(i) {
 var cookie = readCookie('tabCookie'+i);
 if (cookie) $(this).find('li').eq(cookie).addClass('current').siblings().removeClass('current')
  .parents('#center_column').find('#product_list').addClass('list').removeClass('grid').addClass('text').eq(cookie).addClass('grid').removeClass('list').addClass('text').eq(cookie).addClass('text').removeClass('grid').addClass('list');
})
$('ul.product_view').delegate('li:not(.current)', 'click', function(i) {
 $(this).addClass('current').siblings().removeClass('current')
  .parents('#center_column').find('#product_list').removeClass('grid').addClass('list').removeClass('text').eq($(this).index()).addClass('grid').removeClass('list')

var cookie = readCookie('tabCookie'+i);
 if (cookie) $(this).find('#product_list').eq(cookie).removeClass('grid').addClass('list').siblings().removeClass('list').addClass('text')



 var ulIndex = $('ul.product_view').index($(this).parents('ul.product_view'));
 eraseCookie('tabCookie'+ulIndex);
 createCookie('tabCookie'+ulIndex, $(this).index(), 365);
})


})
})(jQuery)

Edited by Demos

Share this post


Link to post
Share on other sites

It works well, but can not remember the state of the grid and make a filter with blocklayered lost cookie and leave the grid to its original position.

I copied the file cookie.php in / override / classes and still not working.

I have List or Grid Switch v1.9 y Prestashop 1.4.9.0

 

 

 

Hi, I`ll contribute a little bit.

To have it work with layered navigation, put those lines:

 

{cycle name="clorg" values="prolog,epilog" assign="clorg"}{include file="$lorg_tpldir./modules/listorgridswitch/listorgridswitch.tpl" cycle=$clorg}

 

 

in category.tpl right before and after product-list.tpl, so it looks like this:

{cycle name="clorg" values="prolog,epilog" assign="clorg"}{include file="$lorg_tpldir./modules/listorgridswitch/listorgridswitch.tpl" cycle=$clorg}

{include file="$tpl_dir./product-list.tpl" products=$products}

{cycle name="clorg" values="prolog,epilog" assign="clorg"}{include file="$lorg_tpldir./modules/listorgridswitch/listorgridswitch.tpl" cycle=$clorg}

and dont forget to remove them from product-sort un pagination .tpl files.

 

Also I removed div element, that`s around the switch button image, and (that`s why) modiffied js like this:

function listorgrid(el, event)
{
 event.preventDefault();
 var mode = el.hasClass('lg_grid');
 if (mode)
 {
el.removeClass('lg_grid');
el.parent().find('.listorgridcanvas').removeClass('lg_grid');
el.parent().find('ul').fadeOut("fast", function() { $(this).fadeIn("fast"); });
 }
 else
 {
el.addClass('lg_grid');
el.parent().find('.listorgridcanvas').addClass('lg_grid');
el.parent().find('ul').fadeOut("fast", function() {$(this).fadeIn("fast");});
 }
 jQuery.ajax({
	type: 'POST',
	url: baseDir + 'modules/listorgridswitch/listorgridswitch.php',
	async: false,
	cache: false,
	type : "POST",
	dataType : "json",
	data: { listorgridajax: true, listorgridmode: (mode?0:1) },
	success: function(jsonData)
	{
	  return;
	}
 });
 return false;
}
$(document).ready(function(){
 $("a.switch_but")
.toggle(
  function( event ){ listorgrid($(this), event); },
  function( event ){ listorgrid($(this), event); }
);
});

 

Next, you`ll need to modiffy a css file, to have grid view, when your html has condition ".lg_grid #product_list" vs list view, when there`s only "#product_list" . (you can simply try to find-and-replace the "ul.sw_view" with "div.lg_grid " - space after is true)

 

I think for basic this will work. For my needs I compleatelly modiffied every file.

Share this post


Link to post
Share on other sites

Hi,

 

Here is working fine with my layered navigation, meaning I can switch from one view to the other.

 

But when, after switched to grid view, I click on the select form to sort products and the loading is completed correctly, the view is switched back to list (the grid icon remains active by the way).

 

This problem comes out even if I use the pagination.

 

module version: 1.9

prestashop version: 1.4.8.2

 

I recently upgraded ps from 1.4.2. It was working fine before the last upgrade.

I believe it should be something in blocklayered, as they changed it a lot.

 

Any idea?

 

Hello,

I have the same problem as you, have you found a solution?

I copied the file cookie.php in / override / classes and still not working.

Help me!!

Thank you

Edited by petete2008

Share this post


Link to post
Share on other sites

Ya lo he solucionado :

Ir al fichero product-list.tpl y reemplazar la linea <ul id="product_list" class="clear">

por la siguiente : <ul id="product_list" class="{if $cookie->listorgridmode==0}clear{else}clear sw_view{/if}">

Share this post


Link to post
Share on other sites

Ya lo he solucionado :

Ir al fichero product-list.tpl y reemplazar la linea <ul id="product_list" class="clear">

por la siguiente : <ul id="product_list" class="{if $cookie->listorgridmode==0}clear{else}clear sw_view{/if}">

 

Hi petete, thank you for the solution provided, it solved my problem too!

Share this post


Link to post
Share on other sites

Hi all.. This is indeed a great module! I believe I am having a css problem however and css is not my best skill. <_<

 

Could anyone help me out? Seems like an obvious fix if someone could look here:

http://74.117.145.11...?id_category=24

 

It seems to have disabled my sort by function as well.

Also could someone tell me exactly what css file needs editing? Thanks in advance you guys are awesome!

Edited by jmaybes

Share this post


Link to post
Share on other sites

Hey jolvil,

 

Gud work buddy...

i am using prestashop 1.4.9, which i hv upgraded from 1.4.7

dude your module is awsome.. its working for me.. i used cookie to set grid view as default :-D

Share this post


Link to post
Share on other sites

<p>

Ya lo he solucionado : Ir al fichero product-list.tpl y reemplazar la linea</p>

<ul class="clear" id="product_list">por la siguiente :

<li>

<ul class="{if $cookie->listorgridmode==0}clear{else}clear sw_view{/if}" id="product_list">

</ul>

</li>

<li>Si este si sirve definitivamente</li>

</ul>

 

Share this post


Link to post
Share on other sites

Hello im with prestashop 1.4.8 i followed the readme , work perfect on product searches , news product but not on categories or normal product lists. I cleared smarty cache a compiled many times manually and autimatic but no luck.

 

Anyone have the same problem?

Share this post


Link to post
Share on other sites

Hello, don't work on 1.5.2 . Fatal error during installation.

It's very easy made the change for install in ps 1.5 but the problem is doesn't work with new theme, since ps 1.4 it doesn't work with new_theme.

Share this post


Link to post
Share on other sites

Any solution so far for the Layered Navigation Problem? It always changes back from grid to list view when I use the layered navigation or when I move forward from 1 to 2 page etc.

Share this post


Link to post
Share on other sites

Hi,

 

I'm having a little issue with the module.

 

The gridview of the module looks like this: http://i.imgur.com/CNUKYyX.jpg

 

The first product is always adjusted higher than the other ones. This bug is only in Google Chrome - I cannot reproduce the issue in Firefox, IE, Safari, etc.

 

I think I found the problem, after messing around with firebug: http://i.imgur.com/OlgrSI3.jpg

 

The text that says "style="margin-top: 0px" is only there when you inspect the first product with firebug. Not on the second or third. So I'm assuming thats the issue.

 

I can't find the file where to edit it though. I have looked in all the files/code of the ListOrGrid module, but can't find it there.

 

Can someone tell me, which file I have to find and edit, to remove the issue?

 

Thanks in advance :)

 

And thanks for a great module!

Share this post


Link to post
Share on other sites

I am having issues with grid view, I want my grid view to look like this http://signsnprint.com/52-banners but after I had to change my server I am required to use this module and now it looks like this http://pnsigns.com/52-banners, what do I need to do to fix this? Thank you!!

 

I am having issues with grid view, I want my grid view to look like this http://signsnprint.com/52-banners but after I had to change my server I am required to use this module and now it looks like this http://pnsigns.com/52-banners, what do I need to do to fix this? Thank you!!

Share this post


Link to post
Share on other sites

Hi There,

 

First of al, great module! works perfectly on my 1.4 prestashop. I've only got 1 question.. i'm trying to change the color of the description of the product in the grid view. Where should i change this? I've tried to change it in the Global.css but only half of the block changes to the correct colour. check http://www.slaapzakken-discounter.nl/11-polydaun-slaapzak

Share this post


Link to post
Share on other sites

Hello

Maybe someone know how to change image size in grid view? In list view is fine, but in grid view I don't have space.

 

Or maybe how to change columns number of products. Now I have 3 columns

Edited by btek

Share this post


Link to post
Share on other sites

Hello, marvelous and useful module thanks, but I have this problem, when I click on "next page" for categories on more pages it goes in loop.

I only installed the module without any settings or modifications, neither the "cookie.php" file

 

Why this problem ? anyone else has it ? How could it be solve ?

 

If you wanna take a look just try to click on "next" on this page

http://www.kissene.com/en/39-new-collection

Share this post


Link to post
Share on other sites

Hi, can anyone help me?

 

The buttons do not end up in the right position. I do not have the default theme, im using VP_beststore theme.

 

Is the error in listgridswich.css or global.css?

post-320897-0-00164600-1385113190_thumb.jpg

 

 

 

 

EDIT*  Thanks Jolvil its now fixed.

Edited by onicaa

Share this post


Link to post
Share on other sites

Hi all.. This is indeed a great module! I believe I am having a css problem however and css is not my best skill. <_<

 

Could anyone help me out? Seems like an obvious fix if someone could look here:

http://74.117.145.11...?id_category=24

 

It seems to have disabled my sort by function as well.

Also could someone tell me exactly what css file needs editing? Thanks in advance you guys are awesome!

Hi,

I have the same problem: it seems like the sort by function was disabled by this module somehow. I'm using PS 1.4.8.2. Does anyone have a solution for this?

Thank you.

Share this post


Link to post
Share on other sites

Hi Am using given module but this is not work in prestashop (1.4.3) . my website is (www.swayamindia.com) . this module install but not show in front  Please help me .

Share this post


Link to post
Share on other sites

i have this install,

 
after install this error comes

 

[PrestaShop] Fatal error in module smarty_internal_templatebase:
Uncaught exception 'SmartyException' with message 'Call of unknown method 'clear_cache'.' in /home/elektrad/www/elektroniktrade.ch/onlineshop/tools/smarty/sysplugins/smarty_internal_templatebase.php:806 Stack trace: #0 /home/elektrad/www/elektroniktrade.ch/onlineshop/modules/listorgridswitch/listorgridswitch.php(108): Smarty_Internal_TemplateBase->__call('clear_cache', Array) #1 /home/elektrad/www/elektroniktrade.ch/onlineshop/modules/listorgridswitch/listorgridswitch.php(108): Smarty->clear_cache('/home/elektrad/...') #2 /home/elektrad/www/elektroniktrade.ch/onlineshop/modules/listorgridswitch/listorgridswitch.php(82): listorgridswitch->tuneTemplate() #3 /home/elektrad/www/elektroniktrade.ch/onlineshop/controllers/admin/AdminModulesController.php(685): listorgridswitch->install() #4 /home/elektrad/www/elektroniktrade.ch/onlineshop/controllers/admin/AdminModulesController.php(811): AdminModulesControllerCore->postProcessCallback() #5 /home/elektrad/www/elektroniktrade.ch/onlineshop/classes/controller/Controll

Share this post


Link to post
Share on other sites

i have this install,

 
after install this error comes

 

[PrestaShop] Fatal error in module smarty_internal_templatebase:

Uncaught exception 'SmartyException' with message 'Call of unknown method 'clear_cache'.' in /home/elektrad/www/elektroniktrade.ch/onlineshop/tools/smarty/sysplugins/smarty_internal_templatebase.php:806 Stack trace: #0 /home/elektrad/www/elektroniktrade.ch/onlineshop/modules/listorgridswitch/listorgridswitch.php(108): Smarty_Internal_TemplateBase->__call('clear_cache', Array) #1 /home/elektrad/www/elektroniktrade.ch/onlineshop/modules/listorgridswitch/listorgridswitch.php(108): Smarty->clear_cache('/home/elektrad/...') #2 /home/elektrad/www/elektroniktrade.ch/onlineshop/modules/listorgridswitch/listorgridswitch.php(82): listorgridswitch->tuneTemplate() #3 /home/elektrad/www/elektroniktrade.ch/onlineshop/controllers/admin/AdminModulesController.php(685): listorgridswitch->install() #4 /home/elektrad/www/elektroniktrade.ch/onlineshop/controllers/admin/AdminModulesController.php(811): AdminModulesControllerCore->postProcessCallback() #5 /home/elektrad/www/elektroniktrade.ch/onlineshop/classes/controller/Controll

I have the same problem... :S

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×