svn commit: r1818787 - in /ofbiz/ofbiz-plugins/trunk/eco
Locked
svn commit: r1818787 - in /ofbiz/ofbiz-plugins/trunk/eco
 
|
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 { |
«
Return to OFBiz - Commits
|
1 view|%1 views
| Free forum by Nabble | Edit this page |