Page 1 of 1

Shopping cart and checkout pages formate for mobile devices

PostPosted: Thu Jun 21, 2018 11:35 am
by Metolius Climbing
I was curious about how to formate the shopping cart and checkout pages for mobile devices. I did my own header and footer for these pages that is a very simple but I notice the whole cart is laid-out with tables so it doesn't scale down for mobile devices. Is there a simple/easy solution?

Code Sample:

# Start the shopping cart form
[-- SC_Form --]
<table border="0" width="0" align="center">
[-- IF SC_Registration --]
<td align="center">
[-- SC_Registration --]
[-- END_IF --]

#<!-- Reward Program -->#
#<!-- only appears if they've qualified. -->#
<td align="center">[-- SC_Reward_Program --]</td>

#<!-- Global Cross-sell in Cart -->#
[-- IF Global_Cross_Sell --]
<td class="gcs_table"><table class="gcs_table">
<caption>[-- STORE.GlobalCrossSellHeader --]</caption>
<td class="gcs_table_blank"> </td>
[-- LOOP GLOBAL_Cross_Sell --]
<td class="gcs_table_content">[-- GLOBAL_CROSS_SELL --]</td>
[-- END_LOOP Global_Cross_Sell --]
<td class="gcs_table_blank"> </td>
[-- END_IF --]

Re: Shopping cart and checkout pages formate for mobile devi

PostPosted: Thu Jun 21, 2018 1:55 pm
by loren_d_c
I would check out this Cookbook page for general info on responsive design for mobile:

And this one about the new 'v2' replacement template tags for some of those cart tags that will output those cart elements in divs and spans instead of tables: