Author: deepak
Date: Wed Dec 20 12:19:24 2017
New Revision: 1818787
URL: http://svn.apache.org/viewvc?rev=1818787&view=rev
Log:
Improved: Update markup of Product Detail page according to standard markup
given by Bootstrap v4.0.s (OFBIZ-10099)
Thanks Mayank Lambhate for your contribution.
Modified:
ofbiz/ofbiz-plugins/trunk/ecommerce/template/catalog/ProductDetail.ftl
ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/MiniSignUpForContactList.ftl
ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/css/custom.css
ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/images/ecommain.css
Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/template/catalog/ProductDetail.ftl
URL:
http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/catalog/ProductDetail.ftl?rev=1818787&r1=1818786&r2=1818787&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/template/catalog/ProductDetail.ftl
(original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/template/catalog/ProductDetail.ftl Wed
Dec 20 12:19:24 2017
@@ -334,7 +334,7 @@ $(function(){
</#if>
</#macro>
-<div id="productdetail">
+<div id="product-detail" class="card">
<#assign productAdditionalImage1 =
productContentWrapper.get("ADDITIONAL_IMAGE_1", "url")! />
<#assign productAdditionalImage2 =
productContentWrapper.get("ADDITIONAL_IMAGE_2", "url")! />
<#assign productAdditionalImage3 =
productContentWrapper.get("ADDITIONAL_IMAGE_3", "url")! />
@@ -345,22 +345,25 @@ $(function(){
<div id="paginationBox">
<#if previousProductId??>
<a href="<@ofbizCatalogAltUrl productCategoryId=categoryId!
productId=previousProductId!/>"
- class="buttontext">${uiLabelMap.CommonPrevious}</a> |
+ >${uiLabelMap.CommonPrevious}</a> |
</#if>
<a href="<@ofbizCatalogAltUrl productCategoryId=categoryId!/>"
class="linktext">${(category.categoryName)?default(category.description)!}</a>
<#if nextProductId??> |
<a href="<@ofbizCatalogAltUrl productCategoryId=categoryId!
productId=nextProductId!/>"
- class="buttontext">${uiLabelMap.CommonNext}</a>
+ >${uiLabelMap.CommonNext}</a>
</#if>
</div>
</#if>
<hr/>
- <div id="productImageBox">
- <#if productImageList?has_content>
+
+ <div class="card-body">
+ <div class="row">
+ <div class="col-lg-4">
+ <#if productImageList?has_content>
<#-- Product image/name/price -->
- <div id="detailImageBox">
+ <div class="detail-image">
<#assign productLargeImageUrl =
productContentWrapper.get("LARGE_IMAGE_URL", "url")! />
<#-- remove the next two lines to always display the virtual image
first (virtual images must exist) -->
<#if firstLargeImage?has_content>
@@ -379,19 +382,19 @@ $(function(){
</#if>
</div>
<#-- Show Image Approved -->
- <div id="additionalImageBox">
<#if productImageList?has_content>
- <#list productImageList as productImage>
- <div class="additionalImage">
- <a href="javascript:void(0);"
-
swapDetail="<@ofbizContentUrl>${productImage.productImage}</@ofbizContentUrl>">
- <img
src="<@ofbizContentUrl>${productImage.productImageThumb}</@ofbizContentUrl>"
- vspace="5" hspace="5" alt=""/>
- </a>
- </div>
- </#list>
+ <ul class="list-inline gallery">
+ <#list productImageList as productImage>
+ <li class="list-inline-item">
+ <a href="javascript:void(0);"
+
swapDetail="<@ofbizContentUrl>${productImage.productImage}</@ofbizContentUrl>">
+ <img
src="<@ofbizContentUrl>${productImage.productImageThumb}</@ofbizContentUrl>"
+ vspace="5" hspace="5" alt=""/>
+ </a>
+ </li>
+ </#list>
+ </ul>
</#if>
- </div>
<#else>
<#-- Product image/name/price -->
<div id="detailImageBox">
@@ -451,11 +454,11 @@ $(function(){
</#if>
</div>
</#if>
-
- <div id="productDetailBox">
+ </div>
+ <div class="col-lg-8">
<h2>${productContentWrapper.get("PRODUCT_NAME", "html")!}</h2>
- <div>${productContentWrapper.get("DESCRIPTION", "html")!}</div>
- <div>${product.productId!}</div>
+ <p>${productContentWrapper.get("DESCRIPTION", "html")!}</p>
+ <p>${product.productId!}</p>
<#-- example of showing a certain type of feature with the product -->
<#if sizeProductFeatureAndAppls?has_content>
<div>
@@ -627,7 +630,7 @@ $(function(){
<div> </div>
<div>
<a
href="javascript:popUpSmall('<@ofbizUrl>tellafriend?productId=${product.productId}<#if
categoryId??>&categoryId=${categoryId}/</#if></@ofbizUrl>','tellafriend');"
- class="buttontext">${uiLabelMap.CommonTellAFriend}</a>
+ >${uiLabelMap.CommonTellAFriend}</a>
</div>
<#if disFeatureList?? && 0 < disFeatureList.size()>
@@ -645,18 +648,18 @@ $(function(){
</#list>
<div> </div>
</#if>
- </div>
<div id="addItemForm">
<form method="post" action="<@ofbizUrl>additem</@ofbizUrl>"
name="addform" style="margin: 0;">
- <fieldset>
<#assign inStock = true />
<#assign commentEnable =
Static["org.apache.ofbiz.entity.util.EntityUtilProperties"]
.getPropertyValue("order", "order.item.comment.enable", delegator)>
<#if commentEnable.equals("Y")>
<#assign orderItemAttr =
Static["org.apache.ofbiz.entity.util.EntityUtilProperties"]
.getPropertyValue("order", "order.item.attr.prefix", delegator)>
- ${uiLabelMap.CommonComment} <input type="text"
name="${orderItemAttr}comment"/>
+ <div class="form-group">
+ <label for="${orderItemAttr}comment"> ${uiLabelMap.CommonComment}
</label> <input type="text" class="form-control" name="${orderItemAttr}comment"
id="${orderItemAttr}comment"/>
+ </div>
</#if>
<#-- Variant Selection -->
<#if "Y" == product.isVirtual!?upper_case>
@@ -666,7 +669,7 @@ $(function(){
<#if feature_index == 0>
<div>
${feature.description}:
- <select id="FT${feature.productFeatureTypeId}"
name="FT${feature.productFeatureTypeId}"
+ <select id="FT${feature.productFeatureTypeId}"
name="FT${feature.productFeatureTypeId}" class="form-control"
onchange="javascript:checkRadioButton();">
<option value="select" selected="selected">
${uiLabelMap.EcommerceSelectOption}
@@ -686,16 +689,16 @@ $(function(){
<input type="hidden" name="add_product_id"
value="${product.productId}"/>
<div id="addCart1" style="display:none;">
<span style="white-space:
nowrap;"><strong>${uiLabelMap.CommonQuantity}:</strong></span>
- <input type="text" size="5" name="quantity" value="1"/>
- <a href="javascript:javascript:addItem();"
class="buttontext"><span
+ <input type="text" class="form-control" size="5" name="quantity"
value="1"/>
+ <a href="javascript:javascript:addItem();" class="btn
btn-outline-secondary"><span
style="white-space:
nowrap;">${uiLabelMap.OrderAddToCart}</span></a>
</div>
<div id="addCart2" style="display:block;">
<span style="white-space:
nowrap;"><strong>${uiLabelMap.CommonQuantity}:</strong></span>
- <input type="text" size="5" value="1" disabled="disabled"/>
+ <input type="text" class="form-control" size="5" value="1"
disabled="disabled"/>
<a
href="javascript:showErrorAlert("${uiLabelMap.CommonErrorMessage2}","${uiLabelMap.CommonPleaseSelectAllFeaturesFirst}");"
- class="buttontext"><span style="white-space:
nowrap;">${uiLabelMap.OrderAddToCart}</span></a>
+ class="btn btn-outline-secondary"><span style="white-space:
nowrap;">${uiLabelMap.OrderAddToCart}</span></a>
</div>
</#if>
@@ -703,7 +706,7 @@ $(function(){
<#if variantTree?? && (variantTree.size() > 0)>
<#list featureSet as currentType>
<div>
- <select name="FT${currentType}"
onchange="javascript:getList(this.name, (this.selectedIndex-1), 1);">
+ <select name="FT${currentType}" class="form-control"
onchange="javascript:getList(this.name, (this.selectedIndex-1), 1);">
<option>${featureTypes.get(currentType)}</option>
</select>
</div>
@@ -726,7 +729,7 @@ $(function(){
<input type="hidden" name="add_product_id"
value="${product.productId}"/>
<#if mainProducts?has_content>
<input type="hidden" name="product_id" value=""/>
- <select name="productVariantId"
onchange="javascript:displayProductVirtualVariantId(this.value);">
+ <select name="productVariantId" class="form-control"
onchange="javascript:displayProductVirtualVariantId(this.value);">
<option value="">Select Unit Of Measure</option>
<#list mainProducts as mainProduct>
<option
value="${mainProduct.productId}">${mainProduct.uomDesc} :
${mainProduct.piecesIncluded}</option>
@@ -760,7 +763,7 @@ $(function(){
</#if>
<div id="add_amount" class="${hiddenStyle}">
<span style="white-space:
nowrap;"><strong>${uiLabelMap.CommonAmount}:</strong></span>
- <input type="text" size="5" name="add_amount" value=""/>
+ <input type="text" class="form-control" size="5"
name="add_amount" value=""/>
</div>
<#if "ASSET_USAGE" == product.productTypeId! ||
"ASSET_USAGE_OUT_IN" == product.productTypeId!>
<div>
@@ -776,33 +779,33 @@ $(function(){
</div>
<div>
<#--td nowrap="nowrap" align="right">Number<br />of days</td>
- <td><input type="textt" size="4"
name="reservLength"/></td></tr>
+ <td><input type="text" size="4"
name="reservLength"/></td></tr>
<tr><td> </td><td align="right"
nowrap="nowrap"> </td-->
- Number of days<input type="text" size="4" name="reservLength"
value=""/>
- Number of persons<input type="text" size="4"
name="reservPersons" value="2"/>
- Number of rooms<input type="text" size="5" name="quantity"
value="1"/>
+ Number of days<input type="text" class="form-control" size="4"
name="reservLength" value=""/>
+ Number of persons<input type="text" class="form-control"
size="4" name="reservPersons" value="2"/>
+ Number of rooms<input type="text" class="form-control"
size="5" name="quantity" value="1"/>
</div>
- <a href="javascript:addItem()" class="buttontext"><span
+ <a href="javascript:addItem()" class="btn
btn-outline-secondary"><span
style="white-space:
nowrap;">${uiLabelMap.OrderAddToCart}</span></a>
<#else>
- <span><input name="quantity" id="quantity" value="1" size="4"
maxLength="4" type="text"
- <#if "Y" ==
product.isVirtual!?upper_case>disabled="disabled"</#if>/></span><a
+ <div class="input-group"><input name="quantity"
class="form-control" id="quantity" value="1" size="4" maxLength="4" type="text"
+ <#if "Y" ==
product.isVirtual!?upper_case>disabled="disabled"</#if>/><span
class="input-group-btn"><a
href="javascript:addItem()" id="addToCart" name="addToCart"
- class="buttontext">${uiLabelMap.OrderAddToCart}</a>
+ class="btn
btn-outline-secondary">${uiLabelMap.OrderAddToCart}</a></span></div>
<@showUnavailableVarients/>
</#if>
<#else>
<#if productStore??>
<#if productStore.requireInventory?? && "N" ==
productStore.requireInventory>
- <span><input name="quantity" id="quantity" value="1" size="4"
maxLength="4" type="text"
- <#if "Y" ==
product.isVirtual!?upper_case>disabled="disabled"</#if>/></span><a
+ <div class="input-group"><input name="quantity"
class="form-control" id="quantity" value="1" size="4" maxLength="4" type="text"
+ <#if "Y" ==
product.isVirtual!?upper_case>disabled="disabled"</#if>/><a
href="javascript:addItem()" id="addToCart" name="addToCart"
- class="buttontext">${uiLabelMap.OrderAddToCart}</a>
+ class="btn
btn-outline-secondary">${uiLabelMap.OrderAddToCart}</a></div>
<@showUnavailableVarients/>
<#else>
- <span><input name="quantity" id="quantity" value="1" size="4"
maxLength="4" type="text"
- disabled="disabled"/></span><a
href="javascript:void(0);" disabled="disabled"
-
class="buttontext">${uiLabelMap.OrderAddToCart}</a><br/>
+ <div class="input-group"><input name="quantity"
class="form-control" id="quantity" value="1" size="4" maxLength="4" type="text"
+ disabled="disabled"/><a
href="javascript:void(0);" disabled="disabled"
+ class="btn
btn-outline-secondary">${uiLabelMap.OrderAddToCart}</a></div><br/>
<span>${uiLabelMap.ProductItemOutOfStock}<#if
product.inventoryMessage??>— ${product.inventoryMessage}</#if></span>
</#if>
</#if>
@@ -821,7 +824,6 @@ $(function(){
<div>minimum order quantity for
${productContentWrapper.get("PRODUCT_NAME", "html")!}
is ${minimumQuantity!}</div>
</#if>
- </fieldset>
</form>
</div>
<div>
@@ -834,7 +836,7 @@ $(function(){
<input type="hidden" name="product_id"
value="${product.productId}"/>
<input type="hidden" name="productStoreId"
value="${productStoreId}"/>
<input type="hidden" name="reservStart" value=""/>
- <select name="shoppingListId">
+ <select name="shoppingListId" class="form-control">
<#if shoppingLists?has_content>
<#list shoppingLists as shoppingList>
<option
value="${shoppingList.shoppingListId}">${shoppingList.listName}</option>
@@ -853,9 +855,10 @@ $(function(){
defaultDateTimeString="" localizedIconTitle=""
timeDropdown="" timeHourName="" classString="" hour1=""
hour2="" timeMinutesName="" minutes="" isTwelveHour=""
ampmName="" amSelected="" pmSelected=""
compositeType="" formName=""/> Number
of days
- <input type="text" size="4"
name="reservLength"/> <br/>Number of persons
- <input type="text" size="4" name="reservPersons"
value="1"/> Qty
- <input type="text" size="5" name="quantity" value="1"/>
+ <input type="text" size="4" class="form-control"
name="reservLength"/> <br/>Number of persons
+ <input type="text" size="4" class="form-control"
name="reservPersons" value="1"/> Qty
+ <div class="input-group">
+ <input type="text" size="5" class="form-control" name="quantity"
value="1"/>
<#elseif "ASSET_USAGE_OUT_IN" == product.productTypeId!>
${uiLabelMap.CommonStartDate}(yyyy-mm-dd)
<@htmlTemplate.renderDateTimeField name="reservStartStr"
event="" action="" value="${startDate}"
@@ -864,19 +867,22 @@ $(function(){
defaultDateTimeString="" localizedIconTitle=""
timeDropdown="" timeHourName="" classString="" hour1=""
hour2="" timeMinutesName="" minutes="" isTwelveHour=""
ampmName="" amSelected="" pmSelected=""
compositeType="" formName=""/> Number
of days
- <input type="text" size="4" name="reservLength"/>
+ <input type="text" class="form-control" size="4"
name="reservLength"/>
<input type="hidden" size="4" name="reservPersons"
value="1"/><br/>Qty
- <input type="text" size="5" name="quantity" value="1"/>
+ <div class="input-group">
+ <input type="text" class="form-control" size="5" name="quantity"
value="1"/>
<#else>
- <input type="text" size="5" name="quantity" value="1"/>
+ <div class="input-group">
+ <input type="text" class="form-control" size="5" name="quantity"
value="1"/>
<input type="hidden" name="reservStartStr" value=""/>
</#if>
- <a href="javascript:addShoplistSubmit();"
class="buttontext">${uiLabelMap.OrderAddToShoppingList}</a>
+ <a href="javascript:addShoplistSubmit();" class="btn
btn-outline-secondary">${uiLabelMap.OrderAddToShoppingList}</a>
+ </div>
</fieldset>
</form>
<#else> <br/>
${uiLabelMap.OrderYouMust}
- <a href="<@ofbizUrl>checkLogin/showcart</@ofbizUrl>"
class="buttontext">${uiLabelMap.CommonBeLogged}</a>
+ <a
href="<@ofbizUrl>checkLogin/showcart</@ofbizUrl>">${uiLabelMap.CommonBeLogged}</a>
${uiLabelMap.OrderToAddSelectedItemsToShoppingList}.
</#if>
</div>
@@ -892,6 +898,7 @@ $(function(){
<p> </p>
<#assign maxIndex = 7 />
<#assign indexer = 0 />
+ <ul class="list-inline">
<#list imageKeys as key>
<#assign swatchProduct = imageMap.get(key) />
<#if swatchProduct?has_content && indexer < maxIndex>
@@ -902,13 +909,17 @@ $(function(){
<#if !imageUrl?string?has_content>
<#assign imageUrl = "/images/defaultImage.jpg" />
</#if>
- <a
href="javascript:getList('FT${featureOrderFirst}','${indexer}',1);"
class="linktext">${key}</a>
- <a
href="javascript:getList('FT${featureOrderFirst}','${indexer}',1);"><img
-
src="<@ofbizContentUrl>${contentPathPrefix!}${imageUrl}</@ofbizContentUrl>"
class="cssImgSmall" alt=""/></a>
- <br/>
+ <li class="list-inline-item">
+ <a
href="javascript:getList('FT${featureOrderFirst}','${indexer}',1);"
class="linktext">${key}</a>
+ <a
href="javascript:getList('FT${featureOrderFirst}','${indexer}',1);">
+ <img
src="<@ofbizContentUrl>${contentPathPrefix!}${imageUrl}</@ofbizContentUrl>"
class="cssImgSmall" alt=""/>
+ </a>
+ <li/>
</#if>
<#assign indexer = indexer + 1 />
</#list>
+ </ul>
+
<#if (indexer > maxIndex)>
<div><strong>${uiLabelMap.ProductMoreOptions}</strong></div>
</#if>
@@ -930,6 +941,8 @@ $(function(){
<div>${productContentWrapper.get("LONG_DESCRIPTION", "html")!}</div>
<div>${productContentWrapper.get("WARNINGS", "html")!}</div>
</div>
+ </div>
+ </div>
<#-- Any attributes/etc may go here -->
@@ -1081,8 +1094,10 @@ $(function(){
<p>
<form method="post" action="<@ofbizUrl>addProductTags</@ofbizUrl>"
name="addProductTags">
<input type="hidden" name="productId" value="${product.productId!}"/>
- <input class="inputProductTags" type="text" value=""
name="productTags" id="productTags" size="40"/>
- <input class="buttonProductTags" type="submit"
value="${uiLabelMap.EcommerceAddTags}" name="addTag"/>
+ <div class="input-group">
+ <input class="inputProductTags form-control" type="text" value=""
name="productTags" id="productTags" size="40"/>
+ <span class="input-group-btn"><input class="buttonProductTags btn
btn-outline-secondary" type="submit" value="${uiLabelMap.EcommerceAddTags}"
name="addTag"/></span>
+ </div>
</form>
<span>${uiLabelMap.EcommerceAddTagsDetail}</span>
</p>
Modified:
ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/MiniSignUpForContactList.ftl
URL:
http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/MiniSignUpForContactList.ftl?rev=1818787&r1=1818786&r2=1818787&view=diff
==============================================================================
---
ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/MiniSignUpForContactList.ftl
(original)
+++
ofbiz/ofbiz-plugins/trunk/ecommerce/template/customer/MiniSignUpForContactList.ftl
Wed Dec 20 12:19:24 2017
@@ -84,7 +84,7 @@ under the License.
</div>
<input type="submit" class="form-control btn btn-outline-secondary"
value="${uiLabelMap.EcommerceSubscribe}"/>
<input type="button" class"form-control btn btn-outline-secondary"
value="${uiLabelMap.EcommerceUnsubscribe}"
- onclick="javascript:unsubscribeByContactMech();"/>ss
+ onclick="javascript:unsubscribeByContactMech();"/>
</form>
<#else>
<#-- Not logged in so ask them to log in and then sign up or clear the
user association -->
Modified: ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/css/custom.css
URL:
http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/css/custom.css?rev=1818787&r1=1818786&r2=1818787&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/css/custom.css
(original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/css/custom.css Wed Dec
20 12:19:24 2017
@@ -43,4 +43,19 @@
.products-card .card-title a {
white-space: normal;
+}
+
+.gallery {
+ white-space: nowrap;
+ margin-top: 10px;
+ overflow-x: auto;
+}
+.detail-image {
+ height: 300px!important;
+ width: auto!important;
+ max-width: 300px!important;
+ }
+
+.quick-links a, #paginationBox a {
+color: #000000;
}
\ No newline at end of file
Modified:
ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/images/ecommain.css
URL:
http://svn.apache.org/viewvc/ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/images/ecommain.css?rev=1818787&r1=1818786&r2=1818787&view=diff
==============================================================================
--- ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/images/ecommain.css
(original)
+++ ofbiz/ofbiz-plugins/trunk/ecommerce/webapp/ecommerce/images/ecommain.css
Wed Dec 20 12:19:24 2017
@@ -59,8 +59,6 @@ dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em;}
-a, a:link, a:visited {text-decoration: none; color:#1C334D; font-weight:700;}
-a:hover {text-decoration: none; color:#111;}
abbr,acronym {border-bottom: 1px dotted; cursor: help;}
del {text-decoration: line-through;}
ins {text-decoration: overline;}
@@ -115,26 +113,6 @@ input[type=radio],input[type=checkbox] {
font-size:8pt;
}
-input[type=submit],input[type=button],input[type=reset] {
-background:#FFF;
-border:#999 solid 1px;
-color:#1C334D;
-font-size:8pt;
-font-weight:700;
-margin:2px;
-}
-
-input[type=submit]:hover,
-input[type=button]:hover {
-color:red;
-cursor:pointer;
-text-decoration:underline;
-}
-
-input[type=file] {
-font-size:11px;
-}
-
.endcolumns {
clear:both;
height:0;
@@ -434,15 +412,6 @@ border-width:0;
padding:4px;
}
-.button {
-background:#ddd;
-border-color:#99C;
-border-style:outset;
-border-width:2px;
-padding-left:5px;
-padding-right:5px;
-}
-
.tableheadtext {
color:#000;
font-weight:700;
@@ -773,11 +742,7 @@ height:50px;
}
.productsummary-container {
-border-top:#999 solid 1px;
-margin-bottom:5px;
margin-top:10px;
-position:relative;
-overflow: hidden;
}
.productsummary {
