Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • James Dimmer 12 posts 155 karma points
    Aug 18, 2017 @ 13:03
    James Dimmer
    0

    Adding multiple products to a basket with different quantities from a single button click

    Hi,

    I was wondering if it is possible to have a form like the one below and to add the products to the basket based on the quantity field for each product displayed.

    I am hoping that this can be done with the click of the 'Add to Basket' button.

    (I have the form already built this question is related to the adding of the products to the basket)

    enter image description here

    I am using Merchello and FastTrack v2.5.0.

    The items listed under each section are different variants of a product and the customer will be picking how many of each variant they would like to add to the basket. The sections from '2' onward are related products and again the variants are listed.

    Thanks, James

  • James Dimmer 12 posts 155 karma points
    Aug 21, 2017 @ 15:46
    James Dimmer
    101

    Just to update, I have managed to do this now via javascript. I am building the HTML as follows...

    @if (Model.ProductVariants.Any())
                            {
                                foreach (IProductVariantContent variant in Model.ProductVariants.Take(2))
                                {
                                    int attCount = 0;
                                    <tr data-nem="productitem">
                                        <td data-label="Product"><h4>@variant.Name</h4></td>
                                        <td data-label="Monthly cost"><strong class="price">@variant.Price</strong></td>
                                        <td data-label="Upfront cost"><strong class="price">£0.00</strong></td>
                                        <td data-label="Plan term">36 months</td>
                                        @foreach (ProductAttributeDisplay att in variant.Attributes)
                                        {
                                            <td class="hidden"><input type="hidden" class="option" name="OptionChoices[@attCount]" value="@att.Key" /></td>
                                            attCount++;
                                        }
                                        <td class="hidden">@Html.Hidden("ProductKey", variant.ProductKey)</td>
                                        <td class="hidden">@Html.Hidden("SuccessRedirectUrl", Model.Url)</td>
                                        <td class="hidden">@Html.AntiForgeryToken()</td>
                                        <td data-label="Quantity"><input type="text" id="quantity" title="Quantity Input" class="form-control" /></td>
                                    </tr>
                                }
                            }
                            else
                            {
                                <tr data-nem="productitem">
                                    <td data-label="Product"><h4>@Model.Name</h4></td>
                                    <td data-label="Monthly cost"><strong class="price">@Model.Price</strong></td>
                                    <td data-label="Upfront cost"><strong class="price">£0.00</strong></td>
                                    <td data-label="Plan term">36 months</td>
                                    <td class="hidden">@Html.Hidden("ProductKey", Model.Key)</td>
                                    <td class="hidden">@Html.Hidden("SuccessRedirectUrl", Model.Url)</td>
                                    <td class="hidden">@Html.AntiForgeryToken()</td>
                                    <td data-label="Quantity"><input type="text" id="quantity" title="Quantity Input" class="form-control" /></td>
                                </tr>
                            }
    

    I do the same for any related products.

    Then have the following JS run on the click of the 'Add to Basket' button.

    $('a#addProducts').click(function (event) {
        event.preventDefault();
        var products = $('tr[data-nem="productitem"]');
        var postData = "";
        var response = "";
        if (products.length > 0)
        {
            for (var i = 0; i < products.length; i++) {
                var product = products[i];
                var qty = $(product).find('#quantity');
                if (qty != undefined && qty.val() > 0)
                {
                    postData = "Quantity=" + qty.val();
    
                    var options = $(product).find('input.option');
                    if (options.length > 0)
                    {
                        $.each(options, function (index, option) {
                            postData += "&" + $(this).attr('name') + '=' + $(this).attr('value');
                        });
                    }
    
                    var key = $(product).find('input#ProductKey');
                    if (key != undefined)
                    {
                        postData += "&" + $(key).attr('name') + '=' + $(key).attr('value');
                    }
    
                    var url = $(product).find('input#SuccessRedirectUrl');
                    if (url != undefined) {
                        postData += "&" + $(url).attr('name') + '=' + $(key).attr('value');
                    }
    
                    var token = $(product).find('input[name="__RequestVerificationToken"]');
                    if (token != undefined) {
                        postData += "&" + $(token).attr('name') + '=' + $(token).attr('value');
                    }
    
                    if (MUI.Settings.Endpoints.basketSurface !== undefined && MUI.Settings.Endpoints.basketSurface !== '') {
                        MUI.AddItem.postUrl = MUI.Settings.Endpoints.basketSurface + 'AddBasketItem';
                    }
    
                    if (postData != '')
                    {
                        $.ajax({
                            type: 'POST',
                            url: MUI.AddItem.postUrl,
                            data: postData
                        }).then(function (result) {
                            MUI.emit('AddItem.added', result);
                            MUI.Notify.info('Successfully added item to basket');
                        }, function (err) {
                            MUI.Logger.captureError(err);
                        });
                    }
                }
                postData = "";
            }
        }
    });
    

    With this I can then go through all of the items (whether it is a variant of a product or not) on the page and find the quantity entered, the variants' options (if any), and add them incrementally to the basket.

    Thanks, James

  • Puck Holshuijsen 90 posts 352 karma points
    Sep 28, 2017 @ 14:25
    Puck Holshuijsen
    0

    You sir, are a hero! Many thanks for posting your solution, saved me a lot of headaches.

    Puck

Please Sign in or register to post replies

Write your reply to:

Draft