Magento 2 Add Increment Decrement on Order Summary

In this post, I am going to explain the points on how to add product quantity increment decrement on the order summary section on the checkout page in Magento 2

Order Summary Quantity Update Button

 

Step 1: Add /modify the details.html file

I am showing here as an example by creating a Magento luma child theme, you can follow or create a folder according to your theme and create a file.

app/design/frontend/Wishusucess/luma_child/Magento_Checkout/web/template/summary/item/details.html

Now you have to add/replace the below code.

<!-- ko foreach: getRegion('before_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="product-item-details">

<div class="product-item-inner">
<div class="product-item-name-block">
<strong class="product-item-name" data-bind="html: $parent.name">
</strong>
<div class="details-qty qty">
<label class="label" data-bind="i18n: 'Qty', attr: {
for: 'cart-item-'+$parent.item_id+'-qty'}" style="display: none;">
</label>
<button data-bind="attr: {
id: 'minus-cart-item-'+$parent.item_id,
'data-cart-item': $parent.item_id,
'data-btn-minus': 'minus',
},click:updateItemQtyCheckout"
class="update-cart-item minus">
-
</button>
<input data-bind="attr: {
id: 'cart-item-'+$parent.item_id+'-qty',
'data-cart-item': $parent.item_id,
'data-item-qty': $parent.qty,
'data-cart-item-id': $parent.product_sku
}, value: $parent.qty"
type="number"
size="4"
class="item-qty cart-item-qty" readonly>

<button data-bind="attr: {
id: 'plus-cart-item-'+$parent.item_id,
'data-cart-item': $parent.item_id,
'data-btn-plus': 'plus'
},click:updateItemQtyCheckout"
class="update-cart-item plus">
<!--<span data-bind="i18n: '+'"></span>-->
+
</button>
<button data-bind="attr: {
id: 'update-cart-item-'+$parent.item_id,
'data-cart-item': $parent.item_id,
title: $t('Update')
}"
class="update-cart-item"
style="display: none">
<span data-bind="i18n: 'Update'">
</span>
</button>
</div>
</div>
<!-- ko foreach: getRegion('after_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>

<!-- ko if: (JSON.parse($parent.options).length > 0)-->
<div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
<span data-role="title" class="toggle"><!-- ko i18n: 'View Details' --><!-- /ko -->
</span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko -->
</strong>
<dl class="item-options">
<!--ko foreach: JSON.parse($parent.options)-->
<dt class="label" data-bind="text: label">
</dt>
<!-- ko if: ($data.full_view)-->
<dd class="values" data-bind="html: full_view">
</dd>
<!-- /ko -->
<!-- ko ifnot: ($data.full_view)-->
<dd class="values" data-bind="html: value">
</dd>
<!-- /ko -->
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
</div>
<!-- ko foreach: getRegion('item_message') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->

 

Step 2: Add/Modify The details.js file

Now here you have to add a script inside the default js file which will update the price as soon as you click on the button.

app/design/frontend/Wishusucess/luma_child/Magento_Checkout/web/js/view/summary/item/details.js

As soon as the quantity decreases or increases accordingly, the price in the order summary section on the checkout page of Magento 2 will automatically update without loading the page.

define([
'jquery',
'uiComponent',
'Magento_Customer/js/model/authentication-popup',
'Magento_Customer/js/customer-data',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/action/get-totals',
'Magento_Checkout/js/model/shipping-service',
'Magento_Checkout/js/model/shipping-rate-registry',
'Magento_Checkout/js/model/resource-url-manager',
'mage/storage',
'Magento_Checkout/js/model/error-processor',
'mage/url',
'Magento_Ui/js/modal/alert',
'Magento_Ui/js/modal/confirm',
'underscore',
'jquery/ui',
'mage/decorate',
'mage/collapsible',
'mage/cookies'
], function ($, Component, authenticationPopup, customerData, quote, getTotalsAction, shippingService, rateRegistry, resourceUrlManager, storage, errorProcessor, url,alert, confirm, _) {
'use strict';

return Component.extend({
shoppingCartUrl: window.checkout.shoppingCartUrl,
defaults: {
template: 'Magento_Checkout/summary/item/details'
},

/**
* @param {Object} quoteItem
* @return {String}
*/
getValue: function (quoteItem)
{
return quoteItem.name;
},
updateItemQtyCheckout: function (data, event)
{
var btnminus = "";
var btnplus = "";
if (event.target.classList[1] == "minus")
{
btnminus = event.currentTarget.dataset.btnMinus;
}
if (event.target.classList[1] == "plus")
{
btnplus = event.currentTarget.dataset.btnPlus;
}
var itemId = event.currentTarget.dataset.cartItem;


// If element is minus and quantity is '1' than remove
var elem = $('#cart-item-' + itemId + '-qty');
if(event.target.classList[1] == 'plus')
{
elem.val(parseInt(elem.val()) + 1)
}
else if(event.target.classList[1] == 'minus')
{
elem.val(parseInt(elem.val()) - 1)
}


if (event.target.classList[1] == "minus" && $('#cart-item-' + itemId + '-qty').val() == '0')
{
var productData = this._getProductById(Number(itemId));

if (!_.isUndefined(productData))
{
var self = this;
var elemr = elem;
self._ajax(url.build('checkout/sidebar/removeItem'), {
'item_id': itemId
}, elemr, self._removeItemAfter);

if (window.location.href === self.shoppingCartUrl)
{
window.location.reload(false);
}

}
}
else
{
this._ajax(url.build('checkout/sidebar/updateItemQty'), {
'item_id': itemId,
'item_qty': $('#cart-item-' + itemId + '-qty').val(),
'item_btn_plus': btnplus,
'item_btn_minus': btnminus
}, elem, this._updateItemQtyAfter);
}
},
_getProductById: function (productId)
{
return _.find(customerData.get('cart')().items, function (item)
{
return productId === Number(item['item_id']);
});
},
_updateItemQtyAfter: function (elem)
{
var productData = this._getProductById(Number(elem.data('cart-item')));

if (!_.isUndefined(productData)) 
{
$(document).trigger('ajax:updateCartItemQty');

if (window.location.href === this.shoppingCartUrl)
{
window.location.reload(false);
}
}
this._hideItemButton(elem);
this._customerData();
},
_customerData: function ()
{
var deferred = $.Deferred();
getTotalsAction([], deferred);
var sections = ['cart'];
customerData.invalidate(sections);
customerData.reload(sections, true);
var self = this;
self._estimateTotalsAndUpdateRatesCheckout();
},
_ajax: function (url, data, elem, callback)
{
$.extend(data, {
'form_key': $.mage.cookies.get('form_key')
});

$.ajax({
url: url,
data: data,
type: 'post',
dataType: 'json',
context: this,

/** @inheritdoc */
beforeSend: function ()
{
elem.attr('disabled', 'disabled');
},

/** @inheritdoc */
complete: function ()
{
elem.attr('disabled', null);
}
})
.done(function (response)
{
var msg;

if (response.success)
{
callback.call(this, elem, response);
}
else
{
msg = response['error_message'];

if (msg)
{
alert({
content: msg
});
}
}
})
.fail(function (error)
{
console.log(JSON.stringify(error));
});
},
_hideItemButton: function (elem)
{
var itemId = elem.data('cart-item');

$('#update-cart-item-' + itemId).hide('fade', 300);
},
_removeItemAfter: function (elem)
{
var productData = this._getProductById(Number(elem.data('cart-item')));

if (!_.isUndefined(productData))
{
$(document).trigger('ajax:removeFromCart', {
productIds: [productData['product_id']]
});
var sections = ['cart'];

setTimeout(function ()
{
if (customerData.get('cart')().items.length == 0)
{
window.location.reload();
}
}, 2000);

if (window.location.href.indexOf(this.shoppingCartUrl) === 0)
{
window.location.reload();
}
}
this._customerData();
},
_estimateTotalsAndUpdateRatesCheckout: function ()
{
var serviceUrl, payload;
var address = quote.shippingAddress();
shippingService.isLoading(true);
serviceUrl = resourceUrlManager.getUrlForEstimationShippingMethodsForNewAddress(quote);
payload = JSON.stringify({
address: {
'street': address.street,
'city': address.city,
'region_id': address.regionId,
'region': address.region,
'country_id': address.countryId,
'postcode': address.postcode,
'email': address.email,
'customer_id': address.customerId,
'firstname': address.firstname,
'lastname': address.lastname,
'middlename': address.middlename,
'prefix': address.prefix,
'suffix': address.suffix,
'vat_id': address.vatId,
'company': address.company,
'telephone': address.telephone,
'fax': address.fax,
'custom_attributes': address.customAttributes,
'save_in_address_book': address.saveInAddressBook
}
}
);
storage.post(
serviceUrl, payload, false
).done(function (result) {
rateRegistry.set(address.getCacheKey(), result);
shippingService.setShippingRates(result);
}).fail(function (response) {
shippingService.setShippingRates([]);
errorProcessor.process(response);
}).always(function () {
shippingService.isLoading(false);
});
}
});
});

Whatever changes we have made inside the file, will reflect only when we run the command given below, then you have to clear the cache and go to the checkout page.

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

As soon as you go to the checkout page, the Product Quantity Increment and Decrement buttons will appear in your order summary section.

Add Quantity Increment Decrement on Order Summary Section

 

 

Recommended Posts:

Change the Customer Address Field Order in Magento 2

How to Add Product Image Zoom Functionality in Magento 2

 

Export File Added into Queue in Magento 2 Solution

Many times it happens that even after exporting the product in admin in the Magento store, we do not see the file, and the export file is added to the queue in Magento 2 store.

Although we also do indexing for this, still our export file is not visible.

When you export the product, you will get a message that your file has been placed in the queue, for this you need to start a cron job.

Export file is added to the queue

But when we do the indexing of our store, we still do not see that exported file.

I am going to tell you the best solution to this problem, how you can get rid of exported files not visible in Magento 2 admin problem and what are the exact solutions for it.

Reindexing Magento 2 -export file is added to the queue

 

Related Post: Magento 2 Reindexing Taking Too Much Time

 

Exported File not Visible in Admin in Magento 2

There are 3 possible solutions for this, you have to make some changes in the code.

As soon as you make some changes in the root file of Magento, as soon as you change its method, it will automatically show you the exported file even without indexing and without starting the cron job.

However, this solution will not count as an ideal solution because you are forcefully exporting it

 

Solution 1: Change Export Method

The first solution is that you go to the root file of the vendor and make some changes in its methods so that you can see the export catalog file without running any extra commands.

vendor/magento/module-import-export/Controller/Adminhtml/Export/Export.php

I am telling you the code below to make the necessary changes for that.

You just have to copy and go to the given path and find the method and replace it.

public function execute()
{
if ($this->getRequest()->getPost(ExportModel::FILTER_ELEMENT_GROUP)) {
try {
$params = $this->getRequest()->getParams();
$model = $this->_objectManager->create(\Magento\ImportExport\Model\Export::class);
$model->setData($this->getRequest()->getParams());
$this->sessionManager->writeClose();

return $this->fileFactory->create(
$model->getFileName(),
$model->export(),
\Magento\Framework\App\Filesystem\DirectoryList::VAR_DIR,
$model->getContentType()
);

/** @var ExportInfoFactory $dataObject */
$dataObject = $this->exportInfoFactory->create(
$params['file_format'],
$params['entity'],
$params['export_filter']
);

$this->messagePublisher->publish('import_export.export', $dataObject);
$this->messageManager->addSuccessMessage(
__('Message is added to queue, wait to get your file soon')
);
} catch (\Exception $e) {
$this->_objectManager->get(\Psr\Log\LoggerInterface::class)->critical($e);
$this->messageManager->addError(__('Please correct the data sent value.'));
}
} else {
$this->messageManager->addError(__('Please correct the data sent value.'));
}
/** @var \Magento\Backend\Model\View\Result\Redirect $resultRedirect */
$resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
$resultRedirect->setPath('adminhtml/*/index');
return $resultRedirect;
}

 

Solution 2: Export File is Added to The Queue

Now the second and easiest way for this is to run the command given below directly in the root directory of your Magento 2.

php bin/magento queue:consumers:start exportProcessor

First of all, you have to export the file by going to admin and as soon as you show this message that your file has been placed in the queue, run the command mentioned above.

And after that clear the cache, then when you go to admin and see it, you will see the exported file.

 

Magento 2 Free Smart Search Extension 

 

Solution 3: Export File is Added to The Queue

In the third step, you will have to do indexing again, after that you will have to go to the root directory of Magento.

magento2_installation_folder/var/export

There will be a var folder in the root directory itself, there you have to click on it and enter, as soon as you enter, you will see the export directory.

cd var/www/html/wishusucess/var/export/

All the exported files will be shown in the export directory.

You can view your latest files here.

Export File Showing in Export Direcotry
All Exported File

 

Conclusion:

This problem often occurs when exporting any kind of file inside Magento and for this three solutions have been mentioned above.

You can get the file by adopting any one of these

 

Similar Posts:

Customer Order Email Not Sending in Magento 2: Solution

Top 10 Smart Search Extension for Magento 2 Store in 2022

Change the Customer Address Field Order in Magento 2

Many times it happens in Magento 2 that the customer has a requirement that swap customer address fields many times up and down, then suddenly we do not understand how to do it.

For this, I am going to tell you a very easy way, by adopting which you can easily change the order of the fields of the customer's address from anywhere to anywhere.

If you want to bring the field of the telephone number to the top, then how will you change its sort order or what will have to be done to change its position, I am going to tell you all this.

 

Way 1: Swap Customer Address Fields

If you want to change the delivery address or shipping address field of the customer, then for that you have to first know the ID of that particular field.

Then the short order of that ID has to be known, after that you can easily change its order by running a command in the database.

Example: Change customer telephone order on checkout page delivery address.

You have to find out the id of a telephone number in your eav_attribute database table.

Swap Customer Address Fields

Or just run the below command.

SELECT * FROM `eav_attribute` WHERE `attribute_code` LIKE '%telephone%';

Now you will get the result and you can easily check the id of that field.

Now go to the 'customer_eav_attribute' table and check that attribute_id.

or you can run the below command to get the result.

SELECT * FROM `customer_eav_attribute` WHERE `attribute_id` = 34;

Change Sort order of telephone

Now update the 'sort_order' field in customer_eav_attribute to change the delivery order telephone number.

UPDATE `customer_eav_attribute` SET `sort_order` = '50' WHERE `customer_eav_attribute`.`attribute_id` = 34;

Similarly, you can change the order of any fields like name, last name, region_id, city, etc.

 

Recommended Post: Reduce Website Bounce Rate: Top 17 Amazing Tips in 2022

 

Ways 2: Change Via checkout_index_index.xml

Now all these changes can also be done from the checkout index index.xml file of Magento 2.

For that, you have to go to that file and add the sort order then you have to run some upgrade and deploy commands and when you check by clearing the cache, you will see that the sort order of the address field has changed.

Example:

<item name="country_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">100</item>
</item>
<item name="region_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">101</item>
</item>

If instead, you will give a sort order lower than 50, then fields will be displayed before the street:

<item name="country_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">1</item>
</item>
<item name="region_id" xsi:type="array">
<item name="sortOrder" xsi:type="string">2</item>
</item>

 

Way 3: Swap Customer Address Fields Via Plugin

This is the 3rd option that you can use to change the sort order of customer delivery address fields to anywhere in Magento 2.

You have to create a plugin that will change the behavior of the method.

Magento\Checkout\Block\Checkout\LayoutProcessor
class Reorder
{

public function afterProcess($subject, $jsLayout)
{

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
['children']['shippingAddress']['children']['shipping-address-fieldset']
['children']['street']['sortOrder'] = 100;

return $jsLayout;
}
}

 

Related Posts:

How to Add Product Image Zoom Functionality in Magento 2

Magento Reindexing is Taking Too Much Time: Solution

 

Reference

Magento Stackexchange.com

How to Add Product Image Zoom Functionality in Magento 2

If you want to add product image zoom functionality on the product detail page of Magento, then I am going to show you some steps for this.

Using those steps, you can zoom the image of the product details page.
For this, I have also developed a custom extension. You have to install it in your store.

Basic configuration for zoom functionality is also given in the admin.
You can change the zoom configuration of the images as per your need.

Like how many pixels you have to zoom in.

How much zoom is to be shown on the left-right side. For all these also configuration has been given in admin.

 

Magnifier in Magento 2 - Product Image Zoom

Magento 2 has a default magnifier widget that allows developers to make changes as per their needs.

You can customize the images by zooming in the display option in 100% scaled size

The product detail page has product gallery images that use a magnifier widget image gallery for zooming in on the product images.

By default, it's not disabled in the Magento 2 but you can enable it in your local theme view.xml configuration file.

<script type="text/x-magento-init">
{
"<element_selector>": {
"mage/gallery/gallery": {
"data": [{
"thumb": "<small_image_url>",
"img": "<small_image_url>",
"full": "<small_image_url>",
"caption": "<message>",
"isMain": "<true/false>"
}],
"mixins": ["magnifier/magnify"],
"magnifierOpts": {
"enabled": <true/false>,
"eventType": "<hover/click>",
"width": <number>,
"height": <number>,
"top": <number>,
"left": <number>,
"fullscreenzoom": <number>,
"mode": "<outside/inside>"
}
}
}
}
</script>

 

How to Enable Magnifier in Magento 2

In order to enable the magnifier widget in Magento 2 theme, you have to go into the view.xml in your local theme configuration file and then enable the Magnifier widget.

<Your_theme_directory>/etc/view.xml

Now you have to change content like the below code.

<var name="magnifier">
<var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
</var>

Now the view.xml file will have the content

<var name="magnifier">
<var name="fullscreenzoom">20</var> <!-- Zoom for fullscreen (integer) -->
<var name="top"></var> <!-- Top position of magnifier -->
<var name="left"></var> <!-- Left position of magnifier -->
<var name="width"></var> <!-- Width of magnifier block -->
<var name="height"></var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that activates zoom (hover/click) -->
</var>

 

Product Image Zoom Functionality

As you can see in the image, after installing the wishusucess product images zoom extension, you have got the functionality of image zooming added automatically.

Now if you want to disable it, you can also disable it from admin.
If you want to change any kind of resolution, pixels, etc., then all that is given in the admin configuration.

Add Product Image Zoom in Magento 2
Image Zoom Screen

 

Read More: Top 10 Smart Search Extensions for Magento 2 Store in 2022

 

Window Zoom

However, by default, you will get this set as soon as you install the extension.

But window zoom allows you to adjust the position of the image zoom.

 

Change Configuration From Admin

As you can see in the admin configuration, there are different configuration options as per your requirement.

You can also disable the model or make as many changes as you need.

Add Product Image Zoom
Zoom Configuration

 

As soon as the customer's mouse moves over the product images, this image will automatically zoom in and appear.

You can implement the product image zoom function by using one of the methods mentioned above.

 

Conclusion

To add the product image zoom functionality, you have the magnifier widget by default, which you can implement on the detail page by implementing the zooming function.

Another option is to implement a custom extension and install it. and that custom extension you can find it here.

 

Recommended Posts:

Reduce Website Bounce Rate: Top 17 Amazing Tips in 2022

Top 7 Reasons That Fall To Increase Bounce Rate of Website

Customer Order Email Not Sending in Magento 2: Solution

I am telling you the detailed information about the necessary changes that have to be made in your store in order to send you a customer email. If you are facing a customer order email not sending issue in your Magento 2 store then you are at the right place.

Such as sending an order email, sending a customer account confirmation link, sending a password to forget to email to a customer, etc.

 

Step 1: Install SMTP Custom Extension

In the first step, you have to install a custom SMTP extension in your store which provides the required environment for sending email through your Magento 2 store.

 

Step 2: Change Store Email : Customer Order Email Not Sending

Now you have to configure the email id from which you want to send the email to your customer.

Store email address
Store email address

You will find a variety of email templates as you go into the store email address configuration.

For whichever email id you want to set email template, you can do it from here.

You can change the following email address

  • General email address
  • Sales email address
  • Custom email address

 

Step 3: Send Email to Customer

Now your email configuration is completely complete, as soon as you order a product, you will get an order confirmation email on that particular email details.

If you want to send a custom email, then select the order in the section of sales and click on the customer to whom you want to send the email.

If you want to change the status of your order, you can change it and notify by mail.

Customer Order Email Not Sending

 

Order Confirmation Mail Configuration: Customer Order Email Not Sending

When customers order products at your store, you need to modify the sales email configuration for sending mail.

Store => Configuration => Sales => Sales Emails => Order/Comment

Customer Order Email Not Sending
Order Emails Configuration

 

Send Email for Customer Confirmation Link

If a new customer creates an ID on your store and you want to send the account confirmation link to him, then you can make changes from the customer account confirmation section.

Admin > Stores > Configurations > Customers > Customer Configuration > Create New Account Options > Require Email Confirmation

Customer Order Email Not Sending in Magento 2

If you need any help in configuring any SMTP extension then you can contact us directly.

There are some very popular SMTP Email Settings for Magento 2 that will help you to send emails without any extra customization.

Magento 2 SMTP Email extension amasty.com

Magento 2 Mageplaza SMTP Email Marketing Integration

Or magepal.com SMTP configuration.

 

Similar Posts:

Top 10 Smart Search Extension for Magento 2 Store in 2022

Magento Reindexing is Taking Too Much Time: Solution

Top 10 Smart Search Extension for Magento 2 Store in 2022

The better the product search facility, the more the user experience will increase, due to which the chances of getting sales on your website become very high. To improve the search facility, we have brought the ten best smart search extensions of Magento in 2022.

When we list the product on the Magento website, then we create many categories for it.

Categories in the store mean that we categorize the products of our store so that all the products are not loaded on the same page at the same time.

When the customer comes to that page, so the customer will not face any problem in finding the product and the loading time of that page.

Because when all the products are loaded on one page, then the loading time also increases and the customer also has difficulty in finding the product.

This increases the user experience and to make all this even faster, today we will talk about the same extension which is most effective for cataloging products in the Magento store.

 

Read more: Reduce Website Bounce Rate: Top 17 Amazing Tips in 2022

 

Why Smart Search Extensions in E-Commerce Store

We need to use a product search extension when the number of catalog products in our store is very large.

In such a situation, when customers come to our website and search for some products according to their needs and they do not get the relevant products, then they leave the website.

Then the sales growth on our website starts decreasing, that is, the customer leaves the website because of not getting the product.

In such a situation, it becomes necessary that we give such facility so that their experience increases and for this, we have to use some extensions which match the product according to the search of the customer and give it as a result.

So that despite having our product, the customer does not leave our website and they buy from our store and our sales increase.

 

Best Magento 2 Smart Search Extensions List

There are a lot of smart search extensions out there today that provides a much better user experience for product searches on your Magento 2 store.

If you want to increase your user experience, then it has become necessary for you to use anyone extension for this.

Let us know the list of extensions that give us the best user experience for catalog products searching.

 

1. Instant Smart Search Extensions

This cloud-based search extension has been many versions to date, the latest version is a very advanced and efficient search extension.

If we install it with the Magento e-commerce store then the product search facility will be much better.

However, it is better for stores with less number of products.

If you have a small number of products in your store and you want to convert them into better product search results, then you can use this extension for that.

Features:

- Responsive search result.

- Compatible with all Magento versions 2.1, 2.2, 2.3, 2.4

- Cloud-based search.

- Supports CDN (Content Delivery Network).

- Autocomplete search facilities.

- Can Analyze user search behavior to give better search results.

Pricing: 

- Free

 

2. Ajax Search AutoComplete

The Ajax AutoComplete Search extension is also available for a limited number of product stores.

It gives search results without loading your page, due to which the performance of the site is good.

And the customer gets their result without wasting any time, which increases the user experience.

Wishusucess Ajax Search AutoComplete

You can use the free ajax search extension of the Wishuscess Search Autocomplete, it is absolutely free from our side.

If you want to do some customization in it, then we have a paid service for that, you can use it.

We provide this service at a very reliable cost.

Features:

- Better search result UI.

- Product thumbnail appears during product search.

- Advance admin control for product search.

- Quick search results without page load.

- Much faster search than the default Magento 2 search.

- Supports cross-browser compatibility.

Pricing:

Free & Paid

 

3. Easy Filter Magento 2 Search Extension

If you do not want to show more than 5 products to your customer in your product search result, then this search extension gives similar results for your store.

For your customers, it will show the best five results in the search result and for the rest of the products, it will show a link to show more on which the customers of your store will be able to see more products by clicking on it.

Features:

- Adds attributes values in the Layered navigation filter.

- You can set the number of attribute filters from the admin

Pricing:

- Free

 

4. Quick Search Extension

This quick search extension for Magento 2 is developed by the Wishusucess Magento development team.

When you install this extension, it will add the functionality of AutoComplete to your store.

This extension is helpful for you when a customer will search for some product in your store and if customers will not quite sure what customer are looking for.

Through this extension, based on the keywords typed by the customer, the most relevant content will be shown and will also auto-suggest, which will make it easier for the customer to search.

With this extension, you can add search facilities globally to your store.

Powered By:

- Wishusucess Magento 2 Team

Features:

- Global Search functionality (CMS pages and store categories.)

- You can set the number of results from the admin

- Product thumbnail or description to show

- Set height and width for thumbnails, etc.

- Auto Suggest facilities for the customer.

- Ability to suggest the right product even when you type the wrong keywords.

- Price also shows up in search.

- Compatible with all Magento 2.1, 2.2, 2.3, 2.4

Pricing:

- Wishusucess Quick Search Price is $60 Year.

- Technical Support and extension updates: $25 per year

 

5. Algolia Instant Search

It has the ability to deliver the result of any search request to your store within 10 milliseconds, due to which your website performance is much better and your user experience increases.

Algolia search extension is available for both versions of Magento.

Its customer interaction comes in the best case.

Although this extension is free, to use it, you have to create your account on the Algolia site, for which you will have to buy some plan on a monthly or yearly basis.

Top 10 Smart Search Extension in Magento 2
Algolia Dashboard

Features of Algiolia Search:

- Free instant search.

- Autocompleting Keyword

- Responsive SERP

- Typo error tolerance.

Pricing:

Although its instant search extension is available for free, to use it, you will have to buy a plan which will cost you $ 29 per month.

Pricing Plan of Algolia Search Extension

 

6. Google Custom Search Extension

Google search extension is one of the best smart search extensions for the Magento store it provides you with SEO-friendly search.

With the help of which the traffic on your website increases and the search experience for the customers is also better.

Together you are able to bring more and more visitors with its help.

Basically, its main focus is to work according to the search functionality, due to which the SEO of your website is slightly better.

You have to focus more on SEO, which is a much better option to rank you in Google and from there to increase clicks by customers.

It works on Google's search algorithm and also helps in reducing the bounce rate of your website.

 

Read more: Reduce Website Bounce Rate: Top 17 Amazing Tips in 2022

 

Google Smart Search Extension
Google Search Extension

 

7. Amasty Search Extension

Amasty.com search extension is an advanced search extension that provides the convenience of searching with multiple attributes.

It lets you quickly search for the desired product and also provides autocomplete pop-ups.

Popular search products that have been done on the store also show you as pop-ups.

It gives you the facility of product search, category search, and also searching from the cms page.

Features:

- Product, category, And CMS pages search

- Customers Search Analytics.

- Recent and popular searches.

- Autocomplete popup.

- Add to Cart button.

- Compatibility with all Magento versions.

Pricing:

- Its pricing is $249 the first year.

- Technical support per year is $ 155.

 

8. Mazeplaza Search

The best thing with the mageplaza.com extension is that it keeps you updated with the extension from time to time.

However, to get its updates, you have to pay separately.

Along with this, it has almost the same feature as all the extensions, it also provides you the facility of recent search with autocomplete pop up and provides search results in a very short time.

Features of Mageplaza Search extension:

- Auto-complete search results.

- Fast search results.

- Vast SKU search.

- Customizing flexible configuration.

- Support multi-languages.

Pricing:

- Its charge is $99 for the first year.

- Technical support is $49 per year.

 

9. Magedelight Search Extension

It also has a very good hold in the field of Magento 2 Extension. It is also making its way into the list of Magento 2 top ten search extensions.

Magedelight extension also has the ability to provide quick search results. It also gives options like Recommend Search and Recent Search etc. to the customers.

It also offers tons of customizable options in the admin so you can customize the extension however you want.

Features:

- Auto-complete search query.

- Search product data, CMS pages & category data.

- Add synonyms and stop words for a search query

- Product suggestions for wrong spelled search queries.

- Attributes for search

- Show all prices as a search result.

- Compatible with ElasticSearch Library version 6.0 and 7.0

Pricing:

- Its charge is $249 for the first year.

- Technical support is $49 per year.

 

10. Mageworx Search Extension

It also extends the claim of giving better results in less time. There are many good features associated with mageworx search extension like autocomplete keyword, product suggestion, pop up etc.

 

 

Conclusion:

This list will help you to select search extensions according to your store.

You can consider the features mentioned in the 10 best search extensions of the Magento search engine while doing the analysis.

You can choose the extension according to your requirement and according to the features, you can analyze this thing and decide what your need is.

Some things need to be kept in mind while choosing any extension like autocomplete function, typo error tolerance, synonyms, speed, AI-based, etc. Which is important to provide the best and friendliest user experience to your customers.

If you are also looking for an extension for the Magento store or want to develop it then you can contact us. We work on hundred percent satisfaction for our clients.

Magento Reindexing is Taking Too Much Time: Solution

When we do Magento 2 reindexing then many times it happens that a particular index takes hours which also becomes very long.

If your Magento 2 indexing starts consuming more time than expected, then Magento website performance starts to go down and the store becomes very slow too.

Therefore, it becomes necessary for us to reduce the excessive indexing time so that our store can load faster and improve the performance of the store.

Magento Reindexing is Taking Too Much Time
Too Long Reindexing Time

When the store loads slowly, then the bounce rate of that store also increases, due to which the SEO of your store starts to deteriorate and the search performance also starts to deteriorate, and gradually the number of visitors to your site starts decreasing.

 

Read more: How to Decrease Bounce Rate of E-Commerce Website

 

Reduce the Magento 2 Reindexing Time

What are the steps by which we can improve the indexing of our website fast?

php bin/magento indexer:reindex

So here I am giving you some solutions that will help you to reduce the Magento 2 reindexing time while indexing.

 

Point 1: Set up Cron in Magento 2

When you make changes to your product or category, we need to do indexing.

The cron job will automatically do the indexing for you on a regular basis at the scheduled time so that you do not need to do indexing again and again.

 

Point 2: Use Enough Resource as Per DB Size

You will have to keep the necessary hardware resources of the server according to the size of your database.

You need to optimize your server. There is a number of Magento dedicated servers that take care of the requirements for your store.

Magento 2 dedicated servers are Nexcess.net or Fastcomet.com Cloud Servers like amazon, cloudways, etc.

 

Point 3: Get Rid of Messay Database

Many times when we implement a website with multiple stores, each store has its own database.

If you do not implement it in a Magento 2 standardized way then there is also a chance of your database becoming messy which consumes a lot of unnecessary time at the time of indexing.

 

Point 4: Huge Size of Data

Basically, when the database of a store is huge, then its indexing will also take more time.

Because while indexing, whatever changes have happened in your database, it checks all the database once and updates it, and then saves it in the database.

This is a time-consuming process and the execution time depends on the size of the database.

Because of this, sometimes it takes hours because the database of the store is very large.

 

Read more: Reduce Website Bounce Rate: Top 17 Amazing Tips in 2022

 

Point 5: Install Magento 2 Reindex extension

By default magento2 allows you to do more indexing, you can do indexing both ways, you can also do it from the command line, and by going to the admin panel you can do indexing from there also.

But both these process takes you by default time consuming, you can use an extension to reduce this timing.

The Wishusucess Magento 2 reindexing extension automatically manages your indexing and optimizes each of your store data, thereby saving indexing time.

But sometimes you find it a bit non-friendly to run the code from the command line, which provides a bad experience for those nonfamiliar admin users.

Therefore, you can install the Wishusucess Magento 2 Reindex extension.

 

Read more: Use Top 10 Tools to Drive Traffic on Your Websites in 2022

 

Point 6: Assign Product in Correct Level

It is also necessary to assign in the correct level of the category, otherwise, the indexing time increases due to assigning of the product.

Suppose you have assigned some products in the third-level category now you don't need to assign the same products in the second-level category.

For this, you just enable the Achor by going to the admin category, then that product will automatically appear on the frontend.

Magento 2 Reindexing

Point 7: Third-Party Extension

There are some third-party extensions that are used for catalog search or are taken to add some other kind of functionality which also sometimes takes a lot of time.

Example: Algolia Search, ElasticSearch, etc.

 

Point 8: Windows OS

The recommendation of the core team of Magento is that you should keep the server of the ubuntu operating system to host it.

Magento is not compatible with windows so you should not use this os as the server.

My recommendation is that you use Amazon Cloud Server.

Here your reindexing will be very fast on its own, in this, you will not feel the need to do much.

 

Conclusion:

Magento 2 is very optimized in itself, if even then you are taking more time for reindexing then it could be one of the reasons mentioned above, you have to remove that problem.

If you need any kind of help then you can contact me for this, your problem can be solved at a very fair charge within a very short time.

How to Decrease Bounce Rate of E-Commerce Website

The bounce rate of any website shows how is the quality of the content of that website, so the content quality of your website has to be good so that the bounce rate can be reduced, in this post I will explain how to decrease bounce rate of the website.

 

What is Bounce Rate?

Bounce rate means that when a visitor visits the site and they exit from the same page without visiting any other page, then it is called bounce rate.

This means the percentage of total visitors that are single-page sessions in which visitors leave without clicking on the link from the same page and leave the same page after visiting the page.

The bounce rate increases because of the poor engagement of the page of the website.

Check the Bounce Rate
Alexa.com Site Matrices

 

Read more: Top 7 Reasons That Leads Increase Bounce Rate of Website

 

How to Decrease Bounce Rate?

To reduce the bounce rate of your website, you will have to take the help of some important tools, which will tell where your website is lacking.

With the help of tools, you can measure the activities of your website such as website loading time, interactive link added, title heading description, etc. to be optimized properly.

 

Step 1: Increase Loading Speed

The bounce rate of any website also depends a lot on the loading speed of the website.

If your website is loading slowly, then the customer will leave your page immediately.

So if you want your visitor to stay on your page and the bounce rate is not high, then for that, you have to increase the speed of your website.

Website loading has to be done within 1 second.

You can take a maximum of 2 seconds to 3 seconds, but if you exceed this, the chances of increasing the bounce rate of your website will increase significantly.

 

Step 2: Add Interactive Links in Pages

The more interactive links there are in any page content, the more interactive the visitor will be with your page content.

 

Read more: Top 9 Free Tools To Analyze Your Website in 2022

 

Step 3: Use Analytics

Google Analytics is one such free tool that proves helpful in reducing your bounce rate. This is a tool that analyzes your pages in order to decrease the bounce rate of each of your pages.

Analytics gives you real-time data with the help of which you can track your visitor when the visitor is leaving your website.

When you look at the real-time visitors, then you will see the flaw of your page, with the help of which you can remove that flaw and reduce the bounce rate.

Decrease Bounce Rate by Google Analytics
Google Analytics Real-Time Data

 

Step 4: Evaluate Quality Content

The better the content, the better will be your customer engagement.

When customer engagement is good, then the bounce rate of the website will also decrease.

Therefore, the title, keywords, description, and page content of any page should be well optimized.

Need to well optimize the following points:

  • Don't keep the title too long
  • Optimize headings for main keywords
  • Keep phrases short
  • Improve internal linking

 

Step 5: Description and Title Should be Not Misleading

The page content description should be very well optimized, not that the page content is something else and you have put something else in the description.

If this happens then it will be a miss leading content and then when the customer visits your page then the content will not be relevant to him then your website bounce will increase.

For this, you have to select the right and perfect keyboard set for the most relevant keyboard so that your content matches it.

 

Step 6: Add Most Relevant Backlink

The backlink of the website should be absolutely relevant, if there is not even a little relevant then the chances of your bounce rate increase.

So whenever you add a  backlink, you have to keep in mind whether this backlink is in the most relevant backlink or not, then only add it.

Add Backlinks of Website
Referred Links

 

Read more: Top 10 Tools to Drive Traffic on Your Websites in 2022

 

Step 7: Improve Device Friendly Experience

You will have to test how your website looks on different devices.

If someone is opening that website on mobile, then how is your content appearing, if the same content is being opened on the desktop then how is it looking, you have to make all these things device friendly.

Your content should be optimized for every device and should be friendly.

The bounce rate of your website will decrease when your content provides a good experience on all types of devices.

Device Friendly Decrease Bounce Rate
Improve Device Friendly Experience

 

Step 8: Increase The Visitor Engagement Level

Content must be strong. The better the content, the greater the engagement between your website and the visitor.

To keep the customer engaged, you have to put good quality content and also add interrelated links, only then your customer engagement will increase, and the bounce rate will decrease.

 

Google Analytics Count

The way Google Analytics calculates the bounce rate is slightly different.

When a customer visits your page and if visitors leave without clicking any link, then Google Analytics will consider you the bounce rate for that page of the website.

It doesn't matter for google analytics whether the visitors spend a considerable amount of time on that page or not.

 

Decrease Bounce Rate Service for My Websites

If you want to reduce the bounce rate of your website and are looking for a service for this, then we will fulfill that search.

We guarantee to bring down the bounce rate of any website between 20 to 30% at very affordable rates.

For this you can contact us, you can mail us and you can talk to us on the contact number.

Email: cs.hemantsingh@gmail.com

Contact Number: +91-7992293862

 

Conclusion

The low bounce rate of any website shows its quality. A low bounce rate indicates that the customer engagement is very good on your website and your content is very good.

Customer Account REST APIs With Example in Magento 2

For any new customer of the Magento 2 eCommerce website from creating an account to deleting the account, the details of any customer account rest apis required are being given in this post.

In this Customer API List, I am telling you in detail about each API.

I'll run each endpoint on Postman to show you an example of how each of the customer's APIs works.

Customer Account REST APIs
Customer APIs

 

List of Magento 2 Customer Account REST APIs

By the way, there are only a few customer rest APIs in Magento 2 which we frequently use.

It also depends on the function of our mobile application and what kind of functionality we want to provide to our customers.

Based on that, I am giving you the details of the Most Frequently Used Rest API, which has been prepared as an index in a way.

With this list of Magento 2's Customer Rest APIs, it will be easier for you to develop mobile applications.

 

1. Get Customer Details By Customer ID

This rest api will help you to get the customer account information by the getById service method.

Endpoint:

<host>/rest/<store_code>/V1/customers/:customerId

Method: GET

Headers:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

2. Create Customer Account REST APIs

You need to use this REST API to create a new customer account. This is the REST API for Magento 2's default customer account creation.

Endpoint:

<host>/rest/<store_code>/V1/customers

Method: POST

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

Create customer api detail with parameter

 

3. Save Customer Information API

When data is to be saved based on customer id then we save data by sending payload in Magento 2 customer rest api.

Endpoint:

<host>/rest/<store_code>/V1/customers/:customerId

Method: PUT

Header:

  • Authorization: Bearer <customer_token>
  • Content-Type: application/json

 

4. Customer API to Save Data

If Magento 2 customer data has to be saved without customer id then we use this rest api.

And also send the customer token in the header as authorization.

Endpoint:

<host>/rest/<store_code>/V1/customers/me

Method: PUT

Header:

  • Authorization: Bearer <customer_token>
  • Content-Type: application/json

 

5. Get Customer Information REST API

In Magento 2 store we use this api when we have to get customers' data.

In this, only we have to send the customer's token by putting it in the header and then we get all the details of the customer.

We have to gate all the details of the customer with only the login details of the customer, even then on the basis of this get by ID, we gate the information through this API.

Endpoint:

<host>/rest/<store_code>/V1/customers/me

Method: GET

Header:

  • Authorization: Bearer <admin_token>
  • Content-Type: application/json

 

6. Activate Customer ID via REST API

We use this api in Magento 2 to activate the customer id by activateById.

Endpoint:

<host>/rest/<store_code>/V1/customers/me/activate

Method: PUT

Header:

  • Authorization: Bearer <admin_token>
  • Content-Type: application/json

 

7. Search Customer REST API

This api help to get the list of the customer by the getList service method.

Endpoint:

<host>/rest/<store_code>/V1/customers/search

Method: GET

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

8. Activate Customer Email API

To activate the email id of the customer of magento 2, we use this rest api.

Endpoint:

<host>/rest/<store_code>/V1/customers/:email/activate

Method: GET

Header:

  • Authorization: Bearer <admin_token>
  • Content-Type: application/json

 

9. Change Customer Password REST API

Magento 2 Store by default provides REST API to change the password of the customer, using changePasswordById one can change the password of any customer account.

Endpoint:

<host>/rest/<store_code>/V1/customers/me/password

Method: PUT

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

10. Send Customer Password Lest Link API

Using the customer's token to send the reset password link to the customer's mail id, we use the validateResetPasswordLinkToken API.

Endpoint:

<host>/rest/<store_code>/V1/customers/:customerId/password/resetLinkToken/:resetPasswordLinkToken

Method: GET

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

11. Initiate Customer REST Password API

If the API is to be used to initiate the password reset, then we can change the password of any customer using this initiatePasswordReset API.

Endpoint:

<host>/rest/<store_code>/V1/customers/password

Method: PUT

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

12. Reset Password API

In this API, you have to enter the old password of the customer along with the new password that you want to select and hit it with the admin token.

Endpoint:

<host>/rest/<store_code>/V1/customers/resetPassword

Method: POST

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

13. Confirm Customer Account API

When a customer creates an account on the Magento store then we can choose the account confirmation or rejections option from the admin.

And after selecting the same option, you can use the API to get the confirmation status of the customer via rest api in Magento 2.

Endpoint:

<host>/rest/<store_code>/V1/customers/:customerId/confirm

Method: GET

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

14. Customer Account Confirmation API

And after selecting the customer account confirmation option, you can use this API to resend confirmation and validate the account status of any customer through the rest of the API.

Endpoint:

<host>/rest/<store_code>/V1/customers/confirm

Method: POST

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

15. Validate Customer Account API

This api provides a facility to validate any customer account by this any customer account can be validated through the rest api.

Endpoint:

<host>/rest/<store_code>/V1/customers/validate

Method: PUT

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

16. Read-Only Customer Account API

You can get the customer detail like isReadonly or not.

Endpoint:

<host>/rest/<store_code>/V1/customers/:customerId/permissions/readonly

Method: GET

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

17. Delete Customer By ID REST API

Magento2 also provides the facility of default rest api to delete customer accounts based on id. Using this, you can delete any customer on the basis of a customer ID.

Endpoint:

<host>/rest/<store_code>/V1/customers/:customerId

Method: DELETE

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

18. Check Email Available or not Via REST API

When creating a customer account, we have to check the email id.

Now if you want to check customer email id whether it is available or not then you can use this isEmailAvailable REST API for that.

Endpoint:

<host>/rest/<store_code>/V1/customers/isEmailAvailable

Method: POST

Header:

  • Authorization: Bearer <token>
  • Content-Type: application/json

 

 

References:

https://magento.stackexchange.com/

https://devdocs.magento.com/

Magento 2 All REST API List for Mobile App Development

There is no documentation in Magento where you can see the complete Magento 2 All REST APIs of catalog, customer, and checkout at one place.

If you look at the documentation on the official website of Magento, you will find that you can get the list of all APIs using Document Swagger.

But this documentation keeps so many details together that we find it a bit complicated and sometimes we are not able to extract the important things.

I am solving your problem through this documentation where you will get the list of default api of Magento with body details.

In this, you will see as much detail as you need and I have removed the things which are not needed.

All the components that are there by default like Catalog APIs, Customer APIs, Checkout APIs, CMS APIs, Payment APIs, Reviews APIs, Shipping APIs, Wishlist APIs, etc. I am giving all the list here.

Magento 2 All REST APIs List

 

Magento 2 All REST APIs List for Catalog

All the necessary APIs for the catalog will be available to you through this.

For this, what endpoint do you need and the payload that we send in the body so that we can save the data?

  1. Product Service APIs
  2. Tier Price APIs
  3. Product Custom Options APIs
  4. Product Links APIs
  5. Category Product Links APIs
  6. Product Website Links APIs

 

Read more: Best 3 Simple Ways to Upgrade Magento 2 Store in 2022

 

Customer APIs List

In this list, we have prepared the details of all the endpoints of the customer API, such as how to get the metadata of a customer, you will get the details of all the APIs of the customer group.

To get data of customer account via api or delete or save any information, the endpoint of API and payload with complete details is mentioned.

List of customer APIs that are available in Magento 2 default.

  1. Group APIs of Customer
  2. Metadata APIs of Customer
  3. Customer Address Metadata APIs
  4. Magento 2 Customer Account APIs
  5. Addresses APIs for Customer

 

Checkout REST APIs List in Magento 2

How do you add to the cart through REST API for Magento 2 customers? Perform an action for all the functionalities of the mini cart like update the price, update the content, or arrive at the checkout, its API endpoint indexed here As stated.

Receive data or save data on the checkout page, update price, or place an order.

To perform all these processes through the API, you will get a list that is prepared like a dictionary.

You won't need to do much research, everything is explained in step by step order.

This checkout API's default index is created so that any developer can easily use this list to create their own mobile application

  1. Shipping guest information
  2. My shipping information
  3. Shipping information
  4. Totals information
  5. Guest totals information
  6. Managing My totals information
  7. Guest place order with payment information saving
  8. My place order with payment information saving
  9. Get payment information
  10. Managing payment guest information
  11. My payment information

 

References

https://magento.stackexchange.com/

https://devdocs.magento.com/