File: D:/web/hyperflight/inc-template-product-list.asp
<%
' (SS,14/06/10) added get button calls to previous and next in jump footer
' (SS,25/06/10) change to ShowProductListItem
' (SS,06/07/10) replaced GetProductLink with GetProductLinkWithName for SEO in Sub ShowProductListItem
' (SS,10/01/13) added ADescription parameter to Sub ShowProductListFooter
' (SS,11/01/13) changes to ShowProductListHeaderForCategory and ShowProductListFooter
' (SS,20/05/13) added per section price for radiators to Sub ShowProductListItem
' (SS,12/08/15) added navigation
' (SS,19/07/17) added new products header and footer
' (SS,04/04/19) change to Sub ShowProductListItem to replace getpic.asp with call to GetProductImageLink
' (SS,21/02/24) added ShowReviewRatingV2 to ShowProductListItem to show review stars
' (SS,06/03/24) Replaced for Bootstrap 5, replaced img-responsive with img-fluid
' (SS,18/07/24) Bootstrap 5 version from CIRC (removed old likely redundant Sub ShowProductPricing)
' (SS,14/05/26) For HF, consolidated with VDK BS5 version, needs checking
' (SS,17/07/26) Added dded stock info back in to ShowProductListItem
Const T_PRODDESC_L1_MAX = 96 ' maximum length of product description, 0 for all
Const T_PRODDESC_L2_MAX = 140 ' maximum length of product description, 0 for all
Const T_PRODDESC_CLEAN = True
' --- START OF PRODUCT LIST TEMPLATES --- '
' (SS,19/6/24) new version that adds the two missing start divs
Sub ShowProductListHeaderForSearch(AFoundText, ASearchFor, ANotFound)
' (SS,1/7/11) modified to show matching your search if ASearchFor is blank, also removed "We have found" and "matching" not shown if ASearchFor is blank
Dim LText
If ASearchFor = "" Then
LText = AFoundText & " found"
Else
LText = AFoundText & " found matching '" & ASearchFor & "'"
End If
%>
<div>
<div class="fs-4 mb-3"><%=LText%></div>
<div>
<%
If ANotFound Then
ShowSearchNotFound
End If
End Sub
' (SS,11/1/13) replaced AGroup, ACategory, ASubcategory parameters with just the one AHeading parameter, removed code that created heading from this parameters, now in apputils
' (SS,29/5/26) added class="px-2"
Sub ShowProductListHeaderForCategory(AHeading)
%>
<div id="product-list">
<div id="product-list-heading"><h1><%=AHeading%></h1></div>
<div id="product-list-content">
<%
End Sub
Sub ShowProductListHeaderForSubcategory(ADescription)
%>
<div id="product-list-subcat-desc">
<%=ADescription%>
</div>
<%
End Sub
' (SS,29/5/15) added grid for isotope to tidy the variable height cells
' (SS,18/6/24) Bootstrap 5, added gx-5
' (SS,19/5/26) removed grid gx-4 after row class
' (SS,22/7/26) added product-list-row after row class
Sub ShowProductListHeader
%>
<div class="row product-list-row"><!--ShowProductListHeader-->
<%
End Sub
' (SS,19/2/05) added AIsSearch, AIsSpecialOffer, AMainGroup, AMainCategory, AMainSubcategory, also changed ANew to AIsNew '
' (SS,25/6/10) added Or IsStockAvailable to allow ordering if not in stock but available
' (SS,6/7/10) replaced GetProductLink with GetProductLinkWithName for SEO
' (SS,17/1/13) replaced & with & to reduce HTML errors in http://validator.w3.org
' (SS,20/5/13) added per section price for radiators
' (SS,29/5/15) added grid-item for isotope to tidy the variable height cells
' (SS,11/8/15) changed col-lg-4 to col-lg-3 for 4 across on large
' (SS,19/7/17) added review rating back in
' (SS,20/7/17) removed NEW prefix just before product name and added stock info changed class from product-list-item-delivery-info to product-list-item-stock-info
' (SS,4/4/19) replaced getpic.asp?code=.=Server.URLEncode(AProductCode).&size=l with GetProductImageLink(AProductCode, "l")
' (SS,13/07/23) added width="700" height="700" to image to help with CLS (cumulative layer shift)
' (SS,21/2/24) added ShowReviewRatingV2 to show review stars
' (SS,6/3/24) for Bootstrap 5, replaced img-responsive with img-fluid,
' (SS,12/6/24) replaced <span class="glyphicon glyphicon-shopping-cart"></span> with <i class="fa-light fa-basket-shopping"></i>
' replaced btn-sm with text-decoration-none
' (SS,18/6/24) replaced col-xs-12 with col-12, added rounded-5 pb-3 shadow to product-list-item
' (SS,22/7/24) changed col-lg-4 to col-lg-3 for 4 across for large or above (same as original)
' (SS,2/8/24) removed <br> after product-list-item-name, set css to min and max 3 lines to prevent height change due to product name size
' (SS,15/5/26) added mt-2 mb-2 to product-list-item-price and other improvements
' (SS,19/5/26) changed shadow to shadow-sm
' (SS,17/7/26) added stock info back in
' (SS,22/7/26) added product-list-col class for two across for larger phones, also removed the more details button
' Change "noreviews" to "num" in call to ShowReviewRatingV2, added product-list-item-buy as placeholder when no buy button, later made it a View button
Sub ShowProductListItem(ATableCellWidthPercentage, AProductCode, AProductName, ASalePrice, AStdPrice, ANumInStock, AIsNew, AIsSearch, AIsSpecialOffer, AMainGroup, AMainCategory, AMainSubcategory)
Dim LProductLink
LProductLink = GetProductLinkWithName(AProductCode, AProductName)
' (SS,29/7/26) check whether product may be delivered to selected country
Dim LDeliveryAllowed, LDeliveryMessage
LDeliveryMessage = ""
LDeliveryAllowed = ProductDeliveryAllowed(AProductCode, AMainCategory, AMainSubcategory, GetDeliveryCountry(), "L", LDeliveryMessage)
%>
<!-- START OF PRODUCT LIST ITEM -->
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 product-list-col">
<div class="product-list-item rounded-4 pb-3 shadow-sm">
<a href="<%=LProductLink%>">
<img class="product-list-item-image img-fluid mb-2" src="<%=GetProductImageLink(AProductCode, "l")%>" alt="<%=AProductName & " (" & AProductCode & ")"%>" width="700" height="700">
</a>
<a class="product-list-item-name" href="<%=LProductLink%>">
<%If AIsNew Then%><span class="new-product">NEW </span><%End If%><%=AProductName%>
</a>
<div class="mt-2">
<%ShowReviewRatingV2 AProductCode, True, True, "num"%>
</div>
<div class="mt-2">
<div class="product-list-item-price mt-2 mb-1"><% ShowProductPriceV2 ASalePrice, AStdPrice, False, False, "savepc" %>
</div>
</div>
<% If ReallyInStock(ANumInStock) Then %>
<div class="product-list-item-stock-info mb-2">
<%=GetStockInfo%>
</div>
<% Else %>
<div class="product-list-item-stock-info-out mb-2">
Out of stock
</div>
<% End If %>
<div class="mt-2 product-list-item-buy">
<%If InStock(ANumInStock) Or IsStockAvailable Then%>
<%If LDeliveryAllowed Then%>
<a href="<%=GetBuyLink(AProductCode)%>"
class="btn btn-default btn-success text-decoration-none"
role="button"><i class="fa-regular fa-cart-shopping"></i> Buy</a>
<%Else%>
<button type="button" class="btn btn-secondary" disabled>
<i class="fa-regular fa-cart-shopping"></i> Buy
</button>
<div class="product-list-item-delivery-message small text-danger mt-1">
<%=Server.HTMLEncode(LDeliveryMessage)%>
</div>
<%End If%>
<%Else%>
<a href="<%=LProductLink%>"
class="btn btn-primary text-decoration-none"
role="button">View</a>
<%End If%>
</div>
</div>
</div>
<!-- END OF PRODUCT LIST ITEM -->
<%
End Sub
Sub ShowProductListStartRow
End Sub
Sub ShowProductListEndRow
End Sub
Sub ShowProductListMissingColumns(ACount)
End Sub
' (SS,10/1/13) added description parameter and div to show the footer description
' (SS,19/7/17) replaced old version above with this one
Sub ShowProductListFooter(ADescription)
%>
<!--ShowProductListFooter-->
</div><!--row-->
</div><!-- end #product-list-content -->
<%If ADescription <> "" Then%>
<div id="product-list-subcat-footer">
<%=ADescription%>
</div>
<%End If%>
</div><!-- end #product-list -->
<%
End Sub
' (SS,19/7/17) moved here from previous separate inc-template-new-products.asp (renamed from ShowNewProductsHeader)
' (SS,22/4/26) changed "New In Stock" to "New in Stock"
' (SS,15/5/26) replaced h3 tag with call to ShowSectionHeading
' (SS,19/5/26) replaced removed grid after 2nd row class
' (SS,22/7/26) added product-list-row after row class
Sub ShowProductListHeaderNewProducts
%>
<div class="new-products-section">
<div class="row mt-3">
<div class="col-12">
<% ShowSectionHeading "New in Stock", "" %>
</div>
</div>
<div class="row product-list-row">
<%
End Sub
' (SS,19/7/17) moved here from previous separate inc-template-new-products.asp (renamed from ShowNewProductsFooter)
Sub ShowProductListFooterNewProducts
%>
</div>
</div>
<%
End Sub
' (SS,27/7/11) product list navigation routines, renamed from ShowProductListJumpFooter.. to ShowProductListNav.., and replaced table with div
' (SS,2/8/24) added mb-4 because top margin removed from product list items
Sub ShowProductListNavHeader
%>
<div class="row product-list-nav mb-4">
<%
End Sub
' (SS,13/8/15) called by ShowProductListNavInfo below to add option and select it if applicable
Sub ShowProductListNavInfoAddOption(AValue, AText, ASelected)
Dim LSelected
If AValue = ASelected Then
LSelected = " selected"
Else
LSelected = ""
End If
%>
<option value="<%=AValue%>" <%=LSelected%>>Sort by <%=AText%></option>
<%
End Sub
' (SS,12/8/15) add sort by combo
' (SS,18/6/24) Bootstrap 5, form-control input-sm changed to form-control form-select-sm, also added style="width:auto;" because it was too wide
' span replaced with label, remove form-group and form-inline, added <div class="col-auto"> to keep on same line
Sub ShowProductListNavInfo(AText)
%>
<div class="col-lg-6 col-md-6 col-sm-6 col-6">
<form>
<div class="row g-1">
<div class="col-auto">
<label for="sortBy" class="small me-1"><%=AText%></label>
</div>
<div class="col-auto">
<select class="form-select form-select-sm" style="width:auto;" id="sortBy" onchange="javascript:itp_sort_by(this.value)">
<%
Dim LSortBy
LSortBy = GetSortBy
ShowProductListNavInfoAddOption "1", "Relevance", LSortBy
ShowProductListNavInfoAddOption "2", "Price High to Low", LSortBy
ShowProductListNavInfoAddOption "3", "Price Low to High", LSortBy
ShowProductListNavInfoAddOption "4", "Name", LSortBy
%>
</select>
</div>
</div>
</form>
</div>
<%
End Sub
' (SS,21/7/26) modified for Bootstrap 5
Sub ShowProductListNavItemsHeader
%>
<div class="col-12 col-md-6 mt-2 mt-md-0">
<nav aria-label="Product list pages">
<ul class="pagination pagination-sm justify-content-md-end mb-0">
<%
End Sub
' then items here have the product-list-nav-item or product-list-nav-item-active class in an anchor, NL added to keep source tidy, avoiding all items on one line
' (SS,21/7/26) fix for Bootstrap 5
Sub ShowProductListNavItem(AHTML)
Dim LHTML
LHTML = AHTML
' Convert old Bootstrap 3 pagination markup to Bootstrap 5.
LHTML = Replace(LHTML, "<li class=""active"">", "<li class=""page-item active"" aria-current=""page"">")
LHTML = Replace(LHTML, "<li class=""disabled"">", "<li class=""page-item disabled"">")
LHTML = Replace(LHTML, "<li>", "<li class=""page-item"">")
LHTML = Replace(LHTML, "<a ", "<a class=""page-link"" ")
%>
<%=LHTML & NL%>
<%
End Sub
' (SS,21/7/26) modified for Bootstrap 5
Sub ShowProductListNavItemsFooter
%>
</ul>
</nav>
</div>
<%
End Sub
Sub ShowProductListNavFooter
%>
</div> <!-- row -->
<%
End Sub
' --- END OF PRODUCT LIST TEMPLATES ---'
%>