Multiple cart button with quantity dropdown under a repeater

Posted by Jithuvarma under jQuery on 5/18/2017 | Points: 10 | Views : 141 | Status : [Member] | Replies : 0
I have a functionality where my page has more than one product and each product has separate quantity dropdown linked with an "Add to cart" button. When I click on he cart button, only that particular item quantity must be added to the cart. Further on the html side, the products are inside an repeater.

HTML code


<asp:Repeater ID="repeater" runat="server">
<ItemTemplate>
<asp:HiddenField ID="itemid" runat="server" />
<h3 class="hdr hdr-tertiary">
<asp:Literal ID="itemLevelTitle" runat="server"></asp:Literal></h3>
<asp:Literal ID="itemDetailsLink" runat="server"></asp:Literal>
<asp:Literal ID="itemDetailsDivId" runat="server"></asp:Literal>
<asp:Literal ID="itemDetailsContent" runat="server"></asp:Literal>
</div>

<label for="quantity1"><strong>Quantity</strong></label>
<asp:DropDownList ID="qtydropdown" runat="server" Enabled="true" CssClass="quantity">
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="6">6</asp:ListItem>
<asp:ListItem Value="7">7</asp:ListItem>
<asp:ListItem Value="8">8</asp:ListItem>
<asp:ListItem Value="9">9</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
</asp:DropDownList>
<span class="cartbtn"><a class="btn-orange btn-simple btn-break-block" href="#">Add to Cart</a></span>
<span class="errorMsg" style="display: none;">Please enter a valid quantity.</span></div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>

jQuery code for the cart button:


$('.cartbtn a').on('click', function (e) {
var link = this;
var itemname = $('#ctl00_MainContentHolder_lblName').html().replace(/Adopt a /g, '');
var itemregexp = new RegExp(' ' + itemname, 'g');
var level = $(link).parent().parent().prev('h3').html().replace(itemregexp, '');
var box = link.parentNode.previousSibling;
var quant = box.id;
var ddl = $(this).closest('div').find('select');
var selectedValue = ddl.val();
if (selectedValue >= 1) {
$(box).next().next().css("display", "block");
} else {
$('.quantity').each(function () {

dataLayer.push({
'gtmCategory': 'Page Type',
'gtmAction': 'Item details Add to Cart',
'gtmLabel': itemname + " combo ("




Responses

(No response found.)

Login to post response