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!
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
---
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
---
My Github OC Site: https://github.com/IP-CAM
5'500 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
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.
We solved that by removing the table-responsive and using the hidden- and visible- classes to change the look on small/large screens.
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
Hey man! How u doing?letxobnav wrote: ↑Thu Oct 08, 2020 8:57 amThe 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.
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!
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.
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>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.
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
Thanks a lot man, I'll give it a try.letxobnav wrote: ↑Thu Oct 08, 2020 10:44 amadjusted 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.
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!
We do not have any "add to cart" and "buy now" buttons on any of our product lists, only on the product pages.- 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.
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.- When pressing "add to cart" a popup appears with checkout, my cart, wishlist and continue buttons.
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
header language files:
add:
header controller:
add:
before:
header view file:
add:
before:
product view
add:
after:
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).
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'];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>Code: Select all
<nav id="top">add:
Code: Select all
$("#notification-popupmaster .modal-footer").show();
$("#notification-popupmaster").modal("show");
$("#notification-popupmaster .modal-body p").html(json['success']);Code: Select all
$('#cart > ul').load('index.php?route=common/cart/info ul li');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).
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
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.letxobnav wrote: ↑Thu Oct 08, 2020 10:44 amadjusted 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.
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 }} 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.
Code: Select all
<div class="table-responsive">Code: Select all
<div>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.
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
So, I'm a bit lost hahaha.letxobnav wrote: ↑Thu Oct 15, 2020 7:45 pmwell, I would start by changing:to:Code: Select all
<div class="table-responsive">as I stated earlier, that table responsive class makes it horizonal scroll-able, that we remove.Code: Select all
<div>
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.
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
A Newbie, really ? 
If you add a www. , as linked further above, it does not display Icons, and possibly
other 'things', as it should and could...
BTW: This Site only works in full, by calling it this way: https://nomadebaker.com/22 Feb 2016, 11:15 - 80 posts
If you add a www. , as linked further above, it does not display Icons, and possibly
other 'things', as it should and could...
My Github OC Site: https://github.com/IP-CAM
5'500 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
Solved! ThanksIP_CAM wrote: ↑Sun Oct 18, 2020 9:51 amA Newbie, really ?BTW: This Site only works in full, by calling it this way: https://nomadebaker.com/22 Feb 2016, 11:15 - 80 posts
If you add a www. , as linked further above, it does not display Icons, and possibly
other 'things', as it should and could...
Who is online
Users browsing this forum: No registered users and 8 guests
