Jump to content

Grid View display for Product List and Subcategories - default themes -Prestashop 1.5.3.1

ntthemes
 Share

Recommended Posts

ntthemes Newbie

ntthemes

Posted
Posted (edited)

After several attempts I was not able to convert the  list view to grid.

 

Also changed several scripts....still no success.

 

List view is the only option on my default theme ....prestashop 1.5.3.1

 

 

If someone can help me to set the above in grid view only (without option button of list view)

 

Attached is the pic of present   list view display which i dont want, and grid view which i want

 

This is how my  theme/default /product-list.tpl  is reading

 

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
 
{if isset($products)}
<!-- Products list -->
<ul id="product_list" class="clear">
{foreach from=$products item=product name=products}
<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
<div class="left_block">
{if isset($comparator_max_item) && $comparator_max_item}
<p class="compare">
<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} /> 
<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
</p>
{/if}
</div>
<div class="center_block">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
</a>
<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</a></h3>
<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>
</div>
<div class="right_block">
{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
<div class="content_price">
{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
</div>
{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
{/if}
{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
{if ($product.allow_oosp || $product.quantity > 0)}
{if isset($static_token)}
<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
{else}
<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
{/if}
{else}
<span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
{/if}
{/if}
<a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
</div>
</li>
{/foreach}
</ul>
<!-- /Products list -->
{/if}
 

post-728709-0-16723400-1384750662_thumb.jpg

post-728709-0-63894300-1384750908_thumb.jpg

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

ntthemes

Posted
  • Author
Posted

Thanks ...problem solved....above script worked.

 

Another issue is ...the tax is not showing in the cart and at check out.

 

I did edit Tax setting in customers > groups ... to not included in the price. (i,e, is to show tax in different line and not with the retail price.)

also enable option show tax in the cart.

Taxes and taxes rule all set.All countries are disable except canada.

Also tried  with enabling shop in maintenance ,

 

but still no tax would show in cart & check out.

 

Please advice

 

Thanks

Link to comment
Share on other sites
  • 4 weeks later...
xanthie Newbie

xanthie

Posted
Posted
Hello I installed prestashop few days ago I'm not a developer, after remove the right column and making it larger images , i have this problem (is empty The Right Place)
The site is
and with this tutorial
products list grid view
look like this
What is wrong?
Any help please.

sorry for bad english (is google translate)

Thanks
Xanthie
 
 
 
 
 
 
Link to comment
Share on other sites
xanthie Newbie

xanthie

Posted
Posted

hello

 

where is your message? can you write it once again please

 

hello

 

where is your message? can you write it once again please

Hello I installed prestashop few days ago I'm not a developer, after remove the right column and making it larger images , i have this problem (is empty The Right Place)
The site is
and with this tutorial
products list grid view
look like this
What is wrong?
Any help please.

sorry for bad english (is google translate)

Thanks
Xanthie
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

your image size is too big (there is not enough space to display huge images).

you have to decrease image size or to modify css of your template to use huge images.

 

moreover there is no switcher (to switch between grid and list)

i think that you missed some steps from tutorial.

Link to comment
Share on other sites
  • 2 months later...
  • 2 weeks later...
vekia Apprentice

vekia

Posted
Posted

you have to change imagesize under preferences > images tab

by default prestashop uses "home_default" as an image cover.

modify this thumbnail and increase height & width of this imagetype.

 

after changes, remember to regenerate thumbnails

Link to comment
Share on other sites
visionpro Newbie

visionpro

Posted
Posted (edited)

you have to change imagesize under preferences > images tab

by default prestashop uses "home_default" as an image cover.

modify this thumbnail and increase height & width of this imagetype.

 

after changes, remember to regenerate thumbnails

I want it to be like this. larger colums

http://imageshack.com/a/img856/1404/1zdg.jpg

1zdg.jpg

Edited by visionpro (see edit history)
Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

instead of changing image size (still it is necessary) you have to modify also css styles for your <li> element.

i don't know what theme you use so i can't help. share url, it will be much easier to say what you have to do/

Link to comment
Share on other sites
visionpro Newbie

visionpro

Posted
Posted

instead of changing image size (still it is necessary) you have to modify also css styles for your <li> element.

i don't know what theme you use so i can't help. share url, it will be much easier to say what you have to do/

I use the default prestashop 1.5.6.2 theme whit 2 colums i want to have it like this http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html   grid view but whit larger product frames then i kan put bigger pictures in it.

Thank you for the quick response.

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

as i said before, you have to change size of the picture, then also change width of:

#product_list_grid li {
overflow: hidden;
margin-bottom: 14px;
padding: 10px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
width: 153px;
height: 270px;
}

effect:

3Gbyn0N.png

Link to comment
Share on other sites
visionpro Newbie

visionpro

Posted
Posted

as i said before, you have to change size of the picture, then also change width of:

#product_list_grid li {
overflow: hidden;
margin-bottom: 14px;
padding: 10px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
width: 153px;
height: 270px;
}

effect:

3Gbyn0N.png

Whare do i have to change that in product_list css or tpl.

Sorry its al new to me.

Is it possible to send me the complete scipt.

Thank you in advance.

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

product_list.css

there is a code like:
 

#product_list_grid li {
overflow: hidden;
margin-bottom: 14px;
padding: 10px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
width: 153px;
height: 270px;
}

increase width param to for example 240px;

Link to comment
Share on other sites
visionpro Newbie

visionpro

Posted
Posted (edited)

product_list.css

there is a code like:

 

#product_list_grid li {
overflow: hidden;
margin-bottom: 14px;
padding: 10px;
border: 1px solid #eee;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
width: 153px;
height: 270px;
}

increase width param to for example 240px;

I dont see these lines i use this script http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html

 

i tried also in cleantheme http://webiz.bg/cleantheme/documentation/ unsuccessfully

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

visionpro

Posted
Posted

if you followed mypresta guide carefully, you should have this code in product_list.css file

if there is no code like that, it mean that you missed one of the most important step from guide.

This is what i have in the css file. here a link to my site a want to have the 3 products larger so they fit the whole page.

http://www.cardocumentation.net/prestashop/index.php?id_category=3&controller=category

 

#product_list .poverlay {

top:0px;

left:0px;

position:absolute;

display:block;

width:100%;

height:100%;

visibility:hidden;

z-index:2;

background:rgba(0,0,0,0.7);

}

 

#product_list .cartbutton {

margin-left:10px;

margin-top:90px;

display:inline-block!important;

}

 

#product_list .dropshadowclass {

border:solid 1px #EFEFEF;

}

 

#product_list .dropshadowclass:hover {

border:solid 1px #CCC;

-moz-box-shadow:0px 0px 3px #999;

-webkit-box-shadow:0px 0px 3px #999;

box-shadow:0px 0px 3px #999;

}

 

ul#product_list {

list-style-type:none

}

 

#product_list li {

text-align:center;

margin-bottom:14px;

border:1px solid #eee;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

padding:10px;

width:144px;

display:inline-block;

vertical-align:top;

margin:2px;

position:relative;

}

 

#product_list li a {

color:#374853;

text-decoration:none;

}

 

#product_list li .left_block {

/*float:left;

        /*padding-top:58px;*/

/*width:15px;*/

clear:both;

}

 

#product_list li p.compare {

position:absolute;

color:#FFF;

width:100%;

background:rgba(0,0,0,0.5);

display:block;

text-align:center;

padding-top:10px;

padding-bottom:10px;

}

 

#product_list li .viewbutton {

position:absolute;

display:block;

width:100%;

padding-top:10px;

padding-bottom:10px;

background:rgba(0,0,0,0.5);

bottom:0px;

left:0px;

}

 

#product_list li .left_block .compare label {

display:none;

}

 

#product_list li p.compare input {

vertical-align:text-bottom

}

 

#product_list li .center_block {

text-align:center;

}

 

#product_list li .center_block .product_desc {

display:none;

clear:both;

}

 

#product_list li .center_block h3 {

font-size:16px;

padding-top:10px;

margin-top:10px;

display:block;

width:100%;

clear:both;

text-align:center;

}

 

#product_list a.product_img_link {

overflow:hidden;

position:relative;

display:block;

border:1px solid #ccc;

text-align:center;

margin:auto;

}

 

#product_list a.product_img_link img {

vertical-align:bottom;

}

 

#product_list li span.new {

display:block;

position:absolute;

top:15px;

right:-30px;

padding:1px 4px;

width:101px;

font-size:10px;

color:#fff;

text-align:center;

text-transform:uppercase;

-moz-transform:rotate(45deg);

-webkit-transform:rotate(45deg);

-o-transform:rotate(45deg);

background-color:#990000;

transform:rotate(45deg);

-ms-transform:rotate(45deg); /* Newer browsers */

}

 

.ie8 #product_list li span.new {

top:111px;

right:0;

width:94%

}

 

.ie7 #product_list li span.new {

top:111px;

right:0;

width:94%

}

 

#product_list li h3 {

padding:0 0 10px 0;

font-size:13px;

color:#000

}

 

#product_list li a {

color:#000;

text-decoration:none;

}

 

#product_list li p.product_desc {

overflow:hidden;

padding:0;

line-height:16px;

}

 

#product_list li p.product_desc,#product_list li p.product_desc a {

color:#666;

}

 

#product_list li .right_block {

display:block;

clear:both;

}

 

#product_list li .discount,ul#product_list li .online_only {

display:block;

font-weight:bold;

color:#990000;

text-transform:uppercase

}

 

#product_list li .discount,ul#product_list li .on_sale {

position:absolute;

bottom:0;

right:0;

display:inline-block;

font-weight:bold;

padding:1px 5px;

font-size:10px;

color:#fff;

text-transform:uppercase;

background:none repeat scroll 0 0 #9B0000

}

 

#product_list li .online_only {

margin:0 0 10px 0

}

 

#product_list li .content_price {

position:relative;

}

 

#product_list li .price {

display:block;

margin-bottom:15px;

font-weight:bold;

font-size:18px;

color:#990000

}

 

#product_list li span.availability {

color:#488C40

}

 

#product_list li .ajax_add_to_cart_button {

padding-left:20px

}

 

#product_list li .ajax_add_to_cart_button span {

display:block;

position:absolute;

top:-1px;

left:-12px;

height:26px;

width:26px;

background:url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent

}

 

#product_list li .lnk_view {

display:block;

margin-top:15px;

padding:0 10px;

border:none;

font-weight:bold;

color:#0088CC;

background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent

}

 

#product_list li .lnk_view:hover {

text-decoration:underline

}

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

ohhh so sorry, my bad

i just thought that you followed other guide, this one: http://mypresta.eu/en/art/developer/grid-and-list-products-view-switcher.html

 

so sorry for my confusion.

 

use this code :)

#product_list li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width: 224px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}

effect:

EwNrdPh.png

Link to comment
Share on other sites
visionpro Newbie

visionpro

Posted
Posted

ohhh so sorry, my bad

i just thought that you followed other guide, this one: http://mypresta.eu/en/art/developer/grid-and-list-products-view-switcher.html

 

so sorry for my confusion.

 

use this code :)

#product_list li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width: 224px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}

effect:

EwNrdPh.png

It works where can i change the height and the frame of the inline blok.

im thankful you answer all my questions so quikly.

Link to comment
Share on other sites
  • 2 weeks later...
vekia Apprentice

vekia

Posted
Posted

I did the changes to grid view, but there is a pagination problem. It shows that there is a next page, but it souldn't since the items are very few. When I click on next pages it shows the same page.

any chance to see it live?

Link to comment
Share on other sites
sdancer75 Newbie

sdancer75

Posted
Posted

take a look:

 

first page:

MCpx8wX.png

 

 

second page:

uZ3a6QG.png

 

 

as you can see it shows different products,

are you 100% sure that you've got only several associated products?

 

 

Yes my it was my fault. I thought that the pagination it was for the category and not for the products........

 

Thank you, can you suggest a solution to  have both list view and grid view and let the user the choose ?

Link to comment
Share on other sites
  • 3 weeks later...
sdancer75 Newbie

sdancer75

Posted
Posted

 

This question does not concerns the grid view it self but the comparitor controller, since when I compare 3 products and then change category, I can not compare any more other products since it returns "You cannot add more than 3 product(s) to the product comparsion".

 

It remembers someway the previous comparision and it does not allow me to compare new products.

 

Regards,

Link to comment
Share on other sites
  • 3 weeks later...

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...