[SOLVED] - How to display two products per row on category page in mobile view

Quote

Post by stefg » Sat Mar 21, 2020 3:57 pm

Hello,
How to display two products per row on category page in mobile view.
I found the following solution for Featured products:
In "catalog/view/theme/My theme/template/extension/module/featured.twig" replaced code

Code: Select all

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
with

Code: Select all

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">
and it works fine.
However when I try to do similar in "catalog/view/theme/My theme/template/product/category.twig" and replace code

Code: Select all

<div class="product-layout product-list col-xs-12">
with

Code: Select all

<div class="product-layout product-list col-xs-6">
it does not work. I have a suspicion it is because product-list class but don't know how to change it.
Please help!

OpenCart Version 3.0.3.2
Last edited by straightlight on Tue Mar 24, 2020 10:12 pm, edited 1 time in total.
Reason: Please add code tags!
stefg
New member
Posts
75
Joined
Fri Oct 18, 2019 7:25 pm
Location - Usa
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by letxobnav » Sat Mar 21, 2020 4:26 pm

<div class="product-layout product-grid col-xs-6">
should work.
I think if you use product-list, the description is not hidden.

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.

User avatar
letxobnav
Expert Member
Posts
3264
Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by stefg » Sat Mar 21, 2020 7:17 pm

letxobnav wrote: ↑
Sat Mar 21, 2020 4:26 pm
 <div class="product-layout product-grid col-xs-6">
should work.
I think if you use product-list, the description is not hidden.
This way it does show two products in a row but not only in mobile view, also in desktop view, and I need to keep the default behaviour on desktop.
stefg
New member
Posts
75
Joined
Fri Oct 18, 2019 7:25 pm
Location - Usa
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by letxobnav » Sat Mar 21, 2020 8:14 pm

then use:
<div class="product-layout product-grid col-xs-6 col-sm-3">

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.

User avatar
letxobnav
Expert Member
Posts
3264
Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by stefg » Sat Mar 21, 2020 8:54 pm

letxobnav wrote: ↑
Sat Mar 21, 2020 8:14 pm
 then use:
<div class="product-layout product-grid col-xs-6 col-sm-3">
This way it always adds four products per row on desktop regardless if I have a right or left column. The default behaviour is four products per row if there are no right or left column and three products per row if there is right or left column. I need to keep this behaviour.
stefg
New member
Posts
75
Joined
Fri Oct 18, 2019 7:25 pm
Location - Usa
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by letxobnav » Sat Mar 21, 2020 9:35 pm

seems to be overwitten via media css, you will ave to change it in the stylesheet to override bootstrap.

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.

User avatar
letxobnav
Expert Member
Posts
3264
Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by Dutch Pride Code » Sat Mar 21, 2020 9:53 pm

This may help:
viewtopic.php?f=202&t=216186
User avatar
Dutch Pride Code
Active Member
Posts
380
Joined
Sun Jan 26, 2020 9:46 pm
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by stefg » Sun Mar 22, 2020 12:11 am

jonagoldapple wrote: ↑
Sat Mar 21, 2020 9:53 pm
 This may help:
viewtopic.php?f=202&t=216186
It works. Thanks a lot. Actually only classes in common.js need to be changed. No changes in category.twig
stefg
New member
Posts
75
Joined
Fri Oct 18, 2019 7:25 pm
Location - Usa
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by by mona » Sun Mar 22, 2020 12:44 am

changing common.js will work, but it is not the correct solution.

you should always create an ocmod to change the twig and add custom css wherever possible.
files like common.js should never be touched.

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

User avatar
by mona
Expert Member
Posts
3265
Joined
Mon Jun 10, 2019 9:31 am
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by stefg » Sun Mar 22, 2020 1:03 pm

by mona wrote: ↑
Sun Mar 22, 2020 12:44 am
 changing common.js will work, but it is not the correct solution.

you should always create an ocmod to change the twig and add custom css wherever possible.
files like common.js should never be touched.
Can you suggest another solution that changes the twig and works?
stefg
New member
Posts
75
Joined
Fri Oct 18, 2019 7:25 pm
Location - Usa
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by by mona » Mon Mar 23, 2020 3:41 am

I did !!! a new class .. so you can use css ...
Does it not work for you?
by mona wrote: ↑
Thu Feb 20, 2020 6:19 am

Code: Select all

<div class="product-layout product-list col-xs-12 newclass">

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

User avatar
by mona
Expert Member
Posts
3265
Joined
Mon Jun 10, 2019 9:31 am
Top

Re: How to display two products per row on category page in mobile view

Quote

Post by stefg » Tue Mar 24, 2020 9:27 pm

by mona wrote: ↑
Mon Mar 23, 2020 3:41 am
 I did !!! a new class .. so you can use css ...
Does it not work for you?
by mona wrote: ↑
Thu Feb 20, 2020 6:19 am

Code: Select all

<div class="product-layout product-list col-xs-12 newclass">

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%;
    }
}
It works. There is no need to add anything to the twig file again. Just the code in stylesheet.css was enough.
stefg
New member
Posts
75
Joined
Fri Oct 18, 2019 7:25 pm
Location - Usa
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: Majestic-12 [Bot] and 119 guests