Cart Checkout - Mobile View suggestion

[dmlwebal]

Some mobile handsets have a problem showing/scrolling to the bottom of the Cart Dropdown. The problem is that the Check out button is at the base of this dropdown. As customers add more products to the cart the problem becomes more clear.

Might I suggest placing the link options at the top of the Cart Dropdown?

You may not pick this issue up just by using the Chrome Mobile Views (Toggle Device Toolbar) but I have a Nokia Android handset that definitely has this problem.
Obviously I can add a Checkout link to the Mobile view/Off Canvas Menu but it looks more professional to have this option visible in the designated area also.

[Jan]

Hi, can you paste a screenshot of what do you exactly mean?

Jan

[dmlwebal]

Hi Jan

Sure, on a larger Samsung or I-phone then the cart checkout link is still visible - even with 3 items

here is an example of open and closed - I use a sticky navbar on mobile to maximise screen space
https://ibb.co/wWP4WkY

But smaller screens lose out on the checkout link
https://ibb.co/XVtkW0G

Also, there is no obvious way to close the drop down when the viewport is full, and scrolling will only affect the background page

So, by moving the checkout link to the top of the checkout dropdown there is always access.

Of course many people have larger phones but with the cart link at the base of the dropdown there will always be a 'cut-off' point where the link becomes inaccessible.

I can see where to make the change in the code but thought it worth mentioning. It does not seem to take a lot to negatively affect online sales conversions for users.

Regards
David

[Jan]

Hi, thank you for the info, I will take a look at it, maybe there should be some CSS rule for small devices to move the link to top (absolute) or changing the link to icon on the top, so it will not take a lot of place there

Jan

[dmlwebal]

Hi Jan

No problem. The most simple solution may be just to add a second checkout link to the right of the Items count? I have done this before on another project and the use of bootstrap in the construction of the dropdown means that this is quite simple. It does not need to be an esoteric solution.
I have some catching up to do on some current projects ( I contracted Covid-19 and was out of action for a few weeks) but I shall make some instructions for the Ajax Live Search plugin and also see if I can create a cart module dropdown with Flex and Grid.

Regards
David

[Jan]

Ok

[dmlwebal]

Hi Jan

The solution below is for Gantry 5 based templates that are not using standard Phoca Premiere

I have come up with the following CSS solution for anyone now, this works great for Gantry5 based solutions, but should work fine for all.

Code: Select all

div#phItemCartBox .row {
    padding: 0;
    line-height: .8rem;
}

div#phItemCartBox {

  .col-xs-12.col-sm-1.col-md-1.ph-small.ph-cart-small-quantity {
  	float: left;
 	 width: fit-content;}
  
  .col-xs-12.col-sm-6.col-md-6.ph-small.ph-cart-small-title {
    width: fit-content;}
  
  .col-xs-12.col-sm-5.col-md-5.ph-small.ph-cart-small-price.ph-right {
    width: fit-content;}
  
  .col-xs-12.col-sm-7.col-md-7.ph-small.ph-cart-subtotal-netto-txt {
    width: fit-content;
    float: left;}
  
  .col-xs-12.col-sm-5.col-md-5.ph-small.ph-right.ph-cart-subtotal-netto {
    width: fit-content;
    float: right;}
  
  .col-xs-12.col-sm-7.col-md-7.ph-small.ph-cart-total-txt {
    width: fit-content;
    float: left;}
  
  .col-xs-12.col-sm-5.col-md-5.ph-small.ph-right.ph-b.ph-cart-total {
    width: fit-content;
    float: right;
    font-size: 1rem;}

}

It can be reduced further but this allows for easy manipulation in Chrome Inspector

Regards
David

[Jan]

Hi, thank you for the code.

Jan

[dmlwebal]

Hi Jan

Please find an update to the above code it includes some extra 'floats'. I shall be working on a Grid version eventually but, of course, that requires a little more work with the modules layouts.
It is my ultimate aim to help provide an alternative to Bootstrap for Phoca Cart layout using Grid. I am looking to help support Phoca Cart when my PHP->Joomla Framework skills are more developed.

Code: Select all

div#phItemCartBox .row {
    padding: 0;
    line-height: .8rem;
}

div#phItemCartBox {

  .col-xs-12.col-sm-1.col-md-1.ph-small.ph-cart-small-quantity {
    float: left;
    width: fit-content;
    padding-left: 0;
    padding-right: 0;}
  
  .col-xs-12.col-sm-6.col-md-6.ph-small.ph-cart-small-title {
    width: fit-content;}
  
  .col-xs-12.col-sm-5.col-md-5.ph-small.ph-cart-small-price.ph-right {
    width: fit-content;
  	float: right;}
  
  .col-xs-12.col-sm-7.col-md-7.ph-small.ph-cart-subtotal-netto-txt {
    width: fit-content;
    float: left;}
  
  .col-xs-12.col-sm-5.col-md-5.ph-small.ph-right.ph-cart-subtotal-netto {
    width: fit-content;
    float: right;}
  
  .col-xs-12.col-sm-7.col-md-7.ph-small.ph-cart-total-txt {
    width: fit-content;
    float: left;}
  
  .col-xs-12.col-sm-5.col-md-5.ph-small.ph-right.ph-b.ph-cart-total {
    width: fit-content;
    float: right;
    font-size: 1rem;}

}

[Jan]

Ok, thank you.