File: D:/web/expressmusic/2025-06-10/prev/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,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
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%>
<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%>
<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 --- '
%>