File: D:/web/hyperflight/! previous changes 2/2025-11-08/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,08/04/19) removed google plus sharing due to it being shutdown by Google on 7/3/2019
' (SS,01/10/19) added meta itemprop tags: sku, image to get rid of Google seach console warning message, (Sub ShowProductDetail)
' added meta itemprop tags: url and priceValidUntil in Sub ShowProductDetailPriceAndOptions, (priceValidUntil set to 30 days from today)
' (SS,12/12/19) Removed facebook and twitter sharing links, added text "Add to basket to see shipping cost"
' (SS,14/06/24) Change to Sub ShowProductDetailReviews to add "" options parameter to ShowReviewRatingStars
' (SS,09/09/24) Change to Sub ShowProductDetailPriceAndOptions to show PickID locally, also added GetPickID function
' (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
' (SS,24/8/17) replaced <b> with <strong>, also AProductCode is now encoded using HTMLEncode to prevent XSS injection
Sub ShowProductDetailNotFound(AProductCode)
ShowAlertMesssage "warning", "Could not find Product Code: <strong>" & AProductCode & "</strong>"
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,29/7/15) added product code as requested by Paul
' (SS,16/9/15) added Yard Sale Only attribute to only show out of stock stuff if product has "Yard Sale Only" attribute
' (SS,4/10/17) Changed tag for product name from h2 to h1
' (SS,1/10/19) added meta itemprop sku, image to get rid of Google seach console warning message
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,26/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-7 col-md-7 col-sm-12 col-xs-12 pull-left" style="padding-left: 0px; padding-right: 0px">
<div class="col-md-12" style="padding-left: 0px; padding-right: 0px">
<div style="max-width: 540px; margin: 0 auto;">
<a data-gallery="gallery" id="Zoom-1" href="<%=GetProductImageLink(AProductCode, "o")%>" class="MagicZoom" data-options="selectorTrigger: hover; transitionEffect: false;cssClass: dark-bg;" 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%>
<meta itemprop="sku" content="<%=AProductCode%>">
<meta itemprop="image" content="<%=GetFullProductImageLink(AProductCode, "o")%>">
<!-- price and options -->
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 pull-right product-detail-padding" style="padding-right: 0px">
<%ShowProductDetailPriceAndOptions AProductID, AProductCode, AProductName, ASalePrice, AStdPrice, ANumInStock%>
</div>
<!--/price and options -->
<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12" style="padding-top: 10px; padding-left: 0px; padding-right: 0px">
<%ShowProductDescriptionSections(AProductDesc)%>
<%ShowProductDetailReviews(AProductCode)%>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 pull-right product-detail-padding" style="padding-right: 0px">
<%ShowProductDetailRelated(AProductCode)%>
</div>
<!--</div>-->
</div>
<!-- END OF PRODUCT DETAIL -->
<%
' (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,8/6/17) separated here from ShowProductDetail above
' (SS,20/7/17) replaced h3 tag with span for stock info to make much smaller
' (SS,25/7/17) removed ShowStockNotificationLink because GetStockInfo now has it
' (SS,1/10/19) added url and priceValidUntil to get rid of warning shown in Google Search Console. priceValidUntil is set to 30 days from today.
' (SS,12/12/19) removed Facebook and Twitter like links, added text "Add to basket to see shipping cost"
' (SS,9/9/24) added PickID after Product Code for local IP only (not customers)
Sub ShowProductDetailPriceAndOptions(AProductID, AProductCode, AProductName, ASalePrice, AStdPrice, ANumInStock)
%>
<div id="product-detail-code" style="margin-top: 10px">
Product Code: <strong><%=AProductCode%></strong>
<% ' (SS,9/9/24) show Pick ID on local PC
If CustomIsLocalPC Then
Response.Write " <span class=""badge"">" & GetPickID(AProductID) & "</span>"
End If
%>
</div>
<%ShowReviewRatingV2 AProductCode, True, True, "left"%>
<div class="price">
<h3 style="margin-top: 5px; margin-bottom: 5px">Price:
<span class="regular"><% ShowProductPriceV2 ASalePrice, AStdPrice, False, False, "savepc" %></span>
</h3>
<%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="priceValidUntil" content="<%=ISODate(DateAdd("d", 30, Date))%>">
<meta itemprop="itemCondition" content="<%=GetProductConditionForMicrodata(AProductID)%>">
<%=GetStockAvailabilityMicrodata(AProductCode, AProductName, ANumInStock)%>
<meta itemprop="url" content="<%=GetFullProductLinkWithName(AProductCode, AProductName)%>">
</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">
<span class="text-success"><strong><%=GetStockInfo%></strong></span>
<span><small><br>Add to basket to see shipping cost</small></span>
<%ShowProductOptions AProductID%>
<div id="ajax-info" class="price-total" style="margin-top: 5px; margin-bottom: 10px">
</div>
<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%>
<span><%=GetStockInfo%></span>
<%End If%>
<%End If%>
<%CustomShowHolidayNotice "P", AProductID%>
<%
End Sub
' (SS,22/8/14)
' (SS,23/10/14) added InWriteReview
' (SS,30/6/15) improved so breaks are not added when section ends in </ul> which was creating extra space
' (SS,18/7/15) changed to not open first panel by default
' (SS,16/9/15) change to open first panel
' (SS,8/6/17) for HF removed the accordian feature
' (SS,29/6/17) added ShowProductFiles
Sub ShowProductDetailDescriptionSection(ASectionDesc, ASectionName, AFirstSection)
Dim LSectionAnchorName, LBreaksBeforeDimension
LSectionAnchorName = "collapse" & Replace(ASectionName, " ", "") ' removes spaces from name
If Right(ASectionDesc, 5) = "</ul>" Then
LBreaksBeforeDimension = ""
Else
LBreaksBeforeDimension = BR & BR
End If
' (SS,10/7/15) added following not simplify, used in two places, also now default to false, not opened initially
Dim LPanelOpen
LPanelOpen = AFirstSection And Not InWriteReview
' (SS,16/9/15) commented above back in and remove below to always open first panel
' LPanelOpen = False
' (SS,17/2/16) for first section, i.e. Description and the rich snippet tag
If AFirstSection Then
' (SS,19/2/16) replaced span with div, because <ul>'s can't be inside spans according to W3C validator
ASectionDesc = "<div itemprop=""description"">" & ASectionDesc & "</div>"
End If
%>
<div class="panel panel-default panel-product-page">
<div class="panel-heading">
<h4 class="panel-title"><%=ASectionName%></h4>
</div>
<div id="<%=LSectionAnchorName%>" class="panel-collapse collapse<%=IIf(LPanelOpen, " in", "")%>">
<div class="panel-body">
<%=ASectionDesc%>
<%If AFirstSection And oProductDetail.Dimensions <> "" Then%>
<%=LBreaksBeforeDimension%><b>Dimensions:</b> <%=oProductDetail.Dimensions%>
<%End If%>
<%If AFirstSection Then%>
<%ShowProductFiles(GetProductCode)%>
<%End If%>
</div>
</div>
</div>
<%
End Sub
' (SS,8/6/17) separated reviews into a sub
' (SS,19/7/17) added reviews anchor
' (SS,14/6/24) added "" options parameter to ShowReviewRatingStars
Sub ShowProductDetailReviews(AProductCode)
' (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)
%>
<a id="reviews"></a>
<div class="panel panel-default panel-product-page">
<div class="panel-heading">
<h4 class="panel-title">Reviews <span class="badge" style="background-color: grey"><%=LReviewCount%></span> <%ShowReviewRatingStars LReviewRating, ""%>
</h4>
</div>
<div id="collapseReviews" class="panel-collapse collapseno<%=IIf(InWriteReview, " in", "")%>">
<div class="panel-body">
<%If LReviewCount > 0 Then%>
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="reviewCount" content="<%=LReviewCount%>" />
<meta itemprop="ratingValue" content="<%=LReviewRating%>" />
</span>
<%End If%>
<%WriteReview(AProductCode)%>
<%ShowReviews(AProductCode)%>
</div>
</div>
</div>
<%
End Sub
' (SS,8/6/17) separated into this sub
' (SS,30/6/17) swapped ShowRelatedProducts and ShowViewOtherProducts to put other products first
Sub ShowProductDetailRelated(AProductCode)
%>
<%ShowViewOtherProducts(AProductCode)%>
<div class="panel panel-default panel-product-page" style="margin-top: 10px">
<div class="panel-heading">
<h4 class="panel-title">Related Products <span id="related-product-count" class="badge" style="background-color: grey">0</span>
</h4>
</div>
<div id="collapseRelated" class="panel-collapse collapseno">
<div class="panel-body">
<%ShowRelatedProducts(AProductCode)%>
</div>
</div>
</div>
<%
End Sub
' (SS,30/6/17) added panel
Sub ShowProductDetailViewOtherProductsHeader
%>
<div class="panel panel-default panel-product-page" style="margin-top: 10px">
<div class="panel-heading">
<h4 class="panel-title">Related Categories</h4>
</div>
<div id="collapseRelated" class="panel-collapse collapseno">
<div class="panel-body">
<%
End Sub
Sub ShowProductDetailViewOtherProductsItem(AGroup, ACategory, ASubcategory)
%>
<div class="product-detail-other-products-single">
<%ShowCategoryAndSubcategoryWithLink AGroup, ACategory, ASubcategory%>
</div>
<%
End Sub
Sub ShowProductDetailViewOtherProductsFooter
%>
</div>
</div>
</div>
<%
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
' (SS,12/6/17) optimised for latest magiczoomplus (5.2.3)
' (SS,28/7/17) first image was appearing twice in expanded view, discovered that was due to the URLs being different for both images, large and small
' the URL used in main section for original size is GetProductImageLink(AProductCode, "o")
' for the large thumbnail it's GetProductImageLink(AProductCode, "l")
' fixed by using this for the first image here i.e. AImageNo = 1
Sub ShowProductMoreImagesItem(APictureID, AImageNo, AMaxImageCount, ACaption)
' (SS,28/7/17) added following to get ensure exact same URL for first image as main image to prevent it appearing twice in expanded view
Dim LOriginalImageURL, LLargeThumbnailURL
If AImageNo = 1 Then
LOriginalImageURL = GetProductImageLink(GetProductCode, "o")
LLargeThumbnailURL = GetProductImageLink(GetProductCode, "l")
Else
LOriginalImageURL = GetProductImageLinkForPictureID(APictureID, "o")
LLargeThumbnailURL = GetProductImageLinkForPictureID(APictureID, "l")
End If
%>
<a class="product-detail-thumbnail MagicZoom"
data-gallery="gallery" data-options="hint:off;zoomMode:off;lazyZoom: true;cssClass: dark-bg;zoomWidth:300%; zoomHeight:300%""
data-zoom-id="Zoom-1"
href="<%=LOriginalImageURL%>"
data-image="<%=LLargeThumbnailURL%>"
title="<%=ACaption%>"
>
<img class="img-responsive" src="<%=GetProductImageLinkForPictureID(APictureID, "s")%>" alt="<%=ACaption%>" />
</a>
<%
End Sub
Sub ShowProductMoreImagesFooter
%>
<%
End Sub
Sub ShowProductFilesHeader
%>
<div id="product-detail-files">
<div id="product-detail-files-header">
<strong>More details</strong>
</div>
<%
End Sub
Sub ShowProductFilesItem(AProductCode, AFileName, LFileNameNoExt, AFileNo, AFileType, AFileSize)
%>
<div class="product-detail-files-item"><a href="<%=GetProductFileLink(AProductCode, AFileNo)%>" target="_new"><%=LFileNameNoExt%> [<%=AFileSize%>]</a></div>
<%
End Sub
Sub ShowProductFilesFooter
%>
<div id="product-detail-files-footer">
</div>
</div>
<%
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
' (SS,17/7/15) removed style="height: 3em" from <div class="product-detail-related-item-name"> to allow flexible lines
' (SS,20/7/17) made Add button grey was blue (i.e. class change from btn-primary to btn-success)
Sub ShowProductRelatedItem(AProductCode, AProductName, AProductDescription)
IncCounter ' (SS,13/9/14)
%>
<div class="col-lg-12 col-md-12 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">
<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-success 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>
<!-- (SS,13/6/17) disable the hint when hovering over thumbnail image, need to move to a different section e.g. footer of this page -->
<script>
mzOptions = {
onZoomReady: function() {
$('a[data-zoom-id]').removeAttr('title')
}
};
</script>
<%
End Sub
' (SS,28/7/17) returns the HTML for rendering the option image (called from Function GetProductOptionComboBox in apputils.asp)
' prior to this, this code was in apputils, which I now realise wasn't a good idea
' replaced cssClass: white-bg with dark-bg
Function GetProductDetailOptionImageHTML(AOptionValue, AOptionValueID)
Dim Result, LMagicZoom
Result = ""
' LRel = "background-opacity:70; background-color:#000; caption-source:span; hint:false; selectors-effect:pounce; expand-effect:linear; restore-effect:linear; pan-zoom:false"
' (SS,9/6/17) replaced above with MagicZoom latest
LMagicZoom = " data-image=""" & GetProductOptionValueImageLink(AOptionValueID, "l") & """"
Result = Result & "<div class=""option-radio-image-div col-lg-2 col-md-2 col-sm-2 col-xs-2"">"
Result = Result & "<a class=""MagicZoom"" data-gallery=""gallery"" data-options=""hint:off;zoomMode:off;lazyZoom: true;cssClass: dark-bg; zoomWidth:300%; zoomHeight:300"" data-zoom-id=""Zoom-1"" href=""" & GetProductOptionValueImageLink(AOptionValueID, "o") & """ style=""text-decoration:underline"" title=""" & AOptionValue & """" & LMagicZoom
'LOptionValueHTML = LOptionValueHTML & " onclick=""MagicZoom.expand('Zoom-1')"""
' (SS,13/6/17) following to allow thumbnail click to expand, later added setTimeout to work after a delay, without this clicking quickly was sometimes preventing the click
'LOptionValueHTML = LOptionValueHTML & " onclick=""setTimeout(function(){MagicZoom.expand('Zoom-1');},500);"""
Result = Result & ">"
Result = Result & "<img class=""option-radio-image"" src=""" & GetProductOptionValueImageLink(AOptionValueID, "s") & """>"
Result = Result & "</a>"
Result = Result & "</div>"
GetProductDetailOptionImageHTML = Result
End Function
' (SS,9/9/24) returns calculated PickID (to be shown locally only)
' based to MySQL statement used in Shopping Admin: REVERSE(LPAD(CAST(ProductID AS CHAR), GREATEST(LENGTH(ProductID), 4), "0"))
Function GetPickID(AProductID)
Dim LProductIDPadded, LPickID, i
LProductIDPadded = Right("0000" & AProductID, 4)
LPickID = ""
For i = 4 To 1 Step -1
LPickID = LPickID & Mid(LProductIDPadded, i, 1)
Next
GetPickID = LPickID
End Function
' --- END OF PRODUCT DETAIL TEMPLATES --- '
%>