Page 1 of 1
Improve shopping cart and checkout mobile view
Posted: Thu Oct 08, 2020 7:07 am
by AlanARG
Hey guys,
how's it going?
I have another thread regarding this but I think I should explain better what I wanna do.
Right now my website (
www.nomadebaker.com) is running on 3.0.3.6 but the mobile view is quite awful. In fact, the shopping cart view and the checkout looks like an horizontal table that customers need to slide from left to right in order to fully see it, pretty annoying.
There's other stuff I'd like to improve as well but this one is the most important.
Is it hard? Can I do smth about it?
Thanks!
Re: Improve shopping cart and checkout mobile view
Posted: Thu Oct 08, 2020 7:59 am
by IP_CAM
Well, it's sure not my intention, to make you feel bad, but, starting from
partly huge image-sizes, resulting in slow page load, then, using
whitespace-gapped Image Names, down to fundamental doings,
like HREF/HTTPS - linking images the cookiefree way, I would first
make my Site speedwise competitive, before even thinking about
changing 'minor' things. It's a pain, to see that round-scroller Gizmo
on an otherwise empty Startpage for so long, and most won't even
wait, until something can finally be seen...
That's more a 3.3MB 'Download' Page, not a Homepage, by looking at the
amout of data, required to show a simple Welcome Page.
Sorry ...
Ernie
---
Re: Improve shopping cart and checkout mobile view
Posted: Thu Oct 08, 2020 8:57 am
by letxobnav
The OP is right, the default cart page on small screens requires horizontal scrolling which is absolutely crap and a UI no-no, whoever passed that thru UI QA.
We solved that by removing the table-responsive and using the hidden- and visible- classes to change the look on small/large screens.
Re: Improve shopping cart and checkout mobile view
Posted: Thu Oct 08, 2020 10:18 am
by AlanARG
letxobnav wrote: ↑Thu Oct 08, 2020 8:57 am
The OP is right, the default cart page on small screens requires horizontal scrolling which is absolutely crap and a UI no-no, whoever passed that thru UI QA.
We solved that by removing the table-responsive and using the hidden- and visible- classes to change the look on small/large screens.
Hey man! How u doing?
Care to explain further what was the thing you did? I'd like to see the result if you don't mind! I'm desperately since this is an outright no for me since most of the people nowadays use mobile phones and not computers.
Thanks!
Re: Improve shopping cart and checkout mobile view
Posted: Thu Oct 08, 2020 10:44 am
by letxobnav
adjusted is here:
https://www.crystallight.com.tw/co/en/
the adjusted twig part of the cart twig file is like this:
Code: Select all
<div>
<table class="table table-hover">
<thead>
<tr>
<td></td>
<td class="text-left"></td>
<td class="text-left hidden-xs hidden-sm">{{ column_model }}</td>
<td class="text-left hidden-xs">{{ column_quantity }}</td>
<td class="text-right hidden-xs" style="white-space: nowrap">{{ column_price }}</td>
<td class="text-right hidden-xs">{{ column_total }}</td>
</tr>
</thead>
<tbody>
{% for product in products %}
<tr>
<td class="hidden-xs" style="min-width:80px;">{% if product.thumb %} <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.caption }}" data-toggle="tooltip" title="{{ product.caption }}" class="img-thumbnail" /></a> {% endif %}</td>
<td class="text-left">
<span class="visible-xs">{% if product.thumb %} <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.caption }}" data-toggle="tooltip" title="{{ product.caption }}" class="img-thumbnail" /></a> {% endif %}</span>
<a href="{{ product.href }}">
{% if not product.stock %}
<span class="text-danger">{{ product.name }}</span></a><br>{{ product.text_only_left }}
{% else %}
{{ product.name }}</a>
{% endif %}
{% if product.option %}
{% for option in product.option %}<br />
<span class ="label label-white">{{ option.value }} {{ option.name }}</span>
{% endfor %}
{% endif %}
{{ product.skudyn }}
{% if product.reward %}<br />
<small>{{ product.reward }}</small>
{% endif %}
{% if product.recurring %}<br />
<span class="label label-info">{{ text_recurring_item }}</span> <small>{{ product.recurring }}</small>
{% endif %}
<span class="hidden-md hidden-lg"><br>{{ product.model }}{% if 0 %} <button {% if product.in_wishlist %} disabled {% endif %} style="margin-top:5px;" type="button" {% if not product.in_wishlist %} title="{{ button_wishlist }}" {% endif %} class="btn btn-link" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart" style="font-size:18px;color:{{ product.wishlist_color }};"></i></button>{% endif %}</span>
</td>
<td class="text-left hidden-xs hidden-sm" style="white-space:nowrap;">{{ product.model }}{% if 0 %}<br><button {% if product.in_wishlist %} disabled {% endif %} style="margin-top:5px;" type="button" {% if not product.in_wishlist %} title="{{ button_wishlist }}" {% endif %} class="btn btn-link" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart" style="font-size:18px;color:{{ product.wishlist_color }};"></i></button>{% endif %}</td>
<td class="text-right" style="width:120px;">
<div align="right" class="input-group btn-block" style="width:120px;">
<input style="border-right:0px;" type="number" name="quantity[{{ product.cart_id }}]" value="{{ product.quantity }}" step="{{ product.min }}" min="{{ product.min }}" max="{{ product.max }}" class="form-control" onBlur="if(this.value > {{ product.max }}){this.value = '{{ product.max }}';} else if(this.value < 1){this.value = '1';}"/>
<span class="input-group-btn">
<button type="submit" data-toggle="tooltip" title="{{ button_update }}" style="background-color:#fff" class="btn"> <i style="color:green;" class="fa fa-sync-alt"></i> </button>
<button type="button" data-toggle="tooltip" title="{{ button_remove }}" style="background-color:#fff" class="btn" onclick="cart.remove('{{ product.cart_id }}');"> <i style="color:crimson;" class="fa fa-trash-alt"></i> </button>
</span>
</div>
<br>
<div align="right">
<span class="hidden-sm hidden-md hidden-lg" style="white-space:nowrap">{{ column_price }}: {% if product.price == product.original_price %}{{ product.price }}{% else %}<span class="price-new">{{ product.price }}</span><br><span class="price-new" style="text-decoration: line-through;color:crimson;">{{ product.original_price }}</span><span class="hidden-xs"><br>{{ product.special_days }}</span>{% endif %}</span>
</div>
<div align="right">
<span class="hidden-sm hidden-md hidden-lg">{{ column_total }}: {{ product.total }}</span>
</div>
</td>
{% if product.price == product.original_price %}
<td class="text-right hidden-xs" style="white-space: nowrap">{{ product.price }}</td>
{% else %}
<td class="text-right hidden-xs" style="white-space: nowrap"><span class="price-new">{{ product.price }}</span><br><span class="price-new" style="text-decoration: line-through;color:crimson;">{{ product.original_price }}</span><span class="hidden-xs"><br>{{ product.special_days }}</span></td>
{% endif %}
<td class="text-right hidden-xs" style="white-space: nowrap">{{ product.total }}</td>
</tr>
{% endfor %}
{% for voucher in vouchers %}
<tr>
<td style="min-width:80px;"><img src="/co/image/giftvoucher-80x60.jpg" class="img-thumbnail"></td>
<td class="text-left">{{ voucher.description }}</td>
<td class="text-left hidden-xs hidden-sm" style="white-space: nowrap;"> </td>
<td class="text-right">
<div align="right" class="input-group btn-block" style="width:120px;">
<input type="number" name="vq" value="1" disabled class="form-control" />
<span class="input-group-btn">
<button type="submit" disabled data-toggle="tooltip" title="{{ button_update }}" class="btn btn-default"> <i class="fa fa-sync-alt"></i> </button>
<button type="button" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-default" onclick="voucher.remove('{{ voucher.key }}');"> <i style="color:crimson;" class="fa fa-trash-alt"></i> </button>
</span>
</div>
<br>
<div align="right">
<span class="hidden-sm hidden-md hidden-lg" style="white-space: nowrap">{{ column_price }}: {{ voucher.amount }}</span>
</div>
<div align="right">
<span class="hidden-sm hidden-md hidden-lg">{{ column_total }}: {{ voucher.amount }}</span>
</div>
</td>
<td class="text-right hidden-xs" style="white-space: nowrap">{{ voucher.amount }}</td>
<td class="text-right hidden-xs" style="white-space: nowrap">{{ voucher.amount }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
Don't just copy that as there are variables in there you don't have but you can see the use of hidden-xx and visible-xx classes to alter the view based on screen size. So we basically create duplicate content but display/hide one or the other based on the screen size.
in short:
We add the content of certain columns to the other columns but hide them on big screens.
(we add the name and model to the image column and add the prices to the button column)
On small screens, we hide the name, model and prices columns and make those fields visible in the remaining where columns where they were hidden.
I am sure it can be done more elegantly but my css skills are pretty basic.
Re: Improve shopping cart and checkout mobile view
Posted: Fri Oct 09, 2020 12:33 am
by AlanARG
letxobnav wrote: ↑Thu Oct 08, 2020 10:44 am
adjusted is here:
https://www.crystallight.com.tw/co/en/
the adjusted twig part of the cart twig file is like this:
Don't just copy that as there are variables in there you don't have but you can see the use of hidden-xx and visible-xx classes to alter the view based on screen size. So we basically create duplicate content but display/hide one or the other based on the screen size.
in short:
We add the content of certain columns to the other columns but hide them on big screens.
(we add the name and model to the image column and add the prices to the button column)
On small screens, we hide the name, model and prices columns and make those fields visible in the remaining where columns where they were hidden.
I am sure it can be done more elegantly but my css skills are pretty basic.
Thanks a lot man, I'll give it a try.
One more thing: I've seen you have multiple buttons and pop-ups with buttons that would make the customer experience from mobile phone easier and better, for example:
- In the product list there's two buttons "add to cart" and "buy now", I don't have any of those, I need to open the product to see those.
- When pressing "add to cart" a popup appears with checkout, my cart, wishlist and continue buttons.
Did you add those modifications or is it a theme?
Thanks a lot man, really helpful!
Re: Improve shopping cart and checkout mobile view
Posted: Fri Oct 09, 2020 8:10 am
by letxobnav
- In the product list there's two buttons "add to cart" and "buy now", I don't have any of those, I need to open the product to see those.
We do not have any "add to cart" and "buy now" buttons on any of our product lists, only on the product pages.
- When pressing "add to cart" a popup appears with checkout, my cart, wishlist and continue buttons.
That is just a modal popup which just requires some html and adjustments to the current add to cart ajax calls. I will write up how that is done.
Re: Improve shopping cart and checkout mobile view
Posted: Thu Oct 15, 2020 2:35 pm
by letxobnav
header language files:
add:
Code: Select all
$_['poptitle'] = 'what you want as the popup title';
$_['popcart'] = 'My Cart';
$_['popcontinue'] = 'Continue';
$_['popcheckout'] = 'Checkout';
$_['popwishlist'] = 'My Wishlist';
add:
Code: Select all
// popup titles
$data['poptitle'] = $this->language->get('poptitle');
$data['popcheckout'] = $this->language->get('popcheckout');
$data['popcart'] = $this->language->get('popcart');
$data['popwishlist'] = $this->language->get('popwishlist');
$data['popcontinue'] = $this->language->get('popcontinue');
// popup hrefs
$data['pop_checkout'] = $data['checkout'];
$data['pop_cart'] = $data['shopping_cart'];
$data['pop_wl'] = $data['wishlist'];
before:
Code: Select all
return $this->load->view('common/header', $data);
add:
Code: Select all
<div id="notification-popupmaster" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">{{ titulo }}</h4></div>
<div class="modal-body style="padding:10px"><p>X</p></div>
<div class="modal-footer">
<div>
<a href="{{ pop_checkout }}" style="margin-top:5px;" class="btn btn-primary btn-lg btn-block"><i class="fa fa-credit-card"></i> {{ popcheckout }}</a>
<a href="{{ pop_cart }}" style="margin-top:5px;" class="btn btn-success btn-lg btn-block"><i class="fa fa-shopping-cart"></i> {{ popcart }}</a>
<a href="{{ pop_wl }}" style="margin-top:5px;" class="btn btn-danger btn-lg btn-block"><i class="fa fa-heart"></i> {{ popwishlist }}</a>
<button type="button" style="margin-top:5px;" class="btn btn-default btn-lg btn-block" data-dismiss="modal"><i class="fa fa-check"></i> {{ popcontinue }}</button>
</div>
</div>
</div>
</div>
</div>
before:
product view
add:
Code: Select all
$("#notification-popupmaster .modal-footer").show();
$("#notification-popupmaster").modal("show");
$("#notification-popupmaster .modal-body p").html(json['success']);
after:
Code: Select all
$('#cart > ul').load('index.php?route=common/cart/info ul li');
Style it as you like.
If you want to do the same in the category pages, you need to lead the js file also there (now it is added in the product controller) and adjust the cart add ajax call in the common.js file as that one is used there. (the product view has its own cart add ajax code).
Re: Improve shopping cart and checkout mobile view
Posted: Thu Oct 15, 2020 3:04 pm
by AlanARG
letxobnav wrote: ↑Thu Oct 08, 2020 10:44 am
adjusted is here:
https://www.crystallight.com.tw/co/en/
the adjusted twig part of the cart twig file is like this:
Don't just copy that as there are variables in there you don't have but you can see the use of hidden-xx and visible-xx classes to alter the view based on screen size. So we basically create duplicate content but display/hide one or the other based on the screen size.
in short:
We add the content of certain columns to the other columns but hide them on big screens.
(we add the name and model to the image column and add the prices to the button column)
On small screens, we hide the name, model and prices columns and make those fields visible in the remaining where columns where they were hidden.
I am sure it can be done more elegantly but my css skills are pretty basic.
So, you were right about not copying it exactly like that but after a while trying to figure out how to "adapt" it to my cart.twig file, I couldn't at all.
I tried copying it exactly as yours and it doesn't work at all.
If you have the time and willing to help, no rush of course, this is how my "catalog\view\theme\Fortsi_Furniture\template\checkout\cart.twig" file looks on
my website and the
theme I'm using:
Code: Select all
{{ header }}
<div id="checkout-cart" class="container">
<ul class="breadcrumb">
{% for breadcrumb in breadcrumbs %}
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
{% endfor %}
</ul>
{% if attention %}
<div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ attention }}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endif %}
{% if success %}
<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endif %}
{% if error_warning %}
<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endif %}
<div class="row">{{ column_left }}
{% if column_left and column_right %}
{% set class = 'col-sm-6' %}
{% elseif column_left or column_right %}
{% set class = 'col-sm-9' %}
{% else %}
{% set class = 'col-sm-12' %}
{% endif %}
<div id="content" class="{{ class }}">{{ content_top }}
<h1 class="page-title">{{ heading_title }}
{% if weight %}
({{ weight }})
{% endif %}
</h1>
<form action="{{ action }}" method="post" enctype="multipart/form-data">
<div class="table-responsive">
<table class="table table-bordered shopping-cart">
<thead>
<tr>
<td class="text-center">{{ column_image }}</td>
<td class="text-left">{{ column_name }}</td>
<td class="text-left">{{ column_model }}</td>
<td class="text-left">{{ column_quantity }}</td>
<td class="text-right">{{ column_price }}</td>
<td class="text-right">{{ column_total }}</td>
</tr>
</thead>
<tbody>
{% for product in products %}
<tr>
<td class="text-center">{% if product.thumb %} <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-thumbnail" /></a> {% endif %}</td>
<td class="text-left"><a href="{{ product.href }}">{{ product.name }}</a> {% if not product.stock %} <span class="text-danger">***</span> {% endif %}
{% if product.option %}
{% for option in product.option %} <br />
<small>{{ option.name }}: {{ option.value }}</small> {% endfor %}
{% endif %}
{% if product.reward %} <br />
<small>{{ product.reward }}</small> {% endif %}
{% if product.recurring %} <br />
<span class="label label-info">{{ text_recurring_item }}</span> <small>{{ product.recurring }}</small> {% endif %}</td>
<td class="text-left">{{ product.model }}</td>
<td class="text-left"><div class="input-group btn-block" style="max-width: 200px;">
<input type="text" name="quantity[{{ product.cart_id }}]" value="{{ product.quantity }}" size="1" class="form-control" />
<span class="input-group-btn">
<button type="submit" data-toggle="tooltip" title="{{ button_update }}" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
<button type="button" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger" onclick="cart.remove('{{ product.cart_id }}');"><i class="fa fa-times-circle"></i></button>
</span></div></td>
<td class="text-right">{{ product.price }}</td>
<td class="text-right">{{ product.total }}</td>
</tr>
{% endfor %}
{% for voucher in vouchers %}
<tr>
<td></td>
<td class="text-left">{{ voucher.description }}</td>
<td class="text-left"></td>
<td class="text-left"><div class="input-group btn-block" style="max-width: 200px;">
<input type="text" name="" value="1" size="1" disabled="disabled" class="form-control" />
<span class="input-group-btn">
<button type="button" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger" onClick="voucher.remove('{{ voucher.key }}');"><i class="fa fa-times-circle"></i></button>
</span></div></td>
<td class="text-right">{{ voucher.amount }}</td>
<td class="text-right">{{ voucher.amount }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</form>
{% if modules %}
<h3>{{ text_next }}</h3>
<p>{{ text_next_choice }}</p>
<div class="panel-group" id="accordion"> {% for module in modules %}
{{ module }}
{% endfor %} </div>
{% endif %} <br />
<div class="row">
<div class="col-sm-4 col-sm-offset-8">
<table class="table table-bordered">
{% for total in totals %}
<tr>
<td class="text-right"><strong>{{ total.title }}:</strong></td>
<td class="text-right">{{ total.text }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
<div class="buttons clearfix">
<div class="pull-left"><a href="{{ continue }}" class="btn btn-default">{{ button_shopping }}</a></div>
<div class="pull-right"><a href="{{ checkout }}" class="btn btn-primary">{{ button_checkout }}</a></div>
</div>
{{ content_bottom }}</div>
{{ column_right }}</div>
</div>
{{ footer }}
Thank you so much.
Re: Improve shopping cart and checkout mobile view
Posted: Thu Oct 15, 2020 7:45 pm
by letxobnav
well, I would start by changing:
to:
as I stated earlier, that table responsive class makes it horizonal scroll-able, that we remove.
Then the table is too wide of course on small screens so we start hiding columns while making the content of those columns visible in the remaining columns.
All that so the remaining columns fit nicely on a smaller screen.
On big screens we do the reverse, display all columns but hide the duplicate content.
Re: Improve shopping cart and checkout mobile view
Posted: Sat Oct 17, 2020 1:31 pm
by AlanARG
letxobnav wrote: ↑Thu Oct 15, 2020 7:45 pm
well, I would start by changing:
to:
as I stated earlier, that table responsive class makes it horizonal scroll-able, that we remove.
Then the table is too wide of course on small screens so we start hiding columns while making the content of those columns visible in the remaining columns.
All that so the remaining columns fit nicely on a smaller screen.
On big screens we do the reverse, display all columns but hide the duplicate content.
So, I'm a bit lost hahaha.
After that replacement what should I do? I've been trying to adapt what you sent me but I'm pretty confused, sorry, I'm a newbie
Re: Improve shopping cart and checkout mobile view
Posted: Sun Oct 18, 2020 9:51 am
by IP_CAM
A Newbie, really ?
22 Feb 2016, 11:15 - 80 posts
BTW: This Site only works in full, by calling it this way:
https://nomadebaker.com/
If you add a
www. , as linked further above, it does not display Icons, and possibly
other 'things', as it should and could...
Re: Improve shopping cart and checkout mobile view
Posted: Mon Oct 19, 2020 1:54 pm
by AlanARG
IP_CAM wrote: ↑Sun Oct 18, 2020 9:51 am
A Newbie, really ?
22 Feb 2016, 11:15 - 80 posts
BTW: This Site only works in full, by calling it this way:
https://nomadebaker.com/
If you add a
www. , as linked further above, it does not display Icons, and possibly
other 'things', as it should and could...
Solved! Thanks
