Phoca Cart template - Category list on mobile

Phoca Templates - templates for Joomla! CMS
vitoricciardi
Phoca Member
Phoca Member
Posts: 32
Joined: 14 Oct 2020, 17:45

Phoca Cart template - Category list on mobile

Post by 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
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by 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 :idea:

Jan
If you find Phoca extensions useful, please support the project
vitoricciardi
Phoca Member
Phoca Member
Posts: 32
Joined: 14 Oct 2020, 17:45

Re: Phoca Cart template - Category list on mobile

Post by 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)
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by 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
If you find Phoca extensions useful, please support the project
vitoricciardi
Phoca Member
Phoca Member
Posts: 32
Joined: 14 Oct 2020, 17:45

Re: Phoca Cart template - Category list on mobile

Post by 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
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by 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
If you find Phoca extensions useful, please support the project
vitoricciardi
Phoca Member
Phoca Member
Posts: 32
Joined: 14 Oct 2020, 17:45

Re: Phoca Cart template - Category list on mobile

Post by 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
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by 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
If you find Phoca extensions useful, please support the project
vitoricciardi
Phoca Member
Phoca Member
Posts: 32
Joined: 14 Oct 2020, 17:45

Re: Phoca Cart template - Category list on mobile

Post by 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
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by Jan »

And does it work for you now?

Jan
If you find Phoca extensions useful, please support the project
Post Reply