You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by as...@apache.org on 2009/11/13 15:38:36 UTC
svn commit: r835861 - in /ofbiz/trunk:
framework/images/webapp/images/ecommain.css
specialpurpose/ecommerce/webapp/ecommerce/catalog/productdetail.ftl
Author: ashish
Date: Fri Nov 13 14:38:35 2009
New Revision: 835861
URL: http://svn.apache.org/viewvc?rev=835861&view=rev
Log:
Applied patch from jira issue OFBIZ-2984 - HTML cleanup for Product Detail page.
In this patch table are removed for non tabular data and used div, and add CSS code for layout issue that created due to this cleanup.
Thanks Rohit for the contribution.
Modified:
ofbiz/trunk/framework/images/webapp/images/ecommain.css
ofbiz/trunk/specialpurpose/ecommerce/webapp/ecommerce/catalog/productdetail.ftl
Modified: ofbiz/trunk/framework/images/webapp/images/ecommain.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/ecommain.css?rev=835861&r1=835860&r2=835861&view=diff
==============================================================================
--- ofbiz/trunk/framework/images/webapp/images/ecommain.css (original)
+++ ofbiz/trunk/framework/images/webapp/images/ecommain.css Fri Nov 13 14:38:35 2009
@@ -1029,3 +1029,46 @@
#microcart li#googleCheckoutEnabled img, #microcart li#googleCheckoutDisabled img {
width: 145px;
}
+/*===================For ProductDetail page.===========================================*/
+#productdetail {
+width: 670px;
+display: inline-block;
+}
+
+#productImageBox {
+width: 770px;
+border-top: 1px #BBBBBB solid;
+display: inline-block;
+}
+div.additionalImage {
+width: 200px;
+}
+
+#detailImageBox {
+float: left;
+height: 800px;
+width: 272px;
+}
+#additionalImageBox {
+float: left;
+width: 272px;
+}
+
+#productDetailBox {
+float: right;
+height: 266px;
+padding: 266px 0;
+width: 200px;
+}
+
+#addItemForm {
+clear: both;
+width : 600px;
+border-top: 1px #BBBBBB solid;
+}
+
+#paginationBox {
+width : 600px;
+border-top: 1px #BBBBBB solid;
+border-bottom: 1px #BBBBBB solid;
+}
\ No newline at end of file
Modified: ofbiz/trunk/specialpurpose/ecommerce/webapp/ecommerce/catalog/productdetail.ftl
URL: http://svn.apache.org/viewvc/ofbiz/trunk/specialpurpose/ecommerce/webapp/ecommerce/catalog/productdetail.ftl?rev=835861&r1=835860&r2=835861&view=diff
==============================================================================
--- ofbiz/trunk/specialpurpose/ecommerce/webapp/ecommerce/catalog/productdetail.ftl (original)
+++ ofbiz/trunk/specialpurpose/ecommerce/webapp/ecommerce/catalog/productdetail.ftl Fri Nov 13 14:38:35 2009
@@ -86,7 +86,7 @@
return;
} else {
if (isVirtual(document.addform.add_product_id.value)) {
- document.location = '<@o...@ofbizUrl>' + document.addform.add_product_id.value;
+ document.location = '<@o...@ofbizUrl>' + document.addform.add_product_id.value;
return;
} else {
document.addform.submit();
@@ -268,11 +268,9 @@
<#assign productAdditionalImage3 = productContentWrapper.get("ADDITIONAL_IMAGE_3")?if_exists />
<#assign productAdditionalImage4 = productContentWrapper.get("ADDITIONAL_IMAGE_4")?if_exists />
-<table border="0" cellpadding="2" cellspacing="0" width="100%">
<#-- Category next/previous -->
<#if category?exists>
- <tr>
- <td colspan="2" align="right">
+ <div id="paginationBox">
<#if previousProductId?exists>
<a href="<@o...@ofbizUrl>" class="buttontext">${uiLabelMap.CommonPrevious}</a> |
</#if>
@@ -280,51 +278,49 @@
<#if nextProductId?exists>
| <a href="<@o...@ofbizUrl>" class="buttontext">${uiLabelMap.CommonNext}</a>
</#if>
- </td>
- </tr>
+ </div>
</#if>
- <tr><td colspan="2"><hr /></td></tr>
-
+<hr />
+<div id="productImageBox">
<#-- Product image/name/price -->
- <tr>
- <td valign="top" width="0">
+ <div id="detailImageBox">
<#assign productLargeImageUrl = productContentWrapper.get("LARGE_IMAGE_URL")?if_exists />
<#-- remove the next two lines to always display the virtual image first (virtual images must exist) -->
<#if firstLargeImage?has_content>
<#assign productLargeImageUrl = firstLargeImage />
</#if>
<#if productLargeImageUrl?string?has_content>
- <a href="javascript:popupDetail();"><img id="detailImage" src="<@o...@ofbizContentUrl>" name="mainImage" vspace="5" hspace="5" border="0" width="200" /></a>
+ <a href="javascript:popupDetail();"><img id="detailImage" src="<@o...@ofbizContentUrl>" name="mainImage" vspace="5" hspace="5" width="200" alt="" /></a>
<input type="hidden" id="originalImage" name="originalImage" value="<@o...@ofbizContentUrl>" />
</#if>
<#if !productLargeImageUrl?string?has_content>
- <img id="detailImage" src="/images/defaultImage.jpg" name="mainImage" />
+ <img id="detailImage" src="/images/defaultImage.jpg" name="mainImage" alt="" />
</#if>
- </td>
- <td>
+ </div>
+ <div id="additionalImageBox">
<#if productAdditionalImage1?string?has_content>
<div class="additionalImage">
- <a href="javascript:void(0);" swapDetail="<@o...@ofbizContentUrl>"><img src="<@o...@ofbizContentUrl>" vspace="5" hspace="5" border="0" width="200" /></a>
- </div><br />
+ <a href="javascript:void(0);" swapDetail="<@o...@ofbizContentUrl>"><img src="<@o...@ofbizContentUrl>" vspace="5" hspace="5" width="200" alt="" /></a>
+ </div>
</#if>
<#if productAdditionalImage2?string?has_content>
<div class="additionalImage">
- <a href="javascript:void(0);" swapDetail="<@o...@ofbizContentUrl>"><img src="<@o...@ofbizContentUrl>" vspace="5" hspace="5" border="0" width="200" /></a>
- </div><br />
+ <a href="javascript:void(0);" swapDetail="<@o...@ofbizContentUrl>"><img src="<@o...@ofbizContentUrl>" vspace="5" hspace="5" width="200" alt="" /></a>
+ </div>
</#if>
<#if productAdditionalImage3?string?has_content>
<div class="additionalImage">
- <a href="javascript:void(0);" swapDetail="<@o...@ofbizContentUrl>"><img src="<@o...@ofbizContentUrl>" vspace="5" hspace="5" border="0" width="200" /></a>
+ <a href="javascript:void(0);" swapDetail="<@o...@ofbizContentUrl>"><img src="<@o...@ofbizContentUrl>" vspace="5" hspace="5" width="200" alt="" /></a>
</div>
</#if>
<#if productAdditionalImage4?string?has_content>
<div class="additionalImage">
- <a href="javascript:void(0);" swapDetail="<@o...@ofbizContentUrl>"><img src="<@o...@ofbizContentUrl>" vspace="5" hspace="5" border="0" width="200" /></a>
+ <a href="javascript:void(0);" swapDetail="<@o...@ofbizContentUrl>"><img src="<@o...@ofbizContentUrl>" vspace="5" hspace="5" width="200" alt="" /></a>
</div>
</#if>
- </td>
- <td align="right" valign="top">
+ </div>
+ <div id="productDetailBox">
<h2>${productContentWrapper.get("PRODUCT_NAME")?if_exists}</h2>
<div>${productContentWrapper.get("DESCRIPTION")?if_exists}</div>
<div>${product.productId?if_exists}</div>
@@ -362,7 +358,7 @@
<div>${uiLabelMap.ProductSpecialPromoPrice}: <span class="basePrice"><@ofbizCurrency amount=price.specialPromoPrice isoCode=price.currencyUsed /></span></div>
</#if>
<div>
- <b>
+ <strong>
<#if price.isSale?exists && price.isSale>
<span class="salePrice">${uiLabelMap.OrderOnSale}!</span>
<#assign priceStyle = "salePrice" />
@@ -375,7 +371,7 @@
<#if product.reservNthPPPerc?exists &&product.reservNthPPPerc != 0><br /><span class="${priceStyle}">${uiLabelMap.ProductReservNthPPPerc} <#if !product.reserv2ndPPPerc?exists || product.reserv2ndPPPerc == 0>${uiLabelMap.ProductReservSecond} <#else> ${uiLabelMap.ProductReservThird} </#if> ${uiLabelMap.CommonUntil} ${product.reservMaxPersons?if_exists}, ${uiLabelMap.ProductEach}: <@ofbizCurrency amount=product.reservNthPPPerc*price.price/100 isoCode=price.currencyUsed /></span></#if>
<#if (!product.reserv2ndPPPerc?exists || product.reserv2ndPPPerc == 0) && (!product.reservNthPPPerc?exists || product.reservNthPPPerc == 0)><br />${uiLabelMap.ProductMaximum} ${product.reservMaxPersons?if_exists} ${uiLabelMap.ProductPersons}.</#if>
</#if>
- </b>
+ </strong>
</div>
<#if price.listPrice?exists && price.price?exists && price.price < price.listPrice>
<#assign priceSaved = price.listPrice - price.price />
@@ -430,7 +426,7 @@
</#if>
<#if daysToShip?exists>
- <div><b>${uiLabelMap.ProductUsuallyShipsIn} <font color="red">${daysToShip}</font> ${uiLabelMap.CommonDays}!<b></div>
+ <div><strong>${uiLabelMap.ProductUsuallyShipsIn} ${daysToShip} ${uiLabelMap.CommonDays}!</strong></div>
</#if>
<#-- show tell a friend details only in ecommerce application -->
@@ -438,7 +434,6 @@
<div>
<a href="javascript:popUpSmall('<@o...@ofbizUrl>','tellafriend');" class="buttontext">${uiLabelMap.CommonTellAFriend}</a>
</div>
- <br />
<#if disFeatureList?exists && 0 < disFeatureList.size()>
<p> </p>
@@ -450,8 +445,11 @@
</#list>
<div> </div>
</#if>
-
+ </div>
+</div>
+ <div id="addItemForm">
<form method="post" action="<@o...@ofbizUrl>" name="addform" style="margin: 0;">
+ <fieldset>
<#assign inStock = true />
<#-- Variant Selection -->
<#if product.isVirtual?if_exists?upper_case == "Y">
@@ -470,13 +468,13 @@
</#list>
<input type="hidden" name="add_product_id" value="${product.productId}" />
<div id="addCart1" style="display:none;>
- <span style="white-space: nowrap;"><b>${uiLabelMap.CommonQuantity}:</b></span>
+ <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 style="white-space: nowrap;">${uiLabelMap.OrderAddToCart}</span></a>
</div>
<div id="addCart2" style="display:block;>
- <span style="white-space: nowrap;"><b>${uiLabelMap.CommonQuantity}:</b></span>
+ <span style="white-space: nowrap;"><strong>${uiLabelMap.CommonQuantity}:</strong></span>
<input type="text" size="5" value="1" disabled="disabled" />
<a href="javascript:alert('Please select all features first');" class="buttontext"><span style="white-space: nowrap;">${uiLabelMap.OrderAddToCart}</span></a>
@@ -493,12 +491,12 @@
</#list>
<input type="hidden" name="add_product_id" value="NULL"/>
<div>
- <b><span id="product_id_display"> </span></b>
- <b><div id="variant_price_display"> </div></b>
+ <strong><span id="product_id_display"> </span></strong>
+ <strong><div id="variant_price_display"> </div></strong>
</div>
<#else>
<input type="hidden" name="add_product_id" value="NULL"/>
- <div><b>${uiLabelMap.ProductItemOutOfStock}.</b></div>
+ <div><strong>${uiLabelMap.ProductItemOutOfStock}.</strong></div>
<#assign inStock = false />
</#if>
</#if>
@@ -508,14 +506,13 @@
<#assign isStoreInventoryRequired = Static["org.ofbiz.product.store.ProductStoreWorker"].isStoreInventoryRequired(request, product) />
<#if isStoreInventoryNotAvailable>
<#if isStoreInventoryRequired>
- <div><b>${uiLabelMap.ProductItemOutOfStock}.</b></div>
+ <div><strong>${uiLabelMap.ProductItemOutOfStock}.</strong></div>
<#assign inStock = false />
<#else>
- <div><b>${product.inventoryMessage?if_exists}</b></div>
+ <div><strong>${product.inventoryMessage?if_exists}</strong></div>
</#if>
</#if>
</#if>
- </td></tr><tr><td colspan="2" align="right">
<#-- check to see if introductionDate hasnt passed yet -->
<#if product.introductionDate?exists && nowTimestamp.before(product.introductionDate)>
<p> </p>
@@ -532,17 +529,19 @@
<#assign hiddenStyle = "hidden"/>
</#if>
<div id="add_amount" class="${hiddenStyle}">
- <span style="white-space: nowrap;"><b>${uiLabelMap.CommonAmount}:</b></span>
+ <span style="white-space: nowrap;"><strong>${uiLabelMap.CommonAmount}:</strong></span>
<input type="text" size="5" name="add_amount" value=""/>
</div>
<#if product.productTypeId?if_exists == "ASSET_USAGE">
- <table width="100%"><tr>
- <td nowrap align="right">Start Date<br/>(yyyy-mm-dd)</td><td><input type="text" size="10" name="reservStart"/><a href="javascript:call_cal_notime(document.addform.reservStart, '${nowTimestamp.toString().substring(0,10)}');"><img src="<@o...@ofbizContentUrl>" width="16" height="16" border="0" alt="Calendar"/></a></td>
- <td nowrap align="right">End Date<br/>(yyyy-mm-dd)</td><td><input type="text" size="10" name="reservEnd"/><a href="javascript:call_cal_notime(document.addform.reservEnd, '${nowTimestamp.toString().substring(0,10)}');"><img src="<@o...@ofbizContentUrl>" width="16" height="16" border="0" alt="Calendar"/></a></td></tr>
- <tr>
+ <div class="inline">
+ <label>Start Date(yyyy-mm-dd)</label><input type="text" size="10" name="reservStart"/><a href="javascript:call_cal_notime(document.addform.reservStart, '${nowTimestamp.toString().substring(0,10)}');"><img src="<@o...@ofbizContentUrl>" width="16" height="16" alt="Calendar" alt="" /></a>
+ <label>End Date(yyyy-mm-dd)</label><input type="text" size="10" name="reservEnd"/><a href="javascript:call_cal_notime(document.addform.reservEnd, '${nowTimestamp.toString().substring(0,10)}');"><img src="<@o...@ofbizContentUrl>" width="16" height="16" alt="Calendar" alt="" /></a>
+ </div>
+ <div>
<#--td nowrap align="right">Number<br/>of days</td><td><input type="textt" size="4" name="reservLength"/></td></tr><tr><td> </td><td align="right" nowrap> </td-->
- <td nowrap align="right">Number of persons</td><td><input type="text" size="4" name="reservPersons" value="2"/></td>
- <td nowrap align="right">Number of rooms</td><td><input type="text" size="5" name="quantity" value="1"/></td></tr></table>
+ Number of persons<input type="text" size="4" name="reservPersons" value="2"/>
+ Number of rooms<input type="text" size="5" name="quantity" value="1"/>
+ </div>
<#else>
<input type="text" size="5" name="quantity" value="1"<#if product.isVirtual?if_exists?upper_case == "Y"> disabled="disabled"</#if> />
</#if>
@@ -550,11 +549,14 @@
<a href="javascript:addItem()" class="buttontext"><span style="white-space: nowrap;">${uiLabelMap.OrderAddToCart}</span></a>
</#if>
</#if>
+ </fieldset>
</form>
+ </div>
<div>
<#if sessionAttributes.userLogin?has_content && sessionAttributes.userLogin.userLoginId != "anonymous">
<hr />
<form name="addToShoppingList" method="post" action="<@ofbizUrl>addItemToShoppingList<#if requestAttributes._CURRENT_VIEW_?exists>/${requestAttributes._CURRENT_VIEW_}</#...@ofbizUrl>">
+ <fieldset>
<input type="hidden" name="productId" value="${product.productId}" />
<input type="hidden" name="product_id" value="${product.productId}" />
<input type="hidden" name="productStoreId" value="${productStoreId}" />
@@ -570,12 +572,13 @@
</select>
<#if product.productTypeId?if_exists == "ASSET_USAGE">
- <table><tr><td> </td><td align="right">${uiLabelMap.CommonStartDate} (yyyy-mm-dd)</td><td><input type="text" size="10" name="reservStartStr" ></td><td>Number of days</td><td><input type="text" size="4" name="reservLength"></td><td> </td><td align="right">Number of persons</td><td><input type="text" size="4" name="reservPersons" value="1"></td><td align="right">Qty </td><td><input type="text" size="5" name="quantity" value="1"></td></tr></table>
+ ${uiLabelMap.CommonStartDate} (yyyy-mm-dd)<input type="text" size="10" name="reservStartStr" >Number of days<input type="text" size="4" name="reservLength"> Number of persons<input type="text" size="4" name="reservPersons" value="1">Qty <input type="text" size="5" name="quantity" value="1">
<#else>
<input type="text" size="5" name="quantity" value="1" />
<input type="hidden" name="reservStartStr" value= "" />
</#if>
<a href="javascript:addShoplistSubmit();" class="buttontext">${uiLabelMap.OrderAddToShoppingList}</a>
+ </fieldset>
</form>
<#else> <br />
${uiLabelMap.OrderYouMust} <a href="<@o...@ofbizUrl>" class="buttontext">${uiLabelMap.CommonBeLogged}</a>
@@ -584,7 +587,7 @@
</div>
<#-- Prefill first select box (virtual products only) -->
<#if variantTree?exists && 0 < variantTree.size()>
- <script language="JavaScript" type="text/javascript">eval("list" + "${featureOrderFirst}" + "()");</script>
+ <script type="text/javascript">eval("list" + "${featureOrderFirst}" + "()");</script>
</#if>
<#-- Swatches (virtual products only) -->
@@ -592,8 +595,6 @@
<#assign imageKeys = variantSample.keySet() />
<#assign imageMap = variantSample />
<p> </p>
- <table cellspacing="0" cellpadding="0">
- <tr>
<#assign maxIndex = 7 />
<#assign indexer = 0 />
<#list imageKeys as key>
@@ -606,23 +607,16 @@
<#if !imageUrl?string?has_content>
<#assign imageUrl = "/images/defaultImage.jpg" />
</#if>
- <td align="center" valign="bottom">
- <a href="javascript:getList('FT${featureOrderFirst}','${indexer}',1);"><img src="<@o...@ofbizContentUrl>" border="0" width="60" height="60" /></a>
+ <a href="javascript:getList('FT${featureOrderFirst}','${indexer}',1);"><img src="<@o...@ofbizContentUrl>" width="60" height="60" alt="" /></a>
<br />
<a href="javascript:getList('FT${featureOrderFirst}','${indexer}',1);" class="linktext">${key}</a>
- </td>
</#if>
<#assign indexer = indexer + 1 />
</#list>
<#if (indexer > maxIndex)>
- <div><b>${uiLabelMap.ProductMoreOptions}</b></div>
+ <div><strong>${uiLabelMap.ProductMoreOptions}</strong></div>
</#if>
- </tr>
- </table>
</#if>
- </td>
- </tr>
-</table>
<#-- Digital Download Files Associated with this Product -->
<#if downloadProductContentAndInfoList?has_content>
@@ -648,43 +642,25 @@
<#if averageRating?exists && (averageRating > 0) && numRatings?exists && (numRatings > 1)>
<div>${uiLabelMap.OrderAverageRating}: ${averageRating} <#if numRatings?exists>(${uiLabelMap.CommonFrom} ${numRatings} ${uiLabelMap.OrderRatings})</#if></div>
</#if>
- <tr><td colspan="2"><hr /></td></tr>
+<hr />
<#if productReviews?has_content>
<#list productReviews as productReview>
<#assign postedUserLogin = productReview.getRelatedOne("UserLogin") />
<#assign postedPerson = postedUserLogin.getRelatedOne("Person")?if_exists />
- <table border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td>
- <div><b>${uiLabelMap.CommonBy}: </b><#if productReview.postedAnonymous?default("N") == "Y"> ${uiLabelMap.OrderAnonymous}<#else> ${postedPerson.firstName} ${postedPerson.lastName} </#if></div>
- </td>
- <td>
- <div><b>${uiLabelMap.CommonAt}: </b>${productReview.postedDateTime?if_exists} </div>
- </td>
- <td>
- <div><b>${uiLabelMap.OrderRanking}: </b>${productReview.productRating?if_exists?string}</div>
- </td>
- </tr>
- <tr>
- <td colspan="3">
+ <div><strong>${uiLabelMap.CommonBy}: </strong><#if productReview.postedAnonymous?default("N") == "Y"> ${uiLabelMap.OrderAnonymous}<#else> ${postedPerson.firstName} ${postedPerson.lastName} </#if></div>
+ <div><strong>${uiLabelMap.CommonAt}: </strong>${productReview.postedDateTime?if_exists} </div>
+ <div><strong>${uiLabelMap.OrderRanking}: </strong>${productReview.productRating?if_exists?string}</div>
<div> </div>
- </td>
- </tr>
- <tr>
- <td colspan="3">
<div>${productReview.productReview?if_exists}</div>
- </td>
- </tr>
- <tr><td colspan="3"><hr /></td></tr>
- </table>
+ <hr />
</#list>
<div>
- <a href="<@o...@ofbizUrl>" class="linktext">${uiLabelMap.ProductReviewThisProduct}!</a>
+ <a href="<@o...@ofbizUrl>" class="linktext">${uiLabelMap.ProductReviewThisProduct}!</a>
</div>
<#else>
<div>${uiLabelMap.ProductProductNotReviewedYet}.</div>
<div>
- <a href="<@o...@ofbizUrl>" class="linktext">${uiLabelMap.ProductBeTheFirstToReviewThisProduct}</a>
+ <a href="<@o...@ofbizUrl>" class="linktext">${uiLabelMap.ProductBeTheFirstToReviewThisProduct}</a>
</div>
</div>
</#if>
@@ -709,7 +685,7 @@
${assocProductId}
</a>
<#if productAssoc.reason?has_content>
- - <b>${productAssoc.reason}</b>
+ - <strong>${productAssoc.reason}</strong>
</#if>
</div>
${setRequestAttribute("optProductId", assocProductId)}