Gantry 5 Helium Cart Module Dropdown

[dmlwebal]

PHP 7.3
Joomla 3.9.16
Phoca Cart 3.4.0
Gantry 5 Helium 5.4.32
UIkit 3.3.0
Phoca Overrides Modules

I need to change the order (and the bootstrap) in the Phoca Cart Module dropdown. The reason being that the dropdown is too long for mobile view.

Where in the Joomla folder structure is the view file that renders this dropdown? I need to make an override

https://ibb.co/yV2T5Dq

The code I need to alter is shown in source html as:

Code: Select all

<div class="g-dropdown g-inactive g-fade g-dropdown-left ph-dropdown-cart"><div id="phItemCartBox" class="ph-item-cart-box phItemCartBox"><div class="ph-cart-small-box"><div class="row"><div class="col-xs-12 col-sm-7 col-md-7 ph-small">1 Item(s)</div><div class="col-xs-12 col-sm-5 col-md-5 ph-small ph-right"></div></div><div class="row"><div class="col-xs-12 col-sm-12 col-md-12"><div class="ph-hr"></div></div></div><div class="row"><div class="col-xs-12 col-sm-1 col-md-1 ph-small ph-cart-small-quantity">1x </div><div class="col-xs-12 col-sm-6 col-md-6 ph-small ph-cart-small-title"><a href="/component/phocacart/item/1-5-10-day-crew-skipper-iyt-sailing-courses/1-10-day-crew-skipper-iyt-sailing-course">10 Day CREW & SKIPPER IYT Sailing Course</a></div><div class="col-xs-12 col-sm-5 col-md-5 ph-small ph-cart-small-price ph-right">฿ 56,000.00</div></div><div class="row"><div class="col-xs-12 col-sm-12 col-md-12"><ul class="ph-cart-attribute-box"><li class="ph-cart-attribute-item"><span class="ph-small ph-cart-small-attribute">Preferred Payment: Pay In Full (No Accommodation Included)</span></li><li class="ph-cart-attribute-item"><span class="ph-small ph-cart-small-attribute">Preferred Date:  February 28-March 08, 2020</span></li></ul></div></div><div class="row"><div class="col-xs-12 col-sm-12 col-md-12"><div class="ph-hr"></div></div></div><div class="row"><div class="col-xs-12 col-sm-7 col-md-7 ph-small ph-cart-subtotal-netto-txt">Subtotal</div><div class="col-xs-12 col-sm-5 col-md-5 ph-small ph-right ph-cart-subtotal-netto">฿ 56,000.00</div></div><div class="row"><div class="col-xs-12 col-sm-7 col-md-7 ph-small ph-cart-total-txt">Total</div><div class="col-xs-12 col-sm-5 col-md-5 ph-small ph-right ph-b ph-cart-total">฿ 56,000.00</div></div></div>
<div class="ph-small ph-right ph-u ph-cart-link-checkout"><a href="/booking-checkout">View cart - checkout</a></div></div>

Ideally I am looking to move the 'view checkout' to the top and change some of the bootstrap classes so that fewer 'wraps' are used etc.

Regards
David

[Jan]

Hi, I think, the best method should be CSS.

The module displays cart output which is rendered in layouts:
components\com_phocacart\layouts\cart_cart.php

Jan

[dmlwebal]

Hi Jan,

Thank you for the path. I understand what yo say about CSS but would prefer not to override bootstrap classes wherever possible. Thank you for the fast response

Regards

David

[dmlwebal]

Hi Jan,

Thank you again for the path. I have made the necessary changes, but also acknowledge the level of detail that you have applied to this part of the cart system in particular. I have moved the view checkout link php section to the top of the cart dropdown so that the link is more easily accessible on smaller mobile devices. In the end I did also have to make a minor override of the bootstrap classes in mobile view only.

Regards
David

[Jan]

Ok, thank you for info.