[SOLVED] Remove Scroll Bars from Products Category (1.5.3)

[dsgnmind]

Simple request but not sure the best way to edit. CSS, JS, .TPL???

 

Simply want to remove the scrolls bars of the products category module. We don't have more than 16 products in any category so would rather have all products show and stack accordingly.

 

Thanks!

 

Edited April 13, 2013 by dsgnmind (see edit history)

[NemoPS]

You'll need to edit productscategory(the module). You'll basically need to force the noscroll css by editing the tpl file.

 

Line 29, change this

 

<div id="{if count($categoryProducts) > 5}productscategory{else}productscategory_noscroll{/if}">

 

Into this

 

<div id="productscategory_noscroll">

[dsgnmind]

Thanks Nemo1. I replaced the line of code as suggested and while the scroll bars are gone is there anyway to get the images and names to auto stack the width of the template. Right now the array off to the right in one line.

 

Thank again for your help.

Edited April 5, 2013 by dsgnmind (see edit history)

[NemoPS]

You should edit the css for this I belive, it must be productscaetgory.css, look at it and see if it has overflow:hidden somewhere. If so, remove it (likely, in the productscategory_noscroll class)

[dsgnmind]

i modified the post above with a .jpg of the previous post. Does this help?

[NemoPS]

Uh, the scrollbar is still there. Can you link the page?

[dsgnmind]

Sorry Nemo1 - the prestashop forum is not showing the image I attached in the previous previous post from April 3rd.

 

I will try to attach it to this post as well.

[castiel]

Hello Guys, I have the same problem .. how can I fix this?

 

 

Else ... actually in category there are 16 other products ... because it says 9??

 

Thank you and sorry for the English google!

 

The second question I have resolved so:

 

 

If only shows up to 10 products in the category even though there are many more, change the file productscategory.php

at line

 

array_splice($categoryProducts, ($nb ? $nb : 10));

 

increasing the value

Edited April 7, 2013 by castiel (see edit history)

[dsgnmind]

Well I've tried a few things with the css but no cigar. I've tried editing both the .css file in root\modules\productscategory and in root\themes\css\modules\productscategory which from what i understand be the overridding file.

 

Here is the code from the second one and while i change auto to hidden nothing changed.

 

Contents of productscategory.css under root\themes\css\modules\productscategory

h2.productscategory_h2 {
margin:40px 0 20px 0;
padding:10px 0;
color:#333
}
#productscategory {overflow:hidden}
#productscategory_list ul {
list-style-type:none;
margin: 0 0 0 14px;
}
#productscategory_list li {
float:left;
margin-right:25px
}
#productscategory_list li a.lnk_img {display:block}
#productscategory_list li a img {border:1px solid #ccc}
#productscategory_list li p.product_name {text-align:center}

 

Again.. looking to make the images naturally stack and not overflow.

 

 

fyi: If I remove the css file under the themes folder the last image gets cut off.

Edited April 7, 2013 by dsgnmind (see edit history)

[dsgnmind]

Nemo - do you have any other suggestions?

[NemoPS]

The only thing i can think about (since i can't check it atm) would be to just set a fixed width and overflow:hidden on the ul. This should clearfix-it automanatically if the content floats

[dsgnmind]

Thanks Nemo - I know what you are saying in general, but I'm not code savy. Can you break down what you mean? How would I do this?

Thanks!

[NemoPS]

Ok, basically locate the crossselling.tpl file.

 

Look into your theme folder/modules first, and if it's not there head to the modules fodler/crossselling

 

Open it up and locate

<div id="productscategory_list">

 

There is a <ul> after it, remove it's style tag, which is likely giving it the width of the elements * their number

 

 

It fixes it with chrome dev tools

[dsgnmind]

That did it Nemo - thanks! I found the code you referenced though back in the productscategory.tpl though.

 

So here is a wrap up for those who may be looking for the same result. I'm on 1.5.3.1 - your results may vary.

all changes to code were done for me in Root/modules/productscategory/productscategory.tpl file

 

1) Remove scroll by replacing the code:

{if count($categoryProducts) > 5}productscategory{else}productscategory_noscroll{/if}

 

with...

productscategory_noscroll

 

 

2) Remove ‘prev’ and ‘next’ buttons by deleting or commenting out:

{if count($categoryProducts) > 5}<a id="productscategory_scroll_left" title="{l s='Previous' mod='productscategory'}" href="javascript:{ldelim}{rdelim}">{l s='Previous' mod='productscategory'}</a>{/if}

&

{if count($categoryProducts) > 5}<a id="productscategory_scroll_right" title="{l s='Next' mod='productscategory'}" href="javascript:{ldelim}{rdelim}">{l s='Next' mod='productscategory'}</a>{/if}

 

 

3) To make the links stack with the frame or browser size remove the style tag as suggested after the

<div id="productscategory_list">

 

In this case the code was changed from this...

<div id="productscategory_list">
 <ul {if count($categoryProducts) > 5}style="width: {math equation="width * nbImages" width=107 nbImages=$categoryProducts|@count}px"{/if}>

 

to this...

<div id="productscategory_list">
 <ul {if count($categoryProducts) > 5}{/if}>

 

Thanks again Nemo for your help.... the forum can use more people like you!!!

i'm still looking for answers to many other questions... It take a community to raise a prestashop.

Edited April 13, 2013 by dsgnmind (see edit history)