checkout-step1.html – Developers Guide

Purpose: This template defines the layout of the checkout (page 1) of the 3 step checkout. This is where customers enter their shipping information.

Notes: The template contains a form which is used by the customer to enter their shipping address information. No changes should be done to the form as the field names/values are very important and should not be changed. Adding or removing fields could cause the form to stop working. You can however, change the look/feel of the form using CSS/HTML. This template also contains a special code block labeled "checkout_questions_templates" which inserts checkout questions if they are present on step 1 of the checkout process.

Code Blocks

Note: It is important to preserve the commented tags to ensure the software performs correctly.

 [checkout1_step]
    [checkout2_step]
    [checkout3_step]
    [checkout4_step]
  <!--START: CATEGORY_HEADER-->
    [CONTENT]
  <!--END: CATEGORY_HEADER-->
  <!--START: paypalexpress-->
  <!--END: paypalexpress-->
  <!--START: GOOGLECHECKOUT-->
    [gc_merchantid]
  <!--END: GOOGLECHECKOUT-->
  <!--column left-->
    <!--START: account_login-->
      <!--start current customer block-->
        [checkout1_loginmessage]
        [checkout1_loginmessage2]
        [checkout1_login]
        <!--START: fbconnect-->
        <!--END: fbconnect-->
      <!-- end current customer block-->
      <!--start create account block-->
        [checkout1_Header-createnewaccount]
        [CustomerInfo_email]
        [email]
      <!--START: emailrequired-->
        <!--START: req_email-->
        <!--END: req_email-->
      <!--END: emailrequired-->
      <!--START: confirm_email-->
        [CustomerInfo_confirmemail]
        [email]
        <!--START: emailrequired-->
          <!--START: req_email-->
          <!--END: req_email-->
        <!--END: emailrequired-->
      <!--END: confirm_email-->
        [CustomerInfo_password]
      <!--START: passwordrequired-->
        <!--START: req_pass-->
        <!--END: req_pass-->
      <!--END: passwordrequired-->
        [maillist]
        [checkout1_joinmailinglist]
      <!--end create account block-->
    <!--END: account_login-->
    <!--START: GIFT_REGISTRY_SHIPPING-->
      [checkout1_Header-giftreg]
      [checkout1_Header-giftreg-instructions]
      <!--tr>
        [checkout1_Header-giftreg-shiptofriendaddress]
        [checkout1_Header-giftreg-shiptomyaddress]
      </tr-->
    <!--END: GIFT_REGISTRY_SHIPPING-->
      [checkout1_Header-shippinginformation]
    <!--START: required_fields-->
    <!--END: required_fields-->
    <!--START: SAVE_ADDRESSES-->
      [checkout1_address-book]
      [address_list]
    <!--END: SAVE_ADDRESSES-->
      [CustomerInfo_firstname]
      [shipping_firstname]
    <!--START: req_shipping_firstname-->
    <!--END: req_shipping_firstname-->
      [CustomerInfo_lastname]
      [shipping_lastname]
    <!--START: req_shipping_lastname-->
    <!--END: req_shipping_lastname-->
      [CustomerInfo_company]
      [shipping_company]
    <!--START: req_shipping_company-->
    <!--END: req_shipping_company-->
      [CustomerInfo_phone]
      [shipping_phone]
    <!--START: req_shipping_phone-->
    <!--END: req_shipping_phone-->
      [CustomerInfo_address]
      [shipping_address]
    <!--START: req_shipping_address-->
    <!--END: req_shipping_address-->
      [CustomerInfo_address2]
      [shipping_address2]
      [CustomerInfo_city]
      [shipping_city]
    <!--START: req_shipping_city-->
    <!--END: req_shipping_city-->
      [CustomerInfo_country]
    <!--START: req_shipping_country-->
    <!--END: req_shipping_country-->
      [CountryDropDown]
      [CustomerInfo_state]
      [state]
    <!--START: req_shipping_state-->
    <!--END: req_shipping_state-->
      [CustomerInfo_zip]
      [shipping_zip]
    <!--START: req_shipping_zip-->
    <!--END: req_shipping_zip-->
    <!--START: addressType-->
      [CustomerInfo_address_type]
      [addressTypeDropDown]
    <!--END: addressType-->
    <!--START: checkout_questions-->
      [checkout1_checkoutquestions]
      <!--START: questions-->
        [questions]
      <!--END: questions-->
    <!--END: checkout_questions-->
    <!--START: checkout_questions_templates-->
      <!--START: textarea-format-->
        <!--START: req[id]-->
        <!--END: req[id]-->
        [question]
        [id]
        [answer]
      <!--END: textarea-format-->
    <!--START: text-format-->
      <!--START: req[id]-->
      <!--END: req[id]-->
      [question]
      [id]
      [answer]
    <!--END: text-format-->
    <!--START: file-format-->
      [question]
      [oname]
    <!--END: file-format-->
    <!--START: checkbox-format-->
      <!--START: req[id]-->
      <!--END: req[id]-->
      [id]
      [answer]
      [selected]
      [question]
    <!--END: checkbox-format-->
    <!--START: radio-format-->
      <!--START: req[id]-->
      <!--END: req[id]-->
      [question]
      <!--START: option-->
        [id]
        [option]
        [selected]
        [option]
      <!--END: option-->
    <!--END: radio-format-->
    <!--START: dropdown-format-->
      <!--START: req[id]-->
      <!--END: req[id]-->
      [question]
      [id]
      <!--START: option-->
        [selected]
        [option]
      <!--END: option-->
    <!--END: dropdown-format-->
    <!--END: checkout_questions_templates-->
    [checkout1_submitbutton]
  <!--column left ends-->
  <!--column right-->
    [checkout1_Header-shoppingcart]
    <!--START: SHOPPING_CART_ITEM-->
      [ITEM_CATALOGID]
      [THUMBNAIL]
      [ITEM_NAME]
      [ITEM_PRICE]
      [ITEM_QUANTITY]
      [ITEM_SUBTOTAL]
    <!--END: SHOPPING_CART_ITEM-->
    <!--START: DISCOUNTS-->
      [shoppingcart_subtotal]
      [CARTSUBTOTAL]
      [checkout1_discounts]
      [DISCOUNTS]
    <!--END: DISCOUNTS-->
    <!--START: BUYSAFE-->
      [buysafe_totalbondcost]
    <!--END: BUYSAFE-->
      [shoppingcart_total]
      [CARTTOTAL]
    <!--START: GIFTCERTS-->
      [shoppingcart_giftcertificate]
      [GIFTCERTS]
    <!--END: GIFTCERTS-->
  <!--column right ends-->
  <!--START: CATEGORY_FOOTER-->
    [CONTENT]
  <!--END: CATEGORY_FOOTER-->
  <!--START: AddressValidatorBlock-->
    <!--START: AddressValidatorBlock_ValidationFailed-->
      [result_msg]
    <!--END: AddressValidatorBlock_ValidationFailed-->
    <!--START: AddressValidatorBlock_ValidationSuggestion-->
      [result_msg]
      <!--START: AddressValidatorBlock_ValidationSuggestion_SingleAddressBlock-->
        [checkout1_AddressValidator_SuggestedAddress]
        [AddrressValidator_address1]
        [AddrressValidator_address2]
        [AddrressValidator_city]
        [AddrressValidator_state]
        [AddrressValidator_zip]
        [AddrressValidator_address]
        [AddrressValidator_city]
        [AddrressValidator_state]
        [AddrressValidator_zip]
      <!--END: AddressValidatorBlock_ValidationSuggestion_SingleAddressBlock-->
      [checkout1_AddressValidator_Continue]
    <!--END: AddressValidatorBlock_ValidationSuggestion-->
    [checkout1_AddressValidator_Close]
  <!--END: AddressValidatorBlock-->
    [useAddressValidator]
  <!--START: confirmemailscript-->
  <!--END: confirmemailscript-->
  <!--START: phonerequiredscript-->
  <!--END: phonerequiredscript-->
  <!--START: addressTypeScript-->
    [CustomerInfo_address_type]
  <!--END: addressTypeScript-->
    [intI]
    [intI]
    [id]

Note: Code blocks and their respective variables will only work with specific template pages.

Variables

Note: Many of the following variables are dynamically inserted from your cart’s Settings ->Design ->Store Language section.

[checkout1_step] – Displays the Title of the “Step 1” Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
[checkout2_step] – Displays the Title of the “Step 2” Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
[checkout3_step] – Displays the Title of the “Step 3” Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
[checkout4_step] – Displays the Title of the “Thank You” Checkout Step Process at the top of the page. (See Settings ->Design ->Store Language)
[gc_merchantid] – Used by the Software to insert/reference the Merchant ID for Google Checkout if it is used.
[checkout1_loginmessage] – Displays the Title of the “Shopped with us before?” heading on the page, if the shopper is not logged in. (See Settings ->Design ->Store Language)
[checkout1_loginmessage2] – If the shopper is not yet logged into their respective account, and the store is set up to have login requirement as an optional decision; this variable will insert a link for them to sign in. (See Settings ->Design ->Store Language)
[checkout1_login] – If the shopper is not yet logged into their respective account, this variable will insert a link for them to sign in. (See Settings ->Design ->Store Language)
[checkout1_Header-createnewaccount] – Displays the Title of the “Create New Account” heading if the shopper is creating a new account. (See Settings ->Design ->Store Language)
[CustomerInfo_email] – Displays the Title of the form’s “Email” field. (See Settings ->Design ->Store Language)
[email] – Accomodates the information entered in the form’s “Email” text input field.
[CustomerInfo_confirmemail] – Displays the Title of the form’s “Confirm Email” field. (See Settings ->Design ->Store Language)
[CustomerInfo_password] – Displays the Title of the “Create New Account” area’s “Password” Field. (See Settings ->Design ->Store Language)
[maillist] – Used by the Software to reference when the shopper elects to join the mailing list during sign-up by checking the box.
[checkout1_joinmailinglist] – Displays the Title of the “Yes! I would like to be notified…” message next to the Mailing List Checkbox. (See Settings ->Design ->Store Language)
[checkout1_Header-giftreg] – If the order is being placed as part of a Gift Registry, this variable will insert the Title of the Gift Registry shipping information. (See Settings ->Design ->Store Language)
[checkout1_Header-giftreg-instructions] – If the order is being placed as part of a Gift Registry, this variable will insert the text of the Gift Registry instruction information. (See Settings ->Design ->Store Language)
[checkout1_Header-shippinginformation] – Displays the Title of the “Shipping Information” section on the page. (See Settings ->Design ->Store Language)
[checkout1_address-book] – If the shopper is logged into their account, this Variable will display the Title of the “Address Book” selection area. (See Settings ->Design ->Store Language)
[address_list] – If the shopper is logged into their account, this Variable will control the “Address Book” selection drop down.
[CustomerInfo_firstname] – Displays the Title of the form’s “First Name” field. (See Settings ->Design ->Store Language)
[shipping_firstname] – Inserts the shopper’s Shipping “First Name” Information.
[CustomerInfo_lastname] – Displays the Title of the form’s “Last Name” field. (See Settings ->Design ->Store Language)
[shipping_lastname] – Inserts the shopper’s Shipping “Last Name” Information.
[CustomerInfo_company] – Displays the Title of the form’s “Company” field. (See Settings ->Design ->Store Language)
[shipping_company] – Inserts the shopper’s Shipping “Company” Information.
[CustomerInfo_phone] – Displays the Title of the form’s “Phone” field. (See Settings ->Design ->Store Language)
[shipping_phone] – Inserts the shopper’s Shipping “Phone” Information.
[CustomerInfo_address] – Displays the Title of the form’s “Address” field. (See Settings ->Design ->Store Language)
[shipping_address] – Inserts the shopper’s Shipping “Address” Information.
[CustomerInfo_address2] – Displays the Title of the form’s “Suite/Apt#” field. (See Settings ->Design ->Store Language)
[shipping_address2] – Inserts the shopper’s Shipping “Suite/Apt#” Information.
[CustomerInfo_city] – Displays the Title of the form’s “City” field. (See Settings ->Design ->Store Language)
[shipping_city] – Inserts the shopper’s Shipping “City” Information.
[CustomerInfo_country] – Displays the Title of the form’s “Country” field. (See Settings ->Design ->Store Language)
[CountryDropDown] – Used by the software to insert/control the “Country” selection drop down.
[CustomerInfo_state] – Displays the Title of the form’s “State” field. (See Settings ->Design ->Store Language)
[state] – Used by the Software to insert/reference the entered “State” information.
[CustomerInfo_zip] – Displays the Title of the form’s “Zip” field. (See Settings ->Design ->Store Language)
[shipping_zip] – Inserts the shopper’s Shipping “Zip” Information.
[CustomerInfo_address_type] – If the Store is set to allow shipping selection (Residential or Commercial), this variable will display the Title of the shipping selection menu. (See Settings ->Design ->Store Language)
[addressTypeDropDown] – If the store is set to allow shipping selection (Residential or Commercial), this variable will insert the selection drop down.
[checkout1_checkoutquestions] – Displays the Title of the form’s “State” field. (See Settings ->Design ->Store Language)
[questions] – Used by the Software to house any applicable Checkout Questions on the Step 1 checkout page.
[question] – Inserts the applicable question.
[id] – Used by the Software to reference the Question ID.
[answer] – Applies to the Checkout Question’s open text field. (For Text and TextArea entered answers)
[oname] – Used by the Software to designate Checkout Question Answer entries.
[SELECTED] – Used by the Software to identify the selected option(s).
[option] – Applies the Checkout Question’s selection options. (For drop down, and radio selected answers.)
[checkout1_submitbutton] – Displays the Title of the “Proceed to Shipping Calculation link/button. (See Settings ->Design ->Store Language)
[checkout1_Header-shoppingcart] – Displays the Title of the “Shopping Cart” section header on the page. (See Settings ->Design ->Store Language)
[ITEM_CATALOGID] – This variable is used by the Software to reference the applicable shopping cart Items.
[THUMBNAIL] – This variable is used by the Software to insert the product(s) thumbnail image(s).
[ITEM_NAME] – Inserts the Product’s Name information.
[ITEM_PRICE] – Inserts the Product’s Price information.
[ITEM_QUANTITY] – Inserts the number of units ordered for the product.
[ITEM_SUBTOTAL] – Inserts the Subtotal of each item.
[shoppingcart_subtotal] – Displays the Title of the cart’s “Subtotal” section. (See Settings ->Design ->Store Language)
[CARTSUBTOTAL] – Inserts the shopping cart’s Subtotal.
[checkout1_discounts] – Displays the Title of the cart’s “Discounts” section. (See Settings ->Design ->Store Language)
[DISCOUNTS] – Inserts the monetary amount of any applied discounts.
[buysafe_totalbondcost] – If BuySafe is used on the store/order, this variable will insert the Cost for the BuySafe bonding service.
[shoppingcart_total] – Displays the Title of the cart’s “Total” section. (See Settings ->Design ->Store Language)
[CARTTOTAL] – Inserts the cart’s Total.
[shoppingcart_giftcertificate] – Displays the Title of the cart’s “Gift Certificate(s)” section. (See Settings ->Design ->Store Language)
[GIFTCERTS] – Inserts the monetary amount of any applied Gift Certificate(s).

These next few variables will be present in the “checkout_questions_templates” Code Block. They will be used in the display and presentation of the Checkout Questions.

[question] – Inserts the applicable questions.
[answer] – Controls the Checkout Question answers (used for Checkbox, Text and Text Area questions).
[option] – Lists the Question Answer options available (used for radio button and dropdown questions).

These next variables will be present on the page as part of 3dcart’s Address Verification Add-on.
(Note: This add-on requires an additional purchase in order for the scripting to apply to your pages.)

[result_msg] – Displays the result message of the validation for Address verification
[checkout1_AddressValidator_SuggestedAddress] – Displays the title of the suggested address
[AddrressValidator_address1] – Displays the first level of the suggested address
[AddrressValidator_address2] – Displays the second level of the suggested address
[AddrressValidator_city] – Displays the suggested city
[AddrressValidator_state] – Displays the suggested state
[AddrressValidator_zip] – Displays the suggested zip code
[AddrressValidator_address] – It’s gonna bring the value from the default entered address
[checkout1_AddressValidator_Continue] – Displays the text inside the button to continue with the suggested address
[checkout1_AddressValidator_Close] – Displays the text inside the button to close the suggested address pop up
[useAddressValidator] – It’s going to add the response of the Address Validator if you are using the Suggested Address (true), or you click in close to use the default entered address (false )