You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by mo...@apache.org on 2008/07/09 13:53:15 UTC
svn commit: r675139 -
/ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl
Author: mor
Date: Wed Jul 9 04:53:14 2008
New Revision: 675139
URL: http://svn.apache.org/viewvc?rev=675139&view=rev
Log:
One more UI fix on One Page Checkout.
Modified:
ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl
Modified: ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl
URL: http://svn.apache.org/viewvc/ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl?rev=675139&r1=675138&r2=675139&view=diff
==============================================================================
--- ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl (original)
+++ ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl Wed Jul 9 04:53:14 2008
@@ -245,25 +245,25 @@
<div id="shippingPanel" class="screenlet">
<div class="screenlet-header"><div class="boxhead" align="left">Step 2: Shipping</div></div>
<div id="shippingSummaryPanel">
- <div align="left" style="width: auto; padding: 10px 40px 30px 40px;"><a href="javascript:void(0);" id="openShippingPanel"><h3>Click here to edit</h3></a></div>
+ <div align="left" style="width: auto; padding: 10px 10px 10px 10px;"><a href="javascript:void(0);" id="openShippingPanel"><h3>Click here to edit</h3></a></div>
<div id="shippingSummary">
- <div class="completed" style="display:none" id="shippingCompleted">
+ <div style="display:none" id="shippingCompleted">
<a href="javascript:void(0);" id="openShippingAndPersonlDetail">
<h3>Shipping Summary</h3>
</a>
- <table cellpadding="0" cellspacing="0">
+ <table>
<tbody>
<tr>
- <td style=" padding: 6px; width: 60px;" valign="top">Ship To:</td>
- <td style=" padding: 6px; width: 60px;" valign="top">
+ <td valign="top" width="10%">Ship To:</td>
+ <td valign="top" width="30%">
<div>
<div id="completedShipToAttn"></div>
<div id="completedShippingContactNumber"></div>
<div id="completedEmailAddress"></div>
</div>
</td>
- <td style=" padding: 6px; width: 60px;" valign="top">Location:</td>
- <td style="padding: 6px; width: 60px;" valign="top">
+ <td width="10%" valign="top">Location:</td>
+ <td width="50%" valign="top">
<div>
<div id="completedShipToAddress1"></div>
<div id="completedShipToAddress2"></div>
@@ -271,7 +271,6 @@
</div>
</td>
</tr>
- <tr><td colspan="10"><hr class="sepbar"/></td></tr>
</tbody>
</table>
</div>
@@ -285,10 +284,8 @@
<input type="hidden" name="userLogin" value="${parameters.userLogin?if_exists}"/>
<input type="hidden" id="phoneContactMechId" name="phoneContactMechId" value="${parameters.phoneContactMechId?if_exists}"/>
<input type="hidden" id="emailContactMechId" name="emailContactMechId" value="${parameters.emailContactMechId?if_exists}"/>
- <div class="screenlet">
- <div class="screenlet-body">
<table id="shippingTable">
- <tr><td>
+ <tr><td width="40%" valign="top">
<div class="form-row">
<div class="field-label">
<label for="firstName">${uiLabelMap.PartyFirstName}<span>*</span>
@@ -296,7 +293,7 @@
</label>
</div>
<div class="field-widget">
- <input id="firstName" name="firstName" class="required" type="text" value="${parameters.firstName?if_exists}"/>
+ <input id="firstName" name="firstName" class="inputBox required" type="text" value="${parameters.firstName?if_exists}"/>
</div>
</div>
<div class="form-row">
@@ -306,7 +303,7 @@
</label>
</div>
<div class="field-widget">
- <input id="lastName" name="lastName" class="required" type="text" value="${parameters.lastName?if_exists}"/>
+ <input id="lastName" name="lastName" class="inputBox required" type="text" value="${parameters.lastName?if_exists}"/>
</div>
</div>
<div class="form-row">
@@ -315,18 +312,14 @@
<span id="advice-required-shippingCountryCode" style="display:none">(required)</span>
</label>
<label for="areaCode">${uiLabelMap.PartyAreaCode}<span>*</span><span id="advice-required-shippingAreaCode" style="display:none">(required)</span></label>
- </div>
- <div class="field-widget">
- <input name="countryCode" class="required" id="shippingCountryCode" value="${parameters.countryCode?if_exists}" size="3" maxlength=3>
- <input name="areaCode" class="required" id="shippingAreaCode" value="${parameters.areaCode?if_exists}" size="3" maxlength=3>
- </div>
- <div class="field-label">
<label for="contactNumber">${uiLabelMap.PartyContactNumber}<span>*</span><span id="advice-required-shippingContactNumber" style="display:none">(required)</span></label>
<label for="extension">${uiLabelMap.PartyExtension}</label>
</div>
<div class="field-widget">
- <input name="contactNumber" class="required" id="shippingContactNumber" value="${parameters.contactNumber?if_exists}" size="7" maxlength=7>
- <input name="extension" id="shippingExtension" value="${parameters.extension?if_exists}" size="3" maxlength=3>
+ <input name="countryCode" class="inputBox required" id="shippingCountryCode" value="${parameters.countryCode?if_exists}" size="5" maxlength=3> -
+ <input name="areaCode" class="inputBox required" id="shippingAreaCode" value="${parameters.areaCode?if_exists}" size="5" maxlength=3> -
+ <input name="contactNumber" class="inputBox required" id="shippingContactNumber" value="${parameters.contactNumber?if_exists}" size="10" maxlength=7> -
+ <input name="extension" class="inputBox" id="shippingExtension" value="${parameters.extension?if_exists}" size="5" maxlength=3>
</div>
</div>
<div class="form-row">
@@ -336,22 +329,22 @@
</label>
</div>
<div class="field-widget">
- <input id="emailAddress" name="emailAddress" class="required validate-email" type="text" value="${parameters.emailAddress?if_exists}"/>
+ <input id="emailAddress" name="emailAddress" class="inputBox required validate-email" maxlength="255" size="40" type="text" value="${parameters.emailAddress?if_exists}"/>
</div>
</div>
+ </td><td width="20%"></td><td>
<div class="form-row">
<div class="field-label">
<label for="shipToAddress1">${uiLabelMap.PartyAddressLine1}<span>*</span><span id="advice-required-shipToAddress1" class="custom-advice" style="display:none">(required)</span></label>
</div>
<div class="field-widget">
- <input id="shipToAddress1" name="shipToAddress1" class="required" type="text" value="${parameters.shipToAddress1?if_exists}"/>
+ <input id="shipToAddress1" name="shipToAddress1" class="inputBox required" type="text" value="${parameters.shipToAddress1?if_exists}" maxlength="255" size="40"/>
</div>
</div>
- </td><td> </td><td>
<div class="form-row">
<div class="field-label"><label for="address2">${uiLabelMap.PartyAddressLine2}</label></div>
<div class="field-widget">
- <input id="shipToAddress2" name="shipToAddress2" type="text" value="${parameters.shipToAddress2?if_exists}"/>
+ <input id="shipToAddress2" name="shipToAddress2" class="inputBox" type="text" value="${parameters.shipToAddress2?if_exists}" maxlength="255" size="40"/>
</div>
</div>
<div class="form-row">
@@ -359,52 +352,49 @@
<label for="shipToCity">${uiLabelMap.CommonCity}<span>*</span><span id="advice-required-shipToCity" class="custom-advice" style="display:none">(required)</span></label>
</div>
<div class="field-widget">
- <input id="shipToCity" name="shipToCity" class="required" type="text" value="${parameters.shipToCity?if_exists}"/>
+ <input id="shipToCity" name="shipToCity" class="inputBox required" type="text" value="${parameters.shipToCity?if_exists}" maxlength="255" size="40"/>
</div>
</div>
<div class="form-row">
<div class="field-label">
- <label for="state">${uiLabelMap.CommonState}<span>*</span><span id="advice-required-shipToStateProvinceGeoId" style="display:none">(required)</span></label>
+ <label for="shipToPostalCode">${uiLabelMap.PartyZipCode}<span>*</span><span id="advice-required-shipToPostalCode" class="custom-advice" style="display:none">(required)</span></label>
+ </div>
+ <div class="field-widget">
+ <input id="shipToPostalCode" name="shipToPostalCode" class="inputBox required" type="text" value="${parameters.shipToPostalCode?if_exists}" size="12" maxlength="10"/>
</div>
- <div class="field-widget">
- <select name="shipToStateProvinceGeoId" id="shipToStateProvinceGeoId" class="required">
- <#if (parameters.shipToStateProvinceGeoId)?exists>
- <option>${parameters.shipToStateProvinceGeoId}</option>
- <option value="${parameters.shipToStateProvinceGeoId}"></option>
- <#else>
- <option value="">${uiLabelMap.PartyNoState}</option>
- </#if>
- ${screens.render("component://common/widget/CommonScreens.xml#states")}
- </select>
- </div>
</div>
<div class="form-row">
<div class="field-label">
- <label for="shipToPostalCode">${uiLabelMap.PartyZipCode}<span>*</span><span id="advice-required-shipToPostalCode" class="custom-advice" style="display:none">(required)</span></label>
+ <label for="shipToCountryGeoId">${uiLabelMap.PartyCountry}<span class="requiredLabel"> *</span></label>
</div>
<div class="field-widget">
- <input id="shipToPostalCode" name="shipToPostalCode" class="required" type="text" value="${parameters.shipToPostalCode?if_exists}" maxlength=5/>
+ <select name="shipToCountryGeoId" id="shipToCountryGeoId" class="required selectBox">
+ <#if (parameters.shipToCountryGeoId)?exists>
+ <option>${parameters.shipToCountryGeoId}</option>
+ <option value="${parameters.shipToCountryGeoId}">---</option>
+ </#if>
+ ${screens.render("component://common/widget/CommonScreens.xml#countries")}
+ </select>
</div>
</div>
<div class="form-row">
<div class="field-label">
- <label for="shipToCountryGeoId">${uiLabelMap.PartyCountry}<span class="requiredLabel"> *</span></label>
+ <label for="state">${uiLabelMap.CommonState}<span>*</span><span id="advice-required-shipToStateProvinceGeoId" style="display:none">(required)</span></label>
</div>
- <div class="field-widget">
- <select name="shipToCountryGeoId" id="shipToCountryGeoId" class="required">
- <#if (parameters.shipToCountryGeoId)?exists>
- <option>${parameters.shipToCountryGeoId}</option>
- <option value="${parameters.shipToCountryGeoId}">---</option>
+ <div class="field-widget">
+ <select name="shipToStateProvinceGeoId" id="shipToStateProvinceGeoId" class="required selectBox">
+ <#if (parameters.shipToStateProvinceGeoId)?exists>
+ <option>${parameters.shipToStateProvinceGeoId}</option>
+ <option value="${parameters.shipToStateProvinceGeoId}"></option>
+ <#else>
+ <option value="">${uiLabelMap.PartyNoState}</option>
</#if>
- ${screens.render("component://common/widget/CommonScreens.xml#countries")}
+ ${screens.render("component://common/widget/CommonScreens.xml#states")}
</select>
- </div>
- </div>
- </fieldset>
+ </div>
+ </div>
</td></tr>
</table>
- </div>
- </div>
</form>
<div align="right"><h3><span><a class="buttontext" href="javascript:void(0);" id="editShippingOptions">Continue for step 3</a></span></h3></div>
</div>
@@ -427,7 +417,6 @@
<div id="selectedShipmentOption"></div>
</td>
</tr>
- <tr><td colspan="10"><hr class="sepbar"/></td></tr>
</tbody>
</table>
</div>
@@ -456,24 +445,24 @@
<div id="billingPanel" class="screenlet">
<div class="screenlet-header"><div class="boxhead" align="left">Step 4: Billing</div></div>
<div id="billingSummaryPanel">
- <div align="left" style="width: auto; padding: 10px 40px 30px 40px;"><a href="javascript:void(0);" id="openBillingPanel"><h3>Click here to edit</h3></a></div>
+ <div align="left" style="width: auto; padding: 10px 10px 10px 10px;"><a href="javascript:void(0);" id="openBillingPanel"><h3>Click here to edit</h3></a></div>
<div class="completed" id="billingCompleted" style="display: none;">
<a href="javascript:void(0);" id="openBillingAndPersonlDetail">
<h3>Billing and Payment Summary</h3>
</a>
- <table cellpadding="0" cellspacing="0">
+ <table width="35%" align="center">
<tbody>
<tr>
- <td style=" padding: 6px; width: 60px;" valign="top">Bill To:</td>
- <td style=" padding: 6px; width: 60px;" valign="top">
+ <td valign="top" width="5%">Bill To:</td>
+ <td valign="top" width="20%">
<div>
<div id="completedBillToAttn"></div>
<div id="completedCCNumber"></div>
<div id="completedExpiryDate"></div>
</div>
</td>
- <td style=" padding: 6px; width: 60px;" valign="top">Location:</td>
- <td style="padding: 6px; width: 60px;" valign="top">
+ <td valign="top" width="5%">Location:</td>
+ <td valign="top" width="50%">
<div>
<div id="completedBillToAddress1"></div>
<div id="completedBillToAddress2"></div>
@@ -482,8 +471,8 @@
</td>
</tr>
<tr>
- <td style=" padding: 6px; width: 60px;" valign="top">Payment Method:</td>
- <td style="padding: 6px; width: 80px;" valign="top">
+ <td valign="top">Payment Method:</td>
+ <td valign="top">
<div>
<div id="paymentMethod"></div>
</div>
@@ -503,15 +492,14 @@
<input type="hidden" name="userLogin" value="${parameters.userLogin?if_exists}"/>
<input type="hidden" name="expireDate" value="${parameters.expireDate?if_exists}"/>
<input type="hidden" id="cardType" name="cardType" value="Visa"/>
- <div class="panelBody" id="billingId">
<table id="billingTable">
- <tr><td>
+ <tr><td valign="top">
<div class="form-row">
<div class="field-label">
<label for="cardFirstname">${uiLabelMap.PartyFirstName}<span>*</span><span id="advice-required-firstNameOnCard" style="display: none;">(required)</span></label>
</div>
<div class="field-widget">
- <input id="firstNameOnCard" name="firstNameOnCard" class="required" type="text" value="${parameters.firstNameOnCard?if_exists}"/>
+ <input id="firstNameOnCard" name="firstNameOnCard" class="inputBox required" type="text" value="${parameters.firstNameOnCard?if_exists}"/>
</div>
</div>
<div class="form-row">
@@ -519,7 +507,7 @@
<label for="cardLastName">${uiLabelMap.PartyLastName}<span>*</span><span id="advice-required-lastNameOnCard" style="display: none;">(required)</span></label>
</div>
<div class="field-widget">
- <input id="lastNameOnCard" name="lastNameOnCard" class="required" type="text" value="${parameters.lastNameOnCard?if_exists}"/>
+ <input id="lastNameOnCard" name="lastNameOnCard" class="inputBox required" type="text" value="${parameters.lastNameOnCard?if_exists}"/>
</div>
</div>
<div class="form-row">
@@ -527,7 +515,7 @@
<label for="cardNumber">${uiLabelMap.AccountingCardNumber}<span>*</span><span id="advice-required-cardNumber" style="display: none;">(required)</span></label>
</div>
<div class="field-widget">
- <input id="cardNumber" autocomplete="off" name="cardNumber" class="required" type="text" value="${parameters.cardNumber?if_exists}" size=30 maxlength=16 />
+ <input id="cardNumber" autocomplete="off" name="cardNumber" class="inputBox required" type="text" value="${parameters.cardNumber?if_exists}" size=30 maxlength=16 />
</div>
</div>
<div class="form-row">
@@ -535,7 +523,7 @@
<label for="CVV2">CVV2<span>*</span><span id="advice-required-CVV2" style="display:none">(required)</span></label>
</div>
<div class="field-widget">
- <input id="CVV2" autocomplete="off" name="cardSecurityCode" class="required" size="4" type="text" maxlength="4" value=""/>
+ <input id="CVV2" autocomplete="off" name="cardSecurityCode" class="inputBox required" size="4" type="text" maxlength="4" value=""/>
</div>
</div>
<div class="form-row">
@@ -552,7 +540,7 @@
</span>
<br>
<span>
- <select id="expMonth" name="expMonth" class="required">
+ <select id="expMonth" name="expMonth" class="inputBox required">
<#if parameters.expMonth?has_content>
<option label="${parameters.expMonth?if_exists}" value="${parameters.expMonth?if_exists}">${parameters.expMonth?if_exists}</option>
</#if>
@@ -560,7 +548,7 @@
</select>
</span>
<span>
- <select id="expYear" name="expYear" class="required">
+ <select id="expYear" name="expYear" class="inputBox required">
<#if parameters.expYear?has_content>
<option value="${parameters.expYear?if_exists}">${parameters.expYear?if_exists}</option>
</#if>
@@ -568,7 +556,7 @@
</select>
</span>
</div>
- </td><td> </td><td>
+ </td><td width="20%"> </td><td valign="top">
<div class="form-row">
<div class="field-widget">
<input class="checkbox" id="useShippingAddressForBilling" name="useShippingAddressForBilling" type="checkbox" value="Y" <#if parameters.useShippingAddressForBilling?has_content && parameters.useShippingAddressForBilling?default("")=="Y">checked</#if>> ${uiLabelMap.FacilityBillingAddressSameShipping}
@@ -580,7 +568,7 @@
<label for="address1">${uiLabelMap.PartyAddressLine1}<span> *</span><span id="advice-required-billToAddress1" style="display:none">(required)</span></label>
</div>
<div class="field-widget">
- <input id="billToAddress1" name="billToAddress1" class="required" size=30 type="text" value="${parameters.billToAddress1?if_exists}"/>
+ <input id="billToAddress1" name="billToAddress1" class="inputBox required" size=30 type="text" value="${parameters.billToAddress1?if_exists}"/>
</div>
</div>
<div class="form-row">
@@ -588,7 +576,7 @@
<label for="address2" style="margin-top: 9px;">${uiLabelMap.PartyAddressLine2}</label>
</div>
<div class="field-widget">
- <input id="billToAddress2" name="billToAddress2" type="text" value="${parameters.billToAddress2?if_exists}" size=30/>
+ <input id="billToAddress2" name="billToAddress2" class="inputBox" type="text" value="${parameters.billToAddress2?if_exists}" size=30/>
</div>
</div>
<div class="form-row">
@@ -596,23 +584,7 @@
<label for="city">${uiLabelMap.CommonCity}<span>*</span><span id="advice-required-billToCity" style="display:none">(required)</span></label>
</div>
<div class="field-widget">
- <input id="billToCity" name="billToCity" class="required" type="text" value="${parameters.billToCity?if_exists}"/>
- </div>
- </div>
- <div class="form-row">
- <div class="field-label">
- <label for="state">${uiLabelMap.CommonState}<span>*</span><span id="advice-required-billToStateProvinceGeoId" style="display:none">(required)</span></label>
- </div>
- <div class="field-widget">
- <select id="billToStateProvinceGeoId" name="billToStateProvinceGeoId" class="required">
- <#if parameters.billToStateProvinceGeoId?has_content>
- <option>${parameters.billToStateProvinceGeoId}</option>
- <option value="${parameters.billToStateProvinceGeoId}">---</option>
- <#else>
- <option value="">${uiLabelMap.PartyNoState}</option>
- </#if>
- ${screens.render("component://common/widget/CommonScreens.xml#states")}
- </select>
+ <input id="billToCity" name="billToCity" class="inputBox required" type="text" value="${parameters.billToCity?if_exists}"/>
</div>
</div>
<div class="form-row">
@@ -620,7 +592,7 @@
<label for="billToPostalCode">${uiLabelMap.PartyZipCode}<span>*</span><span id="advice-required-billToPostalCode" style="display:none">(required)</span></label>
</div>
<div class="field-widget">
- <input id="billToPostalCode" name="billToPostalCode" class="required" type="text" value="${parameters.billToPostalCode?if_exists}"/>
+ <input id="billToPostalCode" name="billToPostalCode" class="inputBox required" type="text" value="${parameters.billToPostalCode?if_exists}" size="12" maxlength="10"/>
</div>
</div>
<div class="form-row">
@@ -628,7 +600,7 @@
<label for="billToCountryGeoId">${uiLabelMap.PartyCountry}<span>*</span><span id="advice-required-billToCountryGeoId" style="display:none">(required)</span></label>
</div>
<div class="field-widget">
- <select name="billToCountryGeoId" id="billToCountryGeoId" class="required">
+ <select name="billToCountryGeoId" id="billToCountryGeoId" class="required selectBox">
<#if (parameters.billToCountryGeoId)?exists>
<option>${parameters.billToCountryGeoId}</option>
<option value="${parameters.billToCountryGeoId}">---</option>
@@ -637,15 +609,30 @@
</select>
</div>
</div>
- </div>
+ <div class="form-row">
+ <div class="field-label">
+ <label for="state">${uiLabelMap.CommonState}<span>*</span><span id="advice-required-billToStateProvinceGeoId" style="display:none">(required)</span></label>
+ </div>
+ <div class="field-widget">
+ <select id="billToStateProvinceGeoId" name="billToStateProvinceGeoId" class="required selectBox">
+ <#if parameters.billToStateProvinceGeoId?has_content>
+ <option>${parameters.billToStateProvinceGeoId}</option>
+ <option value="${parameters.billToStateProvinceGeoId}">---</option>
+ <#else>
+ <option value="">${uiLabelMap.PartyNoState}</option>
+ </#if>
+ ${screens.render("component://common/widget/CommonScreens.xml#states")}
+ </select>
+ </div>
+ </div>
+ </div>
</td></tr>
</table>
- </div>
</form>
<div align="right"><h3><span><a class="buttontext" href="javascript:void(0);" id="openOrderSubmitPanel">Continue for step 5</a></span></h3></div>
</div>
</div>
- <div id="" class="screenlet">
+ <div class="screenlet">
<div class="screenlet-header"><div class="boxhead" align="left">Step 5: Submit Order</div></div>
<div id="orderSubmitPanel" style="display: none;">
<form name="orderSubmitForm" id="orderSubmitForm" action="<@o...@ofbizUrl>" method="post">