Already managed to get a two-column product view for small screens for featured.twig, bestseller.twig, special.twig and latest.twig but somehow I can't find a way to get a two-column product view for small screens for product searches and product categories...
Anyone knows which file, which line or which piece of code to edit for this?
Default store theme ( OC 3.0.3.2 )
Code: Select all
catalog/view/theme/default/template/product/category.twig
catalog/view/theme/default/template/product/search.twigBackup and learn how to recover before you make any changes!
Thanks, so I'm looking at the right files here.
But what code do I have to adjust to allow a two column product view on small screens?
I tried editing all "col-xx-x" classes I could find, none of them change anything on my website
On all other parts of the website it's already fixed except for product search and category view...
But what code do I have to adjust to allow a two column product view on small screens?
I tried editing all "col-xx-x" classes I could find, none of them change anything on my website
On all other parts of the website it's already fixed except for product search and category view...
You want to look at the product loop
and should see
If using the default theme you have to adjust product-list class as well. Javascript adds additional classes depending on your grid mode.
If you look at catalog/view/javascript/common.js
and find
You can see the classes are appended depending on the active grid mode, etc.
Code: Select all
{% for product in products %}Code: Select all
<div class="product-layout product-list col-xs-12">If you look at catalog/view/javascript/common.js
and find
Code: Select all
$('#grid-view').click(function() {Backup and learn how to recover before you make any changes!
If I may, and despite no OC version posted nor extensions or themes ..
Surely the easiest way to do this would be to add a class to the product thumbs - and add css to the stylesheet
so you would have something like
Surely the easiest way to do this would be to add a class to the product thumbs - and add css to the stylesheet
so you would have something like
Code: Select all
<div class="product-layout product-list col-xs-12 newclass”>Code: Select all
@media screen and (max-width:768px) {
.col-xs-12.newclass {
width: 50%;
}
}DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Don't think that will work since all product-list classes are replaced when the Javascript is executed.
You either have to remove product-list class and lose the gird toggle or edit common.js
Code: Select all
$('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');Backup and learn how to recover before you make any changes!
This works, it was the classes in common.js that had to be changed too. Thanks a whole lot for your supportsw!tch wrote: ↑Thu Feb 20, 2020 4:48 amYou want to look at the product loop
and should seeCode: Select all
{% for product in products %}If using the default theme you have to adjust product-list class as well. Javascript adds additional classes depending on your grid mode.Code: Select all
<div class="product-layout product-list col-xs-12">
If you look at catalog/view/javascript/common.js
and findYou can see the classes are appended depending on the active grid mode, etc.Code: Select all
$('#grid-view').click(function() {
sw!tch wrote: ↑Thu Feb 20, 2020 6:35 amDon't think that will work since all product-list classes are replaced when the Javascript is executed.
You either have to remove product-list class and lose the gird toggle or edit common.jsCode: Select all
$('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
yes you would have to write the full css path - thank you
Code: Select all
@media screen and (max-width:768px) {
.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-12,
.product-layout.product-list.col-xs-12.newclass {
width: 50%;
}
}DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Who is online
Users browsing this forum: No registered users and 12 guests
