Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagegroovy
themeDJango
firstline1
titleCustom Field in Buy Form (Hidden Field)
linenumberstrue
<form method="post" action="https://ucsupportsecure.ultracart.com/cgi-bin/UCEditor">
  <input type="hidden" name="merchantId" value="DEMO" />
  <input type="hidden" name="add" value="Bone" />
  <input type="hidden" name="CustomField1" value="New Landing Page" />
  <table class="uc-item-table">
    <tr class="uc-item-dog-breed-row">
      <td class="uc-item-dog-breed-label">What breed of dog(s) do you have?</td>
      <td class="uc-item-dog-breed-field">
        <input type="text" name="CustomField2" value="" />
      </td>
    </tr>
    <tr class="uc-item-qty-row">
      <td class="uc-item-qty-label">Qty</td>
      <td class="uc-item-qty-field">
        <input type="text" name="quantity" value="1" />
      </td>
    </tr>
    <tr class="uc-item-cost-row">
      <td class="uc-item-cost-label">Cost</td>
      <td class="uc-item-cost-value"><script type="text/javascript" src="https://ucsupportsecure.ultracart.com/cgi-bin/UCPrice?MERCHANTID=DEMO&ITEM=BONE&output=Javascript"></script></td>
    </tr>
    <tr class="uc-item-submit-row">
      <td></td>
      <td>
        <input type="submit" name="submit" value="add to cart" />
      </td>
    </tr>
  </table>
</form>

...

Code Block
themeDJango
titleInserting Custom Fields into the Storefront checkout
linenumberstrue
 ## This snippet contains custom fields for inclusion in to the checkout
<div class="row js-show-shipping">
	<div class="columns small-16">
      
<div class="UcCustomTable">
    <div class="UcCustomTableTitle">
        <p>Complete the following, if applicable.</p>
    </div>
    <div class="UcCustomTableHeading">
        <div class="UcCustomTableCell">
            <p>Heading 1</p>
        </div>
        <div class="UcCustomTableCell">
            <p>Heading 2</p>
        </div>
        
    </div>
    <div class="UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom Field 1 LabelLabel</p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField1()"/><br>
        </div>
        
    </div>
    <div class="UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom Field 2 LabelLabel</p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField2()"/><br>
        </div>
    <div class="UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom Field 3 LabelLabel</p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField3()"/><br>
        </div>
	<div class="UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom Field 4 LabelLabel</p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField4()"/><br>
        </div>	
	<div class="UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom Field 5 LabelLabel</p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField5()"/><br>
        </div>
	<div class="UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom Field 6 LabelLabel</p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField6()"/><br>
        </div>
	<div class="UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom Field 7 LabelLabel</p>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField7()"/><br>
        </div>	
    </div>
  </div>
 </div>
</div>




Example CSS for the Custom Field Div's

...