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

Re: Phoca Cart template - Category list on mobile

Post by vitoricciardi » 23 Oct 2020, 12:12

no, in the page source I see col.xs.12

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 43984
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by Jan » 23 Oct 2020, 15:25

Hi, it should be Bootstrap entry: col-xs-12 not col.xs-12

- this is a string. "col-xs-12" entry
- this is a variable "col.xs.12"

If you overwrite or customize the output, you don't need to use variable, just use the value directly - HTML entry without using variables:

e.g.:
echo "<div class="col-xs-12 col-..."></div>";

etc.

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 » 26 Oct 2020, 12:10

Hi Jan I'm in great confusion, I understand I have to customize only the col-xs-12 entry but I didn't understand how.
I find this source:
" <div class="col-xs-12 col-sm-9 col-md-9">
<div id="system-message-container">
</div>
<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"><div class="grid ph-item-box"><div class="thumbnail b-thumbnail ph-thumbnail ph-thumbnail-c"><div class="ph-item-content"><a href="/2-auto"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3C/svg%3E" data-src="/images/phocacartcategories/thumbs/phoca_thumb_m_img-20200109-wa0047.jpg" alt="AUTO" class="img-responsive ph-image ph-lazyload" /></a><h3><a href="/2-auto">AUTO</a></h3><div class="ph-cat-desc"></div><div class="ph-cb"></div></div></div></div></div>
<div class="col-xs-12 col-sm-4 col-md-4 row-item"><div class="grid ph-item-box"><div class="thumbnail b-thumbnail ph-thumbnail ph-thumbnail-c"> .... etc"

How can I customize?
I'm a beginner and I've only edited files so far.

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 43984
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by Jan » 26 Oct 2020, 12:20

Hi, did you open the file described here:

viewtopic.php?f=35&t=61766#p163276

and changed the code like described in this post?

If you need to change from one column to two columns on mobile views, the class "col-xs-12" needs to be changed to "col-xs-6" - but of course you need to check complete file (if there is one column, there must be second, all divs must be closed, etc. and for this it is hard to give some advice, this just needs to be edited and checked in the file). If you are beginner, maybe you should see some Bootstrap guides to know what changes should be done or hire someone with Bootstrap/HTML skills :idea:

Unfortunately it is very hard so say in forum post, why it is not working (without testing, checking, etc.) :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 » 26 Oct 2020, 13:11

The first change is in the file you said me "components\com_phocacart\layouts\items_grid.php", this is my source in the modified part:
/*echo '<div class="'.$s['c']['row-item'].' '.$s['c']["col.xs12.sm{$col}.md{$col}"].'">';*/
/* modificato col.xs per fare in modo che su smartphone visualizzi due colonne */
echo '<div class="'.$s['c']['row-item'].' col-xs-6 col-sm-6 col-md-6">';
echo '<div class="ph-item-box '.$d['lt'].'">';
I know it's hard and I thanks you for all your help you gave me.

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 43984
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by Jan » 26 Oct 2020, 19:20

Hi, this is right, the question is if this is the view, you want to customize. Can I see the site where do you want to add two columns instead of one?

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

mrtvolaw
Phoca Newbie
Phoca Newbie
Posts: 4
Joined: 23 Feb 2014, 02:19

Re: Phoca Cart template - Category list on mobile

Post by mrtvolaw » 27 Oct 2020, 00:37

well i need that too.. and also not working after edit..

https://www.technofon.sk/oprava-servis/ ... rvis-apple


User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 43984
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Phoca Cart template - Category list on mobile

Post by Jan » 29 Oct 2020, 15:42

Hi, I see it OK on your site, it just includes two columns on mobile:

Image

It is OK in code:
Image

And it is OK on your site.

The only one issue, you need to correct, is setting equal heights for the boxes, so there are no empty spaces between them. Try to set it in Phoca Cart Options:

Image

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 » 04 Nov 2020, 09:47

Thank You Jan, I see it's ok in product view but my problem is the home page with category view and I have only one column on mobile.
In Phoca Cart Options on "View general options" I have "Box Equal Height=Yes".

Post Reply