[solved] Grid problem product homepage

stefanoste · July 23, 2013

Hello everyone , I have some problem with custom template ..I contact the author but regarding this issue but at today I still not having any response regarding the problem , so I decide to ask some help on the community

On the home page I have n°4 carousel (1 row), everyone for different category , I decide to make the second and third carousel as simply display 8/12 product so I remove the carousel code in the File and in beginning apparently seems to be all ok but after a couple of refresh I notice the grid of the product are completely out of order ( please see the attached file ) and to be honest I dont know how to fix this issue , I hope some Master out there can advice on how to solve it , I include the carousel code

prodcarousel.php

carousel.js.txt

vekia · July 23, 2013

it's because differencies in number of lines:

what to do? increase the height of the field.

if it is possible - please share the url or .tpl (not php) file

stefanoste · July 23, 2013

it's because differencies in number of lines:

what to do? increase the height of the field.

if it is possible - please share the url or .tpl (not php) file

Hello Vekia thank you for your reply here the related product Files

productcarousel-list.tpl

<li>
<a class="product_image" href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}">
 <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />
</a>
{if isset($product.new) && $product.new == 1}<span class="new tag">{l s='New' mod='tptnprodcarousel'}</span>{/if}
{if isset($product.reduction) && $product.reduction}
<span class="reduction tag">
 {l s='Sale' mod='tptnprodcarousel'}
</span>
{/if}
<a class="prod_name" href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}">{$product.name|truncate:35:'...'|escape:html:'UTF-8'}</a>
{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}
 <div class="price-content">
  <div class="price">
   {if !$priceDisplay}
 {convertPrice price=$product.price}
   {else}
 {convertPrice price=$product.price_tax_exc}
   {/if}
  </div>
  {if !$priceDisplay}
   {if {convertPrice price=$product.price_without_reduction} > {convertPrice price=$product.price[spam-filter]
 <div class="price-discount">{convertPrice price=$product.price_without_reduction}</div>
   {/if}
  {/if}
 </div>
{else}
 <div style="height:21px;"></div>
{/if}
<div>
{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=1&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart' mod='tptnprodcarousel'}">{l s='Add to cart' mod='tptnprodcarousel'}</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=1&id_product={$product.id_product|intval}", false)}" title="{l s='Add to cart' mod='tptnprodcarousel'}">{l s='Add to cart' mod='tptnprodcarousel'}</a>
  {/if}	 
 {else}
  <span class="exclusive">{l s='Add to cart' mod='tptnprodcarousel'}</span>
 {/if}
{/if}
</div>
</li>

productcarousel.tpl

<!-- Featured products -->
{if isset($show_featured_prod) AND $show_featured_prod}
<div class="tptncarousel clearfix">
<h1 class="modtitle">{l s='Featured products' mod='tptnprodcarousel'}</h1>
{if isset($featured_products) AND $featured_products}
 <div class="tptn-direction-nav">
  <a class="ftprev prev" href="#"></a>
  <a class="ftnext next" href="#"></a>
 </div>
 <ul class="ftslides">
 {foreach from=$featured_products item=product name=homeFeaturedProducts}
  {include file="$self/tptnprodcarousel-list.tpl"}
 {/foreach}
 </ul>
{else}
 <p>{l s='No featured products' mod='tptnprodcarousel'}</p>
{/if}
</div>
{/if}
{if isset($myprod1) AND $myprod1}
<div class="tptncarousel clearfix">
<h1 class="modtitle">{$categname1|escape:html:'UTF-8'}</h1>
<div class="tptn-direction-nav">
 <a class="c1prev prev" href="#"></a>
 <a class="c1next next" href="#"></a>
</div>
<ul class="categ1slides">
{foreach from=$myprod1 item=product name=myProducts1}
 {include file="$self/tptnprodcarousel-list.tpl"}
{/foreach}
</ul>
</div>
{/if}
{if isset($myprod2) AND $myprod2}
<div class="tptncarousel clearfix">
<h1 class="modtitle">{$categname2|escape:html:'UTF-8'}</h1>
<div class="tptn-direction-nav">
 <a class="c2prev prev" href="#"></a>
 <a class="c2next next" href="#"></a>
</div>
<ul class="categ2slides">
{foreach from=$myprod2 item=product name=myProducts2}
 {include file="$self/tptnprodcarousel-list.tpl"}
{/foreach}
</ul>
</div>
{/if}
{if isset($myprod3) AND $myprod3}
<div class="tptncarousel clearfix">
<h1 class="modtitle">{$categname3|escape:html:'UTF-8'}</h1>
<div class="tptn-direction-nav">
 <a class="c3prev prev" href="#"></a>
 <a class="c3next next" href="#"></a>
</div>
<ul class="categ3slides">
{foreach from=$myprod3 item=product name=myProducts3}
 {include file="$self/tptnprodcarousel-list.tpl"}
{/foreach}
</ul>
</div>
{/if}

you mean to change the <div style="height:21px;"></div>

Ty

vekia · July 23, 2013

no no, whole block, coz the price will disappear

i checked it - solved?

vekia · July 23, 2013

code:

.tptncarousel li {
margin: 10px 12px;
width: 200px;
height: 320px;
}

stefanoste · July 23, 2013

not yet , it doesn't happening all the time after a couple of refresh give the error ...can you may try from your side and let me know if still the same please ...

ty

vekia · July 23, 2013

i pasted solution above, just edit the css styles of the module, then it will work without any problems

vekia · July 23, 2013

i don't know what file you have to edit coz you've got CCC turned on, and the css files are combined.

remember to turn it off and run force compilation

it's necessary to see the changes

stefanoste · July 23, 2013

Ok I will follow your advice ...thank you so much for your Help

Stefano

Jiten rash (away) · July 23, 2013

the best solution to this problem is limit the name chars.from 35 to 25.

here

<a class="prod_name" href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}">{$product.name|truncate:35:'...'|escape:html:'UTF-8'}</a>

stefanoste · July 23, 2013

well jitenx I'm not sure is related to the chars. ...but I will give I try

Edited July 23, 2013 by stefanoste (see edit history)

stefanoste · July 23, 2013

Yes jitenx did the trick...the easiest way to fix the problem :-) THX

Jiten rash (away) · July 23, 2013

i know it will help cos i had faced this problem..increasing is temporary..if u upload a new product with longer name again it will disalign..its paid theme isn't from themeforest megashop????its not compatible with internet explorer 7,8..

use import css style for google fonts..instead of html from header.tpl

stefanoste · July 23, 2013

i know it will help cos i had faced this problem..increasing is temporary..if u upload a new product with longer name again it will disalign..its paid theme isn't from themeforest megashop????its not compatible with internet explorer 7,8..

use import css style for google fonts..instead of html from header.tpl

OHHHHHH I didnt test on explorer :-( this is bad news , how should I make the suggestion you just mentioned ??? Sorry but i am really prestashop newbie ...

Jiten rash (away) · July 23, 2013

plz share ur site url

Jiten rash (away) · July 23, 2013

your site has lot of error..omg..in internet explorer 7 and 8 its crashed

vekia · July 23, 2013

but it's not good for seo, i know that mmters in the lenses are important, now when you truncated them there is no additional information

vekia · July 23, 2013

believe me, own height value for each <li> element will work well, i checked your store and there is no height

Jiten rash (away) · July 23, 2013

something wrong with header.tpl...in internet explorer 7,8 the site completely crashes even without google fonts.

please paste header.tpl here.

vekia · July 23, 2013

it also doesnt work in IE 3.0 and in IE 1.0 too.

LOL

who use ie 7.0 ?

Jiten rash (away) · July 23, 2013

there are many..who uses i.e 7 and even i.e 6

vekia · July 23, 2013

moreover, it still doesnt work:

believe me truncating the title is not the way to fix this ... and it is bad for seo

stefanoste · July 23, 2013

believe me, own height value for each <li> element will work well, i checked your store and there is no height

You right ...I will try to see if i can make it :-) I don't know so much about coding

Jiten rash (away) · July 23, 2013

seo...?????? search results for products only lands on product page not on product list..

if height is not add on css its bad..add height in product list li {}

stefanoste · July 23, 2013

there are many..who uses i.e 7 and even i.e 6

How can i solve it ?????' here is my header.tpl

{*
* 2007-2013 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:
* http://opensource.org/licenses/afl-3.0.php
* 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-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
<head>
 <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
 <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
 <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
 <meta http-equiv="content-language" content="{$meta_language}" />
 <meta name="generator" content="PrestaShop" />
 <meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />
 <link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />
 <script type="text/javascript">
  var baseDir = '{$content_dir}';
  var baseUri = '{$base_uri}';
  var static_token = '{$static_token}';
  var token = '{$token}';
  var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
  var priceDisplayMethod = {$priceDisplay};
  var roundMode = {$roundMode};
 </script>
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
 {$HOOK_HEADER}
 {hook h='displaytptnhead'}
</head>

<body itemscope="" itemtype="http://schema.org/WebPage" {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $content_only} content_only {/if}">
{if !$content_only}
 <div class="wrapper">
 {if isset($restricted_country_mode) && $restricted_country_mode}
 <div id="restricted-country">
  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
 </div>
 {/if}

 {hook h='displaytptnbody'}

 <div id="back-top" style="display: block;">
  <a href="#top"><span></span></a>
 </div>

 <div id="page">
  <div id="bg_overlay"></div>
  <!-- Header -->
  <div id="header">

   <div id="header_right" class="row">
 <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
  <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
 </a>

		    <div id="left_head">
				  <img src="../img/easy.png" alt="" width="283" height="100" align="left" />					
   </div>
 {$HOOK_TOP}


	   </div>
	    </div>



  <div id="columns" class="row clearfix">
   <!-- Left -->
   <div id="left_column" class="subcol">
 {$HOOK_LEFT_COLUMN}
   </div>
   <!-- Center -->
   <div id="center_column" class="maincol">
{/if}

Jiten rash (away) · July 23, 2013

this is ur site in internet explorer 8 u can also check..

there may be many issues.not just header.tpl..i will try to help u

omg i have very less space to upload images

stefanoste · July 23, 2013

code:

.tptncarousel li {
margin: 10px 12px;
width: 200px;
height: 320px;
}

Ok I restore the Truncate to 35 and I made the change on the .tptncarousel li and from here seems to be good now :-)

stefanoste · July 23, 2013

this is ur site in internet explorer 8 u can also check..

there may be many issues.not just header.tpl..i will try to help u

thank you ...please advice on how to fix it !!!

vekia · July 23, 2013

seo...?????? search results for products only lands on product page not on product list..

if height is not add on css its bad..add height in product list li {}

remember that it is a landing page of the store.

steanoste sells lenses, the most important thing in this case is the visibility of the lens specification (model, focal length etc.)

with truncate the products title will loks like

Nikon Ai AF Zoom NIKKOR 2...

Nikon Ai AF Zoom NIKKOR 1...

this is definitely bad. because there is no information about focal lenght - the most important thing in this case

stefanoste · July 23, 2013

remember that it is a landing page of the store.

steanoste sells lenses, the most important thing in this case is the visibility of the lens specification (model, focal length etc.)

with truncate the products title will loks like

Nikon Ai AF Zoom NIKKOR 2...

Nikon Ai AF Zoom NIKKOR 1...

Nikon Ai AF Zoom NIKKOR 1...

this is definitely bad. because there is no information about focal lenght - the most important thing in this case

Thank you so much for your help I think I fix it now , I hope I will be able also to fix the IE matter :-(

stefanoste · July 23, 2013

remember that it is a landing page of the store.

steanoste sells lenses, the most important thing in this case is the visibility of the lens specification (model, focal length etc.)

with truncate the products title will loks like

Nikon Ai AF Zoom NIKKOR 2...

Nikon Ai AF Zoom NIKKOR 1...

Nikon Ai AF Zoom NIKKOR 1...

this is definitely bad. because there is no information about focal lenght - the most important thing in this case

Sorry Vekia , what is the file for the category ..I would also like to change the truncate in category -...ty

vekia · July 23, 2013

it's a product-list.tpl file located in the theme directory

stefanoste · July 23, 2013

Fund it ty .....one question I made some changes on the product page ...changing the combination color with images for camera like mount for nikon, canon , ecc ecc ...so also in this case I made wrong for seo .

Is any work around SEO friendly I can use or change instead ?

Jiten rash (away) · July 23, 2013

didnt get u ?? SEOOOOO???? the more backlinks u have the more seo score u have,,the more ur site will come up in search there is nothing wrong with color combinations

Jiten rash (away) · July 23, 2013

i see something wrong there..

</a>

</div>

they sud be under header...there are many problems ..that causing error in ie

vekia · July 23, 2013

didnt get u ?? SEOOOOO???? the more backlinks u have the more seo score u have,,the more ur site will come up in search there is nothing wrong with color combinations

seo is not related to the backlinks only. It's related also to the construction of the page and construction of the anhors. Landing page is the most important page in the store.

Create anhors like:

Nikon Ai AF Zoom NIKKOR 2...
Nikon Ai AF Zoom NIKKOR 1...
Nikon Ai AF Zoom NIKKOR 1...

and like:

Nikon Ai AF Zoom NIKKOR 20x80mm f/3.5~4.5
Nikon Ai AF Zoom NIKKOR 18x120mm f/3.5~8.5
Nikon Ai AF Zoom NIKKOR 18x60mm f/2.5~5.0

you see the difference now ?

Jiten rash (away) · July 23, 2013

on footer.tpl

change it only to row....

i created a solution for rewrite url my webhost isnt rewrite url friendly..now its ok without that u rember my site vekia..its http://unitekhub.com

stefanoste umm site under maintenance go to preferences contacts remove shop or store name cos the same shop name will appear in every pages after title

so keep title from seo and urls..

stefanoste · July 23, 2013

sorry I dont get It ....what you mean ....why should I remove the name of the shop???

Jiten rash (away) · July 23, 2013

cos shop name works as a title.and it appears in every pages wen ur site was live i saw that on all pages product title plus shop name go to seo and url and keep title there?

vekia · July 23, 2013

we created here little offtopic, problem with the grid is solved

so im going to mark this thread as [solved]

if you've got any other questions not related to main case in this thread - please create new one.

we must follow forum rules

regards

Jiten rash (away) · July 23, 2013

ok vekia,,respect

[solved] Grid problem product homepage

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment