File: D:/web/expressmusic/inc-template-product-detail.asp
<%
' (SS,25/02/10) Added Magic Zoom Plus
' (SS,25/06/10) Change to ShowProductDetail
' (SS,06/07/10) replaced GetProductLink with GetProductLinkWithName for SEO in Sub ShowProductRelatedItem
' (SS,07/11/11) changes to work with Magic Zoom Plus 4.04
' (SS,20/5/13) added per section price for radiators to Sub ShowProductDetail
' (SS,21/02/14) replaced facebook like with iframe version because the script version was causing problems in Chrome when going back to previous
' page using browser back button, i.e. related product "add" buttons would stop working for 45secs and "like" might disappear
' (SS,11/09/14) New Bootstrap version, many changes
' (SS,23/10/14) Write Review was removed in Bootstrap viewed, added back in and improved to work in Bootstrap
' (SS,28/11/14) Added call to CustomShowHolidayNotice
' (SS,01/03/15) Added alt attribute to "img src" to remove W3C validation error
' (SS,01/04/22) removed Facebook, Twitter and Google+ sharing links, only twitter was functioning anyway, also removed the Trustpilot review link
' (SS,24/04/24) Change to Sub ShowProductDetail, added If Not CustomProductIsPreOwned(AProductName) to not show exc VAT price for pre owned products
' (SS,10/06/25) Change to Sub ShowProductDetail, to add PayPal pay later
' (SS,12/12/25) Added call to CustomShowHolidayNotice back in, it had disapppeared
' (SS,13/9/14) added following class to store temporary values used by this unit/module, currently just dimensions
Class ProductDetail
Private FDimensions
Private Sub Class_Initialize()
End Sub
Private Sub Class_Terminate()
End Sub
Public Property Get Dimensions()
Dimensions = FDimensions
End Property
Public Property Let Dimensions(AValue)
FDimensions = Trim(AValue)
End Property
End Class
Dim oProductDetail
' --- START OF PRODUCT DETAIL TEMPLATES --- '
Sub ShowProductDetailYouAreHere(AGroup, ACategory, ASubcategory)
Response.Write GetBreadcrumb(AGroup, ACategory, ASubcategory, "")
End Sub
' (SS,1/9/14) now showing Bootstrap style alert
Sub ShowProductDetailNotFound(AProductCode)
ShowAlertMesssage "warning", "Could not find Product Code: <b>" & AProductCode & "</b>"
End Sub
' (SS,15/6/09) added AShowDescription which is used to print main description or not
' (SS,25/6/10) added Or IsStockAvailable to allow ordering if not in stock but available
' (SS,30/6/11) added AProductID, used by ShowProductOptions, which was also added
' (SS,7/11/11) changes to work with Magic Zoom Plus 4.04
' (SS,17/1/13) added ending / to an img src
' (SS,20/5/13) added per section price for radiators
' (SS,1/03/15) added alt attribute to "img src" to remove W3C validation error
' (SS,24/4/24) added If Not CustomProductIsPreOwned(AProductName) to not show exc VAT price for pre owned products
' (SS,6/06/24) modified h2 tag to h1 and added font-style:30px to keep the text the same size, otherwise it'll be the 36px default
' (SS,10/6/26) added PayPal pay later, with call to GetProductPriceSimple(False, False) NB. first parameter is False for no vat because prices already include VAT (it will add VAT again)
Sub ShowProductDetail(AProductID, AProductCode, AProductName, AProductDesc, ADimensions, ASalePrice, AStdPrice, ANumInStock, ANew, ACategory, ASubcategory, AShowLarge, ALargePicWidth, ALargePicHeight, AShowDescription)
' (SS,13/9/14) create the private object used to store some values, for convenience, to pass onto other functions in this module
Set oProductDetail = New ProductDetail
oProductDetail.Dimensions = ADimensions
' (SS,22/6/11) following used to determine whether to show "Add Review" or "Reviews" tab, "Add Review" shown if no reviews
Dim LReviewRating, LReviewCount
LReviewRating = GetReviewRatingAndCount(AProductCode, LReviewCount)
' (SS,22/9/17)
Dim LBrandFound, LBrand, LMPN
LBrandFound = GetBrandAndMPN(AProductID, AProductCode, LBrand, LMPN)
%>
<!-- START OF PRODUCT DETAIL -->
<div itemscope itemtype="http://schema.org/Product">
<div class="row" style="margin-left: 0px; margin-right: 0px">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;">
<h1 itemprop="name" style="text-align:center; margin-top:10px; margin-bottom:10px; font-size:30px"><%=AProductName%></h1>
</div>
</div>
<div class="row" style="margin-left: 0px; margin-right: 0px">
<!-- magic zoom plus-->
<div class="col-lg-6 col-md-6" style="padding-left: 0px; padding-right: 0px">
<div class="col-md-12" style="padding-left: 0px; padding-right: 0px">
<div style="max-width: 425px; margin: 0 auto;">
<a id="Zoomer1" href="<%=GetProductImageLink(AProductCode, "o")%>" class="MagicZoomPlus" rel="selectors-effect: fade; selectors-change: mouseover; selectors-effect: false; disable-zoom: true; pan-zoom: false; expand-effect:linear; expand-speed: 0; show-title: bottom; hint: false" title="<%=ToNamedHTML(AProductName)%>"><img src="<%=GetProductImageLink(AProductCode, "l")%>" alt="<%=AProductCode%>" /></a> <br/>
</div>
</div>
<!-- magic zoom plus thumbnails -->
<div class="col-md-12" id="magic-zoom-thumbs" style="padding-left: 0px; padding-right: 0px">
<%ShowProductMoreImages AProductCode, 0, ""%>
</div>
</div>
<%If LBrandFound Then%>
<meta itemprop="brand" content="<%=LBrand%>" />
<meta itemprop="mpn" content="<%=LMPN%>" />
<%End If%>
<!-- price and description etc -->
<div class="col-lg-6 col-md-6" style="padding-left: 0px; padding-right: 0px">
<div id="product-detail-code" style="margin-top: 10px">
Product Code: <strong><%=AProductCode%></strong>
</div>
<div class="price">
<h3 style="margin-top: 10px; margin-bottom: 5px">Price:
<span class="regular"><% ShowProductPriceV2 ASalePrice, AStdPrice, False, False, "savepc" %></span>
</h3>
<%If Not CustomProductIsPreOwned(AProductName) Then ShowProductPriceExcVAT ASalePrice, AStdPrice%>
<div style="margin-top:10px" data-pp-message data-pp-style-layout="text" data-pp-style-logo-type="inline" data-pp-style-text-color="black" data-pp-amount="<%=GetProductPriceSimple(False, False)%>"></div>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="<%=GetCurrencyCode%>">
<meta itemprop="price" content="<%=GetProductPriceForMicrodata(False)%>">
<meta itemprop="itemCondition" content="<%=GetProductConditionForMicrodata(AProductID)%>">
<%=GetStockAvailabilityMicrodata(AProductCode, AProductName, ANumInStock)%>
</span>
</div>
<!-- REVIEW RATING *** to be improved -->
<%'ShowReviewRatingV2 AProductCode, True, True, "left"%>
<!-- END OF REVIEW RATING *** to be improved -->
<%If Not ProductDiscontinued(AProductCode, AProductName) Then%>
<%If InStock(ANumInStock) Or IsStockAvailable Then%>
<form name="frmBasket" class="form-inline" role="form" action="<%=GetProductLink(AProductCode)%>" method="post" style="margin-bottom: 10px">
<%ShowProductOptions AProductID%>
<div id="ajax-info" class="price-total" style="margin-top: 5px; margin-bottom: 10px">
</div>
<h3 style="margin-top:0px"><%=GetStockInfo%></h3>
<div class="form-group">
Quantity<br>
<select class="form-control" name="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
</form>
<button class="btn btn-default btn-success btn-lg" onclick="<%=GetBuyOLink(AProductID)%>"><span class="glyphicon glyphicon-shopping-cart"></span> Add to Basket</button>
<%Else%>
<h3 style="margin-top:0px"><%=GetStockInfo%></h3>
<%ShowStockNotificationLink(AProductCode)%>
<%End If%>
<%End If%>
<%CustomShowHolidayNotice "P", AProductID%>
<div style="margin-top: 10px">
<!-- accordian panel panes -->
<div class="panel-group" id="accordion">
<%ShowProductDescriptionSections(AProductDesc)%>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseRelated">
<i class="glyphicon glyphicon-chevron-down" style="margin-right:10px"></i>Related Products</a>
<span id="related-product-count" class="badge" style="background-color: grey">0</span>
</h4>
</div>
<div id="collapseRelated" class="panel-collapse collapse">
<div class="panel-body">
<%ShowRelatedProducts(AProductCode)%>
<%ShowViewOtherProducts(AProductCode)%>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/price and description etc -->
</div>
<!-- END OF PRODUCT DETAIL -->
<!-- product option change -->
<script type="text/javascript">
// globals holding selected values
ITP_sections = "";
ITP_paint_finish = "";
function itp_product_option_change(AType, AOption) {
if (AType == 'sections') {
ITP_sections = AOption.value;
}
else if (AType == 'paint finish') {
if (AOption.value != "") {
ITP_paint_finish = AOption.options[AOption.selectedIndex].text;
}
else {
ITP_paint_finish = "";
};
};
// alert("ITP_sections: " + ITP_sections + "\n" + "ITP_paint_finish: " + ITP_paint_finish);
//alert($('#productid').val());
//alert(frmBasket.productid.value);
$.get('ajax.asp?cmd=custom&options=productprice&productid=' + frmBasket.productid.value + '§ions=' + ITP_sections + '&paintfinish=' + ITP_paint_finish,
function(data) {
$("#ajax-info").html(data);
}
);
}
</script>
<%
' (SS,24/10/14) if in write review i.e. cmd=writereview then move to this section
If InWriteReview Then%>
<script type="text/javascript">
$(function() {
$(document).scrollTop( $("#collapseReviews").offset().top );
});
</script>
<%End If%>
<%
' (SS,13/9/14) destroy the object created at the start
Set oProductDetail = Nothing
End Sub
' (SS,22/8/14)
' (SS,23/10/14) added InWriteReview
Sub ShowProductDetailDescriptionSection(ASectionDesc, ASectionName, AFirstSection)
Dim LSectionAnchorName
LSectionAnchorName = "collapse" & Replace(ASectionName, " ", "") ' removes spaces from name
%>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#<%=LSectionAnchorName%>">
<i class="glyphicon glyphicon-chevron-<%=IIf(AFirstSection, "up", "down")%>" style="margin-right:10px"></i><%=ASectionName%>
</a>
</h4>
</div>
<div id="<%=LSectionAnchorName%>" class="panel-collapse collapse<%=IIf(AFirstSection And Not InWriteReview, " in", "")%>">
<div class="panel-body">
<%=ASectionDesc%>
<%If AFirstSection And oProductDetail.Dimensions <> "" Then%>
<%=BR&BR%><b>Dimensions:</b> <%=oProductDetail.Dimensions%>
<%End If%>
</div>
</div>
</div>
<%
End Sub
Sub ShowProductDetailViewOtherProductsHeader
%>
<div id="product-detail-other-products">
<h3>View other products in</h3>
<%
End Sub
Sub ShowProductDetailViewOtherProductsItem(AGroup, ACategory, ASubcategory)
%>
<div class="product-detail-other-products-single">
<%ShowCategoryAndSubcategoryWithLink AGroup, ACategory, ASubcategory%>
</div>
<%
End Sub
Sub ShowProductDetailViewOtherProductsFooter
%>
</div> <!-- end #product-detail-other-products -->
<%
End Sub
Sub ShowProductMoreImagesHeader
%>
<%
End Sub
' (SS,25/02/10) modified to work with Magic Zoom Plus
' (SS,24/5/11) changed class="MagicThumb" rel="zoom-id:Zoomer;"
' to class="MagicThumb" rel="zoom-id:Zoomer; group:Zoomer;"
' fix first thumbnail not having previous/next arrows
' (SS,7/11/11) changes to work with Magic Zoom Plus 4.04
' (SS,18/8/14) new Bootstrap RWD version, this is version 2 which has ACaption as a parameter, and APictureID instead of AProductCode, also AMaxImageCount, calls GetProductImageLinkForPictureID instead of GetProductImageLinkWithImageNo
' (SS,01/03/15) added alt attribute to "img src" to get rid of W3C validation error
Sub ShowProductMoreImagesItem(APictureID, AImageNo, AMaxImageCount, ACaption)
%>
<a class="thumbnail MagicThumb magiczoom_thumbnailsmall" href="<%=GetProductImageLinkForPictureID(APictureID, "o")%>" rel="zoom-id: Zoomer1; hint: false" rev="<%=GetProductImageLinkForPictureID(APictureID, "l")%>" title="<%=ACaption%>"><img src="<%=GetProductImageLinkForPictureID(APictureID, "s")%>" alt="<%=ACaption%>" /></a>
<%
End Sub
Sub ShowProductMoreImagesFooter
%>
<%
End Sub
Sub ShowProductFilesHeader
%>
<table width="100%" border="0" cellspacing="0" cellpadding="8">
<tr>
<td>more details</td>
</tr>
<%
End Sub
Sub ShowProductFilesItem(AProductCode, AFileName, LFileNameNoExt, AFileNo, AFileType, AFileSize)
%>
<tr>
<td><a href="<%=GetProductFileLink(AProductCode, AFileNo)%>"><%=LFileNameNoExt%> [<%=AFileSize%>]</a></td>
</tr>
<%
End Sub
Sub ShowProductFilesFooter
%>
</table>
<%
End Sub
' (SS,12/9/14) removed "<h3>You may also be interested in</h3>"
Sub ShowProductRelatedHeader
ClearCounter ' (SS,13/9/14)
%>
<div class="row">
<div id="product-detail-related-items">
<%
End Sub
' (SS,6/7/10) replaced GetProductLink with GetProductLinkWithName for SEO
' (SS,12/9/14) changes for Bootstrap
Sub ShowProductRelatedItem(AProductCode, AProductName, AProductDescription)
IncCounter ' (SS,13/9/14)
%>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="product-detail-related-item" style="border: 1px dashed #f4f4f4; padding: 10px">
<div class="product-detail-related-item-image">
<a href="<%=GetProductLinkWithName(AProductCode, AProductName)%>"><%=GetProductImgSrcThumbnailSmall(AProductCode, AProductName)%></a>
</div>
<div class="product-detail-related-item-name" style="height: 3em">
<a href="<%=GetProductLinkWithName(AProductCode, AProductName)%>"><%=AProductName%></a>
</div>
<div class="product-detail-related-item-price-section">
<div class="product-detail-related-item-add-button pull-left">
<%If InStock(GetNumInStock) Or IsStockAvailable Then%>
<a href="<%=GetBuyLink(AProductCode)%>" class="btn btn-primary btn-sm" role="button" style="margin-right: 10px; margin-top: 5px">Add</a>
<%End If%>
</div>
<div class="product-detail-related-item-price-info">
Price: <% ShowProductPriceV2 CorrectCurrencyNV(GetSalePrice), CorrectCurrencyNV(GetStdPrice), True, False, "" %>
</div>
</div>
<div class="product-detail-related-item-stock-info">
<%=GetStockInfo%>
</div>
</div>
</div><!--col-->
<%
End Sub
' (SS,13/9/14) set the count in the header
Sub ShowProductRelatedFooter
%>
</div> <!-- end #product-detail-related-items -->
</div><!--row-->
<script>
document.getElementById("related-product-count").innerHTML = '<%=GetCounter%>';
</script>
<%
End Sub
' --- END OF PRODUCT DETAIL TEMPLATES --- '
%>