Versions Compared

Key

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

...

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">
        <h2>Complete the following, if applicable.</h2>
    </div>
    <div class="UcCustomTableHeading">  
     
        <div class="UcCustomTableCellUcCustomTableRow">
          
 <p>Table Heading</p>      <div class="UcCustomTableCell">
 </div>           <h3>Custom Field 1 </div>Label</h3>
       <div class="UcCustomTableRow"> </div>
        <div class="UcCustomTableCell">
            <h3>Custom Field 1 Label</h3>
        </div>
        <div class="UcCustomTableCell">
            <input type='text' class="<input type='text' class="ucFormField" style="width:315px" name="$cart.getCustomField1()"/><br>
        </div>
        
    </div>
    <div class="UcCustomTableRow">
        <div class="UcCustomTableCell">
            <p>Custom<h3>Custom Field 2 Label</p>h3>
        </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<h3>Custom Field 3 Label</p>h3>
        </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<h3>Custom Field 4 Label</p>h3>
        </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<h3>Custom Field 5 Label</p>h3>
        </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<h3>Custom Field 6 Label</p>h3>
        </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<h3>Custom Field 7 Label</p>h3>
        </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

...

Code Block
themeDJango
titleInserting Custom Fields into the Storefront checkout
linenumberstrue
 
<style type="text/css">
    .UcCustomTable
    {
        display: table;
    }
    .UcCustomTableTitle
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .UcCustomTableHeading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }
    .UcCustomTableRow
    {
        display: table-row;
    }
    .UcCustomTableCell
    {
        display: table-cell;
        border: solid;
        border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
    }
</style>

...