Phoca Cart template - Category list on mobile

[vitoricciardi]

I use Phoca Cart template on my Joomla site, the Home Page is Category List with 3 columns, on mobile I see only 1 column.
I need 2 columns on mobile but I can't find where insert this information.
Thank You

[Jan]

Hi, can you paste a screenshot of what do you exactly mean? Mostly Phoca Cart is stylized by Bootstrap, so Bootstrap decides how many columns will be displayed on each device

Jan

[vitoricciardi]

https://i.imgur.com/a3RqAwf.jpg

These are the screenshots, I have never touched the Bootstrap and I don't even know where to intervene, I'm not very experienced (very little)

[Jan]

Hi, there can be two ways to do:

- change the CSS ond override Bootstrap rules for mobile views
- or change the HTML output of Phoca Cart category view and set own Bootstrap classes

e.g.:
components\com_phocacart\layouts\items_grid.php

line cca 28
FROM

Code: Select all

echo '<div class="'.$s['c']['row-item'].' '.$s['c']["col.xs12.sm{$col}.md{$col}"].'">';

TO:

Code: Select all

echo '<div class="'.$s['c']['row-item'].' col-xs-6 col-sm-6 col-md-6">';

Change col-xs-12 (one column for small devices) to col-xs-6 (two columns)

The file can be overriden by your template so the changes will be not lost when updating ( https://www.phoca.cz/documents/116-phoc ... -overrides )


Jan

[vitoricciardi]

Thank You Jan, I tried editing all the files in the components\com_phocacart\layouts directory (all the files with col.xs.12 code instruction) but nothing has changed. I read your document but I did not understand where to act, I am almost a beginner and I don't know how to modify bootstrap and how to use override

[Jan]

Hi, if you have changed the files directly, then see if the changes are even displayed on the site (see it with e.g. google chrome devtools). Are the changes displayed in the source code?

Jan

[vitoricciardi]

no, I see "<div id="ph-pc-categories-box" class="pc-categories-view"><div class="ph-categories"><div class="row ph-row-flex grid ph-row-cats ph-lazyload"><div class="col-xs-12 col-sm-4 col-md-4 row-item">", i know i should edit "col-xs-12" to "col-xs-6" but i don't know which file to edit

[Jan]

Hi, it depends on which output do you use. If you use standard category view with grid, then:

components\com_phocacart\layouts\items_grid.php

there are thre forms of displaying product boxes in category view:

GRID:

Code: Select all

+--+ +--+
|  | |  |
+--+ +--+

LIST

Code: Select all

+-------+
+-------+

GRIDLIST

Code: Select all

+-------+
|       |
+-------+

(items_grid.php, items_list.php, items_gridlist.php)

Jan

[vitoricciardi]

I modified all the items files, it's like reading other files. I modified all the files in components\com_phocacart\layouts with the "col.xs.12" instruction.
Thanks for your help

[Jan]

And does it work for you now?

Jan