File: D:/web/circ.itp/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,11/02/16) added facebook, twitter, google plus sharing
' (SS,19/02/16) Added Rich Snippets / Microdata
' (SS,04/03/16) corrected structured data error when no reviews, Google didn't like AggregateRating being set to 0 when no reviews, now not shown when no reviews
' (SS,01/06/17) added sale banner to ShowProductDetail
' (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/11/20) removed facebook and twitter share links
' (SS,17/05/21) modified Sub ShowProductDetail to not show "In stock" for bespoke radiators and not show "contact us" for items out of stock
' (SS,24/05/21) modified Sub ShowProductDetail to show despatch days for clearance radiators
' (SS,27/05/21) modified Sub ShowProductDetail to only show the H3 tag when LStockInfo has a value (due to W3C checker warning) also removed role="form" and type="text/javascript" due to W3C checker warning
' (SS,07/06/21) modified Sub ShowProductDetail to use the extended lead time attribute for clearance radiators, replaced above with following
' (SS,06/07/22) modified Sub ShowProductDetail to highlight delivery lead time message for radiators (also show before selection of sections and paint finish for bespoke radiators)
' (SS,03/08/22) modified Sub ShowProductDetail to show PayPal Pay Later message
' (SS,11/10/22) added additional more prominent Pay in 3 message
' (SS,24/02/24) improvements to add review stars, BTU calculator modal, go to top arrow from reviews, removed large PayPal banner
' (SS,04/03/24) commented out following combo selection code until further notice
' (SS,02/07/24) added ShowProductFiles to show technical datasheest i.e. PDFs file for valves
' (SS,25/03/25) change to Sub ShowProductDetail - special sales banner for bundle products, and not to show sale price % for bundle due to 20% off accessories
' (SS,13/9/14) added following class to store temporary values used by this unit/module, currently just dimensions
' (SS,3/5/24) added FFirstRun, IsFirstRun, FirstRunCompleted to handle separate rendering of tabs and tab content
Class ProductDetail
Private FDimensions
Private FProductCode ' (SS,21/6/23)
Private FFirstRun ' (SS,3/5/24)
Private FReviewCount, FReviewRating ' (SS,10/5/24)
Private Sub Class_Initialize()
FFirstRun = True ' (SS,3/5/24)
FReviewCount = 0
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
' (SS,21/6/23)
Public Property Get ProductCode
ProductCode = FProductCode
End Property
' (SS,21/6/23)
Public Property Let ProductCode(AValue)
FProductCode = Trim(AValue)
End Property
' (SS,3/5/24)
Public Property Get IsFirstRun
IsFirstRun = FFirstRun
End Property
' (SS,8/5/24) called when first has been completed, ie. call to ShowProductDescriptionSections in apputils.asp
Public Sub FirstRunCompleted
FFirstRun = False
End Sub
' (SS,10/5/24)
Public Property Get ReviewCount
ReviewCount = FReviewCount
End Property
' (SS,10/5/24)
Public Property Let ReviewCount(AValue)
FReviewCount = AValue
End Property
' (SS,10/5/24)
Public Property Get ReviewRating
ReviewRating = FReviewRating
End Property
' (SS,10/5/24)
Public Property Let ReviewRating(AValue)
FReviewRating = AValue
End Property
End Class
Dim oProductDetail
' --- START OF PRODUCT DETAIL TEMPLATES --- '
Sub ShowProductDetailYouAreHere(AGroup, ACategory, ASubcategory)
' (SS,19/4/24) changed last parameter "" to "home" for Bootstrap 5, to show breadcrumb to home page
' Response.Write GetBreadcrumb(AGroup, ACategory, ASubcategory, "home")
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,11/2/16) added facebook, twitter, google plus sharing
' (SS,4/3/16) corrected structured data error when no reviews, Google didn't like AggregateRating being set to 0 when no reviews, now not shown when no reviews
' (SS,01/06/17) added sale banner via CustomIsSaleBannerApplicable and CustomGetSaleBannerText
' (SS,25/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,17/5/21) modified to not show "In stock" for bespoke radiators and not show "contact us" for items out of stock
' (SS,24/5/21) modified to show despatch days for clearance radiators
' (SS,27/5/21) modified only show the H3 tag when LStockInfo has a value (due to W3C checker warning), also removed role="form" and type="text/javascript" due to W3C checker warning
' (SS,7/6/21) modified to use the extended lead time attribute for clearance radiators, replaced above with following
' (SS,6/7/22) modified to highlight delivery lead time message for radiators (also show before selection of sections and paint finish for bespoke radiators)
' (SS,14/7/23) added width and height to images to help reduce CLS (Cumulative Layout Shift) on Desktop
' (SS,19/12/24) replaced <br/> with <br>, replaced all /> with > on <meta itemprop="..) to keep W3C validator happy
' (SS,25/3/25) special sales banner for bundle products, and not to show sale price % for bundle due to 20% off accessories
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,21/6/23) added following to show the ProductCode here as well, for use in ShowProductDetailDescriptionSection (must be a better way)
oProductDetail.ProductCode = 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)
' (SS,10/5/24) store review count and rating in object for use later
oProductDetail.ReviewCount = LReviewCount
oProductDetail.ReviewRating = LReviewRating
' (SS,19/2/16)
Dim LBrandFound, LBrand, LMPN
LBrandFound = GetBrandAndMPN(AProductID, AProductCode, LBrand, LMPN)
' (SS,25/3/25)
Dim LIsBundle, LSaleBannerText
LIsBundle = GetIsBundle(GetProductID)
%>
<!-- START OF PRODUCT DETAIL -->
<div itemscope itemtype="http://schema.org/Product">
<div class="row">
<!-- magic zoom plus-->
<div class="col-12 col-lg-6 col-md-6 px-0 mb-3">
<div class="col-md-12">
<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%>" width="425" height="425"></a><br>
</div>
</div>
<!-- magic zoom plus thumbnails -->
<div class="col-md-12 p-2" id="magic-zoom-thumbs">
<%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 description etc -->
<div class="col-12 col-lg-6 col-md-6">
<!-- Breadcrumb -->
<div>
<%=GetBreadcrumb("", ACategory, ASubcategory, "")%>
</div>
<!--Product Name -->
<div>
<h1 class="fs-2" itemprop="name"><%=AProductName%></h1>
</div>
<div class="price">
<%If CustomIsSaleBannerApplicable(AProductID, ASalePrice) Then%>
<div class="product-detail-sale-banner"><%=CustomGetSaleBannerText(LIsBundle)%></div>
<%End If%>
<!--Price -->
<div>
<span class="fs-3"><% ShowProductPriceV2 ASalePrice, AStdPrice, False, False, iif(LIsBundle, "", "savepc") %>
<%CustomShowPerSectionText AProductID%>
</span>
<small><%=GetCurrencySymbol%><%=GetProductPriceSimple(True, False)%> inc. VAT</small>
</div>
<!--Review stars -->
<div style="margin-top: 5px">
<% ' (SS,21/2/24) also added id="reviews" anchor further down
'ShowReviewRatingV2 AProductCode, True, True, "big,accordian"
' (SS,23/4/24) replaced above with following
ShowReviewRatingV2 AProductCode, True, True, "big"
AddScript "ScriptGoToReviews"
%>
</div>
<% ' (SS,21/2/24) BTU calculator button if sections
' (SS,4/6/2/24) change text-bg-danger to text-bg-secondary
If ProductOptionExists(AProductID, "Sections") Then
%>
<div>
<button id="btnBTUCalc" type="button" class="btn btn-outline-secondary mt-3" data-bs-toggle="modal" data-bs-target="#modal-content-btucalc"><i class="fa-regular fa-calculator"></i> Calculate BTU</button>
<!--<span class="badge text-bg-danger fs-5 align-middle mt-2 ms-1 invisible" id="HeatIcon"><i class="fa-regular fa-temperature-arrow-up"> </i></span>-->
<span class="badge text-bg-secondary fs-6 align-middle mt-3 ms-1 invisible" id="BTUOK"><span id="CalculatedBTU"></span></span>
<span class="badge text-bg-secondary fs-6 align-middle mt-3 ms-1 invisible" id="WattsOK"><span id="CalculatedWatts"></span></span>
</div>
<%
End If
%>
<% ' (SS,3/8/22) if not bespoke radiator then show the PayPal Pay Later message here, for bespoke it's shown using ajax after selection
' (SS,3/5/24) added False And to not show at all
If False And Not ProductOptionExists(AProductID, "Sections") Then
%>
<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(True, False)%>"></div>
<%
End If
%>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="<%=GetCurrencyCode%>">
<meta itemprop="price" content="<%=CustomPriceAdjust(AProductID, GetProductPriceSimple(True, False))%>">
<meta itemprop="priceValidUntil" content="<%=ISODate(DateAdd("d", 30, Date))%>">
<%=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
' (SS,17/5/21) Liam requested "In stock" to not show for radiators, and to change
' "Out of stock, contact us for availability” to "Currently out of stock"
' added LStockInfo and checking for existing value and whether a bespoke radiator and change to new text
' (SS,27/5/21) modified further down to only show the H3 tag when LStockInfo has a value (due to W3C checker warning)
' (SS,6/7/22) added LStrongHighlight for radiator products
Dim LStockInfo, LStrongHighlight
LStockInfo = GetStockInfo
LStrongHighlight = False ' (SS,6/7/22)
'If LStockInfo = "In stock" Then
' (SS,24/5/21) replaced above if with following to also show despatch days for clearance radiators
If InStr(1, LStockInfo, "in stock", vbTextCompare) Then
' check for radiator
If GetProductAttributeByName(AProductID, "Product Type") = PT_RADIATOR Then
' quick check for bespoke radiator
'If ProductOptionExists(AProductID, "Sections") Then
' LStockInfo = "" ' don't show any stock info text
'Else
' LStockInfo = "Despatched in " + CustomGetRadiatorDespatchDaysForUSP + " working days"
' (SS,7/6/21) modified to use the extended lead time attribute for clearance radiators, replaced above with following
'LStockInfo = "Despatched in " + CustomGetDeliveryDays(AProductID, "", "", True) + " working days"
'End If
' (SS,6/7/22) replaced above with following
LStockInfo = CustomGetDeliveryDays(AProductID, "", "", False)
' (SS,6/7/22) strong highlight, also added below <small>All items sent together. A....
LStrongHighlight = True
End If
ElseIf InStr(LStockInfo, "Out of stock") > 0 And InStr(LStockInfo, "contact us") > 0 Then
LStockInfo = "Currently out of stock"
End If
%>
<%If InStock(ANumInStock) Or IsStockAvailable Then%>
<form name="frmBasket" class="form-inline" 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>
<%
' (SS,10/5/24) stock info "if" moved from before Qty and Add to basket to after
' (SS,3/5/24) replaced "form-control" in following select with "form-select"
' moved add to basket button inside form, added "row" and "col-auto" to keep button on same row as select
' also removed "form-group"
' replaced glyphicon glyphicon-shopping-cart with fa-duotone fa-cart-shopping
' added floating label with <div class="form-floating">
' (SS,7/6/24) added type="button" to Add to Basket button because it was cause form to submit and causing error or items to be added twice
' this was a result of the ending form tag being moved from before the button to after, and button without a type must have been defaulting to "submit"
%>
<div class="row">
<div class="col-auto">
<div class="">
<label for="SelectQty" class="form-label">Quantity</label>
<select class="form-select" id="SelectQty" 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>
</div>
<div class="col-auto align-self-end px-0">
<button type="button" class="btn btn-default btn-success btn-lg" onclick="<%=GetBuyOLink(AProductID)%>"><i class="fa-light fa-basket-shopping"></i> Add to Basket</button>
</div>
</div>
<%
' (SS,10/5/24) following here, i.e. after Add to Basket from before
If LStockInfo <> "" Then
' (SS,11/10/22) added this additional more prominent Pay in 3 banner
' (SS,21/2/24) removed
' (SS,21/2/24) replaced with less prominent banner
' removed <h3 style="margin-top:0px; margin-bottom:0px; background-color: #dc3545!important; padding: 1rem!important; color: #fff!important;"> =LStockInfo </h3>
' (SS,29/2/24) reverted back from <div class="stock-info">..</div>
If False And LStrongHighlight Then%>
<div style="margin-bottom:10px">
<h3 style="margin-top:0px; margin-bottom:0px; background-color: #dc3545!important; padding: 1rem!important; color: #fff!important;"><%=LStockInfo%></h3>
<small>All items sent together. Actual delivery depends on item with greatest lead time.</small>
</div>
<% ' (SS,22/4/24) for Bootstrap 5, replaced above with following more subtle version
' (SS,4/9/24) due to issues with mobile size with icon getting too close to text, replaced row and col with d-flex, also removed card-body class (probably a left over)
ElseIf LStrongHighlight Then%>
<div class="alert alert-primary p-2 ps-3 mt-3 mb-0" role="alert">
<div class="d-flex align-items-center">
<div class="align-self-center text-center me-2">
<i class="fa-regular fa-clock fa-2x"></i>
</div>
<div>
<%=LStockInfo%>
<p class="small lh-1 mb-0 mt-1"><small>All items sent together. Actual delivery depends on item with greatest lead time.</small></p>
</div>
</div>
</div>
<%Else ' as before, (SS,11/6/24) changed style="margine-top:0px" to class="mt-3" %>
<h3 class="mt-2"><%=LStockInfo%></h3>
<%End If%>
<%End If%>
</form>
<%Else%>
<h3 class="mt-2"><%=LStockInfo%></h3>
<%ShowStockNotificationLink(AProductCode)%>
<%End If%>
<%End If%>
<%CustomShowHolidayNotice "P", AProductID%>
<!-- (SS,15/3/24) following two lines added (div and close div) to spread description the full width -->
</div>
<div class="p-0 mt-1">
<!-- start of tabs -->
<%
' <div-no class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top: 10px; padding-left: 0px; padding-right: 0px">
' (SS,22/4/24) just testing navs and tabs behaviour in Bootstrap 5, possible replacement for accordian
'ShowProductTabsExperiment
ShowProductTabs AProductDesc
%>
<%
' (SS,3/5/24) following as before, routine in apputils.asp which calls ShowProductDetailDescriptionSection for section held in this file
' ShowProductDescriptionSections(AProductDesc)
%>
<!-- end of tabs -->
</div>
</div>
<!--/price and description etc -->
</div>
<!-- END OF PRODUCT DETAIL -->
<%
' (SS,21/2/24)
ShowBTUCalculatorModal
' (SS,13/9/14) destroy the object created at the start
Set oProductDetail = Nothing
' *** (SS,3/5/24) related products and view other products will get rendered here from the product that calls this sub i.e. Sub ShowTheProductDetail in apputils.asp
End Sub
' (SS,9/5/24) moved button code here from inside ShowProductDetail, to make code more readable
Sub ShowProductAddToBasketButton
' to be continued
End Sub
' (SS,3/5/24) moved here from above, to tidy up later
Sub TempSubForReviewAndRelatedProductStuff
' (SS,10/5/24) moved reviews to separate sections ShowProductDetailReviews
%>
<div class="card">
<div class="card-header">
<h4 class="card-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 class="card-body">
<%ShowRelatedProducts(AProductCode)%>
<%ShowViewOtherProducts(AProductCode)%>
</div>
</div>
<%
' (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%>
<%
End Sub
' (SS,22/8/14)
' (SS,23/10/14) added InWriteReview
' (SS,19/2/16) added rich snippet tag for ASectionDesc
' (SS,13/3/24) Bootstrap 5 changes: <div class="panel panel-default"> replaced with <div class="accordion-item">
' Removed <div class="panel-heading">, changed <h4 class="panel-title"> to <h2 class="accordion-header" id="headingOne"> where heading one ASectionName?
' also replaced a and i tags with button, <div class="panel-body"> with <div class="accordion-body">
' replaced class="panel-collapse collapse in" with class="accordion-collapse collapse show"
' (SS,15/3/24) replaced with card with full width (card is bs5 equivalent of panel in bs3)
' <div class="accordion-item"> replaced with <div class="card">
' <h2 class="accordion-header"> replaced with <div class="card-header">
' <div class="accordion-body"> replaced with <div class="card-body">
' (SS,3/5/24) renamed from ShowProductDetailDescriptionSection to ShowProductDetailDescriptionSectionOld
Sub ShowProductDetailDescriptionSectionOld(ASectionDesc, ASectionName, AFirstSection)
Dim LSectionAnchorName
LSectionAnchorName = "collapse" & Replace(ASectionName, " ", "") ' removes spaces from name
' (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="card">
<div class="card-header">
<%=ASectionName%>
</div>
<div class="card-body">
<h5 class="card-title"><%=ASectionName%></h5>
<%=ASectionDesc%>
<%If AFirstSection And oProductDetail.Dimensions <> "" Then%>
<p><b>Dimensions:</b> <%=oProductDetail.Dimensions%></p>
<%End If%>
<%If AFirstSection Then
' (SS,15/9/17) show top 3 reviews at bottom of product description
ShowProductReviewsInDesc GetProductCode, 3
' (SS,21/6/23) Instagram customer photos
' If InStr("," + "CDC-760,CDC-SHT-ASCOT,CDC-660,CDC-WARKTRV-ANTBR" + ",", "," + oProductDetail.ProductCode + ",") > 0 Then
%>
<div id="flocker-header" style="display: none"><hr>
<h4>Recent customer photos</h4>
</div>
<div id="flockler-embed-188de9a0a4d0ca28b3959a9a01dfa384"></div>
<style>
.flockler-carousel_v2-item__cta-wrapper {
display:none !important;
}
</style>
<script>
var _flocklerOverride = _flocklerOverride || {};
_flocklerOverride['188de9a0a4d0ca28b3959a9a01dfa384'] = {
tags: ['<%=oProductDetail.ProductCode%>']
};
</script>
<script src="https://plugins.flockler.com/embed/188ddd645f70a27502c5642acd919e5d/188de9a0a4d0ca28b3959a9a01dfa384" async></script>
<%
' End If
End If%>
</div>
</div>
<script>
(function() {
let interval;
interval = window.setInterval(
function() {
const el = document.querySelector('[id^="flockler-embed-"] article');
if (el) {
const heading = document.querySelector('#flocker-header');
if (heading) {
heading.style.display = 'inline';
window.clearInterval(interval);
interval = null;
}
}
},
300
);
setTimeout(function() {
if (interval) window.clearInterval(interval);
}, 6000);
})();
</script>
<%
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
' (SS,3/5/24) new version for Bootstrap 5 and CIRC
' removed flockler, first call renders the tabs, second call the content
' (SS,8/5/24) renamed to ShowProductDetailDescriptionSection_prev, to be deleted
Sub ShowProductDetailDescriptionSection_prev(ASectionDesc, ASectionName, AFirstSection)
Dim LSectionAnchorName
LSectionAnchorName = "collapse" & Replace(ASectionName, " ", "") ' removes spaces from name
' (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="card">
<div class="card-header">
<%=ASectionName%>
</div>
<div class="card-body">
<h5 class="card-title"><%=ASectionName%></h5>
<%=ASectionDesc%>
<%If AFirstSection And oProductDetail.Dimensions <> "" Then%>
<p><b>Dimensions:</b> <%=oProductDetail.Dimensions%></p>
<%End If%>
<%If AFirstSection Then
' (SS,15/9/17) show top 3 reviews at bottom of product description
ShowProductReviewsInDesc GetProductCode, 3
End If%>
</div>
</div>
<%
End Sub
' (SS,8/5/24) new version for Bootstrap 5 and CIRC
' removed flockler, first call renders the tabs, second call the content
' !!! not sure about adding Dimensions, where there before, also top 3 reviews?, also itemprop="description" for first section
Sub ShowProductDetailDescriptionSection(ASectionDesc, ASectionName, AFirstSection)
Dim LSectionName, LIDName, LActiveClass, LSectionCaption
' short some section names to prevent tabs from wrapping
LSectionName = ASectionName
If LSectionName = "Paint Options" Then
LSectionName = "Paint"
ElseIf LSectionName = "Important Information" Then
LSectionName = "Important"
ElseIf LSectionName = "Fitting Guidelines" Then
LSectionName = "Fitting"
ElseIf LSectionName = "Delivery Details" Then
LSectionName = "Delivery"
ElseIf LSectionName = "Calculating Pipe Centres" Then
LSectionName = "Pipe Centres"
End If
LIDName = ReplaceStr(LCase(LSectionName), " ", "-") ' lower case and spaces replaced with dashes
LActiveClass = ""
LSectionCaption = LSectionName
If LSectionName = "Reviews" Then
LSectionCaption = LSectionName + " (" & oProductDetail.ReviewCount & ")"
End If
Dim LCmd
LCmd = GetCmd
' if first run then do the tabs
If oProductDetail.IsFirstRun Then
' (SS,5/6/24) added code to make review tab active if cmd=showreviews
' (SS,18/6/24) added write review
If LCmd = "showreviews" Or LCmd = "writereview" Then
If LSectionName = "Reviews" Then LActiveClass = " active" End If
Else
If AFirstSection Then LActiveClass = " active" End If
End If
%>
<li class="nav-item" role="presentation">
<button class="nav-link<%=LActiveClass%>" id="<%=LIDName%>-tab" data-bs-toggle="tab" data-bs-target="#<%=LIDName%>-tab-pane" type="button" role="tab" aria-controls="<%=LIDName%>-tab-pane" aria-selected="true"><%=LSectionCaption%></button>
</li>
<%Else
' (SS,5/6/24) added code to make review tab active if cmd=showreviews
' (SS,18/6/24) added write review
If LCmd = "showreviews" Or LCmd = "writereview" Then
If LSectionName = "Reviews" Then LActiveClass = " show active" End If
Else
If AFirstSection Then LActiveClass = " show active" End If
End If
%>
<div class="tab-pane fade<%=LActiveClass%>" id="<%=LIDName%>-tab-pane" role="tabpanel" aria-labelledby="<%=LIDName%>-tab" tabindex="0">
<%
If LSectionName = "Reviews" Then
ShowProductDetailReviews
Else
' (SS,12/6/24) removed the <p> tag outside ASectionDesc, it was adding space to the top
%>
<%=ASectionDesc%>
<%If AFirstSection Then%>
<%ShowProductFiles GetProductCode%>
<%End If%>
<% End If%>
</div>
<%
End If
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
' (SS,14/7/23) added width and height to images to help reduce CLS (Cumulative Layout Shift) on Desktop
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%>" width="67" height="67"></a>
<%
End Sub
Sub ShowProductMoreImagesFooter
%>
<%
End Sub
Sub ShowProductFilesHeader
%>
<div>
<%
End Sub
' (SS,2/7/24) Bootstrap 5 version and for PDF only, LFileNameNoExt replaced with says "View technical sheet"
Sub ShowProductFilesItem(AProductCode, AFileName, AFileNameNoExt, AFileNo, AFileType, AFileSize)
Dim LFileNameNoExt
LFileNameNoExt = "Technical datasheet"
%>
<a href="<%=GetProductFileLink(AProductCode, AFileNo)%>"><i class="fa-regular fa-file-pdf fa-2xl text-danger me-2"></i><%=LFileNameNoExt%></a>
<%
End Sub
Sub ShowProductFilesFooter
%>
</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
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
' (SS,10/5/24) Bootstrap 5 version
Sub ShowProductDetailReviews
Dim LProductCode, LReviewCount, LReviewRating
LProductCode = oProductDetail.ProductCode
LReviewCount = oProductDetail.ReviewCount
LReviewRating = oProductDetail.ReviewRating
' (SS,4/6/24) removed card because of doubling up of borders and removed accordian stuff
%>
<div class="mx-0 mt-0">
<div class="">
<h4>
Reviews
<%If LReviewCount > 0 Then%>
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<%End If%>
<span class="badge" style="background-color: grey"><%If LReviewCount > 0 Then%><span itemprop="reviewCount"><%End If%><%=LReviewCount%><%If LReviewCount > 0 Then%></span><%End If%></span>
<%If LReviewCount > 0 Then%>
<meta itemprop="ratingValue" content="<%=LReviewRating%>">
<%End If%>
<%ShowReviewRatingStars LReviewRating, "" ' (SS,21/2/24) added "" for options%>
<%If LReviewCount > 0 Then%>
</span>
<%End If%>
</h4>
</div>
<hr>
<div class="">
<%WriteReview(LProductCode)%>
<%
' (SS,5/6/24) temp code to show different versions
TempShowReviewVersions
%>
<a id="reviews"></a>
<%ShowReviews(LProductCode)%>
</div>
</div>
<%
End Sub
' (SS,5/6/24)
Sub TempShowReviewVersions
If Not DevFeaturesEnabled Then Exit Sub
%>
<div class="float-end">
<ul class="nav nav-pills">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Versions</a>
<ul class="dropdown-menu">
<%
TempAddVersion "1", "Original"
TempAddVersion "2", "Cleaned up"
TempAddVersion "3", ""
TempAddVersion "4", ""
TempAddVersion "5", ""
TempAddVersion "6", ""
TempAddVersion "7", ""
TempAddVersion "8", ""
TempAddVersion "9", ""
TempAddVersion "D", ""
TempAddVersion "10", ""
TempAddVersion "11", ""
TempAddVersion "12", ""
TempAddVersion "13", ""
TempAddVersion "14", ""
TempAddVersion "15", ""
TempAddVersion "16", ""
TempAddVersion "17", ""
TempAddVersion "18", ""
TempAddVersion "19", ""
TempAddVersion "20", ""
TempAddVersion "21", ""
TempAddVersion "22", ""
TempAddVersion "23", ""
TempAddVersion "24", ""
TempAddVersion "25", ""
TempAddVersion "26", ""
TempAddVersion "27", ""
TempAddVersion "28", ""
TempAddVersion "D", ""
TempAddVersion "All", ""
%>
</ul>
</li>
</ul>
</div>
<%
End Sub
' (SS,5/6/24)
Sub TempAddVersion(ANo, AName)
' divider
If ANo = "D" Then
%>
<li><hr class="dropdown-divider"></li>
<%
Exit Sub
End If
Dim LLink
LLink = ReplaceStr(GetShowReviewsLink(oProductDetail.ProductCode), "#reviews", "") & "&ver=" & ANo
Dim LVersion
LVersion = CleanRequest("ver")
If LVersion = "" Then LVersion = "1"
Dim LActiveClass
LActiveClass = ""
If ANo = LVersion Then
LActiveClass = " active"
End If
%>
<li><a class="dropdown-item <%=LActiveClass%>" href="<%=LLink%>">Version <%=ANo%></a></li>
<%
End Sub
' (SS,21/2/24)
Sub ScriptGoToReviews
%>
<script>
$('.review-rating-text-big').click(function(e) {
$('#collapseReviews').collapse('show');
window.location = "#reviews";
});
</script>
<%
End Sub
' (SS,21/2/24) show modal, and select the number of sections >= calculated BTU
' some help from https://stackoverflow.com/questions/13343566/set-select-option-selected-by-value
Sub ScriptBTUCalc
%>
<script>
$('#btnBTUCalc').click(function (e) {
e.preventDefault();
$('#modal-content-btucalc').modal({
show: true
});
});
$('#modal-content-btucalc').on('hidden.bs.modal', function () {
LSectionsCombo = $('[name^="option-"]');
LComboName = LSectionsCombo.attr('name')
// alert(LComboName);
var LValueToSelect = "";
// LCalculatedBTU = parseInt($('#calculatedBTU').val());
// (SS,10/5/24) replaced above with following because val() wasn't working
LCalculatedBTU = parseInt($('#calculatedBTU').html());
if (LCalculatedBTU) {
// alert(LCalculatedBTU);
var LSelected = false;
/* (SS,4/3/24) commented out following combo selection code until further notice
$('[name^="' + LComboName + '"] > option').each(function() {
var LText = this.text
var splitStr = LText.substring(LText.indexOf('mm ') + 3);
var LBTU = parseInt(splitStr);
if (LBTU >= LCalculatedBTU) {
// alert(LBTU);
LValueToSelect = this.value;
LSelected = true;
return false;
}
});
*/
if (LValueToSelect != "") {
$('[name="' + LComboName + '"]').val(LValueToSelect).change();
}
// (SS,10/5/24) replaced val() in following with html(), also replaced hidden with invisible, replaced LSelected with true
// $("#CalculatedBTU").text("Calculated: " + LCalculatedBTU + " BTU / " + parseInt($('#calculatedWatts').html()) + " Watts");
$("#CalculatedBTU").text(LCalculatedBTU + " BTU");
$("#CalculatedWatts").text(parseInt($('#calculatedWatts').html()) + " Watts");
if (true) {
$("#BTUOK").removeClass("invisible");
$("#WattsOK").removeClass("invisible");
// $("#HeatIcon").removeClass("invisible");
}
else {
$("#BTUOK").addClass("invisible");
}
}
});
</script>
<%
End Sub
' (SS,22/2/21)
' (SS,1/5/24) moved here from inc-template-main.asp because it's only applicable when imagepicker is used
' (SS,28/6/24) version with tooltips
Sub ScriptImagePicker_old_with_tooltips
%>
<script src="/js/image-picker.min.js"></script>
<!-- (SS,1/5/24) script to add imagepicker to paint options on product page, also adds col-auto class for positioning -->
<script>
$("select.image-picker").wrap('<div class="row gx-0"></div>');
$("select.image-picker").imagepicker({
hide_select: false,
show_label: false
});
$("select.image-picker").wrap('<div class="col-auto"></div>');
$("ul.image_picker_selector").wrap('<div class="col-auto ms-1"></div>');
// (SS,11/6/24) add tooltips to colour choices
$("img.image_picker_image").attr('data-bs-toggle', 'tooltip');
$("img.image_picker_image").attr('data-bs-title', "test");
$("img.image_picker_image").attr('data-bs-placement', 'bottom');
// $("img.image_picker_image").attr('data-bs-title', attr('src'));
$("img.image_picker_image").each(function(){
$(this).attr('data-bs-title', $(this).attr('src').replace('images/paint-finish/', '').replace('.jpg', '').replace('-', ' ').replace('-', ' '));
});
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)) ;
</script>
<!-- find the matching magic zoom image when paint finish clicked -->
<script>
function showMagicZoomImageByCaption(aCaption) {
// find the correct two images from the magic zoom thumbnails
// (SS,22/10/15) stopped working in MagicZoomPlus v5.0.6, fixed by replacing MagicZoomPlus.update with MagicZoom.update
$('#magic-zoom-thumbs a').each(function() {
if ($(this).attr('title').indexOf(aCaption) == 0) {
big_image = $(this).attr('href');
// small_image = $(this).find('img').attr('src');
small_image = $(this).attr('rev');
// update the magic zoom image
MagicZoom.update("Zoomer1", big_image, small_image);
};
});
};
$(".image-picker" )
.change(function() {
var option_img_label = $('option:selected', this).attr('data-img-label');
showMagicZoomImageByCaption(option_img_label);
});
</script>
<%
End Sub
' (SS,22/2/21)
' (SS,1/5/24) moved here from inc-template-main.asp because it's only applicable when imagepicker is used
' (SS,28/6/24) tooltips removed in this version
Sub ScriptImagePicker
%>
<script src="/js/image-picker.min.js"></script>
<!-- (SS,1/5/24) script to add imagepicker to paint options on product page, also adds col-auto class for positioning -->
<script>
$("select.image-picker").wrap('<div class="row gx-0"></div>');
$("select.image-picker").imagepicker({
hide_select: false,
show_label: false
});
$("select.image-picker").wrap('<div class="col-auto"></div>');
$("ul.image_picker_selector").wrap('<div class="col-auto ms-1"></div>');
</script>
<!-- find the matching magic zoom image when paint finish clicked -->
<script>
function showMagicZoomImageByCaption(aCaption) {
// find the correct two images from the magic zoom thumbnails
// (SS,22/10/15) stopped working in MagicZoomPlus v5.0.6, fixed by replacing MagicZoomPlus.update with MagicZoom.update
$('#magic-zoom-thumbs a').each(function() {
if ($(this).attr('title').indexOf(aCaption) == 0) {
big_image = $(this).attr('href');
// small_image = $(this).find('img').attr('src');
small_image = $(this).attr('rev');
// update the magic zoom image
MagicZoom.update("Zoomer1", big_image, small_image);
};
});
};
$(".image-picker" )
.change(function() {
var option_img_label = $('option:selected', this).attr('data-img-label');
showMagicZoomImageByCaption(option_img_label);
});
</script>
<%
End Sub
' (SS,3/5/24) moved here from above, activated from customutils.asp via AddScript("ScriptProductOptionChange")
Sub ScriptProductOptionChange
%>
<!-- product option change -->
<script>
// 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>
<%
End Sub
' --- END OF PRODUCT DETAIL TEMPLATES --- '
' (SS,22/4/24) Bootstrap 5 experiment
Sub ShowProductTabsExperiment
Response.Write "<h3>### Start of Navs & Tabs Experiment ###</h3>"
%>
<div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Description</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Specifications</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Paint Options</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="fitting-tab" data-bs-toggle="tab" data-bs-target="#fitting-tab-pane" type="button" role="tab" aria-controls="fitting-tab-pane" aria-selected="false">Fitting Guidelines</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
<p>This is some placeholder content the <strong>Description tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
<p>This is some placeholder content the <strong>Specifications tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
<p>This is some placeholder content the <strong>Paint Options tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
</div>
<div class="tab-pane fade" id="fitting-tab-pane" role="tabpanel" aria-labelledby="fitting-tab" tabindex="0">
<p>This is some placeholder content the <strong>Fitting Guidelines tab's</strong> associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
</div>
<div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
<p>This is some placeholder content the <strong>Disabled tab's</strong> associated content.</p>
</div>
</div>
</div>
<%
Response.Write "<h3>### End of Navs & Tabs Experiment ###</h3>"
End Sub
' (SS,8/5/24)
' (SS,12/6/24) replaced nav-tabs with nav-pills
Sub ShowProductTabs(AProductDesc)
' first run does the tabs, ShowProductDetailDescriptionSection is called from apputils for each section
%>
<div>
<ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
<%
ShowProductDescriptionSections(AProductDesc)
' (SS,10/5/24) reviews added here, need count and number in brackets)
ShowProductDetailDescriptionSection "", "Reviews", False
'ShowProductDetailDescriptionSection "", "FAQs", False
%>
</ul>
<%
oProductDetail.FirstRunCompleted
' second run does the content
%>
<div class="tab-content p-3 p-sm-4 pb-0 rounded-bottom-4" id="myTabContent">
<%
ShowProductDescriptionSections(AProductDesc)
' (SS,10/5/24) reviews count
ShowProductDetailDescriptionSection "", "Reviews", False
'ShowProductDetailDescriptionSection "", "FAQs", False
%>
</div>
</div>
<%
End Sub
%>