OFBiz › OFBiz - Commits

svn commit: r1819239 - in /ofbiz/ofbiz-plugins/trunk/ecommerce/template: cart/PromoUseDetailsInline.ftl cart/ShowCart.ftl cart/UpdateCart.ftl order/OnePageCheckoutProcess.ftl

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

1 message

Deepak Dixit-5

svn commit: r1819239 - in /ofbiz/ofbiz-plugins/trunk/ecommerce/template: cart/PromoUseDetailsInline.ftl cart/ShowCart.ftl cart/UpdateCart.ftl order/OnePageCheckoutProcess.ftl

Author: deepak
Date: Mon Dec 25 09:28:38 2017
New Revision: 1819239

URL: http://svn.apache.org/viewvc?rev=1819239&view=rev
Log:
Improved: Update markup of One Page checkout page and improve markup on Shopping Cart according to standard markup given by Bootstrap 4. (OFBIZ-10126)
Thanks Mayank for your contribution

Modified:
ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/PromoUseDetailsInline.ftl
ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/ShowCart.ftl
ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/UpdateCart.ftl
ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OnePageCheckoutProcess.ftl

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/PromoUseDetailsInline.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/PromoUseDetailsInline.ftl?rev=1819239&r1=1819238&r2=1819239&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/PromoUseDetailsInline.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/PromoUseDetailsInline.ftl Mon Dec 25 09:28:38 2017
@@ -77,84 +77,4 @@ under the License.
</#list>
</ul>
</div>
-</div>
-<#--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-<h2>${uiLabelMap.OrderPromotionInformation}:</h2>
-<div class="row">
- <div class="col-xl-6">
- <h3>${uiLabelMap.OrderPromotionsApplied}:</h3>
- <ul>
- <#list shoppingCart.getProductPromoUseInfoIter() as productPromoUseInfo>
- <li>
- <#-- TODO: when promo pretty print is done show promo short description here -->
- <a href="<@ofbizUrl>showPromotionDetails?productPromoId=${productPromoUseInfo.productPromoId!}</@ofbizUrl>">${uiLabelMap.OrderPromotion} ${uiLabelMap.CommonDetails}</a>
- <#if productPromoUseInfo.productPromoCodeId?has_content> - ${uiLabelMap.OrderWithPromoCode} [${productPromoUseInfo.productPromoCodeId}]</#if>
- <#if (productPromoUseInfo.totalDiscountAmount != 0)> - ${uiLabelMap.CommonTotalValue} <@ofbizCurrency amount=(-1*productPromoUseInfo.totalDiscountAmount) isoCode=shoppingCart.getCurrency()/></#if>
- <#if productPromoUseInfo.productPromoCodeId?has_content>
- <a href="<@ofbizUrl>removePromotion?promoCode=${productPromoUseInfo.productPromoCodeId!}</@ofbizUrl>">${uiLabelMap.OrderRemovePromotion}</a>
- </#if>
- </li>
- <#if (productPromoUseInfo.quantityLeftInActions > 0)>
- <li>- Could be used for ${productPromoUseInfo.quantityLeftInActions} more discounted item<#if (productPromoUseInfo.quantityLeftInActions > 1)>s</#if> if added to your cart.</li>
- </#if>
- </#list>
- </ul>
- </div>
-
- <div class="col-xl-6">
- <h3>${uiLabelMap.OrderCartItemUseinPromotions}:</h3>
- <ul>
- <#list shoppingCart.items() as cartLine>
- <#assign cartLineIndex = shoppingCart.getItemIndex(cartLine)>
- <#if cartLine.getIsPromo()>
- <li>${uiLabelMap.OrderItemN} ${cartLineIndex+1} [${cartLine.getProductId()!}] - ${uiLabelMap.OrderIsAPromotionalItem}</li>
- <#else>
- <li>${uiLabelMap.OrderItemN} ${cartLineIndex+1} [${cartLine.getProductId()!}] - ${cartLine.getPromoQuantityUsed()?string.number}/${cartLine.getQuantity()?string.number} ${uiLabelMap.CommonUsed} - ${cartLine.getPromoQuantityAvailable()?string.number} ${uiLabelMap.CommonAvailable}
- <ul>
- <#list cartLine.getQuantityUsedPerPromoActualIter() as quantityUsedPerPromoActualEntry>
- <#assign productPromoActualPK = quantityUsedPerPromoActualEntry.getKey()>
- <#assign actualQuantityUsed = quantityUsedPerPromoActualEntry.getValue()>
- <#assign isQualifier = "ProductPromoCond" == productPromoActualPK.getEntityName()>
- <li>  - ${actualQuantityUsed} ${uiLabelMap.CommonUsedAs} <#if isQualifier>${uiLabelMap.CommonQualifier}<#else>${uiLabelMap.CommonBenefit}</#if> ${uiLabelMap.OrderOfPromotion} <a href="<@ofbizUrl>showPromotionDetails?productPromoId=${productPromoActualPK.productPromoId}</@ofbizUrl>">${uiLabelMap.CommonDetails}</a></li>
- 
- </#list>
- </ul>
- <ul>
- <#list cartLine.getQuantityUsedPerPromoFailedIter() as quantityUsedPerPromoFailedEntry>
- <#assign productPromoFailedPK = quantityUsedPerPromoFailedEntry.getKey()>
- <#assign failedQuantityUsed = quantityUsedPerPromoFailedEntry.getValue()>
- <#assign isQualifier = "ProductPromoCond" == productPromoFailedPK.getEntityName()>
- <li>  - ${uiLabelMap.CommonCouldBeUsedAs} <#if isQualifier>${uiLabelMap.CommonQualifier}<#else>${uiLabelMap.CommonBenefit}</#if> ${uiLabelMap.OrderOfPromotion} <a href="<@ofbizUrl>showPromotionDetails?productPromoId=${productPromoFailedPK.productPromoId}</@ofbizUrl>">${uiLabelMap.CommonDetails}</a></li>
- 
- </#list>
- </ul>
- <#list cartLine.getQuantityUsedPerPromoCandidateIter() as quantityUsedPerPromoCandidateEntry>
- <#assign productPromoCandidatePK = quantityUsedPerPromoCandidateEntry.getKey()>
- <#assign candidateQuantityUsed = quantityUsedPerPromoCandidateEntry.getValue()>
- <#assign isQualifier = "ProductPromoCond" == productPromoCandidatePK.getEntityName()>
- 
- 
- </#list>
- </li>
- </#if>
- </#list>
- </ul>
- </div>
</div>
\ No newline at end of file

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/ShowCart.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/ShowCart.ftl?rev=1819239&r1=1819238&r2=1819239&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/ShowCart.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/ShowCart.ftl Mon Dec 25 09:28:38 2017
@@ -73,7 +73,6 @@ under the License.
<#assign fixedAssetExist = shoppingCart.containAnyWorkEffortCartItems() />
<#-- change display format when rental items exist in the shoppingcart -->
<div>
- <h2>
<#if ((sessionAttributes.lastViewedProducts)?has_content && sessionAttributes.lastViewedProducts?size > 0)>
<#assign continueLink = "/product?product_id=" + sessionAttributes.lastViewedProducts.get(0) />
<#else>
@@ -92,7 +91,6 @@ under the License.
</span>
</#if>
${uiLabelMap.CommonQuickAdd}
- </h2>
<div>
<div>
<form method="post"
@@ -171,7 +169,6 @@ under the License.
</#if>
</ul>
</div>
- <br />
<div class="row mb-2">
<div class="col-xl-12">
<span class="h3">${uiLabelMap.OrderShoppingCart}</span>
@@ -188,13 +185,13 @@ under the License.
<form method="post" action="<@ofbizUrl>modifycart</@ofbizUrl>" name="cartform">
<input type="hidden" name="removeSelected" value="false" />
<table class="table table-responsive-sm">
- <thead class="thead-dark">
+ <thead class="thead-light">
<tr>
<th></th>
<th scope="row">${uiLabelMap.OrderProduct}</th>
<#if asslGiftWraps?has_content && productStore.showCheckoutGiftOptions! != "N">>
<th scope="row">
- <select class="selectBox" name="GWALL" onchange="javascript:gwAll(this);">
+ <select class="form-control" name="GWALL" onchange="javascript:gwAll(this);">
<option value="">${uiLabelMap.EcommerceGiftWrapAllItems}</option>
<option value="NO^">${uiLabelMap.EcommerceNoGiftWrap}</option>
<#list allgiftWraps as option>
@@ -279,12 +276,12 @@ under the License.
<#-- ${cartLineIndex} - -->

<div class="media-body">
- <h3 class="mt-0">
+ <h4 class="mt-0">
<a href="<@ofbizCatalogAltUrl productId=parentProductId/>"
>${cartLine.getProductId()} -
${cartLine.getName(dispatcher)!}
</a>
- </h3>
+ </h4>
${cartLine.getDescription(dispatcher)!}
<#-- For configurable products, the selected options are shown -->
<#if cartLine.getConfigWrapper()??>
@@ -472,7 +469,7 @@ under the License.
</#list>
</tbody>
<tfoot>
- <tr class="table-primary">
+ <tr class="thead-light">
<th colspan="8">
Summary:
</th>
@@ -535,7 +532,8 @@ under the License.
<tr>
<td colspan="8">
<#if sessionAttributes.userLogin?has_content && sessionAttributes.userLogin.userLoginId != "anonymous">
- <select name="shoppingListId" class="selectBox">
+ <div class="input-group">
+ <select class="form-control" name="shoppingListId" class="selectBox">
<#if shoppingLists?has_content>
<#list shoppingLists as shoppingList>
<option value="${shoppingList.shoppingListId}">${shoppingList.listName}</option>
@@ -544,10 +542,12 @@ under the License.
<option value="">---</option>
<option value="">${uiLabelMap.OrderNewShoppingList}</option>
</select>
-   
- <a href="javascript:addToList();" class="btn btn-outline-secondary btn-sm">
+ <span class="input-group-btn">
+ <a href="javascript:addToList();" class="btn btn-outline-secondary">
${uiLabelMap.EcommerceAddSelectedtoList}
- </a>  
+ </a>
+ </span>
+ </div>
<#else>
${uiLabelMap.OrderYouMust}
<a href="<@ofbizUrl>checkLogin/showcart</@ofbizUrl>" class="btn btn-outline-secondary btn-sm">
@@ -560,7 +560,6 @@ under the License.
<tr>
<td colspan="8">
<#if sessionAttributes.userLogin?has_content && sessionAttributes.userLogin.userLoginId != "anonymous">
-   
<a href="<@ofbizUrl>createCustRequestFromCart</@ofbizUrl>" class="btn btn-outline-secondary btn-sm">
${uiLabelMap.OrderCreateCustRequestFromCart}
</a>    
@@ -588,7 +587,7 @@ under the License.
</table>
</form>
<#else>
- <h2>${uiLabelMap.EcommerceYourShoppingCartEmpty}.</h2>
+ <h3>${uiLabelMap.EcommerceYourShoppingCartEmpty}.</h3>
</#if>
<#-- Copy link bar to bottom to include a link bar at the bottom too -->
</div>
@@ -597,7 +596,7 @@ under the License.
<div class="row">
<div class="col-xl-6">
<div>
- <h2>${uiLabelMap.ProductPromoCodes}</h2>
+ <h3>${uiLabelMap.ProductPromoCodes}</h3>
</div>
<div>
<div>
@@ -627,7 +626,7 @@ under the License.
<#if showPromoText?? && showPromoText>
<div class="col-xl-6">
<div>
- <h2>${uiLabelMap.OrderSpecialOffers}</h2>
+ <h3>${uiLabelMap.OrderSpecialOffers}</h3>
</div>
<div>
<#-- show promotions text -->
@@ -651,7 +650,7 @@ under the License.
<#if associatedProducts?has_content>
<div>
<div>
- <h2>${uiLabelMap.EcommerceYouMightAlsoIntrested}:</h2>
+ <h3>${uiLabelMap.EcommerceYouMightAlsoIntrested}:</h3>
</div>
<div>
<#-- random complementary products -->

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/UpdateCart.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/UpdateCart.ftl?rev=1819239&r1=1819238&r2=1819239&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/UpdateCart.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/cart/UpdateCart.ftl Mon Dec 25 09:28:38 2017
@@ -18,24 +18,25 @@ under the License.
-->

<#if shoppingCart?has_content && shoppingCart.size() > 0>
- <h3>${uiLabelMap.EcommerceStep} 1: ${uiLabelMap.PageTitleShoppingCart}</h3>
- <div id="cartSummaryPanel" style="display: none;">
- <a href="javascript:void(0);" id="openCartPanel" class="button">${uiLabelMap.EcommerceClickHereToEdit}</a>
- <table id="cartSummaryPanel_cartItems" summary="This table displays the list of item added into Shopping Cart.">
- <thead>
+ <div class="card">
+ <div class="card-header bg-info text-white">${uiLabelMap.EcommerceStep} 1: ${uiLabelMap.PageTitleShoppingCart}</div>
+ <div class="card-body">
+ <div id="cartSummaryPanel" style="display: none;">
+ <table class="table table-responsive-sm" id="cartSummaryPanel_cartItems" summary="This table displays the list of item added into Shopping Cart.">
+ <thead class="thead-light">
<tr>
<th id="orderItem">${uiLabelMap.OrderItem}</th>
<th id="description">${uiLabelMap.CommonDescription}</th>
- <th id="unitPrice">${uiLabelMap.EcommerceUnitPrice}</th>
+ <th id="unitPrice" class="amount">${uiLabelMap.EcommerceUnitPrice}</th>
<th id="quantity">${uiLabelMap.OrderQuantity}</th>
- <th id="adjustment">${uiLabelMap.EcommerceAdjustments}</th>
- <th id="itemTotal">${uiLabelMap.EcommerceItemTotal}</th>
+ <th id="adjustment" class="amount">${uiLabelMap.EcommerceAdjustments}</th>
+ <th id="itemTotal" class="amount">${uiLabelMap.EcommerceItemTotal}</th>
</tr>
</thead>
<tfoot>
<tr id="completedCartSubtotalRow">
- <th id="subTotal" scope="row" colspan="5">${uiLabelMap.CommonSubtotal}</th>
- <td headers="subTotal" id="completedCartSubTotal">
+ <th id="subTotal" scope="row" colspan="4">${uiLabelMap.CommonSubtotal}</th>
+ <td headers="subTotal" colspan="2" class="amount" id="completedCartSubTotal">
<@ofbizCurrency amount=shoppingCart.getSubTotal() isoCode=shoppingCart.getCurrency() />
</td>
</tr>
@@ -46,28 +47,28 @@ under the License.
.calcOrderAdjustment(cartAdjustment, shoppingCart.getSubTotal()) />
</#list>
<tr id="completedCartDiscountRow">
- <th id="productDiscount" scope="row" colspan="5">${uiLabelMap.ProductDiscount}</th>
- <td headers="productDiscount" id="completedCartDiscount">
+ <th id="productDiscount" scope="row" colspan="4">${uiLabelMap.ProductDiscount}</th>
+ <td headers="productDiscount" colspan="2" class="amount text-success" id="completedCartDiscount">
<input type="hidden" value="${orderAdjustmentsTotal}" id="initializedCompletedCartDiscount" />
<@ofbizCurrency amount=orderAdjustmentsTotal isoCode=shoppingCart.getCurrency() />
</td>
</tr>
<tr>
- <th id="shippingAndHandling" scope="row" colspan="5">${uiLabelMap.OrderShippingAndHandling}</th>
- <td headers="shippingAndHandling" id="completedCartTotalShipping">
+ <th id="shippingAndHandling" scope="row" colspan="4">${uiLabelMap.OrderShippingAndHandling}</th>
+ <td headers="shippingAndHandling" colspan="2" class="amount" id="completedCartTotalShipping">
<@ofbizCurrency amount=shoppingCart.getTotalShipping() isoCode=shoppingCart.getCurrency() />
</td>
</tr>
<tr>
- <th id="salesTax" scope="row" colspan="5">${uiLabelMap.OrderSalesTax}</th>
- <td headers="salesTax" id="completedCartTotalSalesTax">
+ <th id="salesTax" scope="row" colspan="4">${uiLabelMap.OrderSalesTax}</th>
+ <td headers="salesTax" colspan="2" class="amount" id="completedCartTotalSalesTax">
<@ofbizCurrency amount=shoppingCart.getTotalSalesTax() isoCode=shoppingCart.getCurrency() />
</td>
</tr>
<tr>
- <th id="grandTotal" scope="row" colspan="5">${uiLabelMap.OrderGrandTotal}</th>
- <td headers="grandTotal" id="completedCartDisplayGrandTotal">
- <@ofbizCurrency amount=shoppingCart.getDisplayGrandTotal() isoCode=shoppingCart.getCurrency() />
+ <th id="grandTotal" scope="row" colspan="4">${uiLabelMap.OrderGrandTotal}</th>
+ <td headers="grandTotal" colspan="2" class="amount" id="completedCartDisplayGrandTotal">
+ <strong><@ofbizCurrency amount=shoppingCart.getDisplayGrandTotal() isoCode=shoppingCart.getCurrency() /></strong>
</td>
</tr>
</tfoot>
@@ -88,16 +89,16 @@ under the License.
<img src="<@ofbizContentUrl>${requestAttributes.contentPathPrefix!}${smallImageUrl}</@ofbizContentUrl>"
alt = "Product Image" /></td>
<td headers="description">${cartLine.getName(dispatcher)!}</td>
- <td headers="unitPrice">${cartLine.getDisplayPrice()}</td>
+ <td class="amount" headers="unitPrice">${cartLine.getDisplayPrice()}</td>
<td headers="quantity">
<span id="completedCartItemQty_${cartLine_index}">${cartLine.getQuantity()?string.number}</span>
</td>
- <td headers="adjustment">
+ <td class="amount" headers="adjustment">
<span id="completedCartItemAdjustment_${cartLine_index}">
<@ofbizCurrency amount=cartLine.getOtherAdjustments() isoCode=shoppingCart.getCurrency() />
</span>
</td>
- <td headers="itemTotal" align="right">
+ <td class="amount" headers="itemTotal" align="right">
<span id="completedCartItemSubTotal_${cartLine_index}">
<@ofbizCurrency amount=cartLine.getDisplayItemSubTotal() isoCode=shoppingCart.getCurrency() />
</span>
@@ -106,34 +107,36 @@ under the License.
</#list>
</tbody>
</table>
+ <a href="javascript:void(0);" id="openCartPanel" class="btn btn-outline-secondary">${uiLabelMap.EcommerceClickHereToEdit}</a>
</div>
<div id="editCartPanel">
<form id="cartForm" method="post" action="<@ofbizUrl></@ofbizUrl>">
- <fieldset>
<input type="hidden" name="removeSelected" value="false" />
<div id="cartFormServerError" class="errorMessage"></div>
- <table id="editCartPanel_cartItems">
- <thead>
+ <table class="table table-responsive-sm" id="editCartPanel_cartItems">
+ <thead class="thead-light">
<tr>
<th id="editOrderItem">${uiLabelMap.OrderItem}</th>
<th id="editDescription">${uiLabelMap.CommonDescription}</th>
- <th id="editUnitPrice">${uiLabelMap.EcommerceUnitPrice}</th>
+ <th id="editUnitPrice" class="amount">${uiLabelMap.EcommerceUnitPrice}</th>
<th id="editQuantity">${uiLabelMap.OrderQuantity}</th>
- <th id="editAdjustment">${uiLabelMap.EcommerceAdjustments}</th>
- <th id="editItemTotal">${uiLabelMap.EcommerceItemTotal}</th>
+ <th id="editAdjustment" class="amount">${uiLabelMap.EcommerceAdjustments}</th>
+ <th id="editItemTotal" class="amount">${uiLabelMap.EcommerceItemTotal}</th>
<th id="removeItem">${uiLabelMap.FormFieldTitle_removeButton}</th>
</tr>
</thead>
<tfoot>
+ <tr class="thead-light"><th colspan="7" >Summary</th></tr>
<tr>
- <th scope="row" colspan="6">${uiLabelMap.CommonSubtotal}</th>
- <td id="cartSubTotal">
+ <th scope="row" colspan="5">${uiLabelMap.CommonSubtotal}</th>
+ <td class="amount"id="cartSubTotal" >
<@ofbizCurrency amount=shoppingCart.getSubTotal() isoCode=shoppingCart.getCurrency() />
</td>
+ <td> </td>
</tr>
<tr>
- <th scope="row" colspan="6">${uiLabelMap.ProductDiscount}</th>
- <td id="cartDiscountValue">
+ <th scope="row" colspan="5">${uiLabelMap.ProductDiscount}</th>
+ <td id="cartDiscountValue" class="amount text-success">
<#assign orderAdjustmentsTotal = 0 />
<#list shoppingCart.getAdjustments() as cartAdjustment>
<#assign orderAdjustmentsTotal = orderAdjustmentsTotal +
@@ -142,24 +145,28 @@ under the License.
</#list>
<@ofbizCurrency amount=orderAdjustmentsTotal isoCode=shoppingCart.getCurrency() />
</td>
+ <td> </td>
</tr>
<tr>
- <th scope="row" colspan="6">${uiLabelMap.OrderShippingAndHandling}</th>
- <td id="cartTotalShipping">
+ <th scope="row" colspan="5">${uiLabelMap.OrderShippingAndHandling}</th>
+ <td id="cartTotalShipping" class="amount">
<@ofbizCurrency amount=shoppingCart.getTotalShipping() isoCode=shoppingCart.getCurrency() />
</td>
+ <td> </td>
</tr>
<tr>
- <th scope="row" colspan="6">${uiLabelMap.OrderSalesTax}</th>
- <td id="cartTotalSalesTax">
+ <th scope="row" colspan="5">${uiLabelMap.OrderSalesTax}</th>
+ <td id="cartTotalSalesTax" class="amount">
<@ofbizCurrency amount=shoppingCart.getTotalSalesTax() isoCode=shoppingCart.getCurrency() />
</td>
+ <td> </td>
</tr>
<tr>
- <th scope="row" colspan="6">${uiLabelMap.OrderGrandTotal}</th>
- <td id="cartDisplayGrandTotal">
- <@ofbizCurrency amount=shoppingCart.getDisplayGrandTotal() isoCode=shoppingCart.getCurrency() />
+ <th scope="row" colspan="5">${uiLabelMap.OrderGrandTotal}</th>
+ <td id="cartDisplayGrandTotal" class="amount">
+ <strong><@ofbizCurrency amount=shoppingCart.getDisplayGrandTotal() isoCode=shoppingCart.getCurrency() /></strong>
</td>
+ <td> </td>
</tr>
</tfoot>
<tbody id="updateBody">
@@ -183,7 +190,7 @@ under the License.
</#if>
</td>
<td headers="editDescription">${cartLine.getName(dispatcher)!}</td>
- <td headers="editUnitPrice" id="itemUnitPrice_${cartLine_index}">
+ <td class="amount" headers="editUnitPrice" id="itemUnitPrice_${cartLine_index}">
<@ofbizCurrency amount=cartLine.getDisplayPrice() isoCode=shoppingCart.getCurrency() />
</td>
<td headers="editQuantity">
@@ -203,15 +210,15 @@ under the License.
</#if>
</td>
<#if !cartLine.getIsPromo()>
- <td headers="editAdjustment" id="addPromoCode_${cartLine_index}">
+ <td class="amount" headers="editAdjustment" id="addPromoCode_${cartLine_index}">
<@ofbizCurrency amount=cartLine.getOtherAdjustments() isoCode=shoppingCart.getCurrency() />
</td>
<#else>
- <td headers="editAdjustment">
+ <td class="amount" headers="editAdjustment">
<@ofbizCurrency amount=cartLine.getOtherAdjustments() isoCode=shoppingCart.getCurrency() />
</td>
</#if>
- <td headers="editItemTotal" id="displayItem_${cartLine_index}">
+ <td class="amount" headers="editItemTotal" id="displayItem_${cartLine_index}">
<@ofbizCurrency amount=cartLine.getDisplayItemSubTotal() isoCode=shoppingCart.getCurrency() />
</td>
<#if !cartLine.getIsPromo()>
@@ -227,21 +234,18 @@ under the License.
</#list>
</tbody>
</table>
- </fieldset>
- <fieldset id="productPromoCodeFields">
- <div>
- <label for="productPromoCode">${uiLabelMap.EcommerceEnterPromoCode}</label>
- <input id="productPromoCode" name="productPromoCode" type="text" value="" />
+ <div class="form-group">
+ <label for="productPromoCode" class="mx-2">${uiLabelMap.EcommerceEnterPromoCode}</label>
+ <input id="productPromoCode" class="form-control mb-2" name="productPromoCode" type="text" value="" />
</div>
- </fieldset>
- <fieldset>
- <a href="javascript:void(0);" class="button" id="updateShoppingCart" >
+ <a href="javascript:void(0);" class="btn btn-primary" id="updateShoppingCart" >
${uiLabelMap.EcommerceContinueToStep} 2
</a>
<a style="display: none" class="button" href="javascript:void(0);" id="processingShipping">
${uiLabelMap.EcommercePleaseWait}....
</a>
- </fieldset>
</form>
</div>
+ </div>
+ </div>
</#if>

Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OnePageCheckoutProcess.ftl
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OnePageCheckoutProcess.ftl?rev=1819239&r1=1819238&r2=1819239&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OnePageCheckoutProcess.ftl (original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/order/OnePageCheckoutProcess.ftl Mon Dec 25 09:28:38 2017
@@ -19,7 +19,7 @@ under the License.

<div>
<#assign shoppingCart = sessionAttributes.shoppingCart! />
- <h2>${uiLabelMap.OrderCheckout}</h2>
+ <h3>${uiLabelMap.EcommerceOnePageCheckout}</h3>
<#if shoppingCart?has_content && shoppingCart.size() > 0>
<div id="checkoutPanel">

@@ -29,38 +29,31 @@ under the License.
</div>

<#-- ========================================================================================================================== -->
- <div id="shippingPanel" class="screenlet">
- <h3>${uiLabelMap.EcommerceStep} 2: ${uiLabelMap.FacilityShipping}</h3>
- <div id="shippingSummaryPanel" style="display: none;">
- <a href="javascript:void(0);" id="openShippingPanel" class="button">
- ${uiLabelMap.EcommerceClickHereToEdit}
- </a>
+ <div id="shippingPanel" class="card">
+ <div class="card-header bg-info text-white">${uiLabelMap.EcommerceStep} 2: ${uiLabelMap.FacilityShipping}</div>
+ <div id="shippingSummaryPanel" class="card-body" style="display: none;">
<div id="shippingCompleted">
+ <h4>${uiLabelMap.OrderShipTo}</h4>
+ <ul>
+ <li id="completedShipToAttn"></li>
+ <li id="completedShippingContactNumber"></li>
+ <li id="completedEmailAddress"></li>
+ </ul>
+ <h4>${uiLabelMap.EcommerceLocation}</h4>
<ul>
- <li>
- <h4>${uiLabelMap.OrderShipTo}</h4>
- <ul>
- <li id="completedShipToAttn"></li>
- <li id="completedShippingContactNumber"></li>
- <li id="completedEmailAddress"></li>
- </ul>
- </li>
- <li>
- <h4>${uiLabelMap.EcommerceLocation}</h4>
- <ul>
- <li id="completedShipToAddress1"></li>
- <li id="completedShipToAddress2"></li>
- <li id="completedShipToGeo"></li>
- </ul>
- </li>
+ <li id="completedShipToAddress1"></li>
+ <li id="completedShipToAddress2"></li>
+ <li id="completedShipToGeo"></li>
</ul>
</div>
+ <a href="javascript:void(0);" id="openShippingPanel" class="btn btn-outline-secondary">
+ ${uiLabelMap.EcommerceClickHereToEdit}
+ </a>
</div>

<#-- ============================================================= -->
- <div id="editShippingPanel" style="display: none;">
+ <div id="editShippingPanel" class="card-body" style="display: none;">
<form id="shippingForm" action="<@ofbizUrl>createUpdateShippingAddress</@ofbizUrl>" method="post">
- <fieldset>
<input type="hidden" id="shipToContactMechId" name="shipToContactMechId" value="${shipToContactMechId!}"/>
<input type="hidden" id="billToContactMechIdInShipingForm" name="billToContactMechId"
value="${billToContactMechId!}"/>
@@ -80,153 +73,145 @@ under the License.
<input type="hidden" name="keepAddressBook" value="N"/>
</#if>
<div id="shippingFormServerError" class="errorMessage"></div>
- <div>
- <span>
- <label for="firstName">${uiLabelMap.PartyFirstName}*
- <span id="advice-required-firstName" style="display: none" class="errorMessage">
- (${uiLabelMap.CommonRequired})
- </span>
- </label>
- <input id="firstName" name="firstName" class="required" type="text" value="${firstName!}"/>
- </span>
- <span>
+
+ <div class="form-row">
+ <div class="form-group col-md-6">
+ <label for="firstName">${uiLabelMap.PartyFirstName}*</label>
+ <span id="advice-required-firstName" style="display: none" class="errorMessage">
+ (${uiLabelMap.CommonRequired})
+ </span>
+ <input id="firstName" name="firstName" class="required form-control" type="text" value="${firstName!}"/>
+ </div>
+ <div class="form-group col-md-6">
<label for="lastName">${uiLabelMap.PartyLastName}*
- <span id="advice-required-lastName" style="display:none"class="errorMessage">
- (${uiLabelMap.CommonRequired})
- </span>
+ <span id="advice-required-lastName" style="display:none"class="errorMessage">
+ (${uiLabelMap.CommonRequired})
+ </span>
</label>
- <input id="lastName" name="lastName" class="required" type="text" value="${lastName!}"/>
- </span>
+ <input id="lastName" name="lastName" class="required form-control" type="text" value="${lastName!}"/>
+ </div>
</div>
- <div>
+ <div class="form-row">
<#if shipToTelecomNumber?has_content>
- <span>
+ <div class="form-group col-md-2">
<label for="shipToCountryCode">${uiLabelMap.CommonCountry}*
<span id="advice-required-shipToCountryCode" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input type="text" name="shipToCountryCode" class="required" id="shipToCountryCode"
- value="${shipToTelecomNumber.countryCode!}" size="5" maxlength="10"/> -
- </span>
- <span>
+ <input type="text" name="shipToCountryCode" class="form-control required" id="shipToCountryCode"
+ value="${shipToTelecomNumber.countryCode!}" maxlength="10"/>
+ </div>
+ <div class="form-group col-md-2">
<label for="shipToAreaCode">${uiLabelMap.PartyAreaCode}*
<span id="advice-required-shipToAreaCode" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input type="text" name="shipToAreaCode" class="required" id="shipToAreaCode"
- value="${shipToTelecomNumber.areaCode!}" size="5" maxlength="10"/> -
- </span>
- <span>
+ <input type="text" name="shipToAreaCode" class="form-control required" id="shipToAreaCode"
+ value="${shipToTelecomNumber.areaCode!}" maxlength="10"/>
+ </div>
+ <div class="form-group col-md-2">
<label for="shipToContactNumber">
${uiLabelMap.PartyContactNumber}*
<span id="advice-required-shipToContactNumber" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input type="text" name="shipToContactNumber" class="required" id="shipToContactNumber"
- value="${shipToTelecomNumber.contactNumber!}" size="10" maxlength="15"/> -
- </span>
- <span>
+ <input type="text" name="shipToContactNumber" class="form-control required" id="shipToContactNumber"
+ value="${shipToTelecomNumber.contactNumber!}" maxlength="15"/>
+ </div>
+ <div class="form-group col-md-2">
<label for="shipToExtension">${uiLabelMap.PartyExtension}</label>
- <input type="text" name="shipToExtension" id="shipToExtension" value="${shipToExtension!}"
+ <input type="text" class="form-control" name="shipToExtension" id="shipToExtension" value="${shipToExtension!}"
size="5" maxlength="10"/>
- </span>
+ </div>
<#else>
- <span>
+ <div class="form-group col-md-2">
<label for="shipToCountryCode">${uiLabelMap.CommonCountry}*
<span id="advice-required-shipToCountryCode" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input type="text" name="shipToCountryCode" class="required" id="shipToCountryCode"
- value="${parameters.shipToCountryCode!}" size="5" maxlength="10"/> -
- </span>
- <span>
+ <input type="text" name="shipToCountryCode" class="form-control required" id="shipToCountryCode"
+ value="${parameters.shipToCountryCode!}" maxlength="10"/> -
+ </div>
+ <div class="form-group col-md-2">
<label for="shipToAreaCode">${uiLabelMap.PartyAreaCode}*
<span id="advice-required-shipToAreaCode" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input type="text" name="shipToAreaCode" class="required" id="shipToAreaCode"
- value="${parameters.shipToAreaCode!}" size="5" maxlength="10"/> -
- </span>
- <span>
+ <input type="text" name="shipToAreaCode" class="form-control required" id="shipToAreaCode"
+ value="${parameters.shipToAreaCode!}" maxlength="10"/>
+ </div>
+ <div class="form-group col-md-4">
<label for="shipToContactNumber">${uiLabelMap.PartyContactNumber}*
<span id="advice-required-shipToContactNumber" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input type="text" name="shipToContactNumber" class="required" id="shipToContactNumber"
- value="${parameters.shipToContactNumber!}" size="10" maxlength="15"/> -
- </span>
- <span>
+ <input type="text" name="shipToContactNumber" class="form-control required" id="shipToContactNumber"
+ value="${parameters.shipToContactNumber!}" maxlength="15"/>
+ </div>
+ <div class="form-group col-md-2">
<label for="shipToExtension">${uiLabelMap.PartyExtension}</label>
- <input type="text" name="shipToExtension" id="shipToExtension"
- value="${parameters.shipToExtension!}" size="5" maxlength="10"/>
- </span>
+ <input type="text" class="form-control" name="shipToExtension" id="shipToExtension"
+ value="${parameters.shipToExtension!}" maxlength="10"/>
+ </div>
</#if>
- </div>
- <div>
- <span>
+ <div class="form-group col-md-4">
<label for="emailAddress">${uiLabelMap.PartyEmailAddress}*
<span id="advice-required-emailAddress" style="display:none"class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input id="emailAddress" name="emailAddress" class="required validate-email" maxlength="255"
- size="40" type="text" value="${emailAddress!}"/>
- </span>
+ <input id="emailAddress" name="emailAddress" class="form-control required validate-email" maxlength="255"
+ type="text" value="${emailAddress!}"/>
+ </div>
</div>
- <div>
- <span>
+ <div class="form-row">
+ <div class="form-group col-md-6">
<label for="shipToAddress1">${uiLabelMap.PartyAddressLine1}*
<span id="advice-required-shipToAddress1" class="custom-advice errorMessage" style="display:none">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input id="shipToAddress1" name="shipToAddress1" class="required" type="text"
- value="${shipToAddress1!}" maxlength="255" size="40"/>
- </span>
- </div>
- <div>
- <span>
+ <input id="shipToAddress1" name="shipToAddress1" class="form-control required" type="text"
+ value="${shipToAddress1!}" maxlength="255"/>
+ </div>
+ <div class="form-group col-md-6">
<label for="shipToAddress2">${uiLabelMap.PartyAddressLine2}</label>
- <input id="shipToAddress2" name="shipToAddress2" type="text" value="${shipToAddress2!}"
- maxlength="255" size="40"/>
- </span>
+ <input id="shipToAddress2" class="form-control" name="shipToAddress2" type="text" value="${shipToAddress2!}"
+ maxlength="255"/>
+ </div>
</div>
- <div>
- <span>
+ <div class="form-row">
+ <div class="form-group col-md-3">
<label for="shipToCity">${uiLabelMap.CommonCity}*
<span id="advice-required-shipToCity" class="custom-advice errorMessage" style="display:none">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input id="shipToCity" name="shipToCity" class="required" type="text" value="${shipToCity!}"
+ <input id="shipToCity" name="shipToCity" class="form-control required" type="text" value="${shipToCity!}"
maxlength="255" size="40"/>
- </span>
- </div>
- <div>
- <span>
+ </div>
+ <div class="form-group col-md-3">
<label for="shipToPostalCode">${uiLabelMap.PartyZipCode}*
<span id="advice-required-shipToPostalCode" class="custom-advice errorMessage"style="display:none">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input id="shipToPostalCode" name="shipToPostalCode" class="required" type="text"
+ <input id="shipToPostalCode" name="shipToPostalCode" class="form-control required" type="text"
value="${shipToPostalCode!}" size="12" maxlength="10"/>
- </span>
- </div>
- <div>
- <span>
+ </div>
+ <div class="form-group col-md-3">
<label for="shipToCountryGeoId">${uiLabelMap.CommonCountry}*
<span id="advice-required-shipToCountryGeo" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <select name="shipToCountryGeoId" id="shipToCountryGeoId">
+ <select name="shipToCountryGeoId" class="form-control" id="shipToCountryGeoId">
<#if shipToCountryGeoId??>
<option value="${shipToCountryGeoId!}">
${shipToCountryProvinceGeo?default(shipToCountryGeoId!)}
@@ -234,15 +219,13 @@ under the License.
</#if>
${screens.render("component://common/widget/CommonScreens.xml#countries")}
</select>
- </span>
- </div>
- <div id="shipToStates">
- <span>
+ </div>
+ <div class="form-group col-md-3">
<label for="shipToStateProvinceGeoId">${uiLabelMap.CommonState}*
<span id="advice-required-shipToStateProvinceGeoId" style="display:none"
class="errorMessage">(${uiLabelMap.CommonRequired})</span>
</label>
- <select id="shipToStateProvinceGeoId" name="shipToStateProvinceGeoId">
+ <select id="shipToStateProvinceGeoId" class="form-control" name="shipToStateProvinceGeoId">
<#if shipToStateProvinceGeoId?has_content>
<option value='${shipToStateProvinceGeoId!}'>
${shipToStateProvinceGeo?default(shipToStateProvinceGeoId!)}
@@ -252,96 +235,82 @@ under the License.
</#if>
${screens.render("component://common/widget/CommonScreens.xml#states")}
</select>
- </span>
+ </div>
</div>
- </fieldset>
- <fieldset>
- <a href="javascript:void(0);" class="button" id="savePartyAndShippingContact">
+ <a href="javascript:void(0);" class="btn btn-primary" id="savePartyAndShippingContact">
${uiLabelMap.EcommerceContinueToStep} 3
</a>
<a style="display:none" class="button" href="javascript:void(0);" id="processingShippingOptions">
${uiLabelMap.EcommercePleaseWait}....
</a>
- </fieldset>
</form>
</div>
</div>

<#-- ========================================================================================================================== -->
- <div id="shippingOptionPanel" class="screenlet">
- <h3>${uiLabelMap.EcommerceStep} 3: ${uiLabelMap.PageTitleShippingOptions}</h3>
- <div id="shippingOptionSummaryPanel" class="screenlet-body" style="display: none;">
- <a href="javascript:void(0);" id="openShippingOptionPanel"
- class="button">${uiLabelMap.EcommerceClickHereToEdit}</a>
+ <div id="shippingOptionPanel" class="card">
+ <div class="card-header bg-info text-white">${uiLabelMap.EcommerceStep} 3: ${uiLabelMap.PageTitleShippingOptions}</div>
+ <div id="shippingOptionSummaryPanel" class="card-body" style="display: none;">
<div class="completed" id="shippingOptionCompleted">
<ul>
<li>${uiLabelMap.CommonMethod}</li>
<li id="selectedShipmentOption"></li>
</ul>
</div>
+ <a href="javascript:void(0);" id="openShippingOptionPanel"
+ class="btn btn-outline-secondary">${uiLabelMap.EcommerceClickHereToEdit}</a>
</div>

<#-- ============================================================= -->
- <div id="editShippingOptionPanel" class="screenlet-body" style="display: none;">
+ <div id="editShippingOptionPanel" class="card-body" style="display: none;">
<form id="shippingOptionForm" action="<@ofbizUrl></@ofbizUrl>" method="post">
- <fieldset>
<div id="shippingOptionFormServerError" class="errorMessage"></div>
- <div>
+ <div class="form-group">
<label for="shipMethod">${uiLabelMap.OrderSelectShippingMethod}*
<span id="advice-required-shipping_method" class="custom-advice"
style="display:none"> (${uiLabelMap.CommonRequired})</span>
</label>
- <select id="shipMethod" name="shipMethod" class="required">
+ <select id="shipMethod" name="shipMethod" class="form-control required">
<option value=""></option>
</select>
</div>
- </fieldset>
- <fieldset>
- <a href="javascript:void(0);" class="button" id="saveShippingMethod">
+ <a href="javascript:void(0);" class="btn btn-primary" id="saveShippingMethod">
${uiLabelMap.EcommerceContinueToStep} 4
</a>
<a style="display:none" class="button" href="javascript:void(0);" id="processingBilling">
${uiLabelMap.EcommercePleaseWait}....
</a>
- </fieldset>
</form>
</div>
</div>

<#-- ========================================================================================================================== -->
- <div id="billingPanel" class="screenlet">
- <h3>${uiLabelMap.EcommerceStep} 4: ${uiLabelMap.AccountingBilling}</h3>
- <div id="billingSummaryPanel" class="screenlet-body" style="display: none;">
+ <div id="billingPanel" class="card">
+ <div class="card-header bg-info text-white">${uiLabelMap.EcommerceStep} 4: ${uiLabelMap.AccountingBilling}</div>
+ <div id="billingSummaryPanel" class="card-body" style="display: none;">
<a href="javascript:void(0);" id="openBillingPanel" class="button">${uiLabelMap.EcommerceClickHereToEdit}</a>
<div class="completed" id="billingCompleted">
+ <h4>${uiLabelMap.OrderBillUpTo}</h4>
<ul>
- <li>
- <h4>${uiLabelMap.OrderBillUpTo}</h4>
- <ul>
- <li id="completedBillToAttn"></li>
- <li id="completedBillToPhoneNumber"></li>
- <li id="paymentMethod"></li>
- <li id="completedCCNumber"></li>
- <li id="completedExpiryDate"></li>
- </ul>
- </li>
- <li>
- <h4>${uiLabelMap.EcommerceLocation}</h4>
- <ul>
- <li id="completedBillToAddress1"></li>
- <li id="completedBillToAddress2"></li>
- <li id="completedBillToGeo"></li>
- </ul>
- </li>
+ <li id="completedBillToAttn"></li>
+ <li id="completedBillToPhoneNumber"></li>
+ <li id="paymentMethod"></li>
+ <li id="completedCCNumber"></li>
+ <li id="completedExpiryDate"></li>
+ </ul>
+ <h4>${uiLabelMap.EcommerceLocation}</h4>
+ <ul>
+ <li id="completedBillToAddress1"></li>
+ <li id="completedBillToAddress2"></li>
+ <li id="completedBillToGeo"></li>
</ul>
</div>
</div>

<#-- ============================================================= -->

- <div id="editBillingPanel" class="screenlet-body" style="display: none;">
+ <div id="editBillingPanel" class="card-body" style="display: none;">
<form id="billingForm" class="theform" action="<@ofbizUrl></@ofbizUrl>" method="post">
- <fieldset class="col">
<input type="hidden" id="billToContactMechId" name="billToContactMechId" value="${billToContactMechId!}"/>
<input type="hidden" id="shipToContactMechIdInBillingForm" name="shipToContactMechId"
value="${shipToContactMechId!}"/>
@@ -363,36 +332,36 @@ under the License.
<input type="hidden" name="keepAddressBook" value="N"/>
</#if>
<div id="billingFormServerError" class="errorMessage"></div>
- <div>
- <span>
+ <div class="form-row">
+ <div class="form-group col-md-6">
<label for="firstNameOnCard">${uiLabelMap.PartyFirstName}*
<span id="advice-required-firstNameOnCard" style="display: none;" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input id="firstNameOnCard" name="firstNameOnCard" class="required" type="text"
+ <input id="firstNameOnCard" name="firstNameOnCard" class="form-control required" type="text"
value="${firstNameOnCard!}"/>
- </span>
- <span>
+ </div>
+ <div class="form-group col-md-6">
<label for="lastNameOnCard">${uiLabelMap.PartyLastName}*
<span id="advice-required-lastNameOnCard" style="display: none;"
class="errorMessage"> (${uiLabelMap.CommonRequired})</span>
</label>
- <input id="lastNameOnCard" name="lastNameOnCard" class="required" type="text"
+ <input id="lastNameOnCard" name="lastNameOnCard" class="form-control required" type="text"
value="${lastNameOnCard!}"/>
- </span>
+ </div>
</div>
- <div>
+ <div class="form-row">
<#if billToTelecomNumber?has_content>
- <span>
+ <div class="form-group col-md-3">
<label for="billToCountryCode">${uiLabelMap.CommonCountry}*
<span id="advice-required-billToCountryCode" style="display:none"
class="errorMessage"> (${uiLabelMap.CommonRequired})</span>
</label>
<input type="text" name="billToCountryCode" class="required" id="billToCountryCode"
value="${billToTelecomNumber.countryCode!}" size="5" maxlength="10"/> -
- </span>
- <span>
+ </div>
+ <div class="form-group col-md-3">
<label for="billToAreaCode">${uiLabelMap.PartyAreaCode}*
<span id="advice-required-billToAreaCode" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
@@ -400,8 +369,8 @@ under the License.
</label>
<input type="text" name="billToAreaCode" class="required" id="billToAreaCode"
value="${billToTelecomNumber.areaCode!}" size="5" maxlength="10"/> -
- </span>
- <span>
+ </div>
+ <div class="form-group col-md-3">
<label for="billToContactNumber">${uiLabelMap.PartyContactNumber}*
<span id="advice-required-billToContactNumber" style="display:none"
class="errorMessage"> (${uiLabelMap.CommonRequired})</span>
@@ -409,106 +378,100 @@ under the License.
<input type="text" name="billToContactNumber" class="required" id="billToContactNumber"
value="${billToTelecomNumber.contactNumber!}" size="10" maxlength="15"/> -
</span>
- <span>
+ <div class="form-group col-md-3">
<label for="billToExtension">${uiLabelMap.PartyExtension}</label>
<input type="text" name="billToExtension" id="billToExtension"
value="${billToExtension!}" size="5" maxlength="10"/>
- </span>
+ </div>
<#else>
- <span>
+ <div class="form-group col-md-3">
<label for="billToCountryCode">${uiLabelMap.CommonCountry}*
<span id="advice-required-billToCountryCode" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input type="text" name="billToCountryCode" class="required" id="billToCountryCode"
- value="${parameters.billToCountryCode!}" size="5" maxlength="10"/> -
- </span>
- <span>
+ <input type="text" name="billToCountryCode" class="form-control required" id="billToCountryCode"
+ value="${parameters.billToCountryCode!}" maxlength="10"/>
+ </div>
+ <div class="form-group col-md-3">
<label for="billToAreaCode">${uiLabelMap.PartyAreaCode}*
<span id="advice-required-billToAreaCode" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input type="text" name="billToAreaCode" class="required" id="billToAreaCode"
- value="${parameters.billToAreaCode!}" size="5" maxlength="10"/> -
- </span>
- <span>
+ <input type="text" name="billToAreaCode" class="form-control required" id="billToAreaCode"
+ value="${parameters.billToAreaCode!}" maxlength="10"/>
+ </div>
+ <div class="form-group col-md-3">
<label for="billToContactNumber">${uiLabelMap.PartyContactNumber}*
<span id="advice-required-billToContactNumber" style="display:none"
class="errorMessage"> (${uiLabelMap.CommonRequired})</span>
</label>
- <input type="text" name="billToContactNumber" class="required" id="billToContactNumber"
- value="${parameters.billToContactNumber!}" size="10" maxlength="15"/> -
- </span>
- <span>
+ <input type="text" name="billToContactNumber" class="form-control required" id="billToContactNumber"
+ value="${parameters.billToContactNumber!}" maxlength="15"/>
+ </div>
+ <div class="form-group col-md-3">
<label for="billToExtension">${uiLabelMap.PartyExtension}</label>
- <input type="text" name="billToExtension" id="billToExtension"
- value="${parameters.billToExtension!}" size="5" maxlength="10"/>
- </span>
+ <input type="text" class="form-control" name="billToExtension" id="billToExtension"
+ value="${parameters.billToExtension!}" maxlength="10"/>
+ </div>
</#if>
</div>
- <div>
- <span>
+ <div class="form-row">
+ <div class="form-group col-md-2">
<label for="cardType">${uiLabelMap.AccountingCardType}*
<span id="advice-required-cardType" style="display: none;" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <select name="cardType" id="cardType">
+ <select name="cardType" id="cardType" class="form-control">
<#if cardType?has_content>
<option label="${cardType!}" value="${cardType!}">${cardType!}</option>
</#if>
${screens.render("component://common/widget/CommonScreens.xml#cctypes")}
</select>
- </span>
- </div>
- <div>
- <span>
+ </div>
+ <div class="form-group col-md-4">
<label for="cardNumber">${uiLabelMap.AccountingCardNumber}*
<span id="advice-required-cardNumber" style="display: none;" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input id="cardNumber" name="cardNumber" class="required creditcard" type="text"
- value="${cardNumber!}" size="30" maxlength="16"/>
- </span>
- <span>
+ <input id="cardNumber" name="cardNumber" class="form-control required creditcard" type="text"
+ value="${cardNumber!}" maxlength="16"/>
+ </div>
+ <div class="form-group col-md-2">
<label for="billToCardSecurityCode">CVV2</label>
- <input id="billToCardSecurityCode" name="billToCardSecurityCode" size="4" type="text"
+ <input id="billToCardSecurityCode" class="form-control" name="billToCardSecurityCode" type="text"
maxlength="4" value=""/>
- </span>
- </div>
- <div>
- <span>
+ </div>
+ <div class="form-group col-md-2">
<label for="expMonth">${uiLabelMap.CommonMonth}:*
<span id="advice-required-expMonth" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <select id="expMonth" name="expMonth" class="required">
+ <select id="expMonth" name="expMonth" class="form-control required">
<#if expMonth?has_content>
<option label="${expMonth!}" value="${expMonth!}">${expMonth!}</option>
</#if>
${screens.render("component://common/widget/CommonScreens.xml#ccmonths")}
</select>
- </span>
- <span>
+ </div>
+ <div class="form-group col-md-2">
<label for="expYear">${uiLabelMap.CommonYear}:*
<span id="advice-required-expYear" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <select id="expYear" name="expYear" class="required">
+ <select id="expYear" name="expYear" class="form-control required">
<#if expYear?has_content>
<option value="${expYear!}">${expYear!}</option>
</#if>
${screens.render("component://common/widget/CommonScreens.xml#ccyears")}
</select>
- </span>
+ </div>
</div>
- </fieldset>
- <fieldset class="col">
<div>
<input class="checkbox" id="useShippingAddressForBilling" name="useShippingAddressForBilling"
type="checkbox" value="Y"
@@ -517,43 +480,46 @@ under the License.
</div>
<div id="billingAddress"
<#if useShippingAddressForBilling?has_content && useShippingAddressForBilling?default("")=="Y">style="display:none"</#if>>
- <div>
- <label for="billToAddress1">${uiLabelMap.PartyAddressLine1}*
- <span id="advice-required-billToAddress1" style="display:none"
+ <div class="form-row">
+ <div class="form-group col-md-6">
+ <label for="billToAddress1">${uiLabelMap.PartyAddressLine1}*
+ <span id="advice-required-billToAddress1" style="display:none"
class="errorMessage"> (${uiLabelMap.CommonRequired})
- </span>
- </label>
- <input id="billToAddress1" name="billToAddress1" class="required" size="30" type="text"
- value="${billToAddress1!}"/>
- </div>
- <div>
- <label for="billToAddress2">${uiLabelMap.PartyAddressLine2}</label>
- <input id="billToAddress2" name="billToAddress2" type="text" value="${billToAddress2!}" size="30"/>
+ </span>
+ </label>
+ <input id="billToAddress1" name="billToAddress1" class="form-control required" size="30" type="text"
+ value="${billToAddress1!}"/>
+ </div>
+ <div class="form-group col-md-6">
+ <label for="billToAddress2">${uiLabelMap.PartyAddressLine2}</label>
+ <input id="billToAddress2" name="billToAddress2" class="form-control" type="text" value="${billToAddress2!}" size="30"/>
+ </div>
</div>
- <div>
+ <div class="form-row">
+ <div class="form-group col-md-3">
<label for="billToCity">${uiLabelMap.CommonCity}*
<span id="advice-required-billToCity" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input id="billToCity" name="billToCity" class="required" type="text" value="${billToCity!}"/>
+ <input id="billToCity" name="billToCity" class="form-control required" type="text" value="${billToCity!}"/>
</div>
- <div>
+ <div class="form-group col-md-3">
<label for="billToPostalCode">${uiLabelMap.PartyZipCode}*
<span id="advice-required-billToPostalCode" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <input id="billToPostalCode" name="billToPostalCode" class="required" type="text"
- value="${billToPostalCode!}" size="12" maxlength="10"/>
+ <input id="billToPostalCode" name="billToPostalCode" class="form-control required" type="text"
+ value="${billToPostalCode!}" maxlength="10"/>
</div>
- <div>
+ <div class="form-group col-md-3">
<label for="billToCountryGeoId">${uiLabelMap.CommonCountry}*
<span id="advice-required-billToCountryGeoId" style="display:none" class="errorMessage">
(${uiLabelMap.CommonRequired})
</span>
</label>
- <select name="billToCountryGeoId" id="billToCountryGeoId">
+ <select name="billToCountryGeoId" id="billToCountryGeoId" class="form-control">
<#if billToCountryGeoId??>
<option value='${billToCountryGeoId!}'>
${billToCountryProvinceGeo?default(billToCountryGeoId!)}
@@ -562,12 +528,12 @@ under the License.
${screens.render("component://common/widget/CommonScreens.xml#countries")}
</select>
</div>
- <div>
+ <div class="form-group col-md-3">
<label for="billToStateProvinceGeoId">${uiLabelMap.CommonState}*
<span id="advice-required-billToStateProvinceGeoId" style="display:none"
class="errorMessage"> (${uiLabelMap.CommonRequired})</span>
</label>
- <select id="billToStateProvinceGeoId" name="billToStateProvinceGeoId">
+ <select id="billToStateProvinceGeoId" name="billToStateProvinceGeoId" class="form-control">
<#if billToStateProvinceGeoId?has_content>
<option value='${billToStateProvinceGeoId!}'>
${billToStateProvinceGeo?default(billToStateProvinceGeoId!)}
@@ -577,32 +543,27 @@ under the License.
</#if>
</select>
</div>
+ </div>
</div>
- </fieldset>
- <br style="clear:both;"/>
- <fieldset>
- <a href="javascript:void(0);" class="button" id="savePaymentAndBillingContact">
+ <a href="javascript:void(0);" class="btn btn-primary" id="savePaymentAndBillingContact">
${uiLabelMap.EcommerceContinueToStep} 5
</a>
<a href="javascript:void(0);" class="button" style="display: none;" id="processingOrderSubmitPanel">
${uiLabelMap.EcommercePleaseWait}....
</a>
- </fieldset>
</form>
</div>
</div>

<#-- ========================================================================================================================== -->
- <div class="screenlet">
- <h3>${uiLabelMap.EcommerceStep} 5: ${uiLabelMap.OrderSubmitOrder}</h3>
- <div id="orderSubmitPanel" style="display: none;">
+ <div class="card">
+ <div class="card-header bg-info text-white">${uiLabelMap.EcommerceStep} 5: ${uiLabelMap.OrderSubmitOrder}</div>
+ <div id="orderSubmitPanel" style="display: none;" class="card-body">
<form id="orderSubmitForm" action="<@ofbizUrl>onePageProcessOrder</@ofbizUrl>" method="post">
- <fieldset>
- <input type="button" id="processOrderButton" name="processOrderButton"
+ <input type="button" id="processOrderButton" class="btn btn-primary" name="processOrderButton"
value="${uiLabelMap.OrderSubmitOrder}"/>
<input type="button" style="display: none;" id="processingOrderButton" name="processingOrderButton"
value="${uiLabelMap.OrderSubmittingOrder}"/>
- </fieldset>
</form>
</div>
</div>
@@ -616,9 +577,9 @@ under the License.
<span>You currently have no items in your cart. Click
<a href="<@ofbizUrl>main</@ofbizUrl>">here</a> to view our products.
</span>
- <h3>${uiLabelMap.EcommerceStep} 2: ${uiLabelMap.FacilityShipping}</h3>
- <h3>${uiLabelMap.EcommerceStep} 3: ${uiLabelMap.PageTitleShippingOptions}</h3>
- <h3>${uiLabelMap.EcommerceStep} 4: ${uiLabelMap.AccountingBilling}</h3>
- <h3>${uiLabelMap.EcommerceStep} 5: ${uiLabelMap.OrderSubmitOrder}</h3>
+ <h4>${uiLabelMap.EcommerceStep} 2: ${uiLabelMap.FacilityShipping}</h4>
+ <h4>${uiLabelMap.EcommerceStep} 3: ${uiLabelMap.PageTitleShippingOptions}</h4>
+ <h4>${uiLabelMap.EcommerceStep} 4: ${uiLabelMap.AccountingBilling}</h4>
+ <h4>${uiLabelMap.EcommerceStep} 5: ${uiLabelMap.OrderSubmitOrder}</h4>
</div>
</div>