Cart Checkout - Mobile View suggestion

Phoca Cart - complex e-commerce extension
User avatar
dmlwebal
Phoca Professional
Phoca Professional
Posts: 238
Joined: 18 Sep 2019, 12:49

Cart Checkout - Mobile View suggestion

Post by 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.

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

Re: Cart Checkout - Mobile View suggestion

Post by Jan »

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

Jan
If you find Phoca extensions useful, please support the project
User avatar
dmlwebal
Phoca Professional
Phoca Professional
Posts: 238
Joined: 18 Sep 2019, 12:49

Re: Cart Checkout - Mobile View suggestion

Post by 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
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Cart Checkout - Mobile View suggestion

Post by 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 :idea:

Jan
If you find Phoca extensions useful, please support the project
User avatar
dmlwebal
Phoca Professional
Phoca Professional
Posts: 238
Joined: 18 Sep 2019, 12:49

Re: Cart Checkout - Mobile View suggestion

Post by 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
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Cart Checkout - Mobile View suggestion

Post by Jan »

Ok
If you find Phoca extensions useful, please support the project
User avatar
dmlwebal
Phoca Professional
Phoca Professional
Posts: 238
Joined: 18 Sep 2019, 12:49

Re: Cart Checkout - Mobile View suggestion

Post by 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
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47810
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Cart Checkout - Mobile View suggestion

Post by Jan »

Hi, thank you for the code.

Jan
If you find Phoca extensions useful, please support the project
User avatar
dmlwebal
Phoca Professional
Phoca Professional
Posts: 238
Joined: 18 Sep 2019, 12:49

Re: Cart Checkout - Mobile View suggestion

Post by 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;}

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

Re: Cart Checkout - Mobile View suggestion

Post by Jan »

Ok, thank you.
If you find Phoca extensions useful, please support the project
Post Reply