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)
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.
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.
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)
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
Just to update, I have managed to do this now via javascript. I am building the HTML as follows...
I do the same for any related products.
Then have the following JS run on the click of the 'Add to Basket' button.
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
You sir, are a hero! Many thanks for posting your solution, saved me a lot of headaches.
Puck
is working on a reply...