Today, we’re going to talk about the Fly To Cart feature and show you how you can add it to your Magento 2 store.
In the past, when customers added products to their shopping cart, the store would send the customers to the shopping cart page, which was unnecessarily time-consuming, especially when customers wanted to add multiple products to their shopping carts.
Fortunately, this process has been greatly simplified with the help of the Fly To Cart feature.
In this post, we will explain what is Fly To Cart feature, and how to add Fly To Cart feature in a Magento 2 store.
What is Fly To Cart Feature?
Fly To Cart, as the name suggests, is a feature that makes the selected product flown into the cart in an online store.
This, in turn, makes adding products to the shopping cart done within a single screen.
Not only that but the Fly To Cart feature also allows customers to track how many products are in the cart so that they don’t have to check their shopping cart to make sure if products are included in the purchase or not.
As a result, this process makes the online shopping experience quite more enjoyable.
And in this post, we’re going to show you exactly how to add Fly To Cart feature in your Magento 2 store.
Step-by-Step Process to Add Fly To Cart Feature in Magento 2
Please follow the below steps to learn how to add Fly To Cart feature in your Magento 2 store.
Step - 1
First of all, create a requirejs-config.js file in the Vendor/Module/view/frontend/ folder and paste the following code:
var config = {
map: {
'*': {
catalogAddToCart: 'Vendor_Module/js/catalog-add-to-cart'
}
}
};
Step - 2
After that, open the catalog-add-to-cart.js file from the Vendor_Module/js/ folder and paste the following code:
define([
'jquery',
'mage/translate',
'underscore',
'Magento_Catalog/js/product/view/product-ids-resolver',
'jquery-ui-modules/widget'
], function ($, $t, _, idsResolver) {
'use strict';
$.widget('mage.catalogAddToCart', {
options: {
processStart: null,
processStop: null,
bindSubmit: true,
minicartSelector: '[data-block="minicart"]',
messagesSelector: '[data-placeholder="messages"]',
productStatusSelector: '.stock.available',
addToCartButtonSelector: '.action.tocart',
addToCartButtonDisabledClass: 'disabled',
addToCartButtonTextWhileAdding: '',
addToCartButtonTextAdded: '',
addToCartButtonTextDefault: '',
},
/** @inheritdoc */
_create: function () {
if (this.options.bindSubmit) {
this._bindSubmit();
}
},
/**
* @private
*/
_bindSubmit: function () {
var self = this;
if (this.element.data('catalog-addtocart-initialized')) {
return;
}
this.element.data('catalog-addtocart-initialized', 1);
this.element.on('submit', function (e) {
e.preventDefault();
self.submitForm($(this));
});
},
/**
* @private
*/
_redirect: function (url) {
var urlParts, locationParts, forceReload;
urlParts = url.split('#');
locationParts = window.location.href.split('#');
forceReload = urlParts[0] === locationParts[0];
window.location.assign(url);
if (forceReload) {
window.location.reload();
}
},
/**
* @return {Boolean}
*/
isLoaderEnabled: function () {
return this.options.processStart && this.options.processStop;
},
/**
* Handler for the form 'submit' event
*
* @param {jQuery} form
*/
submitForm: function (form) {
this.ajaxSubmit(form);
},
/**
* @param {jQuery} form
*/
ajaxSubmit: function (form) {
var self = this,
productIds = idsResolver(form),
formData;
$(self.options.minicartSelector).trigger('contentLoading');
self.disableAddToCartButton(form);
formData = new FormData(form[0]);
$.ajax({
url: form.attr('action'),
data: formData,
type: 'post',
dataType: 'json',
cache: false,
contentType: false,
processData: false,
/** @inheritdoc */
beforeSend: function () {
if (self.isLoaderEnabled()) {
$('body').trigger(self.options.processStart);
}
},
/** @inheritdoc */
success: function (res) {
var eventData, parameters;
$(document).trigger('ajax:addToCart', {
'sku': form.data().productSku,
'productIds': productIds,
'form': form,
'response': res
});
if (self.isLoaderEnabled()) {
$('body').trigger(self.options.processStop);
}
const miniCartElm = $(self.options.minicartSelector);
if (miniCartElm.length > 0) {
let productImage = form.closest('.product-item-info').find('img.product-image-photo').eq(0);
if (productImage.length === 0) {
productImage = form.closest('.column.main').find('.product.media img').eq(0);
}
if (productImage.length === 0) {
productImage = form.closest('tr.price-list-item').find('img.product-image-photo').eq(0);
}
if (productImage.length > 0) {
const productImageClone = productImage.clone()
.offset({
top: productImage.offset().top,
left: productImage.offset().left
})
.css({
'opacity': '0.75',
'position': 'absolute',
'z-index': '9999',
'width': 300,
'height': 300
})
.appendTo($('body'));
productImageClone.removeClass();
productImageClone.animate({
'top': miniCartElm.offset().top + 10,
'left': miniCartElm.offset().left + 10,
'width': 0,
'height': 0
}, 700, 'easeInOutCubic', function () {
$(this).detach();
});
setTimeout(function () {
miniCartElm.find('.counter').effect('bounce', {
times: 1
}, 200);
}, 700);
}
}
if (res.backUrl) {
eventData = {
'form': form,
'redirectParameters': []
};
// trigger global event, so other modules will be able add parameters to redirect url
$('body').trigger('catalogCategoryAddToCartRedirect', eventData);
if (eventData.redirectParameters.length > 0 &&
window.location.href.split(/[?#]/)[0] === res.backUrl
) {
parameters = res.backUrl.split('#');
parameters.push(eventData.redirectParameters.join('&'));
res.backUrl = parameters.join('#');
}
self._redirect(res.backUrl);
return;
}
if (res.messages) {
$(self.options.messagesSelector).html(res.messages);
}
if (res.minicart) {
$(self.options.minicartSelector).replaceWith(res.minicart);
$(self.options.minicartSelector).trigger('contentUpdated');
}
if (res.product && res.product.statusText) {
$(self.options.productStatusSelector)
.removeClass('available')
.addClass('unavailable')
.find('span')
.html(res.product.statusText);
}
self.enableAddToCartButton(form);
},
/** @inheritdoc */
error: function (res) {
$(document).trigger('ajax:addToCart:error', {
'sku': form.data().productSku,
'productIds': productIds,
'form': form,
'response': res
});
},
/** @inheritdoc */
complete: function (res) {
if (res.state() === 'rejected') {
location.reload();
}
}
});
},
/**
* @param {String} form
*/
disableAddToCartButton: function (form) {
var addToCartButtonTextWhileAdding = this.options.addToCartButtonTextWhileAdding || $t('Adding...'),
addToCartButton = $(form).find(this.options.addToCartButtonSelector);
addToCartButton.addClass(this.options.addToCartButtonDisabledClass);
addToCartButton.find('span').text(addToCartButtonTextWhileAdding);
addToCartButton.attr('title', addToCartButtonTextWhileAdding);
},
/**
* @param {String} form
*/
enableAddToCartButton: function (form) {
var addToCartButtonTextAdded = this.options.addToCartButtonTextAdded || $t('Added'),
self = this,
addToCartButton = $(form).find(this.options.addToCartButtonSelector);
addToCartButton.find('span').text(addToCartButtonTextAdded);
addToCartButton.attr('title', addToCartButtonTextAdded);
setTimeout(function () {
var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('Add to Cart');
addToCartButton.removeClass(self.options.addToCartButtonDisabledClass);
addToCartButton.find('span').text(addToCartButtonTextDefault);
addToCartButton.attr('title', addToCartButtonTextDefault);
}, 1000);
}
});
return $.mage.catalogAddToCart;
});
Step - 3
Finally, save the files and check the result.
Now, if you click on the Add To Cart button on any product detail page, it will fly into the shopping cart symbol placed at the header of your Magento 2 store.
Conclusion
There you go!
This is the easiest way to add Fly To Cart feature in your Magento 2 store.
This feature does seem quite simple, but it still helps to enhance the overall shopping experience for customers.
And if you need our professional assistance, feel free to contact us at any time.