Each shopping cart template is made up of a minimum of 5 DEFINE sections. 4 of those DEFINEs are the 4 screens of the checkout process, Your Cart, Shipping & Billing, Confirmation and Thank You. The 5th required DEFINE is for the email receipt to the customer.
The quickest and easiest way to create a custom shopping cart template is to use the Beginner's Guide to creating custom templates. The Beginner's Guide will show you how to modify 3 template files with your custom look and have that look take affect across the entire store, including the shopping cart pages.
The information below is for more advanced custom template designers who would like more control over the shopping cart and its functions.
Everything within the [-- DEFINE ShoppingCart --] and [-- END_DEFINE ShoppingCart --] tags is for the main shopping cart screen.
You must include the following within the <head> section of your shopping cart screen code so that ShopSite adds the necessary scripts for the shopping cart functionality.
<script type="text/javascript">[-- SC_JAVASCRIPT extras --]</script>
You must include the following tags within the main body of the shopping cart screen. The [-- SC_Form --] and </form> tags must encompass all the tags below with the exception of the messages tag. The order and placement of the other tags does not matter other than remaining within the form.
[-- ShopSiteMessages --] [-- SC_Form --] [-- SC_CART --] [-- SC_Totals --] [-- SC_Tax_Shipping --] [-- SC_Surcharge --] [-- SC_PaymentSelection --] [-- BUTTON Checkout --] </form>
There are many other tags that add form fields or form functions to the shopping cart screen. If you add the tags listed below, they should also be added within the [-- SC_FORM --] and </form> tags.
[-- SC_Reward_Program --]
[-- IF SC_VAT_ID --][-- SC_VAT_ID --][-- END_IF --]
[-- IF SC_OrderingInstructions --][-- SC_OrderingInstructions 3 40 --][-- END_IF --]
[-- IF SC_Coupon --]
[-- STORE.CouponCaption --] [-- SC_Coupon --]
[-- IF SC_Coupon_Button --]
[-- BUTTON ApplyCoupon --]
[-- END_IF --]
[-- END_IF --]
[-- IF SC_GiftCert --]
[-- STORE.SC_GiftCertificate --][-- SC_GiftCert --]
[-- IF SC_GiftCert_Button --]
[-- BUTTON ApplyGiftCert --]
[-- END_IF --]
[-- END_IF --]
[-- SC_ShowBasket --]
[-- BUTTON ContinueShopping --]
[-- BUTTON Recalculate --]
[-- BUTTON EmptyCart --]
The tags listed below can go wherever you would like within the [-- DEFINE ShoppingCart --] section.
[-- STORE.SC_YourShoppingCart --]
[-- ShoppingCartHeader --]
[-- ShoppingCartFooter --]
[-- IF SC_Registration --][-- SC_Registration --][-- END_IF --]
[-- IF ShopSiteSecurityImage --][-- ShopSiteSecurityImage --][-- END_IF --]
[-- IF SC_Email_LightBox --][-- SC_Email_LightBox --][-- END_IF --]
[-- IF Cart_Cross_Sell --]
[-- LOOP Cart_Cross_Sell --]
[-- CART_CROSS_SELL --]
[-- END_LOOP Cart_Cross_Sell --]
[-- END_IF --]
[-- IF Global_Cross_Sell --]
[-- LOOP GLOBAL_Cross_Sell --]
[-- GLOBAL_CROSS_SELL --]
[-- END_LOOP Global_Cross_Sell --]
[-- END_IF --]
Everything within the [-- DEFINE Shipping --] and [-- END_DEFINE Shipping --] tags is for the shipping & billing screen.
You must include the following within the <head> section of your shipping screen code so that ShopSite adds the necessary scripts for the shopping cart shipping screen functionality.
<script type="text/javascript">[-- SC_JAVASCRIPT extras --]</script>
You must include the following tags within the main body of the shipping screen. The [-- SC_Form --] and </form> tags must encompass all the tags below with the exception of the messages tag. The order and placement of the other tags does not matter other than remaining within the form.
[-- ShopSiteMessages --] [-- SC_Form --] [-- SC_Address --] [-- SC_Payment --] [-- BUTTON SubmitOrder --] </form>
There are many other tags that add form fields or form functions to the shopping cart screen. If you add the tags listed below, they should also be added within the [-- SC_FORM --] and </form> tags.
[-- SC_CART --] [-- SC_Totals --] [-- IF SC_VAT_ID --][-- SC_VAT_ID --][-- END_IF --] [-- IF CustomHTML --][-- SHIP_CustomHTML 1 --][-- END_IF --] [-- IF CustomHTML --][-- SHIP_CustomHTML 2 --][-- END_IF --] [-- IF CustomHTML --][-- SHIP_CustomHTML 3 --][-- END_IF --] [-- IF CustomHTML --][-- SHIP_CustomHTML 4 --][-- END_IF --] [-- IF CustomHTML --][-- SHIP_CustomHTML 5 --][-- END_IF --] [-- IF Email_List --][-- Email_List --][-- END_IF --] [-- IF SECURITYIMAGE --][-- SHIPSECURITYIMAGE --][-- END_IF --] [-- IF SC_Comments --][-- SC_Comments 3 40 --][-- END_IF --] [-- BUTTON ReturnToCart --]
The tags listed below can go wherever you would like within the [-- DEFINE ShoppingCart --] section.
[-- STORE.Ship_CheckOut --] [-- ShippingHeader --] [-- ShippingFooter --]
Custom Checkout Fields in ShopSite Pro allow merchants to collect additional information on their checkout pages. These fields can be used to collect delivery dates, "how did you hear about us" fields, required customers to agree to terms and conditions, and many more custom field options. You can read more information on setting up and using Custom Checkout Fields in the help.
Terms & Conditions Example
Below is an example of code that adds a "terms & conditions" box onto your checkout screen with a checkbox requiring that customers agree before they can checkout. This example uses the custom checkout field 1. If you are using a different field, make sure you change the field number in this code.
<div style="border: solid 1px #EFEFEF; padding: 10px; width: 500px; max-width: 90%; height: 200px; overflow: auto; margin: 0px auto;"> <br>terms and conditions go here <br></div> <br><br><br><center> <input type="checkbox" name="field01"> <b>I have read and accept the Terms & Conditions.</b> </center>
Some merchants have asked to remove elements that are part of the shopping cart checkout process. Some elements can be removed using toggles found under Commerce > Order System. Other elements don't have toggles, but can be removed with JavaScript or CSS. Below are some examples of code that can be added to hide required form elements.
The code below can be added to the "Text at the bottom of the shipping screen" under Commerce > Order System > Checkout, to remove the "Company Name" field in the payment section.
<script type="text/javascript">var companyname = document.getElementsByClassName("payment")[0].getElementsByTagName("tr")[5].getElementsByTagName("td"); for (i = 0; i < companyname.length; i++) {companyname[i].style.display = "none";}</script>