File: D:/web/castironradiatorcentre/2024-11-06/prev/inc-template-basket.asp
<%
' === COMMON TEMPLATE (SAME FOR ALL SHOPPING SITES) ===
' (SS,22/06/09) Added AVoucherCode, ADiscount, ATotalWeight to Sub ShowBasketFooter
' (SS,05/07/11) Added AItemID and AOptionsList to ShowBasketItem
' (SS,22/07/11) Modified to use divs and better stylesheets, tidied and ShowBasketInfo
' which is in inc-template-messages.asp and now holds the complete basket info
' (SS,16/02/12) Replaced products.asp with GetScriptName to allow products-dev.asp to be used for development purposes
' Also officially called it a COMMON TEMPLATE by adding this note to heading
' (SS,13/09/12) Added <p> tag to ShowEmptyBasket
' (SS,26/08/14) Added "table" class to table tag for Bootstrap
' Replaced + and - images with glyphicons for Bootstrap in Sub ShowBasketItem
' (SS,20/02/15) Added Email basket button and modal
' (SS,26/02/15) Added tooltip (title attribute) to ShowBasketFooter, Email basket button
' (SS,19/05/17) Added Name and Address to ShowBasketEmailModal, for Proforma quote
' (SS,29/06/17) removed continue shopping button from ShowBasketFooter
' (SS,20/07/17) Change to Sub ShowBasketFooter to not show VAT deducted line (originally added (SS,15/04/16) to old framework)
' (SS,20/07/17) Change to ShowBasketHeader to show out of stock message (originally added (SS,19/04/16) to old framework)
' (SS,23/04/18) Change to Sub ShowBasketFooter, added GetPayPalExpressShowOnBasketPage to only show the PayPal Express button if enabled
' (SS,28/06/18) Change to Sub ShowBasketFooter to added optional TrackedDeliverySelected checkbox
' (SS,29/06/18) Change to Sub ShowBasketFooter to use radio instead of checkbox for optional TrackedDeliverySelected (DeliveryMethod)
' (SS,19/09/19) Changes for Bootstrap 4, replaced "glyphicon glyphicon-minus" and "glyphicon glyphicon-plus" with "fa fa-minus" and "fa fa-plus"
' Change to Sub ShowBasketItem removed <p> tag from product name, code and option was using two much vertical space used <br> instead
' Also removed style classes bsk-prod-name, bsk-options-list, bsk-prod-code
' (SS,20/09/19) Further changes including removed classes basket-total, basket-info, sorted email basket modal.
' (SS,29/09/20) Changes to work for both Bootstrap 3 and 4
' (SS,02/10/20) Minor change to ShowBasketFooter for voucher code help text in Bootstrap 3
' (SS,12/02/21) Added DeliveryWillCollect / Click & Collect (requested by Express Music) (to Sub ShowBasketFooter)
' (SS,22/04/21) Change to Sub ShowBasketFooter (delivery label for expedited (used by HF))
' (SS,17/09/21) Change to Sub ShowBasketFooter to delivery label to override the default if GetDeliveryOption is set, for CIRC to add "Kerbside Pallet Delivery" for radiators
' (SS,03/08/22) Change to Sub ShowBasketFooter to add PayPal Pay Later message
' (SS,21/02/24) Various improvements for mobile first. Changes also made to apputils.asp to call approprate subs here with changes to passed parameters.
' Old routines (suffixed with "Old") need to be removed in a future release
' --- START OF BASKET TEMPLATES --- '
Sub ShowEmptyBasket
%>
<p style="padding: 5px 0px 0px 5px"><%=tr("Your basket is empty")%>.</p>
<%
End Sub
' (SS,16/2/12) replaced products.asp with GetScriptName to allow products-dev.asp to be used for development purposes
' (SS,26/8/14) added "table" class to table tag for Bootstrap
' (SS,20/7/17) added display of out of stock message (originally added to old framework version on (SS,19/4/16))
' (SS,20/2/24) new version, removed Quantity and Total columns, removed the Picture and Product Name labels, corrected ending /td to /th for both
' added <div class="row">, separated basket item header to ShowBasketItemHeader
' (SS,20/5/24)
Sub ShowBasketHeader
%>
<%
' (SS,20/7/17) show out of stock message if applicable (originally added (SS,19/4/16) to old framework site)
Dim LOutOfStockMessage
LOutOfStockMessage = GetBasketOutOfStockMessage
If LOutOfStockMessage <> "" Then
%>
<div id="basket-out-of-stock-info">
<b>Sorry, following out of stock, please adjust your basket below:</b><br>
<%=LOutOfStockMessage%>
</div>
<%
End If
%>
<div id="basket">
<form name="frmBasket" method="post" action="<%=GetScriptName%>?cmd=recalculate" class="nospace">
<div class="row-no">
<%
End Sub
' (SS,21/2/24) new with code from ShowBasketHeader
' <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right">
' (SS,3/6/24) BS5 replaced col-xs-12 with col-12, col-sm-8 with col-sm-12
' (SS,10/6/24) separated into separate versions for BS3/4 and 5
Sub ShowBasketItemHeader
' (SS,5/6/24) variation for Bootstrap 5 compared to 3 and 4
Dim LBootstrapClass
If IsBootstrap5 Then
ShowBasketItemHeaderBS5
Else
ShowBasketItemHeaderBS3and4
End If
End Sub
' (SS,10/6/24) separated Bootstrap 3/4 version from 5
Sub ShowBasketItemHeaderBS3and4
' bootstrap 4 might require float-right but we're dropping support for BS4
%>
<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 pull-left">
<table class="basket table">
<tr>
<th></th>
<th></th>
<th style="text-align:right">Total</th>
</tr>
<%
End Sub
' (SS,10/6/24) added separate Bootstrap 5 version
Sub ShowBasketItemHeaderBS5_prev
%>
<div class="col-12 col-sm-12 col-md-8 col-lg-9 float-start">
<div class="text-end fw-bold mb-2">Total</div>
<div class="container">
<%
End Sub
' (SS,10/6/24) added separate Bootstrap 5 version
Sub ShowBasketItemHeaderBS5
%>
<div class="col-12 col-sm-12 col-md-8 col-lg-9 float-start">
<div class="container">
<%
End Sub
' (SS,20/2/24) separated from ShowBasketFooter, just ATotalWeight parameter
' <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
' (SS,22/2/24) change Email basket button from btn-success (green) to btn-default (white)
' (SS,20/5/24) modified for Bootstrap5
' (SS,5/6/24) for Recalculate button to work with Bootstrap 5, added data-bs-toggle="modal" (following not required data-bs-target="#modal-content-btucalc")
' (SS,10/6/24) separated into separate versions for Bootstrap 3/4 and 5
Sub ShowBasketItemFooter(ATotalWeight)
If IsBootstrap5 Then
ShowBasketItemFooterBS5 ATotalWeight
Else
ShowBasketItemFooterBS3and4 ATotalWeight
End If
End Sub
' (SS,10/6/24) version for Bootstrap 3/4 separated from ShowBasketItemFooter above
Sub ShowBasketItemFooterBS3and4(ATotalWeight)
%>
</table>
<div>
<div class="col-lg-12">
<%=GetButtonBasketRecalculate%>
<%If SaveBasketEnabled Then%>
<a href="#modal-content-email-basket" role="button" class="btn btn-default" data-toggle="modal" data-bs-toggle="modal" title="Click this button to email yourself or a friend a copy of the basket">Email basket</a>
<%End If%>
<div <%=Bootstrap3Only("id=""basket-info""")%><%=Bootstrap4Only("class=""mt-3""")%>>
<%ShowBasketInfo(ATotalWeight)%>
</div>
</div>
</div>
</div> <!-- col -->
<%
End Sub
' (SS,10/6/24) separate version for Bootstrap 5 called from ShowBasketItemFooter above
Sub ShowBasketItemFooterBS5(ATotalWeight)
%>
</div> <!-- container -->
<div class="mt-3">
<div class="col-lg-12">
<%=GetButtonBasketRecalculate%>
<%If SaveBasketEnabled Then%>
<a href="#modal-content-email-basket" role="button" class="btn btn-outline-secondary text-decoration-none" data-toggle="modal" data-bs-toggle="modal" title="Click this button to email yourself or a friend a copy of the basket"><i class="fa-regular fa-at"></i> Email basket</a>
<%End If%>
<%ShowBasketVersionsDropdown ' (SS,12/6/24) %>
<div class="mt-3")>
<%ShowBasketInfo(ATotalWeight)%>
</div>
</div>
</div>
</div> <!-- col -->
<%
End Sub
' (SS,12/6/24) !!! temporary, to be removed
Sub ShowBasketVersionsDropdown
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">
<%
ShowBasketAddVersion "1", ""
ShowBasketAddVersion "2", ""
ShowBasketAddVersion "3", ""
ShowBasketAddVersion "4", ""
ShowBasketAddVersion "5", ""
ShowBasketAddVersion "6", ""
ShowBasketAddVersion "7", ""
%>
</ul>
</li>
</ul>
</div>
<%
End Sub
' (SS,5/6/24)
Sub ShowBasketAddVersion(ANo, AName)
' divider
If ANo = "D" Then
%>
<li><hr class="dropdown-divider"></li>
<%
Exit Sub
End If
Dim LLink
LLink = GetBasketPageURL & "&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,20/2/24) new version
' Removed APrice column, move Qty to below product code, removed product code
' input type changed from "text" to "number", revert back was too wide and spinner came on PC browser, used inputmode="numeric" instead
' removed Bootstrap4Only from text-center for input qty, works in Bootstrap 3
' (SS,10/6/24) separated into separate BS 3&4 and 5 versions
Sub ShowBasketItem(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
If IsBootstrap5 Then
ShowBasketItemBS5 AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice
Else
ShowBasketItemBS3and4 AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice
End If
End Sub
Sub ShowBasketItemBS3and4(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
%>
<tr>
<td width="80"><a href="<%=GetProductLink(AProductCode)%>"><%=GetProductImgSrc(AProductCode, "", AProductCode, "bsk-thumbnail", "", "")%></a></td>
<td>
<p class="bsk-prod-name"><a href="<%=GetProductLink(AProductCode)%>"><%=AProductName%></a></p>
<p class="bsk-options-list"><%=AOptionsList%></p>
Qty
<a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)" class="changeqty"><i class="<%=Bootstrap3Only("glyphicon glyphicon-minus")%><%=Bootstrap4Only("fa fa-minus")%>"></i></a>
<input type="text" inputmode="numeric" class="basketqty text-center" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4">
<a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)" class="changeqty"><i class="<%=Bootstrap3Only("glyphicon glyphicon-plus")%><%=Bootstrap4Only("fa fa-plus")%>"></i></a>
<a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>"> delete</a>
</td>
<td style="text-align:right"><%=ATotalPrice%></td>
</tr>
<%
End Sub
' (SS,20/5/24) Bootstrap 5 version
' (SS,10/6/24) separated into separate version
Sub ShowBasketItemBS5_prev(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
%>
<tr>
<td width=""><a href="<%=GetProductLink(AProductCode)%>"><%=GetProductImgSrc(AProductCode, "", AProductCode, "bsk-thumbnail", "", "")%></a></td>
<td>
<p class=""><a href="<%=GetProductLink(AProductCode)%>"><%=AProductName%></a></p>
<p class=""><%=AOptionsList%></p>
Qty
<input type="text" inputmode="numeric" class="text-center" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4">
<a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)"><i class="mx-2 fa fa-minus")></i></a>
<a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)"><i class="mx-2 fa fa-plus")></i></a>
<a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>"><i class="mx-2 fa fa-trash")></i></a>
</td>
<td style=""><%=ATotalPrice%></td>
</tr>
<%
End Sub
' (SS,11/6/24) !!!! testing different versions
Sub ShowBasketItemBS5(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
Dim LVersion
LVersion = CleanRequest("ver")
If LVersion = "" Then LVersion = CleanRequest("v")
If LVersion = "" Then LVersion = "7"
Dim LSubRef
Set LSubRef = GetRef("ShowBasketItemBS5_v" + LVersion) ' get ref to the sub
LSubRef AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice ' call the sub
Set LSubRef = Nothing
End Sub
' (SS,20/5/24) Bootstrap 5 version
' (SS,10/6/24) separated into separate version, removed td and tr table tags, added divs
Sub ShowBasketItemBS5_v01(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
%>
<div class="row p-3 px-0 border-top border-bottom">
<div class="col-2">
<a href="<%=GetProductLink(AProductCode)%>"><%=GetProductImgSrc(AProductCode, "", AProductCode, "img-fluid", "", "")%></a>
</div>
<div class="col-8">
<div>
<p class=""><a href="<%=GetProductLink(AProductCode)%>"><%=AProductName%></a></p>
<p class=""><%=AOptionsList%></p>
</div>
<div>
<div class="input-group">
<span class="input-group-text" id="QTY_<%=AItemID%>-addon1">Qty</span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1">
</div>
<a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)"><i class="mx-2 fa fa-minus")></i></a>
<a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)"><i class="mx-2 fa fa-plus")></i></a>
<a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>"><i class="mx-2 fa fa-trash")></i></a>
</div>
</div>
<div class="col-2 text-end px-0">
<%=ATotalPrice%>
</div>
</div>
<%
End Sub
' (SS,20/5/24) Bootstrap 5 version
' (SS,10/6/24) separated into separate version, removed td and tr table tags, added divs
Sub ShowBasketItemBS5_v01(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
%>
<div class="row p-3 px-0 border-top border-bottom">
<div class="col-2">
<a href="<%=GetProductLink(AProductCode)%>"><%=GetProductImgSrc(AProductCode, "", AProductCode, "img-fluid", "", "")%></a>
</div>
<div class="col-8">
<div>
<p class=""><a href="<%=GetProductLink(AProductCode)%>"><%=AProductName%></a></p>
<p class=""><%=AOptionsList%></p>
</div>
<div>
<div class="input-group mb-3">
<span class="input-group-text" id="QTY_<%=AItemID%>-addon1">Qty</span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1" style="flex: 0 1 75px;">
<button class="btn btn-outline-secondary" type="button"><i class="mx-2 fa fa-minus")></i></button>
<button class="btn btn-outline-secondary" type="button"><i class="mx-2 fa fa-plus")></i></button>
<button class="btn btn-outline-secondary" type="button"><i class="mx-2 fa fa-trash")></i></button>
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="QTY_<%=AItemID%>-addon1">Qty</span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center btn-sm" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1" style="flex: 0 1 75px;">
<button class="btn btn-outline-secondary btn-sm" type="button"><i class="mx-2 fa fa-minus")></i></button>
<button class="btn btn-outline-secondary btn-sm" type="button"><i class="mx-2 fa fa-plus")></i></button>
<button class="btn btn-outline-secondary btn-sm" type="button"><i class="mx-2 fa fa-trash")></i></button>
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="QTY_<%=AItemID%>-addon1">Qty</span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center btn-sm" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1" style="flex: 0 1 75px;">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)"><i class="mx-2 fa fa-minus")></i></a></span>
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)"><i class="mx-2 fa fa-plus")></i></a></span>
<span class="input-group-text"><a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>"><i class="mx-2 fa fa-trash")></i></a></span>
</div>
<a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)"><i class="mx-2 fa fa-minus")></i></a>
<a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)"><i class="mx-2 fa fa-plus")></i></a>
<a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>"><i class="mx-2 fa fa-trash")></i></a>
</div>
</div>
<div class="col-2 text-end px-0">
<%=ATotalPrice%>
</div>
</div>
<%
End Sub
' (SS,20/5/24) Bootstrap 5 version
' (SS,10/6/24) separated into separate version, removed td and tr table tags, added divs
Sub ShowBasketItemBS5_v1(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
%>
<div class="row py-2 px-0 border-top border-bottom">
<div class="col-2 p-0">
<a href="<%=GetProductLink(AProductCode)%>"><%=GetProductImgSrc(AProductCode, "", AProductCode, "img-fluid", "", "")%></a>
</div>
<div class="col-8">
<div>
<p class="lh-sm mb-1"><a href="<%=GetProductLink(AProductCode)%>"><%=AProductName%></a></p>
<p class="small lh-1"><%=AOptionsList%></p>
</div>
<div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="QTY_<%=AItemID%>-addon1">Qty</span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center btn-sm" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1" style="flex: 0 1 50px;">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)" class="text-black"><i class="mx-1 fa fa-minus")></i></a></span>
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)" class="text-black"><i class="mx-1 fa fa-plus")></i></a></span>
<span class="input-group-text"><a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>" class="text-black"><i class="mx-1 fa-light fa-trash-can")></i></a></span>
</div>
</div>
</div>
<div class="col-2 text-end px-0">
<%=ATotalPrice%>
</div>
</div>
<%
End Sub
' (SS,20/5/24) Bootstrap 5 version
' (SS,10/6/24) separated into separate version, removed td and tr table tags, added divs
' border-top border-bottom"
Sub ShowBasketItemBS5_v2(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
%>
<div class="row py-2 px-0 my-3 border border-dark-subtle rounded-4 shadow-sm">
<div class="col-2 col-sm-2 p-2">
<a href="<%=GetProductLink(AProductCode)%>"><%=GetProductImgSrc(AProductCode, "", AProductCode, "img-fluid", "", "")%></a>
</div>
<div class="col-7 col-sm-8 px-0">
<div>
<p class="lh-sm my-1"><a href="<%=GetProductLink(AProductCode)%>"><%=AProductName%></a></p>
<p class="small lh-1"><%=AOptionsList%></p>
</div>
<div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="QTY_<%=AItemID%>-addon1">Qty</span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center fw-bold" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1" style="flex: 0 1 50px;">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)" class="text-black"><i class="mx-1 fa fa-minus")></i></a></span>
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)" class="text-black"><i class="mx-1 fa fa-plus")></i></a></span>
</div>
</div>
</div>
<div class="col-3 col-sm-2 text-end p-0 pe-3">
<a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>" class="text-black"><i class="mb-2 fa-regular fa-xmark")></i></a>
<p class="fw-bold"><%=ATotalPrice%></p>
<%If AQty > 1 Then%>
<p class="text-secondary lh-1"><%=APrice%> <small>each</small></p>
<%End If%>
</div>
</div>
<%
End Sub
' (SS,20/5/24) Bootstrap 5 version
' (SS,10/6/24) separated into separate version, removed td and tr table tags, added divs
' more of a shadow effect
Sub ShowBasketItemBS5_v3(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
%>
<div class="row py-2 px-0 my-3 border border-dark-subtle rounded-4 shadow">
<div class="col-2 col-sm-2 p-2">
<a href="<%=GetProductLink(AProductCode)%>"><%=GetProductImgSrc(AProductCode, "", AProductCode, "img-fluid", "", "")%></a>
</div>
<div class="col-7 col-sm-8 px-0">
<div>
<p class="small text-body-tertiary m-0 p-0"><%=AProductCode%></p>
<p class="lh-sm my-1"><a href="<%=GetProductLink(AProductCode)%>" class="text-success fw-bold"><%=AProductName%></a></p>
<p class="small lh-1"><%=AOptionsList%></p>
</div>
<div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)" class="text-black"><i class="mx-1 fa fa-minus")></i></a></span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center fw-bold" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1" style="flex: 0 1 50px;">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)" class="text-black"><i class="mx-1 fa fa-plus")></i></a></span>
</div>
</div>
</div>
<div class="col-3 col-sm-2 text-end p-0 pe-3">
<a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>" class="text-black"><i class="mb-2 fa-regular fa-xmark")></i></a>
<p class="fw-bold"><%=ATotalPrice%></p>
<%If AQty > 1 Then%>
<p class="text-secondary lh-1"><%=APrice%> <small>each</small></p>
<%End If%>
</div>
</div>
<%
End Sub
' (SS,20/5/24) Bootstrap 5 version
' (SS,10/6/24) separated into separate version, removed td and tr table tags, added divs
Sub ShowBasketItemBS5_v4(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
%>
<div class="row py-2 px-0 my-3 border border-dark-subtle rounded-4 shadow-sm">
<div class="col-2 col-sm-2 p-2">
<a href="<%=GetProductLink(AProductCode)%>"><%=GetProductImgSrc(AProductCode, "", AProductCode, "img-fluid", "", "")%></a>
</div>
<div class="col-7 col-sm-8 px-0">
<div>
<p class="small text-body-tertiary m-0 p-0"><%=AProductCode%></p>
<p class="lh-sm my-1"><a href="<%=GetProductLink(AProductCode)%>" class="text-success fw-bold"><%=AProductName%></a></p>
<p class="small lh-1"><%=AOptionsList%></p>
</div>
<div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)" class="text-black"><i class="mx-1 fa fa-minus")></i></a></span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center fw-bold" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1" style="flex: 0 1 50px;">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)" class="text-black"><i class="mx-1 fa fa-plus")></i></a></span>
</div>
</div>
</div>
<div class="col-3 col-sm-2 text-end p-0 pe-3">
<a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>" class="text-black"><i class="mb-2 fa-regular fa-xmark")></i></a>
<p class="fw-bold"><%=ATotalPrice%></p>
<%If AQty > 1 Then%>
<p class="text-secondary lh-1"><%=APrice%> <small>each</small></p>
<%End If%>
</div>
</div>
<%
End Sub
' (SS,20/5/24) Bootstrap 5 version
' (SS,10/6/24) separated into separate version, removed td and tr table tags, added divs
' product name and options spans the full width with price lower down, also default shadow
Sub ShowBasketItemBS5_v5(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
%>
<div class="row py-2 px-0 my-3 border border-dark-subtle rounded-4 shadow">
<div class="col-2 col-sm-2 p-2">
<a href="<%=GetProductLink(AProductCode)%>"><%=GetProductImgSrc(AProductCode, "", AProductCode, "img-fluid", "", "")%></a>
</div>
<div class="col-10 col-sm-10 px-0">
<div class="row">
<div class="col">
<p class="small text-body-tertiary m-0 p-0"><%=AProductCode%></p>
</div>
<div class="col-auto me-3">
<a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>" class="text-black"><i class="fa-regular fa-xmark")></i></a>
</div>
</div>
<div class="pe-2">
<p class="lh-sm my-1"><a href="<%=GetProductLink(AProductCode)%>" class="text-success fw-bold"><%=AProductName%></a></p>
<p class="small lh-1"><%=AOptionsList%></p>
</div>
<div class="row">
<div class="col-6 col-sm-6">
<div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)" class="text-black"><i class="mx-1 fa fa-minus")></i></a></span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center fw-bold" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1" style="flex: 0 1 50px;">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)" class="text-black"><i class="mx-1 fa fa-plus")></i></a></span>
</div>
</div>
</div>
<div class="col-6 col-sm-6 text-end">
<p class="fw-bold pe-3 mt-0 mb-1"><%=ATotalPrice%></p>
<%If AQty > 1 Then%>
<p class="text-secondary lh-1 small pe-3 py-0 mb-1"><%=APrice%> each</p>
<%End If%>
</div>
</div>
</div>
</div>
<%
End Sub
' (SS,20/5/24) Bootstrap 5 version
' (SS,10/6/24) separated into separate version, removed td and tr table tags, added divs
' product name and options spans the full width with price lower down, also default shadow
' (SS,13/6/24) larger qty to prevent iOS zoom in, just removed input-group-sm, also changed col balance from 6 6 to 7 5 due to wrap on input, changed font from fs-6 to fs-5 for total price
' also increased image space from col-2 to col-3 for bigger images on samller devices, added my-auto to center image vertically
Sub ShowBasketItemBS5_v6(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
' (SS,13/6/24) added custom image feature, to allow default image to be overridden
Dim LImageSrc
LImageSrc = GetProductImgSrc(AProductCode, "", AProductCode, "img-fluid", "", "")
%>
<div class="row py-2 px-0 my-3 border border-dark-subtle rounded-4 shadow">
<div class="col-3 col-sm-3 p-2 my-auto text-center">
<a href="<%=GetProductLink(AProductCode)%>"><%=LImageSrc%></a>
</div>
<div class="col-9 col-sm-9 px-0">
<div class="row">
<div class="col">
<p class="small text-body-tertiary m-0 p-0"><%=AProductCode%></p>
</div>
<div class="col-auto me-3">
<a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>" class="text-black"><i class="fa-regular fa-xmark")></i></a>
</div>
</div>
<div class="pe-2">
<p class="lh-sm my-1"><a href="<%=GetProductLink(AProductCode)%>" class="text-success fw-bold"><%=AProductName%></a></p>
<p class="small lh-1"><%=AOptionsList%></p>
</div>
<div class="row">
<div class="col-7 col-sm-7 pe-0">
<div>
<div class="input-group mb-3">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)" class="text-black"><i class="mx-1 fa fa-minus")></i></a></span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center fw-bold" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1" style="flex: 0 1 50px;">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)" class="text-black"><i class="mx-1 fa fa-plus")></i></a></span>
</div>
</div>
</div>
<div class="col-5 col-sm-5 text-end ps-0">
<p class="fs-5 fw-bold pe-3 mt-0 mb-1"><%=ATotalPrice%></p>
<%If AQty > 1 Then%>
<p class="text-secondary lh-1 small pe-3 py-0 mb-1"><%=APrice%> each</p>
<%End If%>
</div>
</div>
</div>
</div>
<%
End Sub
' (SS,20/5/24) Bootstrap 5 version
' (SS,10/6/24) separated into separate version, removed td and tr table tags, added divs
' product name and options spans the full width with price lower down, also default shadow
' (SS,13/6/24) larger qty to prevent iOS zoom in, just removed input-group-sm, also changed col balance from 6 6 to 7 5 due to wrap on input, changed font from fs-6 to fs-5 for total price
' also increased image space from col-2 to col-3 for bigger images on samller devices, added my-auto to center image vertically
' added custom image if CustomGetBasketImage defined
Sub ShowBasketItemBS5_v7(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
' (SS,13/6/24) added custom image feature, to allow default image to be overridden
Dim LImageSrc
LImageSrc = GetProductImgSrc(AProductCode, "", AProductCode, "img-fluid", "", "")
If FunctionExists("CustomGetBasketImage") Then
LImageSrc = CustomGetBasketImage(AItemID, AProductID, AProductCode, AProductName, AOptionsList, LImageSrc)
End If
%>
<div class="row py-2 px-0 my-3 border border-dark-subtle rounded-4 shadow">
<div class="col-3 col-sm-3 p-2 my-auto text-center">
<a href="<%=GetProductLink(AProductCode)%>"><%=LImageSrc%></a>
</div>
<div class="col-9 col-sm-9 px-0">
<div class="row">
<div class="col">
<p class="small text-body-tertiary m-0 p-0"><%=AProductCode%></p>
</div>
<div class="col-auto me-3">
<a href="<%=GetScriptName%>?cmd=remove&itemid=<%=AItemID%>" class="text-black"><i class="fa-regular fa-xmark")></i></a>
</div>
</div>
<div class="pe-2">
<p class="lh-sm my-1"><a href="<%=GetProductLink(AProductCode)%>" class="text-success fw-bold"><%=AProductName%></a></p>
<p class="small lh-1"><%=AOptionsList%></p>
</div>
<div class="row">
<div class="col-7 col-sm-7 pe-0">
<div>
<div class="input-group mb-3">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','-1', true)" class="text-black"><i class="mx-1 fa fa-minus")></i></a></span>
<input type="text" id="QTY_<%=AItemID%>" inputmode="numeric" class="form-control text-center fw-bold" name="QTY_<%=AItemID%>" value="<%=AQty%>" size="2" maxlength="4" aria-describedby="QTY_<%=AItemID%>-addon1" style="flex: 0 1 50px;">
<span class="input-group-text"><a href="javascript:itp_changeqty('QTY_<%=AItemID%>','1', true)" class="text-black"><i class="mx-1 fa fa-plus")></i></a></span>
</div>
</div>
</div>
<div class="col-5 col-sm-5 text-end ps-0">
<p class="fs-5 fw-bold pe-3 mt-0 mb-1"><%=ATotalPrice%></p>
<%If AQty > 1 Then%>
<p class="text-secondary lh-1 small pe-3 py-0 mb-1"><%=APrice%> each</p>
<%End If%>
</div>
</div>
</div>
</div>
<%
End Sub
' (SS,4/7/11) added AItemID and AOptionsList
' (SS,6/7/11) removed AProductDashAsUnderscore and AProductCodeURLEncoded added AProductID
Sub ShowBasketItemAlternateColor(AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice)
ShowBasketItem AItemID, AProductID, AProductCode, AProductName, AOptionsList, AQty, APrice, ATotalPrice
End Sub
' (SS,20/2/24) new version added /div for col and row
' separate delivery and total to ShowBasketDeliveryTotals and moved up
' removed pull-left, removed bootstrap 4 code, parameters are now redundant
Sub ShowBasketFooter
' ShowBasketDeliveryTotals APostalArea, ASubtotal, AVoucherCode, ADiscount, ADelivery, AVATTotal, AIsVATDeducted, AGrandTotal, ATotalWeight, AHRefContinue, AHRefCheckout
%>
</div> <!-- row -->
</form>
</div>
<%
' (SS,20/2/15)
ShowBasketEmailModal
End Sub
' (SS,20/2/24) separated from ShowBasketFooter
' removed pull-right and bootstrap 4 code, added AItems
' added <br> after LVoucherMessage to prevent button appearing on the left in mobile size and looking untidy
' (SS,20/5/24) For Bootstrap 5 replaced Bootstrap4Only("text-right mt-3") with Bootstrap4Only("float-end my-2") (two places)
Sub ShowBasketDeliveryTotals(APostalArea, ASubtotal, AItems, AVoucherCode, ADiscount, ADelivery, AVATTotal, AIsVATDeducted, AGrandTotal, ATotalWeight, AHRefContinue, AHRefCheckout)
' (SS,20/4/16) to show voucher message if set
Dim LVoucherMessage
LVoucherMessage = GetMessage("Voucher")
' (SS,29/6/18) replaced delivery label with following to show "Tracked" or "Untracked" prefix for HF
Dim LDeliveryLabel
LDeliveryLabel = "Delivery (" & APostalArea & ")"
If TrackedDeliveryOptionEnabled Then
' LDeliveryLabel = Iif(GetTrackedDeliverySelected, "Tracked", "Untracked") & " " & LDeliveryLabel
' (SS,22/4/21) modified for expedited, replaced above with following
Dim LLabelPrefix
If GetTrackedDeliverySelected Then
LLabelPrefix = "Tracked"
ElseIf GetExpeditedDeliverySelected Then
LLabelPrefix = "Expedited"
Else
LLabelPrefix = "Untracked"
End If
LDeliveryLabel = LLabelPrefix + " " + LDeliveryLabel
Else
' (SS,17/9/21) following (for CIRC) to allow "Kerbside Pallet Delivery" to show which is set using "Kerbside Delivery", else as before
If GetDeliveryOption <> "" Then
LDeliveryLabel = GetDeliveryOption + " Delivery"
End If
End If
' (SS,21/2/24)
Dim LItemsCaption
LItemsCaption = "(" + PluralString(AItems, "item", "items") + ")"
' (SS,22/5/24) variation for Bootstrap 5 compared to 3 and 4
Dim LBootstrapClass
If IsBootstrap5 Then
LBootstrapClass = "col-lg-3 col-md-4 col-sm-12 col-12 float-end ps-3"
Else ' bootstrap 4 might required float-right but we're dropping support for BS4
LBootstrapClass = "col-lg-3 col-md-3 col-sm-4 col-xs-12 pull-right"
End If
' (SS,22/5/24) added class="form-label" for bs5, kept discontinued "form-group" for bs3 but added "mb-3" to it for bs5
' (SS,3/6/24) removed btn-lg because button became too large
' (SS,5/6/24) added "float-end" for BS5 which might not work as expected for BS3
' (SS,7/6/24) changed id btnProceedToCheckout to btnProceedToCheckoutTop because we can't have more than one button with same ID and we may make to hook into an ID by name
%>
<div class="<%=LBootstrapClass%>">
<div class="float-end">
<h3 class="text-end">
Subtotal <span style="font-weight: bold"><%=ASubtotal%></span>
</h3>
<p>
<a id="btnProceedToCheckoutTop" href="products.asp?cmd=checkout" class="btn btn-success mb-3 float-end text-decoration-none">Proceed to checkout <i class="fa fa-chevron-right"></i></a>
<!--<br><small><%=LItemsCaption%></small>-->
</p>
<div class="form-group mb-3">
<label for="DeliveryCountry" class="form-label">Delivery Country</label>
<%=GetCountryCombo("DeliveryCountry", "onChange=javascript:document.frmBasket.submit()")%>
</div>
<%
If AllowCollection And AllowCollectionBasketPage Then
Dim LDeliveryWillCollect
If Session("DeliveryWillCollect") Then
LDeliveryWillCollect = " checked"
Else
LDeliveryWillCollect = ""
End If
%>
<div class="checkbox">
<label>
<input type="checkbox" name="DeliveryWillCollect" id="DeliveryWillCollect" value="checked" onChange="javascript:document.frmBasket.submit()" <%=LDeliveryWillCollect%>> Click & Collect
</label>
</div>
<%
End If
%>
<%If TrackedDeliveryOptionEnabled Then%>
<div class="form-group">
<strong>Preferred Delivery Method</strong>
<div class="radio">
<label>
<input type="radio" name="DeliveryMethod" id="DeliveryOption1" value="untracked"<%=iif(GetUntrackedDeliverySelected, " checked", "")%><%=iif(GetUntrackedDeliverySelectionAllowed, "", " disabled")%> onChange="javascript:document.frmBasket.submit()"> Untracked
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="DeliveryMethod" id="DeliveryOption2" value="tracked"<%=iif(GetTrackedDeliverySelected, " checked", "")%><%=iif(GetTrackedDeliverySelectionAllowed, "", " disabled")%> onChange="javascript:document.frmBasket.submit()"> Tracked
</label>
</div>
<div class="radio">
<label class="radio">
<input type="radio" name="DeliveryMethod" id="DeliveryOption3" value="expedited"<%=iif(GetExpeditedDeliverySelected, " checked", "")%><%=iif(GetExpeditedDeliverySelectionAllowed, "", " disabled")%> onChange="javascript:document.frmBasket.submit()"> Expedited (FedEx)
</label>
</div>
</div>
<%End If%>
<%If VouchersEnabled Then%>
<div class="form-group mb-3">
<label for="VoucherCode" class="form-label">Voucher Code</label>
<input type="text" name="VoucherCode" id="VoucherCode" class="form-control" placeholder="Enter a voucher code" value="<%=Session("VoucherCode")%>" maxlength="20" aria-describedby="voucherHelpBlock">
<%If LVoucherMessage <> "" Then%>
<span class="<%=Bootstrap3Only("help-block pull-right")%>" id="voucherHelpBlock"><%=LVoucherMessage%></span>
<br>
<%End If%>
</div>
<div class="<%=Bootstrap3Only("pull-right")%><%=Bootstrap4Only("float-end mb-3")%>" style="<%=Bootstrap3Only("margin-top: -10px; margin-bottom: 5px")%>">
<%=GetButtonBasketApplyVoucherCode%>
</div>
<%End If%>
</div>
<table class="basket-totals">
<tr>
<th>Subtotal</th>
<td><%=ASubtotal%></td>
</tr>
<%If AVoucherCode <> "" Then%>
<tr>
<th>Discount</th>
<td><%=ADiscount%></td>
</tr>
<%End If%>
</tr>
<tr>
<th><%=LDeliveryLabel%></th>
<td><%=ADelivery%></td>
</tr>
<%If IsVATRegistered And Not AIsVATDeducted Then ' (SS,15/4/16) added And Not AIsVATDeducted to not show when VAT id deducted, confusing for users %>
<tr>
<th><%=GetVATLabel%></th>
<td><%=AVATTotal%></td>
</tr>
<%End If%>
<tr>
<th>Grand Total</th>
<td><%=AGrandTotal%></td>
</tr>
</table>
<div class="<%=Bootstrap4Only("float-end my-2")%>" style="<%=Bootstrap3Only("float: right; margin-top: 5px; margin-bottom: 10px")%>">
<%=GetButtonProceedToCheckout%>
</div>
<%=Bootstrap3Only("<br/>")%>
<%If GetPayPalExpressEnabled And GetPayPalExpressShowOnBasketPage Then%>
<div class="<%=Bootstrap4Only("text-right mt-3")%>" style="<%=Bootstrap3Only("float: right; margin-top: 5px; margin-bottom: 10px")%>">
<a href="products.asp?cmd=checkout&stage=<%=CS_PAYPAL_EXPRESS_CHECKOUT%>" id="btnProceedToCheckoutPayPal">
<img src="/images/paypal-checkout-logo.png" alt="Check out with PayPal">
</a>
</div>
<%End If%>
<%If GetPayPalPayLaterMessagesEnabled Then ' (SS,3/8/22) added following for PayPal's Pay Later feature %>
<div data-pp-message data-pp-style-layout="text" data-pp-style-logo-type="primary" data-pp-style-text-color="black" data-pp-style-text-align="right" data-pp-amount="<%=RemoveCurrencyAndCommas(AGrandTotal)%>"></div>
<%End If%>
</div>
<%
End Sub
' (SS,20/2/15) shows the modal popup when Email basket button clicked
' using anchor instead of button for "Close" button ensures that the submit button ("Send") is clicked by default when enter key pressed
' (SS,20/9/19) modified for Bootstrap 4
' (SS,29/9/20) modified to work for both Bootstrap 3 and 4
' (SS,6/6/24) modified to work with Bootstrap 5, also added data-bs-dismiss="modal" to close button, added modal-dialog-centered to close next to class="modal-dialog" to vertically centre the modal
' tidied the form for BS5, label for id=emailBasketEmail, also mb-3
Sub ShowBasketEmailModal
If Not SaveBasketEnabled Then Exit Sub
%>
<div class="modal fade" id="modal-content-email-basket" tabindex="-1" role="dialog" aria-labelledby="emailBasketModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content" role="document">
<%If IsBootstrap5 Then%>
<div class="modal-header">
<h5 class="modal-title" id="emailBasketModalLabel">Email basket</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<%ElseIf IsBootstrap4 Then%>
<div class="modal-header">
<h5 class="modal-title" id="emailBasketModalLabel">Email basket</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<%Else%>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Email basket</h4>
</div>
<%End If%>
<form name="frmEmailBasket" method="post" action="<%=GetSaveBasketURL%>">
<div class="modal-body">
<p>Enter your email address below and click "Send" to have the basket emailed to you.</p>
<div class="form-group mb-3"><label for="emailBasketEmail" class="form-label">Email</label><input class="form-control email" id="emailBasketEmail" placeholder="Enter email address here" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user@gmail.com)" type="email" required="required" name="email" autofocus></div>
<%If Not IsLocalMode Then%>
<div class="form-group mb-3"><label for="emailBasketName" class="form-label">Name</label><input class="form-control" id="emailBasketName" placeholder="Enter full name here (optional)" data-placement="top" data-trigger="manual" type="text" name="name"></div>
<div class="form-group mb-3"><label for="emailBasketAddress" class="form-label">Address (optional)</label><textarea class="form-control" id="emailBasketAddress" placeholder="Enter full address here (optional)" data-placement="top" data-trigger="manual" type="text" name="address" rows="5"></textarea></div>
<%End If%>
<div class="form-group"><label for="emailBasketMessage" class="form-label">Message (optional)</label><textarea class="form-control" id="emailBasketMessage" placeholder="Enter a message here for your own reference (optional)" data-placement="top" data-trigger="manual" type="text" name="message" rows="3"></textarea></div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-secondary" data-dismiss="modal" data-bs-dismiss="modal">Close</button>
<input class="btn btn-success" type="submit" value="Send" id="submit">
</div>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<%
End Sub
' --- END OF BASKET TEMPLATES --- '
%>