Featured Products / Right Column

[MustanG ^.^]

Hello everyone.

Hope everyone will be fine :-)...

I am a new user of Prestashop. I must say it's incredible, with lots of great features.

I am having a little problem on two things:

1. I uninstalled the modules of Right column, so right column will be empty and the center column will expend to right column. But now the right column place is empty and i want the center column to expand to right column.

2. On main page there is a module installed called FEATURED PRODUCTS. i want the featured products to work as Featured Categories. i.e, there are shirts & some Bags pictures on Featured product. when i click SHIRTS, i don't want it to go to the given products info but to go to the SHIRTS CATEGORY.

I am attaching some photos. Hope you understand it, sorry for my english. Please help me in easy way, i am new.

Look at the current website:
http://www.swallowinternational.com/presta/

i want it to look like this:

BEFORE:
http://img836.imageshack.us/img836/6317/beforewu.jpg

AFTER:
http://img263.imageshack.us/img263/5760/aftergx.jpg

Regards,
Ibrahim

[rocky]

1. You need to adjust the #center_column width in css/global.css in your theme's directory.

2. This is very easy to do with friendly URLs disabled, but very difficult to do with friendly URLs enabled. Do you have friendly URLs enabled?

[MustanG ^.^]

Thanks rocky for replying.

1. Tell me the procedure to do that global thing please.

2. I don't need any friendly URLs, tell me how to disable it & also how to make it FEATURED CATEGORIES...

[rocky]

1. To increase the width of the centre column, find the following code in near the bottom of the /* global style */ section of themes//css/global.css:

#center_column {
   width: 556px;
   margin: 0 0 30px 0;
   overflow: hidden
}

and change it to:

#center_column {
   width: 747px;
   margin: 0 0 30px 0;
   overflow: hidden
}

2. To link all featured products to each product's default category, change lines 14-16 of modules/homefeatured/homefeatured.tpl from:

<a href="{$product.link}" title="{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:27:'...'|escape:'htmlall':'UTF-8'}

<a href="{$product.link}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:130:'...'}
<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />

<a href="{$base_dir}category.php?id_category={$product.id_category_default}" title="{$product.name|truncate:32:'...'|escape:'htmlall':'UTF-8'}">{$product.name|truncate:27:'...'|escape:'htmlall':'UTF-8'}

<a href="{$base_dir}category.php?id_category={$product.id_category_default}" title="{l s='More' mod='homefeatured'}">{$product.description_short|strip_tags|truncate:130:'...'}
<a href="{$base_dir}category.php?id_category={$product.id_category_default}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />

Note that you must edit each of your products and set the "Default category" to the one you want to navigate to when the product is clicked. If they are all "Home", then it won't work. To change "Featured Products" to "Featured Categories", go to Tools > Translations > Module translations > USA flag > homefeatured section and enter "Featured Categories" in the "Featured Products" text field, then click "Update translations" at the bottom.

[MustanG ^.^]

Sorry for bothering again & again.
It's just that i am new in prestashop.

1. I remove everything of RIGHT COLUMN. Then i go to /THEMES/Themename/css/global.css and change the value of right_coum from 191 to 0. and then change value of center_celumn from 561 to 700 but still the same size...

2. I didn't understand the coding, but i understand to change the category of product when adding product. please can you make it a little easy ?

[rocky]

1. I can't check your site because it is says "Website not found". That should have increased the column width. Perhaps the centre column width did increase, but the width of the items in the centre column are still the same? You will need to increase the width of those too. The featured products width is in the /* block in the center column */ section of global.css:

#center_column div.block { width: 536px; margin: auto }

2. It's hard to make it any easier. Find the first code block in my previous post and replace it with the second code block. Basically, it replaces the product link with a category link including the product's default category.

[MustanG ^.^]

Thanks alot rocky.

1. Yeah i changed the size of slider and it's done. but how can i change the size of FEATURED PRODUCTS ?. See screenshot.

http://img189.imageshack.us/img189/6859/sizew.jpg

2. How can i change the background of the theme ? I want to put a picture in the background instead of the silver color.

3. So in FEATURED PRODUCTS i select their respective CATEGORY and then copy / paste your codes and it's done ? i mean when someone clicks on a PRODUCT in FEATURED PRODUCTS then it will go to the product cateogory page instead of the PRODUCT buying / info page ?

[MustanG ^.^]

And the URL of the site is:
http://www.swallowinternational.com/shop/

[rocky]

I had a look at the code and the reason it isn't working is because your template has an extra file called style.css that overrides global.css. You need to change the width of #center_column div.block there instead of global.css. Change it from auto to 700px.

[MustanG ^.^]

Hello rocky.

Thanks alot. it helped.

I just need these 3 more helps please:

1. How can i change the background from silver to an image. (Screenshot attached).

2. How can i add another product in FEATURED PRODUCTS list to fill the blank area. or tell me how to make the FEATURED PRODUCTS BLOCK bigger to fill the area. (Screenshot attached)

3. I tried to edit the HOMEFEATURED.TPL but it messed up. i am attaching my HOMEFEATURED.TPL file. Please edit it, so when someone clicks on FEATURED PRODUCTS product i.e SHIRT --> Not go to that shirt buying page but go to SHIRTS CATEGORY where all shirts are listed.

[MustanG ^.^]

I don't know why i can't attach TPL File...
Here it is hosted on online hosting:

QUICKFILEPOST: http://www.qfpost.com/download.do?get=80edf3aaf03973f05f3f8b249b79df71

MEDIAFIRE: http://www.mediafire.com/?bmm1qj6z4gz7o3r

[rocky]

1. It's the following code in global.css that controls the background:

body {
   background-color: #e0e0e0;
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
   color: #7d7d7d;
   text-align: center
}

Change the background-color line to:

background: #e0e0e0 url(../img/background.jpg);

This will load background.jpg from the img directory inside your theme as the background image and use the current silver colour as the background while the image is loading. It will also tile the background image. You can add no-repeat before the ; if you don't want the background to repeat, repeat-x if you want it to only repeat horizontally and repeat-y if you want it to only repeat vertically.

2. You need to reduce the width of the items in the following part of style.css:

#center_column .products_block ul li {
   padding:9px;
   background:#f0f0f0;
   width:152px;
   margin-right:11px;
   margin-bottom:11px;
}

Decrease the width from 152px to 143px.

3. You must zip files before posting them on the forums. I've updated the file and attached it. It won't work until you set the "Default category" of your products to the one you want to go to when the product is clicked. At the moment, the default category is "Home", so clicking on the product will go to the "Home" category.

homefeatured.zip

[MustanG ^.^]

Rocky thanks alot once again :-)...

1. The background changed ...Thanks

2. The blocks were solved :-)...Thanks, although i wanted to ask that if i wanted the blocks to be three in a row, i can just make the width bigger but the image is still same small. how to make the image size inside block big ?

3. I didn't understand the homefeatured. where in the HOMEFEATURED.TPL i can change the category ?...Make the HOMEFEATURED.TPL dafault category to ACCESSORIES (check www.swallowinternational.com/shop/) i have all the products on main page set dafault category to ACCESSORIES. so make a HOMEFEATURED.TPL which i replace the other one. and then when someone clicks on product it goes to ACCESSORIES cateogry.

[MustanG ^.^]

And another thing brother.

1. I want that Product block should have no border. when i upload image, the image should come all over the product place. It's not even necessary that the product name should appear below the image, i can write the name on the image. if that's difficult then no problem. Example attached:

EXAMPLE:
http://img510.imageshack.us/img510/2431/examplefq.jpg

2. There are 6 products on homepage, tell me the size that i should give so 3 will be on UPPER place & 3 on lower place. nicely arranged ...

Again thanks alot rock brother.

[rocky]

Here's an updated homefeatured.tpl that removes the product name. You should go to Preferences > Images and change the "home" size to 108 width x 128 height, then click the "Regenerate thumbnails" button. That will increase the size of the images.

homefeatured.zip

[MustanG ^.^]

Thanks :-)...that worked.

1. How do i change the Color of CATEGORIES Text ?

2 On main page there is a module installed called FEATURED PRODUCTS. i want the featured products to work as Featured Categories. i.e, there are shirts & some Bags pictures on Featured product. when i click SHIRTS, i don’t want it to go to the given products info but to go to the SHIRTS CATEGORY.

[MustanG ^.^]

And another thing:

1. Is there any module or code or something which can get me a thing like this:

i.e a person comes and clicks on SHIRT categories, but at the same time there should be another window on right or left showing something pictures & text from other Categories. i am surfing in RACKETS but it shows a window on Right about CLOTHES Too. a window like CART BLOCK.

[rocky]

1. You can change the colour of the "Categories" text at the top of the block on the left on line 843 of css/global.css in your theme's directory:

color: #374853;

2. The homefeatured.tpl I posted already does this, but you have your default categories set up wrong, so it isn't working. You should edit the shirt featured product and change the default category from "Home" to "Shirts" if you want it to go to the "Shirts" category when clicked.

3. I'm not aware of any modules that do that, likely because most people don't have products linking to categories.

[htech]

Good Day Mustang,

Please could you assist me, i see you have helped the beginners quite abit! (very cool).

i have been searching and searching on how to fix the problem,

The problem is that my "Featured products" blocks are randomly sized... See attached pic.

Im looking to make it auto-fit all good and nice.

Please could you assist.

thanks

[rocky]

I see this question a lot, and the screenshot is aways the same. I guess it must be a bug in a third-party theme. It seems the product description does not have a fixed height, causing the items below it to be out of alignment. You should edit your global.css and look for code like the following in the /* Styles for products blocks */ section:

#center_column div.products_block p.product_desc {
   height: 9em;
   color: #595a5e
}

This code is from the default PrestaShop theme. It gives the product description a fixed height of 9em. Make sure yours has a appropriate fixed height too. Make it big enough to fit the largest description.

[htech]

thanks rocky it worked!!!
yes it is quite a nice/ simple / plain theme, nothing too complicated for the user that accesses the site.

much appreciated!

i also require abit of help with the attached picture, im looking to put a facebook login button in either area 1 or area 2(refer to picture).

been struggling to understand how to position items on the prestashop frontpage, very confusing to a newbie

ideally "1" would be the position for the Facebook Login , unless there's a better place to put it?

Wes

[MustanG ^.^]

Hello rocky...

Sorry to bother you again...

I have figured everything out except i need these two things:

1. When you cllick on an Category, the cateogry picture is smaller then the window even if you upload large size picture. Example: http://img808.imageshack.us/img808/4536/123iiu.jpg

2. You already made 2 Featured Products TPL File for me, i finally found where DAFAULT CATEGORY is located. Can you please make a Featured Category file in which when someone clicks an item it goes to the category page instead of product buying page (you made one before) and also that it doesn't show Names of items under them (you also made this but that doesn't have the other feature)...In short, can you please make a FEATURED PRODUCTS TPL File with that click & go to category feature & that the products on Featured products doesn't have it's name Under it, only the image visible.

[MustanG ^.^]

Another bug or something it is:

1. In featured products the upper 3 products have space between them, but the lower products doesn't have that. screenshot: http://img440.imageshack.us/img440/4559/nospace.jpg

STYLE.CSS SETTINGS:
#center_column .products_block ul li {
padding:10px;
background:#f0f0f0;
width:175px;
margin-right:10px;
margin-bottom:10px;

[epicureanfoods.com]

Hi Rocky,
All of the above has been helpful - thank you.
The final thing I'm trying to do on my product page is to increase the number of characters that show up in as my product name, for example,
http://www.epicureanfoods.com/ca/94-candies the "Covered Bridge Sweet Potato With.." is truncated for some reason.

I think what is happening is, the field that is showing up in here is my "href", not actually the product name as defined in presta shop.
I'm guessing that when I add a product, presta shop automatically creates an "href" that is 28 characters. Is there a way to change this or should I try and put the product name in that space instead of the href?

If so, can you tell me how to do that?
thanks for your time, hope all is well on your big project!
Phyllis

[rocky]

Change line 16 of themes/atr003-beautyshop01/product-list.tpl:

{if $product.new == 1}{l s='new'}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.legend|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}

Increase the 35 after truncate: to the number of characters you want displayed before it is truncated and ... is displayed.