Help with tweaking display and layout... :)

[SimonZA]

Hey guys,

I wander if you can help me.

Im wanting to just tweak the display and layout of my site a little.

First of all, there seems to be a lot of wasted space above my product list and below the header. (highlighted in red circles in the attached pics.)
Is there anyway to remove that wasted space and move my product lists a bit higher? I see there is a little 'çategory heading display'. If that gets removed, will it solve the problem? Is it POSSIBLE to remove that showing up? Where in CSS files would I find the coding to erase that detail?

Second, how can I move my Newsletter info block from the left hand side, to appear below my shopping cart on the right?

Thirdly, how can I completely remove the 'number of items to list' box that appears on the bottom of the product list? I plan to have everything appear on one page, and therefore have no need for it, but it is still there?

Thanks guys!

[rocky]

1. You'll need to edit CSS to do that. It seems you've copied code to make the category page listings look like the featured products. I'll need a link to your website so I can check the code to be more specific.

2. Go to Modules > Positions > Transplant a module, select "Newsletter block" as the module and "Right column blocks" as the hook, then click Save. The newsletter block will now appear in both the left and right columns. Go to Modules > Positions and delete the "Newsletter block" from the "Left column blocks" section so that it is in the right colum only.

3. Edit pagination.tpl in your theme's directory and {* comment out *} the following code:

{if $nb_products > 10}
   <form action="{if !is_array($requestNb)}{$requestNb}{else}{$requestNb.requestUrl}{/if}" method="get" class="pagination">


           {if isset($query) AND $query}<input type="hidden" name="search_query" value="{$query|escape:'htmlall':'UTF-8'}" />{/if}
           {if isset($tag) AND $tag AND !is_array($tag)}<input type="hidden" name="tag" value="{$tag|escape:'htmlall':'UTF-8'}" />{/if}
           <input type="submit" class="button_mini" value="{l s='OK'}" />
{l s='items:'}

           {foreach from=$nArray item=nValue}
               {if $nValue <= $nb_products}
{$nValue|escape:'htmlall':'UTF-8'}
               {/if}
           {/foreach}

           {if is_array($requestNb)}
               {foreach from=$requestNb item=requestValue key=requestKey}
                   {if $requestKey != 'requestUrl'}
                       <input type="hidden" name="{$requestKey|escape:'htmlall':'UTF-8'}" value="{$requestValue|escape:'htmlall':'UTF-8'}" />
                   {/if}
               {/foreach}
           {/if}

   </form>
{/if}

[SimonZA]

1. You'll need to edit CSS to do that. It seems you've copied code to make the category page listings look like the featured products. I'll need a link to your website so I can check the code to be more specific.

http://www.vinyldestination.co.za/shop/
Thanks

2. Go to Modules > Positions > Transplant a module, select "Newsletter block" as the module and "Right column blocks" as the hook, then click Save. The newsletter block will now appear in both the left and right columns. Go to Modules > Positions and delete the "Newsletter block" from the "Left column blocks" section so that it is in the right colum only.

sorted, thanks!!

3. Edit pagination.tpl in your theme's directory and {* comment out *} the following code:

{if $nb_products > 10}
   <form action="{if !is_array($requestNb)}{$requestNb}{else}{$requestNb.requestUrl}{/if}" method="get" class="pagination">


           {if isset($query) AND $query}<input type="hidden" name="search_query" value="{$query|escape:'htmlall':'UTF-8'}" />{/if}
           {if isset($tag) AND $tag AND !is_array($tag)}<input type="hidden" name="tag" value="{$tag|escape:'htmlall':'UTF-8'}" />{/if}
           <input type="submit" class="button_mini" value="{l s='OK'}" />
{l s='items:'}

           {foreach from=$nArray item=nValue}
               {if $nValue <= $nb_products}
{$nValue|escape:'htmlall':'UTF-8'}
               {/if}
           {/foreach}

           {if is_array($requestNb)}
               {foreach from=$requestNb item=requestValue key=requestKey}
                   {if $requestKey != 'requestUrl'}
                       <input type="hidden" name="{$requestKey|escape:'htmlall':'UTF-8'}" value="{$requestValue|escape:'htmlall':'UTF-8'}" />
                   {/if}
               {/foreach}
           {/if}

   </form>
{/if}

That worked, thanks!

[SimonZA]

Bump for Rocky!

[rocky]

Edit line 1434 of themes/prestashop/css/global.css:

margin-top:30px}

That's adding 30px above each image. Change the value to 0 to remove it.

[SimonZA]

Thanks Rocky, that seemed to have helped a bit!

Though I wonder if I can remove the little heading completely?

Im trying to make the site look as clean as possible, and the text there is looking a little messy now.

Thanks for your help so far!

[rocky]

Change line 1 of category.tpl from:

{include file=$tpl_dir./breadcrumb.tpl}

to:

{*{include file=$tpl_dir./breadcrumb.tpl}*}

and lines 9-11 from:

{if $category->description}
{$category->description}
{/if}

to:

{*{if $category->description}
{$category->description}
{/if}*}

[SimonZA]

Rocky, you are a saint.

Thank you for all your help!

I Just have one LAST request/question.... If you dont mind.

Would it be possible to, in place of those previous little headings we just took away, to replace them with text sub-category links for specific main Categories?

For instance, if I click on 'Toys', I want it to direct by default to the 'Open' toys product list, and then I would then like the sub-categories appear, in TEXT, below the menu. (Open, Blind, Plush, Custom) (no hover action)

And if I click on 'Threads', I want to have it direct the page to the 'Mens clothing' product page by default, and to have 'Mens', 'Womens' and 'Accessories' sub-categories appear.

Pics below to show you. (the pics are mock-ups, and show how I want the site to look like)

I cant seem to do this with the Menu Module I have installed, so Im guessing it can be done somehow in the 'category.tpl' file?

Am I correct in assumin so?

Thanks again for your help. You are a true asset to this community and to PrestShops support.

[rocky]

That's right. You already have subcategories code in category.tpl though, but I can't see any subcategories, so I guess you don't have any yet. When you do, they will be displayed with images and text. You can change them just to links by changing lines 12-33 of themes/prestashop/category.tpl from:

{if isset($subcategories)}
<!-- Subcategories -->

{l s='Subcategories'}

   {foreach from=$subcategories item=subcategory}

           <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
               {if $subcategory.id_image}
                   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" />
               {else}
                   <img src="{$img_cat_dir}default-medium.jpg" alt="" />
               {/if}



           <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}

   {/foreach}




{/if}

to:

{if isset($subcategories)}
<!-- Subcategories -->

{*    {l s='Subcategories'}
*}
   {foreach from=$subcategories item=subcategory name='subcategory'}
{*        
           <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
               {if $subcategory.id_image}
                   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" />
               {else}
                   <img src="{$img_cat_dir}default-medium.jpg" alt="" />
               {/if}



*}            <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}{if !$smarty.foreach.subcategory.last} |{/if}
{*        *}
   {/foreach}




{/if}

[SimonZA]

Thanks man.

it slowly coming along!

I unfortunately, and it was my mistake, didnt make myself 100% clear in my previous post. But it seems to be working slightly how I want it.

In the pic below, you will see that when I CLICK on THREADS, it takes me to the products page under threads. Even though, technically, there are no products DIRECTLY under threads, Im happy that it lists all the products from its sub-categories. Im happy with that!

Im also happy with it how, above the complete THREADS product list, it gives the sub-category links above it.

Im not at home at the moment to make the necessary CSS adjustments to remove the images, and just leave the text, but I was just wandering if, in the attached pic, if I can make those sub-category links appear permanently throughout the THREADS category?

So you click on THREADS.
- Takes you to complete product list of all sub-categories under THREADS, and shows you all sub-category links above.
- Click on sub-category links, will take you to the relative sub-category product page (ie MENS), but at the same time KEEPING the sub-category links above, so you can jump to ACCESSORIES from MENS easily, and vice versa.

Make a little sense?

Also want the same to happen under TOYS. - have all sub-category links appear pemanently at the top throughout the TOYS sub-categories.

I have made the neccessary sub-categories if it will give you a better understanding.



Also, how do I completely disable the HOVER OVER action of the top menu module? Dont like it, and dont want the sub-categories to 'drop down'. Would rather want people to CLICK on THREADS/TOYS/etc and then continue with sub-categories from there.

Thanks again Rocky for all your help.

After all this I will have to ask you for your PayPal account so I can fund you a beer or something...
Really appreciate it.

Thanks!

[SimonZA]

Made the code changes as you suggested in your previous post, and the result is aces!

Now I would just like the sub categories to be there all the time, regardless of which sub-category you are in the Main category. Possible?

Also, if I click on the 'TOYS' category button, my product list is blank with only the sub-category headings showing.
Is there a way to make the TOYS button direct straight to the 'OPEN' sub-category?

cheers man.

[rocky]

Change line 52 of category.php from:

$subCategories = $category->getSubCategories(intval($cookie->id_lang));

to:

if ($category->id_parent == 1)
   $subCategories = $category->getSubCategories(intval($cookie->id_lang));
else
{
   $parentCategory = new Category(intval($category->id_parent), intval($cookie->id_lang));
   $subCategories = $parentCategory->getSubCategories(intval($cookie->id_lang));    
}

This should work, as long as you have only two levels of categories. It checks whether the parent category of the current category is the "Home" category. If it is, it gets the subcategories of the current category. If it isn't, it gets the subcategories of the parent category.

You can use the Donate link at the top of my website to make a donation.

[SimonZA]

made the adjustment, but it doesnt seem to be looking as if it is working..?

Will definitely make a donation. Appreciate your help.

[rocky]

It looks you have three levels of categories. That makes things more difficult. Should the subcategories of the menu categories be displayed even if in a third-level category? If so, it will be impossible to access the third-level categories without using the menu. If you PM me your FTP details, I can try to mess around with my code to get it to work for you.

[SimonZA]

I sent you a PM yesterday Rocky, not sure if you got it or not? Let me know, thanks

[rocky]

Yes, I got it. I've been very busy today though, so I haven't had a chance to look at it. Hopefully, I'll be less busy tomorrow.

[SimonZA]

great, no worries. thanks!

[AMBER]

HI Rocky,

Can you help me on per product page layout please?
To extend the layout of each product page main and sub image to 300 x 600 like is shown on the pictures please?

Amber

[rocky]

Change the following lines in the /* product.tpl */ section of global.css from:

#primary_block #image-block {
   border: #d0d1d5 solid 1px;
   height: 300px;
   width: 300px
}
#primary_block #image-block img#bigpic { 
   cursor: pointer; 
   height: 300px;
   width: 300px
}

to:

#primary_block #image-block {
   border: #d0d1d5 solid 1px;
   height: 600px;
   width: 300px
}
#primary_block #image-block img#bigpic { 
   cursor: pointer; 
   height: 600px;
   width: 300px
}

and in the /* views block */ section:

#thumbs_list li {
   float: left;
   cursor: pointer;
   width: 80px;
   height: 80px
}

to:

#thumbs_list li {
   float: left;
   cursor: pointer;
   width: 80px;
   height: 160px
}

You will need to adjust other areas of this section too for the arrows.

For the "In the same categories" module, edit the /* category Products block */ section:

#productscategory {
   margin: 2em auto 0;
   height: 120px;
   width: 100%
}
#productscategory_noscroll {
   margin: 2em auto 0;
   height: 120px;
   width: 100%
}

Increase the height until there is no overlap.

[AMBER]

Hi Rocky,

Thank you so so much!!!! I have been waiting for weeks. Sooo happy and thankful for your kind assistance.

Amber TBS

[AMBER]

Change the following lines in the /* product.tpl */ section of global.css from:

#primary_block #image-block {
   border: #d0d1d5 solid 1px;
   height: 300px;
   width: 300px
}
#primary_block #image-block img#bigpic { 
   cursor: pointer; 
   height: 300px;
   width: 300px
}

to:

#primary_block #image-block {
   border: #d0d1d5 solid 1px;
   height: 600px;
   width: 300px
}
#primary_block #image-block img#bigpic { 
   cursor: pointer; 
   height: 600px;
   width: 300px
}

and in the /* views block */ section:

#thumbs_list li {
   float: left;
   cursor: pointer;
   width: 80px;
   height: 80px
}

to:

#thumbs_list li {
   float: left;
   cursor: pointer;
   width: 80px;
   height: 160px
}

You will need to adjust other areas of this section too for the arrows.

For the "In the same categories" module, edit the /* category Products block */ section:

#productscategory {
   margin: 2em auto 0;
   height: 120px;
   width: 100%
}
#productscategory_noscroll {
   margin: 2em auto 0;
   height: 120px;
   width: 100%
}

Increase the height until there is no overlap.

Done. Thank you once again. In picture 2 - 2 the words "data sheet" how can i change it to measurements please? I check backend translation but I can't edit form there.

[rocky]

It should be there in the Front Office translations, near the end of the product section.

[AMBER]

I have found it. Thank you so much.