Gantry 5 Helium Phoca Cart modules/overrides

[dmlwebal]

Joomla 3.9.14
PHP 7.3
Gantry 5.4.23
Helium
Phoca Cart

Hi,

I am currently working on a site that requires gantry 5 Helium as a base. I notice that Phoca cart has gantry 5 overrides and I have copied these across to my template. Phoca Cart works fine but the Cart Module looks awful!

Basically I am looking to copy the css of the following id and class to display my cart module the same way as Premiere template.

To make the Cart module look the same as Phoca Premiere but in Helium template, what CSS do I need to add?

It appears to be ID ph-top-modules and CLASS ph-main-nav-top-box but I cannot find these anywhere! I have tried Chrome Developer and even going through the folder structure of Phoca Premiere.

Regards

David

[Jan]

Hi, see:
https://www.phoca.cz/documents/116-phoc ... 5-template

You need to add the ID to the module position:

Base Outline - Navigation - Module Position (25%) - Key: position-22 - CSS ID: ph-top-modules - CSS Classes: ph-main-nav-top-box
(see the screenshots in the documentation)

Jan

[dmlwebal]

Hi Jan,

Thanks for the reply. I have setup the module in this way but, although the module is in position, there are no icons visible.

Regards
David

[Jan]

Hi, and the module itself is displayed there? If this is a problem of not displayed module or problem of not displayed icons only?

Jan

[dmlwebal]

Hi Jan, thanks for getting back to me.
It is the icons only. The module shows up, however the css styling is not the same
I include an image link of the cart module in their hover state
First, when cart is empty


Second, when cart has product


In gantry I have set up module as per the phoca cart docs:
module position 22


AND


Gantry 5 Module Particle is inside Navigation Section, Template is Helium based

Regards
David

[keerillcom]

Icons in other templates are not visible. The text is. Icons when using 2 templates (one for the store and one for the entire site) are visible only at certain positions. Do not tell me how to increase glyphicon icons at least 2 times?

[dmlwebal]

Hi keerillcom

Thanks you for the reply. That is ok I guess, just thought there was something wrong with my set up somewhere.

So perhaps I need to find the source code and add the FA icons then style them in css as I wish. It seems strange to me that the module would work like this but, ok.
I shall look through the phoca cart module and hunt out the code that renders the cart basket. Or perhaps there is a generic Phoca Cart module that I can use instead (not gantry based)

I could not quite understand this part of your reply though: 'Do not tell me how to increase glyphicon icons at least 2 times?'

Regards
David

[dmlwebal]

PHP 7.3
Joomla 3.9.15
Gantry 5.4.32
Helium template
Phoca Cart 3.4.0
Override Modules

Hi,
Looking more closely at getting icons to appear I have gone through some php tutorials. There are topics on this specific area. But still need help applying the solution to Phoca Cart
So currently I have no text and no icons in my phoca cart module, otherwise it works fine

I am loading font awesome 4.7 into to the head of the document

Code: Select all

<link href="/[SITE-TEMPLATE]/media/gantry5/assets/css/font-awesome.min.css?5e346dd1" rel="stylesheet" />

Currently using Phoca Module gantry 5 overrides module I am receiving this error in the source code when the cart module is viewed using Chrome Developer

Code: Select all

<span class="<br />
<b>Notice</b>:  Undefined variable: d in <b>C:\xampp\htdocs\[SITE-TEMPLATE]\templates\g5_helium\html\mod_phocacart_cart\default.php</b> on line <b>39</b><br />
"></span>

So, I open the module in templates/g5_helium/html/mod_phocacart_cart to find this line is causing the problem:

Code: Select all

<span class="<?php echo $d['s']['i']['shopping-cart'] ?>"></span>

in this case d is undefined, but it seems as though a font awesome icon is trying to be called.

Please notice this is in XAMPP, but I also run a copy on my live dev server
So on XAMPP the output source code looks like this:

Code: Select all

<nav class="g-main-nav g-menu-hastouch  ph-main-nav-mod" role="navigation" data-g-hover-expand="true">
    <ul class="g-toplevel">
		<li class="g-menu-item g-menu-item-type-component g-parent g-fullwidth g-menu-item-link-parent ">
            <div class="g-menu-item-container"><span class="g-menu-item-content">
				[b]<span class="<br />
<b>Notice</b>:  Undefined variable: d in <b>C:\xampp\htdocs\[SITE-TEMPLATE]\templates\g5_helium\html\mod_phocacart_cart\default.php</b> on line <b>39</b><br />
"></span>[/b]
				<sup class="ph-cart-count-sup phItemCartBoxCount" id="phItemCartBoxCount">0</sup></span>
				<span class="g-menu-parent-indicator" data-g-menuparent=""></span>
			</div>
            <div class="g-dropdown g-inactive g-fade g-dropdown-left ph-dropdown-cart"><div id="phItemCartBox" class="ph-item-cart-box phItemCartBox"><div>Shopping Cart is empty</div></div>
			</div>
		</li>
	</ul>
</nav>

I am certain that an attempt to call the icon is being made and simply want it to appear!

Please help!

Regards
David

[SITE-TEMPLATE] REPLACES THE TRUE NAME OF THE PROJECT HERE

[dmlwebal]

Ok,
A dirty fix for now, it requires that you load fontawesome 4.7 into head (this should be an option in your Gantry 5 Settings)

Make sure that you add gantry 5 module overrides to your site template
Open templates/g5_helium/html/mod_phocacart_cart
Find line 39
<span class="<?php echo $d['s']['i']['shopping-cart'] ?>"></span>
Replace it with this
<i class="fa fa-shopping-cart"></i>

Bingo! One Shopping cart Icon in Helium Template
use CSS to style

I shall try to create a 'proper' solution too, but this works for now

[Jan]

Hi, in overrides, you don't need to use variables, you can set the fixed values like you did with "fa fa-shopping-cart". So it is OK.