Custom Shopping Cart

[knucklehead]

I am trying to create a custom shopping cart template.

Here is what I have...

http://fantasyfootballmetrics.com/SS_Template.htm

But I can't find what code to paste into the the "Shopping Cart Code Here
" place in the file.

I can't find a "quick and easy" customer SHOPPING CART tutorial.

[Jim]

Here is a link to the help for creating a shopping cart template.
http://shopsite.com/help/10.1/en-US/sc/ ... .cart.html

There are 5 main sections in a shopping cart template (and a couple of additional sections to configure cross-sell layout) so setting up a shopping cart template isn't as easy as doing a page or product template.

If you would rather not create your own custom template but would like to customize the look of the default template to match your store you can still do that. I'll explain how below.
First go to Commerce Setup > Order System > Layout Info and select the "sc_default" template.
Next, on each of the Commerce Setup > Order System > (Shopping Cart, Check Out, Confirmation, Thank You, Email) screens are 2 fields that are labeled "Text at the top of the ***** screen" and "Text at the bottom of the ***** screen:". You can put the html code for the top of your page in the "top" field and for your footer in the "bottom" field. Do not include the starting or closing html, head, meta, or body tags as these will be provided by the ShopSite template. From your sample page that you linked to you would probably want to break the code like this.
For the "top" boxes

Code: Select all

<div align="center">
   <table border="0" width="960" id="table62" style="border-collapse: collapse">
      <tr>
         <td width="581" valign="top">

         <h1 style="margin-top: 6px; margin-bottom: 0">
         <font face="Verdana" size="2" color="#FFFFFF">FANTASY FOOTBALL STATS,
         NEWS &amp; PROJECTIONS</font></h1>
         </td>
         <td valign="top">
         <h1 align="right" style="margin-top: 6px; margin-bottom: 0">
         <span style="letter-spacing: 2px">
         <font face="Verdana" size="2" color="#FFFFFF">FANTASY FOOTBALL METRICS</font></span></h1>

         </td>
      </tr>
      <tr>
         <td valign="top" width="58%">
         <p align="left">&nbsp;</p>
         </td>
         <td>
         <p align="right"><span style="letter-spacing: 0px">
         <font face="Verdana" size="1" color="#FFFFFF">fantasyfootballmetrics.com</font></span></p>

         </td>
      </tr>
   </table>
   <table border="2" width="960" id="table3" bordercolor="#666666">
      <tr>
         <td>
         <table width="100%" id="table4" style="border-collapse: collapse; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" bordercolor="#000000" bgcolor="#FFFFFF" border="0">
            <tr>
               <td>

               <table border="0" width="100%" id="table5">
                  <tr>
                     <td width="106" valign="top">
                     <a href="http://fantasyfootballmetrics.com/">
                     <img border="0" src="images/FFMLogo100px.jpg" width="106" height="100" alt="Fantasy Football Metrics Draft Cheat Sheets,&nbsp;Player Ranking and Projections"></a></td>
                     <td>
                     <h1 align="right" style="margin-top: 0; margin-bottom:0">
                     <font face="Verdana" color="#2D3A4B">Fantasy Football
                     Metrics </font><font face="Verdana" color="#666666">

                     Shopping Cart</font></h1>
                     <h2 align="right" style="margin-top: 0">
                     <font face="Verdana" size="2" color="#808080">UNIQUE
                     PLAYER STATS&nbsp; :&nbsp; SCOUT ARTICLES&nbsp; :&nbsp;
                     TOP PICKS&nbsp; :&nbsp; PROJECTIONS</font></h2>

                     </td>
                  </tr>
               </table>
               </td>
            </tr>
            <tr>
               <td><hr>

               </td>

            </tr>
            <tr>
               <td>
               <div align="right">
                  <table border="0" width="55%" style="border-collapse: collapse" id="table63">
                     <tr>
 

For this line you will want to do a little modification

Code: Select all

<td><font size="2">Shopping Cart Code Here</font></td>

you need to replace "<font size="2">Shopping Cart Code Here</font>" with a table. Open a table in the top section and close the table in the bottom section so the content of the shopping cart will all be included in the table.

so here is the code that would be added at the end of the "top" section (including the <td> that started the line above.

Code: Select all

 <td><table><tr><td>

and this at the beginning of the "bottom" section including the </td> that ended the line above.

Code: Select all

 </td></tr></table></td>

For the "bottom" boxes

Code: Select all

                     </tr>

                  </table>
               </div>
               </td>
            </tr>
         </table>
         </td>
      </tr>
   </table>
</div>


You should include your link to the style sheet at the beginning of the "top" section. Note that since it is using a non-secure http url you will need to modify it to secure https url for the Checkout, Confirmation and Thankyou screens since they will be using a secure url. Also any images that are loaded should also be modified on those screens to have secure url addresses.

Code: Select all

<link rel="stylesheet" type="text/css" href="http://fantasyfootballmetrics.com/Code/style.css">


[knucklehead]

Thank you for that thorough response.

I've done everything you've said and I am still not getting what I am looking for...

Here is a link to a test page where you can add to cart to see my cart.

http://fantasyfootballmetrics.com/ss.htm

I've only messed with the Shopping Cart part of the order process...so I have done anything to the thank you screens or check out sections yet...

This is what the Top section has in it:

Code: Select all

<link rel="stylesheet" type="text/css" href="http://fantasyfootballmetrics.com/Code/style.css">

<div align="center">
   <table border="0" width="960" id="table62" style="border-collapse: collapse">
      <tr>
         <td width="581" valign="top">

         <h1 style="margin-top: 6px; margin-bottom: 0">
         <font face="Verdana" size="2" color="#FFFFFF">FANTASY FOOTBALL STATS,
         NEWS &amp; PROJECTIONS</font></h1>
         </td>
         <td valign="top">
         <h1 align="right" style="margin-top: 6px; margin-bottom: 0">
         <span style="letter-spacing: 2px">
         <font face="Verdana" size="2" color="#FFFFFF">FANTASY FOOTBALL METRICS</font></span></h1>

         </td>
      </tr>
      <tr>
         <td valign="top" width="58%">
         <p align="left">&nbsp;</p>
         </td>
         <td>
         <p align="right"><span style="letter-spacing: 0px">
         <font face="Verdana" size="1" color="#FFFFFF">fantasyfootballmetrics.com</font></span></p>

         </td>
      </tr>
   </table>
   <table border="2" width="960" id="table3" bordercolor="#666666">
      <tr>
         <td>
         <table width="100%" id="table4" style="border-collapse: collapse; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" bordercolor="#000000" bgcolor="#FFFFFF" border="0">
            <tr>
               <td>

               <table border="0" width="100%" id="table5">
                  <tr>
                     <td width="106" valign="top">
                     <a href="http://fantasyfootballmetrics.com/">
                     <img border="0" src="images/FFMLogo100px.jpg" width="106" height="100" alt="Fantasy Football Metrics Draft Cheat Sheets,&nbsp;Player Ranking and Projections"></a></td>
                     <td>
                     <h1 align="right" style="margin-top: 0; margin-bottom:0">
                     <font face="Verdana" color="#2D3A4B">Fantasy Football
                     Metrics </font><font face="Verdana" color="#666666">

                     Shopping Cart</font></h1>
                     <h2 align="right" style="margin-top: 0">
                     <font face="Verdana" size="2" color="#808080">UNIQUE
                     PLAYER STATS&nbsp; :&nbsp; SCOUT ARTICLES&nbsp; :&nbsp;
                     TOP PICKS&nbsp; :&nbsp; PROJECTIONS</font></h2>

                     </td>
                  </tr>
               </table>
               </td>
            </tr>
            <tr>
               <td><hr>

               </td>

            </tr>
            <tr>
               <td>
               <div align="right">
                  <table border="0" width="55%" style="border-collapse: collapse" id="table63">
                     <tr><td><table><tr><td>


This is what is in the bottom section

Code: Select all

</td></tr></table></td>
</tr>

                  </table>
               </div>
               </td>
            </tr>
         </table>
         </td>
      </tr>
   </table>
</div>


I have the SC_Default set in the layout...

But as you can see, I'm not getting the look and feel of

http://fantasyfootballmetrics.com/SS_Template.htm

What am I doing wrong?

[knucklehead]

I'm tweaking the background settings IN shopsite... I just thought my CSS that I linked to would call the background color...

Where do I go to change those dorky buttons????

[knucklehead]

I like the field layout and the buttons of the clean theme, but I don't want that ig read header at the top.... how can I use the "middle" of that theme inside my template...

[Jim]

You can change the buttons by going to Preferences > Store Text > Shopping cart (or Checkout etc) and choose different images in the fields near the bottom of the screen.

Most of the sections of the shopping cart screen have styles assigned to them so you could just create styles definitions to match what you want and include that at the top of your code.

You might try switching the cart template to the clean theme and see how it looks with your code still in the top and bottom sections. I'm not sure how it will look.

[knucklehead]

I have checked to NOT have the "Show me my shopping cart every time I order something" question asked in the shopping cart and it's not getting rid of it in the shopping cart...

I dont want the question asked....checked or unchecked (in th SS Customize Shopping Cart settings) it's showing up.

[knucklehead]

The clean theme went wacko.... the smae dorly buttons stayed and the background turned to bright green????

[knucklehead]

go check out the cart now....now that I've applied the Clean Theme ????

What on earth happened????

[knucklehead]

I'm getting it tweaked - I posted another post for my lingering questions...

Thanks for your help