Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

  • 1
Ivan

CSS shopping cart mobile

Question

Hello!

Please help, how display shopping cart in mobile version.

Example image 2.

Thank you.

 

 

Screenshot_2019-09-24-09-31-22-981_com.android.chrome.png

Screenshot_2019-09-24-09-36-21-990_com.android.chrome.png

Share this post


Link to post
Share on other sites

17 answers to this question

Recommended Posts

  • 2

Here is some modifications you can do for Niara theme

modify the "../themes/niara/css/global.css" file starting at line 1848 and replace all the content of the @media  for mobiles by this

@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
    
  .table-responsive table, 
  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block;
  }
  
  .table-responsive tfoot {
	display: inline;
  }
  
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
	border-bottom: 0;
  }
  
  .table-responsive > .table-bordered {
    border: 0;
  } 
  
  .table-responsive .unvisible,
  .table-responsive thead tr, 
  .table-responsive #cart_summary .cart_total_price #cart_voucher {
	display: none;
  }
  
  .table-responsive .cart_total_price > td#total_product,
  .table-responsive .cart_total_price > td#total_price_container,
  .table-responsive .cart_total_delivery > td#total_shipping  {
	border-top: 0;
  }
    
  .table-responsive #cart_summary > tbody > tr.cart_item > td.cart_quantity {
	width: 50%;
	float: left;
	border-left: 0;
	border-right: 0;
	padding: 0;
	line-height: 34px;
  }
  
  .table-responsive #cart_summary > tbody > tr.cart_item > td.cart_quantity > .cart_quantity_input {
	float: left;
	width: 55px;
	border: 0;
  }
  
  .table-responsive #cart_summary > tbody > tr.cart_item > td.cart_quantity::before {
	content: "x";
	float: left;
	left: 13px;
	line-height: 34px;
	position: relative;
  }
    
  .table-responsive .cart_quantity_button a.btn {
	border: 0;
	background-color: #eee;
	margin-top: 1px;
  }
  
  .table-responsive .cart_quantity_button a.button-minus {
	margin-right: 10px;
  }
  
  .table-responsive #cart_summary > tbody > tr.cart_item > td.cart_unit {
	float: left;
	border-right: 0;
  }
  
  .table-responsive #cart_summary > tbody > tr.cart_item > td.cart_delete {
	position: relative;
	bottom: 109px;
	border: 0;
	float: right;
	margin-right: 15px;
  }
  
  .table-responsive #cart_summary > tbody > tr.cart_item:last-of-type {
	border-bottom: 1px solid #ddd;
  }
}

 

It will do the trick....

Edited by zen
  • Like 1
  • Thanks 4

Share this post


Link to post
Share on other sites
  • 1

I've fixed it.

I removed ,

.table-responsive #cart_summary .cart_total_price #cart_voucher

from line 1886 (for me). Now it looks like this -

.table-responsive .unvisible,
.table-responsive thead tr {
display: none;
}

and added

 .table-responsive #cart_summary > tbody > tr.cart_total_price >.cart_voucher {
  	float: left;
	border-right: 0;
  }

into line 1929.

My knowledge of CSS is terrible but it seems to work.

  • Like 1
  • Thanks 2

Share this post


Link to post
Share on other sites
  • 1

I moved shopping cart from tables into divs so I could style it better for my own needs.

Screenshot_2021-01-23 Order.png

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites
  • 0

Did you get an answer here? The cart display in mobile really depends on your theme. Make sure you've got a responsive one and test it before buying. The Niara one that comes with new versions of TB is pretty nice. Chex, the one page checkout module from @datakick is pretty nice as well. It has a couple bugs still, but for many people they will be non issues.

Share this post


Link to post
Share on other sites
  • 0
17 hours ago, x97wehner said:

The cart display in mobile really depends on your theme. Make sure you've got a responsive one and test it before buying. The Niara one that comes with new versions of TB is pretty nice.

The checkout page he is showing is what Niara does on mobile. It just uses the desktop checkout screen, and mobile users have to swipe back and forth to see anything or make any changes.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0

I hope it will help you and you'll come back for report.. as it should be integrated into the theme by default, the code needs to work on almost all devices above 768px, the more it's tested, the best it is !

Here is the Pull Request on github, can be modified in future from your answers.

https://github.com/thirtybees/niara/pull/19

Edited by zen

Share this post


Link to post
Share on other sites
  • 0
13 hours ago, cienislaw said:

hmm, it puts products below cart summary - it is intentional?

hmmm...what do you mean by that ? Can you do a Screenshot ?

If it is about the total showing before product list, it's normal. To change that it will require some more JS code or to modify shopping-cart.tpl file, because <tbody> is actually after <tfoot> .

Edited by zen
  • Thanks 1

Share this post


Link to post
Share on other sites
  • 0
On 10/2/2019 at 9:51 AM, zen said:

Here is some modifications you can do for Niara theme

modify the "../themes/niara/css/global.css" file starting at line 1848 and replace all the content of the @media  for mobiles by this

Thank @zen. I tried editing the code and adjusting the shopping-cart.tpl file and got good results. It's just a little bit wonky on smaller screens after the edit to the shopping-cart.tpl file.

Screenshot_2019-11-27-13-08-53-1.png

IMG-20191127-WA0007-1.jpg

Share this post


Link to post
Share on other sites
  • 0
On 10/2/2019 at 4:51 PM, zen said:

Here is some modifications you can do for Niara theme

modify the "../themes/niara/css/global.css" file starting at line 1848 and replace all the content of the @media  for mobiles by this


@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
    
  .table-responsive table, 
  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block;
  }
  
  .table-responsive tfoot {
	display: inline;
  }
  
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
	border-bottom: 0;
  }
  
  .table-responsive > .table-bordered {
    border: 0;
  } 
  
  .table-responsive .unvisible,
  .table-responsive thead tr, 
  .table-responsive #cart_summary .cart_total_price #cart_voucher {
	display: none;
  }
  
  .table-responsive .cart_total_price > td#total_product,
  .table-responsive .cart_total_price > td#total_price_container,
  .table-responsive .cart_total_delivery > td#total_shipping  {
	border-top: 0;
  }
    
  .table-responsive #cart_summary > tbody > tr.cart_item > td.cart_quantity {
	width: 50%;
	float: left;
	border-left: 0;
	border-right: 0;
	padding: 0;
	line-height: 34px;
  }
  
  .table-responsive #cart_summary > tbody > tr.cart_item > td.cart_quantity > .cart_quantity_input {
	float: left;
	width: 55px;
	border: 0;
  }
  
  .table-responsive #cart_summary > tbody > tr.cart_item > td.cart_quantity::before {
	content: "x";
	float: left;
	left: 13px;
	line-height: 34px;
	position: relative;
  }
    
  .table-responsive .cart_quantity_button a.btn {
	border: 0;
	background-color: #eee;
	margin-top: 1px;
  }
  
  .table-responsive .cart_quantity_button a.button-minus {
	margin-right: 10px;
  }
  
  .table-responsive #cart_summary > tbody > tr.cart_item > td.cart_unit {
	float: left;
	border-right: 0;
  }
  
  .table-responsive #cart_summary > tbody > tr.cart_item > td.cart_delete {
	position: relative;
	bottom: 109px;
	border: 0;
	float: right;
	margin-right: 15px;
  }
  
  .table-responsive #cart_summary > tbody > tr.cart_item:last-of-type {
	border-bottom: 1px solid #ddd;
  }
}

 

It will do the trick....

Thank you very much it help my :)

  • Like 1

Share this post


Link to post
Share on other sites
  • 0

Thanks for this!

I do have one problem though - the voucher section is no longer visible on mobile.

Any ideas how to add this in global.css?

Share this post


Link to post
Share on other sites
  • 0

You guys are complete legends - what a relief to have a fix for this! I'll be honest though, the fact that this is still an issue on one of the two primary themes for a modern webshop is kind of shocking - I know for a fact (because two of them finally told me) that I've been losing sales over this.

Share this post


Link to post
Share on other sites
  • 0

@holybladder

Search for " Community-Theme-Modded" in the forum. You might be able to use some code form it or complete theme (however I do not offer any support)

Share this post


Link to post
Share on other sites
  • 0
7 minutes ago, toplakd said:

@holybladder

Search for " Community-Theme-Modded" in the forum. You might be able to use some code form it or complete theme (however I do not offer any support)

Thank you for that - I'm fine, have used the above solutions to fix the the problem, I just think it's poor that Niara is still shipping as a "Responsive theme" without proper responsiveness in the shopping cart.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...