File: D:/web/groundscrewcentre/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 structured data / rich snippets
' (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,17/05/17) added "Delivery Details" tab
' (SS,08/04/19) removed google plus sharing due to it being shutdown by Google on 7/3/2019
' (SS,13/09/19) removed sharing links (for Ground Screws)
' (SS,13/09/19) replaced panel with card for Bootstrap 4
' (SS,11/05/20) Sub ShowProductDetail, Qty combo changed from 20 to 200
' (SS,23/06/23) Change to Sub ShowProductDetail, to hide price if "Contact us for availability" is set, only show "Contact us for availability" and no out of stock link
' (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,29/7/15) added product code as requested by Paul
' (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,30/05/18) added sale banner via CustomIsSaleBannerApplicable and CustomGetSaleBannerText
' (SS,8/10/19) for Bootstrap 4, replaced "glyphicon glyphicon-shopping-cart" with "fa fa-shopping-cart"
' "glyphicon glyphicon-chevron-down" with "fa fa-chevron-down" and "glyphicon glyphicon-chevron-up" with "fa fa-chevron-up"
' (SS,11/5/20) Qty combo changed from 20 to 200
' (SS,27/10/20) added "If Not IsSpecialCategory(ACategory)" to not show price and stock details if special category i.e. "Case Studies"
' (SS,23/6/23) change to hide price if "Contact us for availability" is set, only show "Contact us for availability" and no out of stock link
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,17/2/16)
Dim LBrandFound, LBrand, LMPN
LBrandFound = GetBrandAndMPN(AProductID, AProductCode, LBrand, LMPN)
' (SS,23/6/23) to only show price if product has "Contact Us for Availability" attribute, and to show "Contact us for availability" instead of "Out of stock, contact us for availability" and remove "Notify me when back in stock" link
Dim LContactUsForAvailability
LContactUsForAvailability = ProductAttributeExists(AProductID, "Contact us for availability")
%>
<!-- START OF PRODUCT DETAIL -->
<div itemscope itemtype="http://schema.org/Product">
<div class="row" style="margin-left: 0px; margin-right: 0px">
<div class="col-12" style="border-bottom: 1px solid #ccc; border-top: 1px solid #ccc;">
<h1 style="text-align:center; margin-top:10px; margin-bottom:10px; font-size:30px"><span itemprop="name"><%=AProductName%></span></h1>
</div>
</div>
<div class="row" style="margin-left: 0px; margin-right: 0px">
<!-- magic zoom plus-->
<div class="col-xl-6 col-lg-6 col-sm-12" style="padding-left: 0px; padding-right: 0px">
<div class="col-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 itemprop="image" src="<%=GetProductImageLink(AProductCode, "l")%>" alt="<%=AProductCode%>" /></a> <br/>
</div>
</div>
<!-- magic zoom plus thumbnails -->
<div class="col-12" id="magic-zoom-thumbs" >
<%ShowProductMoreImages AProductCode, 0, ""%>
</div>
</div>
<!-- price and description etc -->
<div class="col-xl-6 col-lg-6 col-sm-12" style="padding-left: 0px; padding-right: 0px">
<%If Not IsSpecialCategory(ACategory) Then%>
<%If LBrandFound Then%>
<meta itemprop="brand" content="<%=LBrand%>" />
<meta itemprop="mpn" content="<%=LMPN%>" />
<%End If%>
<div id="product-detail-code" class="mt-3">
Product Code: <strong><%=AProductCode%></strong>
</div>
<% ' (SS,23/6/23)
If Not LContactUsForAvailability Then%>
<div class="price">
<%If CustomIsSaleBannerApplicable(AProductID, ASalePrice) Then%>
<div class="product-detail-sale-banner"><%=CustomGetSaleBannerText%></div>
<%End If%>
<h3 style="margin-top: 10px; margin-bottom: 5px">
<span class="regular"><% ShowProductPriceV2 ASalePrice, AStdPrice, False, False, "savepc" %></span>
</h3>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="<%=GetCurrencyCode%>">
<%=GetCurrencySymbol%><span itemprop="price"><%=GetProductPriceSimple(True, False)%></span> inc. VAT
<%=GetStockAvailabilityMicrodata(AProductCode, AProductName, ANumInStock)%>
</span>
</div>
<%End If%>
<!-- 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="" 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><%=GetStockInfo%></h3>
<div class="form-group">
<label for="qty">Quantity</label>
<select class="form-control col-2" id="qty" name="qty">
<%
' (SS,11/5/20) replaced fixed combo of 20 with 200 using loop
' <option value="1">1</option>
' <option value="2">2</option>
' ...
' <option value="19">19</option>
' <option value="20">20</option>
Dim i
For i = 1 To 200
Response.Write "<option value=""" & i & """>" & i & "</option>"
Next
%>
</select>
</div>
</form>
<button class="btn btn-default btn-success btn-lg" onclick="<%=GetBuyOLink(AProductID)%>">Add to Basket <span class="fa fa-shopping-cart"></span> </button>
<%Else ' (SS,23/6/23) changed for LContactUsForAvailability, to show a slight different message and without ShowStockNotificationLink
If LContactUsForAvailability Then%>
<h3 style="margin-top:0px"><%=ReplaceStr(GetPleaseContactForAvailabilityInfo, "contact us", "Contact us")%></h3>
<%Else%>
<h3 style="margin-top:0px"><%=GetStockInfo%></h3>
<%ShowStockNotificationLink(AProductCode)%>
<%End If%>
<%End If%>
<%End If%>
<%CustomShowHolidayNotice "P", AProductID%>
<%CustomShowDiscountMessage "P" ' (SS,4/5/18)%>
<%
End If
' for If Not IsSpecialCategory
%>
<!-- accordion panel panes -->
<div class="accordion mt-3" id="accordion">
<%ShowProductDescriptionSections(AProductDesc)%>
<%If Not IsSpecialCategory(ACategory) Then%>
<div class="card">
<div class="card-header h5" id="headingDeliveryDetails">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseDeliveryDetails">
<i class="fa mr-2" aria-hidden="true"></i></i>Delivery Details</a>
</div>
<div id="collapseDeliveryDetails" class="collapse" aria-labelledby="headingDeliveryDetails" data-parent="#accordion">
<div class="card-body">
<%=GetTokenText("Delivery Details")%>
</div>
</div>
</div>
<div class="card">
<div class="card-header h5" id="headingTestimonials">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTestimonials">
<i class="fa mr-2" aria-hidden="true"></i></i>Testimonials</a>
</div>
<div id="collapseTestimonials" class="collapse" aria-labelledby="headingTestimonials" data-parent="#accordion">
<div class="card-body">
<%=GetWebText("News")%>
</div>
</div>
</div>
<div class="card">
<div class="card-header h5" id="headingReviews">
<a class="<%=IIf(InWriteReview, "", "collapsed")%>" data-toggle="collapse" data-parent="#accordion" href="#collapseReviews">
<i class="fa mr-2" aria-hidden="true"></i>Reviews</a>
<%If LReviewCount > 0 Then%>
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<%End If%>
<span class="badge badge-primary"><%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%>
<%If LReviewCount > 0 Then%>
</span>
<%End If%>
</div>
<div id="collapseReviews" class="collapse <%=IIf(InWriteReview, "show", "")%>" aria-labelledby="headingReviews" data-parent="#accordion">
<div class="card-body">
<%WriteReview(AProductCode)%>
<%ShowReviews(AProductCode)%>
</div>
</div>
</div>
<%End If%>
<div class="card">
<div class="card-header h5" id="headingRelated">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseRelated">
<i class="fa mr-2" aria-hidden="true"></i>Related <%=IIf(IsSpecialCategory(ACategory), ACategory, "Products")%></a>
<span id="related-product-count" class="badge badge-primary">0</span>
</div>
<div id="collapseRelated" class="collapse" aria-labelledby="headingRelated" data-parent="#accordion">
<div class="card-body">
<%ShowRelatedProducts(AProductCode)%>
<%ShowViewOtherProducts(AProductCode)%>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/price and description etc -->
</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,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,8/10/19) for Bootstrap 4 replaced "glyphicon glyphicon-chevron" with "fa fa-chevron", later improved further to use css in styles.css to apply on data-toggle
Sub ShowProductDetailDescriptionSection(ASectionDesc, ASectionName, AFirstSection)
Dim LSectionName, LSectionAnchorName, LBreaksBeforeDimension
LSectionName = Replace(ASectionName, " ", "") ' removes spaces from name
LSectionAnchorName = "collapse" & LSectionName
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,10/3/16) removed following and added above back in, description now always open to help with SEO, i.e. Google may devalue hidden content
' LPanelOpen = False
' (SS,17/2/16) for first section, i.e. Description and the rich snippet tag
If AFirstSection Then
ASectionDesc = "<span itemprop=""description"">" & ASectionDesc & "</span>"
End If
%>
<div class="card">
<div class="card-header h5" id="heading<%=LSectionName%>">
<a class="<%=IIf(LPanelOpen, "", "collapsed")%>" data-toggle="collapse" data-parent="#accordion" href="#<%=LSectionAnchorName%>">
<i class="fa mr-2" aria-hidden="true"></i><%=ASectionName%>
</a>
</div>
<div id="<%=LSectionAnchorName%>" class="collapse<%=IIf(LPanelOpen, " show", "")%>" aria-labelledby="heading<%=LSectionName%>" data-parent="#accordion">
<div class="card-body">
<%=ASectionDesc%>
<%If AFirstSection And oProductDetail.Dimensions <> "" Then%>
<%=LBreaksBeforeDimension%><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
' (SS,08/10/19) for Bootstrap 4 added "img-thumbnail border mt-1" to <img src>
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 class="img-thumbnail border mt-1" 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>"
' (SS,8/10/19) Bootstrap 4, removed product-detail-related-item div (not required was preventing full width in card), added "no-gutters"
Sub ShowProductRelatedHeader
ClearCounter ' (SS,13/9/14)
%>
<div class="row no-gutters">
<%
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,8/10/19) Bootstrap 4, replaced "col-lg-6 col-md-6 col-sm-6 col-xs-12" with "col-12 col-sm-6", added class "text-center"
' (SS,16/10/19) Change colour of buy button from blue to green, btn-primary to btn-success
Sub ShowProductRelatedItem(AProductCode, AProductName, AProductDescription)
IncCounter ' (SS,13/9/14)
%>
<div class="col-12 col-sm-6">
<div class="product-detail-related-item" style="border: 1px dashed #f4f4f4; padding: 10px">
<div class="product-detail-related-item-image text-center">
<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
' (SS,8/10/19) removed end div for <!-- end #product-detail-related-items -->, div removed
Sub ShowProductRelatedFooter
%>
</div><!--row-->
<script>
document.getElementById("related-product-count").innerHTML = '<%=GetCounter%>';
</script>
<%
End Sub
' *** TO DO (SS,6/11/20)
'Function Get Name **** for view other "products" in or "case studies"
'also prefix product name with "Case Study:"
'get related disabled working
' --- END OF PRODUCT DETAIL TEMPLATES --- '
%>