Phoca Cart template - Category list on mobile

[vitoricciardi]

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

[Jan]

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

[vitoricciardi]

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.

[Jan]

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

Unfortunately it is very hard so say in forum post, why it is not working (without testing, checking, etc.)

Jan

[vitoricciardi]

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.

[Jan]

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

[mrtvolaw]

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

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

[vitoricciardi]

the site is http://provavito.altervista.org/

[Jan]

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



It is OK in code:


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:



Jan

[vitoricciardi]

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".