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 Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

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

Deepak Dixit-5
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>&nbsp;&nbsp;-&nbsp;${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>
-                            <!-- productPromoActualPK ${productPromoActualPK.toString()} -->
-                        </#list>
-                    </ul>
-                    <ul>
-                        <#list cartLine.getQuantityUsedPerPromoFailedIter() as quantityUsedPerPromoFailedEntry>
-                            <#assign productPromoFailedPK = quantityUsedPerPromoFailedEntry.getKey()>
-                            <#assign failedQuantityUsed = quantityUsedPerPromoFailedEntry.getValue()>
-                            <#assign isQualifier = "ProductPromoCond" == productPromoFailedPK.getEntityName()>
-                            <li>&nbsp;&nbsp;-&nbsp;${uiLabelMap.CommonCouldBeUsedAs} <#if isQualifier>${uiLabelMap.CommonQualifier}<#else>${uiLabelMap.CommonBenefit}</#if> ${uiLabelMap.OrderOfPromotion} <a href="<@ofbizUrl>showPromotionDetails?productPromoId=${productPromoFailedPK.productPromoId}</@ofbizUrl>">${uiLabelMap.CommonDetails}</a></li>
-                            <!-- Total times checked but failed: ${failedQuantityUsed}, productPromoFailedPK ${productPromoFailedPK.toString()} -->
-                        </#list>
-                    </ul>
-                    <#list cartLine.getQuantityUsedPerPromoCandidateIter() as quantityUsedPerPromoCandidateEntry>
-                        <#assign productPromoCandidatePK = quantityUsedPerPromoCandidateEntry.getKey()>
-                        <#assign candidateQuantityUsed = quantityUsedPerPromoCandidateEntry.getValue()>
-                        <#assign isQualifier = "ProductPromoCond" == productPromoCandidatePK.getEntityName()>
-                        <!-- Left over not reset or confirmed, shouldn't happen: ${candidateQuantityUsed} Might be Used (Candidate) as <#if isQualifier>${uiLabelMap.CommonQualifier}<#else>${uiLabelMap.CommonBenefit}</#if> ${uiLabelMap.OrderOfPromotion} [${productPromoCandidatePK.productPromoId}] -->
-                        <!-- productPromoCandidatePK ${productPromoCandidatePK.toString()} -->
-                    </#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>
-                  &nbsp;&nbsp;
-                  <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>&nbsp;&nbsp;
+                  </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">
-                  &nbsp;&nbsp;
                   <a href="<@ofbizUrl>createCustRequestFromCart</@ofbizUrl>" class="btn btn-outline-secondary btn-sm">
                     ${uiLabelMap.OrderCreateCustRequestFromCart}
                   </a>&nbsp;&nbsp;&nbsp;&nbsp;
@@ -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() &gt; 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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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() &gt; 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>