Ivan Posted September 24, 2019 Share Posted September 24, 2019 Hello! Please help, how display shopping cart in mobile version. Example image 2. Thank you. Link to comment Share on other sites More sharing options...
2 zen Posted October 2, 2019 Share Posted October 2, 2019 (edited) 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 1 4 Link to comment Share on other sites More sharing options...
1 MattR Posted January 23, 2021 Share Posted January 23, 2021 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. 1 2 Link to comment Share on other sites More sharing options...
1 toplakd Posted January 23, 2021 Share Posted January 23, 2021 I moved shopping cart from tables into divs so I could style it better for my own needs. 1 1 Link to comment Share on other sites More sharing options...
0 x97wehner Posted October 1, 2019 Share Posted October 1, 2019 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. Link to comment Share on other sites More sharing options...
0 dynambee Posted October 2, 2019 Share Posted October 2, 2019 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. 1 Link to comment Share on other sites More sharing options...
0 zen Posted October 2, 2019 Share Posted October 2, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
0 cienislaw Posted October 2, 2019 Share Posted October 2, 2019 hmm, it puts products below cart summary - it is intentional? Link to comment Share on other sites More sharing options...
0 zen Posted October 2, 2019 Share Posted October 2, 2019 (edited) 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 1 Link to comment Share on other sites More sharing options...
0 cienislaw Posted October 3, 2019 Share Posted October 3, 2019 yes, thats the case. thanx for heads up, I will modify TPL. Link to comment Share on other sites More sharing options...
0 ellosbaby Posted November 27, 2019 Share Posted November 27, 2019 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. Link to comment Share on other sites More sharing options...
0 jmeca Posted September 28, 2020 Share Posted September 28, 2020 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 :) 1 Link to comment Share on other sites More sharing options...
0 MattR Posted January 23, 2021 Share Posted January 23, 2021 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? Link to comment Share on other sites More sharing options...
0 The Pellet Guy Posted January 23, 2021 Share Posted January 23, 2021 And above is why I like this forum well done guys 1 Link to comment Share on other sites More sharing options...
0 MattR Posted January 23, 2021 Share Posted January 23, 2021 Looks very nice! There's project for me on a rainy day. Link to comment Share on other sites More sharing options...
0 holybladder Posted February 6, 2021 Share Posted February 6, 2021 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. Link to comment Share on other sites More sharing options...
0 toplakd Posted February 6, 2021 Share Posted February 6, 2021 @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) Link to comment Share on other sites More sharing options...
0 holybladder Posted February 6, 2021 Share Posted February 6, 2021 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. 1 Link to comment Share on other sites More sharing options...
0 jmeca Posted March 7, 2021 Share Posted March 7, 2021 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. Link to comment Share on other sites More sharing options...
0 MattR Posted March 7, 2021 Share Posted March 7, 2021 I'm on 1.1 so I can't help, sorry. Link to comment Share on other sites More sharing options...
0 jmeca Posted March 7, 2021 Share Posted March 7, 2021 27 minutes ago, MattR said: I'm on 1.1 so I can't help, sorry. Ok thans Link to comment Share on other sites More sharing options...
0 MattR Posted March 7, 2021 Share Posted March 7, 2021 I didn't know there was a 1.2 to be honest! Link to comment Share on other sites More sharing options...
0 jmeca Posted March 7, 2021 Share Posted March 7, 2021 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. Link to comment Share on other sites More sharing options...
Question
Ivan
Hello!
Please help, how display shopping cart in mobile version.
Example image 2.
Thank you.
Link to comment
Share on other sites
22 answers to this question
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now