help with featured products module

[zee28]

hi all,

does anyone know how to enlarge the featured products block to the edge of the page, its too small

link: www.gadgetpit.co.uk

ZEE...

[Martin Uker K]

You want to remove left and right column??? Or just display the homefeatured after them?

 

Martin

[zee28]

yeah so basically it takes up the centre, left and right column. I also want to increase the size of the image and text on it

[Kogkalidis]

yeah so basically it takes up the centre, left and right column. I also want to increase the size of the image and text on it

 

You have to exclude all the modules from the slider to show on the home page and then make the width of the module 100% in order to take all the width and then fix the size of the images

[Paulito]

Good morning

 

Try this excellent tutorial

 

http://mypresta.eu/en/art/developer/one-column-homepage.html

 

Hope this helps

 

Paul

[Martin Uker K]

Text size : themes/youtheme/css/modules/homefeatured/homefeatured.css (If something in that path doesn't exist, create it, if the css doesn't exist, copy the one from the module (modules/homefeatured/homefeatured.css)

 

Image size : I think it takes the "home_default" size, I don't have the code in fornt of me, but you can trust me I'm a genius and a jedi, go in your backend and edit it under preferences->images, don't forget to regenerate the images after for home.

 

Remove the column : That's a funny part, just edit all the modules' position you have in your columns to except the homepage

 

Martin

[vekia]

hello

 

in this case you have to modify template a bit, you need to change the header.tpl and footer.tpl file located in your theme directory

additional informations you can find in the url posted by perfumeskunk above

[Martin Uker K]

@vekia Putting exception in Module position wouldn't clear them from homepage?

[vekia]

the columns will still appear there - moreover, the center column has got grid_5 value so it is neessary to change it with {if} conditions in the template files

[Martin Uker K]

I'm quite unsure which solution I would use. I'm a purist in Programmation: affectation is better than condition on server side Performance. We have a body with a unique ID here.

body#index #center-column.grid5

would by pass the CSS instruction for width. THat would make the application more performant, but I still know the performance difference is minimal. But we'Re talking about affecting all pages' performance with 3 conditions for 1 page display. Display is a CSS matter, not PHP or HTML.

 

On an other perspective : We don't need the column on the index page, the data for these column is still loaded, the module will still be affected on the hook and loaded. Only the display will be affected by your solution, server side will still need to "use" the hook.

 

Still, I might be wrong somewhere...

 

Martin

Edited July 25, 2013 by Martin Uker K (see edit history)

[zee28]

thanks guys.. if you look at the link i have made the columns disappear, but some of the product grids are stuck together. also at the bottom of the page there is an indent ( <) that i have tried to locate but i can find in the code.

[zee28]

also there is alot of open space under the featured product block.. anyone know how to reduce it

[Martin Uker K]

Homefeature.tpl might not be right.

 

Make sure that you override it and change the value at lines :

31 to 33.

 

Change you nbitemsperline to 7

[Jiten rash (away)]

i hav posted homefeatured for u sorry late reply i was at office

have seen ur site..

there is huge gap in home slider bottom cos of 250 height in homefeatured.tpl

it has to auto

located in themes/modules/homfeatured.tpl

 

i have already created and fixed for u just see ur previous post

Edited July 25, 2013 by Jiten rash (see edit history)

[zee28]

thanks guys i fixed it... i noticed that there is a problem with the width of the columns, on the right hand side there is a bigger gap than the left side, which is why i think some products are sticking together.. any ideas on how to change it?

[Jiten rash (away)]

see ur previous post..i pasted css for u

[zee28]

hi jitesh... my website disappeared after i tried ur code

[Jiten rash (away)]

ya m seeing ur site i sud have given u to download..wait iam giving files

[Jiten rash (away)]

get this

[zee28]

should i upload just the tpl file or everything?

[Jiten rash (away)]

tpl file and copy the css empty default css and paste

 

ur slider looks good are u using leo camera slider which i suggested

[zee28]

i uploaded ur file and all it did was to make the prices disappear

[zee28]

and yea i used the leo camera module u suggested

[Jiten rash (away)]

ok replace with default css

#featured-products_block_center {width:980px; padding:5px 10px 12px 10px; background: #fff;}

#featured-products_block_center li {

 

width: 157px;

height: 253px;

border: 1px solid rgb(204, 204, 204);

padding: 3px 2px 11px 17px;

margin: 20px 5px 5px 5px;

}

#featured-products_block_center li.last_item_of_line {margin-right:0;}

#featured-products_block_center .s_title_block, #featured-products_block_center h5 {

padding-top:5px;

height:30px;

font-size:12px;

color:#222;

padding-bottom: 0;

font-weight:bold;

}

 

#featured-products_block_center .product_image {

display:block;

position:relative;

overflow:hidden

}

#featured-products_block_center .product_image 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);

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

background-color: #990000;

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

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

}

 

.ie9 #featured-products_block_center .product_image span.new{top:-18px;right:-38px}

.ie8 #featured-products_block_center .product_image span.new{top:-21px;right:-38px}

.lt-ie6 #featured-products_block_center .product_image span.new {top:-30px;right:-25px}

 

#featured-products_block_center .product_desc {height:45px;}

#featured-products_block_center .product_desc,

#featured-products_block_center .product_desc a {

color:#666

}

#featured-products_block_center .lnk_more {

display:inline;

padding-right:10px;

font-weight:bold;

font-size:10px;

color:#0088cc;

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

}

#featured-products_block_center .price_container {

margin-top:10px;

padding:0;

}

#featured-products_block_center .price {

font-weight:bold;

font-size:14px;

color:#990000

}

#featured-products_block_center li .ajax_add_to_cart_button {display:none;}

#featured-products_block_center li span.exclusive {display:none;}

Edited July 25, 2013 by Jiten rash (see edit history)

[zee28]

thanks it worked but the border is too big... is there a way in increasing the size of the image itself.

 

check it out

www.gadgetpit.co.uk

[Jiten rash (away)]

first change padding of home featured_products_block

fist line use this

padding:5px 3px 5px 0px;

[Jiten rash (away)]

on global.css line 314

.products_block li img {

 

set border{0;}

 

on homefeatured.css

line 2

#featured-products_block_center li {

set margin:

20px 5px 5px 13px;

 

ur site will look awesome

Edited July 25, 2013 by Jiten rash (see edit history)

[zee28]

thanks, there is also a random image with a question mark on the webpage that appeared when u gave me the code

[Jiten rash (away)]

to remove that use this

#featured-products_block_center {width:980px;padding:5px 3px 5px 0px; ; background: #fff;}

 

#featured-products_block_center li {

 

width: 157px;

height: 253px;

border: 1px solid rgb(204, 204, 204);

padding: 3px 2px 11px 17px;

20px 5px 5px 13px;

perfect

Edited July 25, 2013 by Jiten rash (see edit history)

[zee28]

where is the global.css file sorry:)

[Jiten rash (away)]

its in themes default/css

[Jiten rash (away)]

had time so created this

Edited July 25, 2013 by Jiten rash (see edit history)

[zee28]

can u suggest me a good way of editing the code, im currently using notepad and it is extremely hard to locate codes.

[Jiten rash (away)]

use notepad++ u can also use cuteftp to edit online make sure everytime u make changes make a hard refresh CTRL+f5

[zee28]

nice, is there a way in which we can mode all the products into the middle, to give it a better look, i will try the logo u made now

[zee28]

can u send me the file of the png then i can save it pls

[Jiten rash (away)]

i see ur still u havnt put

margin:

20px 5px 5px 13px;

 

thats y its not in the center put it under here

#featured-products_block_center li {margin:

20px 5px 5px 13px;}

[zee28]

i did that.. have a look at the website, it went wrong

[Jiten rash (away)]

use missed this {

under here

#featured-products_block_center li >put here<

it shud be

#featured-products_block_center li {

[zee28]

still not working

[Jiten rash (away)]

remove "perfect" word from css y u pasted

[zee28]

have a look it nearly worked

[Jiten rash (away)]

ok copy all and paste below

#featured-products_block_center {width:980px;padding:5px 3px 5px 0px; ; background: #fff;}

 

#featured-products_block_center li {

margin:

20px 5px 5px 13px;

 

width: 157px;

height: 253px;

border: 1px solid rgb(204, 204, 204);

padding: 3px 2px 11px 17px;

}

#featured-products_block_center li.last_item_of_line {margin-right:0;}

#featured-products_block_center .s_title_block, #featured-products_block_center h5 {

padding-top:5px;

height:30px;

font-size:12px;

color:#222;

padding-bottom: 0;

font-weight:bold;

}

#featured-products_block_center .product_image {

display:block;

position:relative;

overflow:hidden

}

#featured-products_block_center .product_image 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);

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

background-color: #990000;

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

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

}

 

.ie9 #featured-products_block_center .product_image span.new{top:-18px;right:-38px}

.ie8 #featured-products_block_center .product_image span.new{top:-21px;right:-38px}

.lt-ie6 #featured-products_block_center .product_image span.new {top:-30px;right:-25px}

 

#featured-products_block_center .product_desc {height:45px;}

#featured-products_block_center .product_desc,

#featured-products_block_center .product_desc a {

color:#666

}

#featured-products_block_center .lnk_more {

display:inline;

padding-right:10px;

font-weight:bold;

font-size:10px;

color:#0088cc;

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

}

#featured-products_block_center .price_container {

margin-top:10px;

padding:0;

}

#featured-products_block_center .price {

font-weight:bold;

font-size:14px;

color:#990000

}

#featured-products_block_center li .ajax_add_to_cart_button {display:none;}

#featured-products_block_center li span.exclusive {display:none;}

[zee28]

thanks!, it worked well is there anything else you suggest i can do on the homepage to improve.. or i will move onto changing the other pages

[Jiten rash (away)]

get some custom html modules

[zee28]

what would that do

[zee28]

hey jiten, just wondering how could i remove the description, put the title on top and remove the border around the image of the product?

[zee28]

something like this:

[Jiten rash (away)]

on themes default modules homefeatured.tpl

find this line change 65 to 0

<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:0'...'}</a></div>

[zee28]

ok done that, how can we increase the size of the image and put the titles on top

[Jiten rash (away)]

<!-- MODULE Home Featured Products -->

<div id="featured-products_block_center" class="block products_block clearfix">

<p class="title_block">{l s='Featured products' mod='homefeatured'}</p>

{if isset($products) AND $products}

<div class="block_content">

{assign var='liHeight' value=auto}

{assign var='nbItemsPerLine' value=auto}

{assign var='nbLi' value=$products|@count}

{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}

{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}

<ul style="height:{$ulHeight}px;">

{foreach from=$products item=product name=homeFeaturedProducts}

{math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

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

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='' mod='homefeatured'}{/if}</a>

[zee28]

where shall i put this code

[Jiten rash (away)]

u need to cut <p class="s_title_block"><a href="{$product.link}" title="{$product.name|truncate:50:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></p>

and move in the top

below here

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

if u need bigger image change home default to large_default

or create new image

[Jiten rash (away)]

u got my logos?

[zee28]

no where did u send them to?

[zee28]

sorry but what is the location of the codes you can me to change??

[Jiten rash (away)]

themes default/modules/homefeatured..

 

u got notepad++

[zee28]

the notepad ++ doesnt allow me to edit

[Jiten rash (away)]

right click tpl file open with notepad++

[zee28]

ok im editing now

[zee28]

i cant seem to find it.. do u mind copying and pasting the entire tpl file pls

[Jiten rash (away)]

{*

* 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:

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

*}

 

<!-- MODULE Home Featured Products -->

<div id="featured-products_block_center" class="block products_block clearfix">

<p class="title_block">{l s='Featured products' mod='homefeatured'}</p>

{if isset($products) AND $products}

<div class="block_content">

{assign var='liHeight' value=auto}

{assign var='nbItemsPerLine' value=4}

{assign var='nbLi' value=$products|@count}

{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}

{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}

<ul style="height:{$ulHeight}px;">

{foreach from=$products item=product name=homeFeaturedProducts}

{math equation="(total%perLine)" total=$smarty.foreach.homeFeaturedProducts.total perLine=$nbItemsPerLine assign=totModulo}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

<li class="ajax_block_product {if $smarty.foreach.homeFeaturedProducts.first}first_item{elseif $smarty.foreach.homeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.homeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.homeFeaturedProducts.iteration > ($smarty.foreach.homeFeaturedProducts.total - $totModulo)}last_line{/if}">

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

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New' mod='homefeatured'}</span>{/if}</a>

 

<div class="product_desc"><a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:0:'...'}</a></div>

<div>

<a class="lnk_more" href="{$product.link}" title="{l s='View' mod='homefeatured'}">{l s='View' mod='homefeatured'}</a>

{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}

 

{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}

{if ($product.quantity > 0 OR $product.allow_oosp)}

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>

{else}

<span class="exclusive">{l s='Add to cart' mod='homefeatured'}</span>

{/if}

{else}

<div style="height:23px;"></div>

{/if}

</div>

</li>

{/foreach}

</ul>

</div>

{else}

<p>{l s='No featured products' mod='homefeatured'}</p>

{/if}

</div>

<!-- /MODULE Home Featured Products -->

[zee28]

thanks im going to try and make the image larger.. where did you send the logos?

[Jiten rash (away)]

yesterday here on this topic 1 logo just created

[zee28]

yes i saw that but i didnt know how to save it

[Jiten rash (away)]

right click and save image

[zee28]

it doesnt allow me because of the format.. attach it