Phoca Cart template - Category list on mobile

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

Phoca Cart template - Category list on mobile

Post by vitoricciardi » 14 Oct 2020, 17:54

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: 43004
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by Jan » 15 Oct 2020, 18:53

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 Newbie
Phoca Newbie
Posts: 6
Joined: 14 Oct 2020, 17:45

Re: Phoca Cart template - Category list on mobile

Post by vitoricciardi » 16 Oct 2020, 08:56

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: 43004
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by Jan » 17 Oct 2020, 16:21

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 Newbie
Phoca Newbie
Posts: 6
Joined: 14 Oct 2020, 17:45

Re: Phoca Cart template - Category list on mobile

Post by vitoricciardi » 19 Oct 2020, 16:24

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: 43004
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by Jan » 20 Oct 2020, 15:13

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 Newbie
Phoca Newbie
Posts: 6
Joined: 14 Oct 2020, 17:45

Re: Phoca Cart template - Category list on mobile

Post by vitoricciardi » 20 Oct 2020, 16:09

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: 43004
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by Jan » 20 Oct 2020, 21:37

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 Newbie
Phoca Newbie
Posts: 6
Joined: 14 Oct 2020, 17:45

Re: Phoca Cart template - Category list on mobile

Post by vitoricciardi » 21 Oct 2020, 08:45

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: 43004
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by Jan » 23 Oct 2020, 00:00

And does it work for you now?

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

Post Reply