Hello, jm wall is nice!
I need some help thou to change the grid of the jm product display / category display.
I only want to show 4 products in a row and I want to have the pictures larger (to fit the width of the page).
Where do I have to confgurate this? in which css files. php files? And where can I define the size of the picture display? (when I change width or height of the pictures in the configuration menu, they get even smaller. Or whats my mistake?)
Is it also possible to enlarge the picture of the detail page? Where can I do that?
thanks,
martinmo
9 answers
Hi martinmo,
If you want to change to show 4 products per row instead of 5 as current you would need to modify a little in code as following
Open the file of skin\frontend\default\jm_wall\js\wall.js looking for this line of code
PHP Code:
cw_ = Math.floor(mw / cols), // update new width
here you change the cols to 4 so replace the above by this
PHP Code:
cw_ = Math.floor(mw / 4), // update new width
But I think Adding a fixed columns value is not recommend for this responsive layout, the number of columns should be adjustable and determined by the screen size.
Thanks for that peace of code. It works for the desktop but now I allways have 4 products on the mobile devices. You are right, it spoils the responsiveness.
But is it not possible to simply increase the width of all products to make it show 4 in one row -- and keeps the responsiveness (one in one row on smartphone)? When I do this in the configuration of the jm products, nothing changes…
I realy hope you can help me here.
Hi martinmo,
if you want to apply 4 cols for only desktop you can try to replace the above code
PHP Code:
cw_ = Math.floor(mw / cols), // update new width
by this
PHP Code:
isTouch = 'ontouchstart' in window && !(/hp-tablet/gi).test(navigator.appVersion);
if(!isTouch && lastWndWidth >= 960){
cw_ = Math.floor(mw / 4) // update new width
}else{
cw_ = Math.floor(mw / cols) // update new width
}
mw_ = cols * cw_;
I hope it helps !
This works for me now.
Thank You very much!
Hi, Sherlock,
I did this modification on my site:
a) It didn’t work and I still got 4 thumbnails per row!
b) Later I found that the JM Product on the front page was affected, and scrolling down, it would not add more thumbnails. It was just displaying a fixed number of thumbnails.
I removed the new code and the JM Product on the frontpage is working well again.
Hi susanp,
That’s strange, let me know the steps you did for above and I will recheck.
the code change in the wall.js unfortunatly had an effekt on the sidebar layout. See the screenshot. How can I change the CSS for the sidebar? = width from 55px to 100% for example.
help is appreciated, thank you
Hi martinmo,
You can open the css file of skin/frontend/default/jm_wall/css/theme.css , then look for this rule
HTML Code:
#ja-sidebar .block {
margin-bottom: 0;
}
you can add the width here so change the above to
HTML Code:
#ja-sidebar .block {
margin-bottom: 0;
width: 100% !important;
}
working!
Thank you, Sherlock!
This question is now closed
