Post by Django29 » Wed Oct 11, 2017 9:54 pm

Hi
How can we change the number of columns to display :
1 - the categories on the homepage, or the sub-categories of a category in grid.
2 - the products of a category displayed in grid.

New member

Posts

Joined
Fri May 16, 2014 4:40 pm

Post by yodapt » Thu Oct 12, 2017 2:04 am

Under Design > Theme Editor, file product / category.twig , you can edit the number of columns. You'll have to change the col-sm-* classes to match the number of columns you want (the grid has 12 columns max, so the class name will reflect a divisible number, such as col-sm-2, for 6 columns, and also limited in that sense). You will also look at the logic around those, which differ if there are enought products / categories to fill a row or not.

Opencart Developer - My Extension Showcase
Contact me at aeon.yoda@gmail.com


User avatar
Active Member

Posts

Joined
Fri Jun 17, 2011 6:39 pm


Post by Django29 » Thu Oct 12, 2017 2:47 am

Thanks for your answer, but it doesn't seem so easy ...
So, I can have 3, 4 or 6 columns, but not 5.
There is a lot of col-sm-xx in this file, and I don't know which one to change.
And I have to do this change on 2 sites : 1 Opencart 2 and 1 Opencart 3.

New member

Posts

Joined
Fri May 16, 2014 4:40 pm

Post by yodapt » Thu Oct 12, 2017 3:05 am

Opencart 2 and 3 are different, the way I described is for version 3 only.

You can have 1, 2, 3, 4 and 6 columns. These limitations reflect the actual CSS framework, it is still possible to obtain more combinations, but that involves a deeper understanding of CSS.

For example, in 3.x, this is the part that involves categories :

Code: Select all

      {% if categories %}
      <h3>{{ text_refine }}</h3>
      {% if categories|length <= 5 %}
      <div class="row">
        <div class="col-sm-3">
          <ul>
            {% for category in categories %}
            <li><a href="{{ category.href }}">{{ category.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
      </div>
      {% else %}
      <div class="row">{% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
        <div class="col-sm-3">
          <ul>
            {% for child in category %}
            <li><a href="{{ child.href }}">{{ child.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
        {% endfor %}</div>
      <br />
      {% endif %}
      {% endif %}

Opencart Developer - My Extension Showcase
Contact me at aeon.yoda@gmail.com


User avatar
Active Member

Posts

Joined
Fri Jun 17, 2011 6:39 pm


Post by sedra » Thu Sep 05, 2019 3:26 pm

yodapt wrote:
Thu Oct 12, 2017 3:05 am
Opencart 2 and 3 are different, the way I described is for version 3 only.

You can have 1, 2, 3, 4 and 6 columns. These limitations reflect the actual CSS framework, it is still possible to obtain more combinations, but that involves a deeper understanding of CSS.

For example, in 3.x, this is the part that involves categories :

Code: Select all

      {% if categories %}
      <h3>{{ text_refine }}</h3>
      {% if categories|length <= 5 %}
     ...
i had some parent categories with 5 subcategories showing in "one column" and a parent category with 6 subcategory showing in 3 columns! that was so ugly and inconsistent.
i changed

Code: Select all

 {% if categories|length <= 5 %}
 
to

Code: Select all

 {% if categories|length <= 3 %}
and now everything is consistent and beautiful!
thank you!

New member

Posts

Joined
Thu Jan 04, 2018 8:14 pm
Who is online

Users browsing this forum: No registered users and 4 guests