CSS shopping cart mobile

[Ivan]

Hello!

Please help, how display shopping cart in mobile version.

Example image 2.

Thank you.

 

 

[zen]

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 October 2, 2019 by zen

[MattR]

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.

[toplakd]

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

[x97wehner]

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.

[dynambee]

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.

[zen]

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 October 2, 2019 by zen

[cienislaw]

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

[zen]

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 October 3, 2019 by zen

[cienislaw]

yes, thats the case. thanx for heads up, I will modify TPL.

[ellosbaby]

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.

[jmeca]

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 :)

[MattR]

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?

[The Pellet Guy]

And above is why I like this forum  well done guys  

[MattR]

Looks very nice!

There's project for me on a rainy day.

[holybladder]

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.

[toplakd]

@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)

[holybladder]

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.

[jmeca]

On 9/28/2020 at 8:17 PM, jmeca said:

Thank you very much it help my 🙂

Hi, please do you know if this modification is valid for version 1.2?

Since the page has changed, I have tried to make the same modifications but they do not apply, they are still the same.

[MattR]

I'm on 1.1 so I can't help, sorry.

[jmeca]

27 minutes ago, MattR said:

I'm on 1.1 so I can't help, sorry.

Ok thans

[MattR]

I didn't know there was a 1.2 to be honest!

[jmeca]

20 minutes ago, MattR said:

I didn't know there was a 1.2 to be honest!

There are some changes, for the moment everything seems to be going well except for the mobile phone which doesn't seem to be working.