E-Commerce : List of Best ecommerce Platform in 2021

Best Payment Gateway For Magento 2: List of Top 7 And How To Integrate

Posted by Hemant Singh On January 9, 2022 January 9, 2022 Filed under Magento 2

In this article, I am going to explain to you how you should choose and integrate payment gateway and the pros and cons of online payments gateways providers. I will also discuss the best payment gateway for Magento 2 websites in 2022.

If you want to advance your business in the Internet world, then it does not matter whether you are the owner of an eCommerce platform or doing any other work.

You have to think about your customers and provide them with a secure, quick, and easy-to-use payment system that will help them make their payments, otherwise, your business will be very difficult to run.

Business owners also have to keep in mind whether they choose the payment system keeping in mind their needs and keeping in mind their customers or not.

The payment solution you choose must meet the needs of both your customers and your business. Therefore, your business must protect your customers from fraud, and also take care that your business is not affected.

The payment method added to your business should be convenient to use and compatible with your website.

When we use a payment gateway to make an online payment, that gateway enables us to process the credit or debit card electronically to accept the payment.

Many times it happens that due to the complex online system, customers leave the website without completing the order.

In such a situation it becomes necessary that the payment gateway of your website should be friendly according to your target customer.

Payment Gateway Integration With eCommerce Store

When it comes to e-commerce, payment solutions play an important role in this, at that time we have to make sure that it accepts all your payment methods and credit cards.

According to data in 2022, by far the most popular payment method is a credit card.

If we take out the percentage by adding all the regions, then up to seventy percent of the people prefer to pay by credit card only.

Now the rest of the percentage is occupied by some leading payment companies like PayPal, Amazon, etc.

When your business is global, then your payment method needs to have the option to pay in all types of currency so that customers from every region can pay according to their currency.

When we integrate the payment methods then that differ by two major factors:

Whether you must be in compliance with any financial regulation (PCI DSS), and
the degree of user experience concerning the checkout and payment procedure.

PCI DSS Compliance:

When we do not store sensitive data of any of our customers, it is not required because when we add third-party payment gateways, all the processing, and regulatory burden is handled by those parties. So you do not need these certificates.

But when you store those data, then it becomes necessary for you to follow those industry rules and regulations.

The Payment Card Industry Data Security Standard (PCI DSS) came into existence in 2004 that handle essential elements for processing card payments.

Best Payment Gateway for Magento 2 in 2022

Here, I am giving you the list of best payment gateway which according to 2022 comes in the name of best payment gateway.

Stripe

Stripe is one of the most popular eCommerce payment gateways solutions. That accepts all major electronic payment methods, including Apple Pay, WeChat Pay, and Android Pay.

Pricing does not charge for setup but the standard package charges 2.9 percent + $0.30 per transaction. And the international processing is approx 1 percent on each transaction. Strip also offers customized plans for the business.

PayPal

Paypal Payment Gateway provides its service to every corner of the world, This electronic payment gateway is the best payment gateway for Magento e-commerce, its service is worthy of praise.

PayPal provides all kinds of packages for its customers, according to which customers can upgrade the plan according to their convenience. That is one of the best scalable solutions for all types of businesses sized.

PayPal Offers to Process:

Credit cards, debit cards, and PayPal payments themselves
Other processing services: PayPal Payments Pro, PayPal Express Checkout, and Braintree.

Braintree is a separate payment solution for mobile and web payment systems for e-commerce that completely waives off your international fees. You don't have to pay any extra charges.

PayPal’s Pricing:

Zero setup fees.
Domestic transactions: 2.9 percent + $0.30 per transaction.
Outside the US transactions: are 3.9 percent + a fee based on the currency used. T
PayPal Payments Pro charges $30 monthly for a subscription.

Amazon Pay

Amazon Pay is also a leading payment gateway method, this eCommerce giant designed its service for the smaller business owner and targets the online retailers.

Amazon Pay offers its processing service for all major cards like credit cards, debit cards, and other major payment methods.

Pricing:

Domestic transactions: 2.9 percent + $0.30 per transaction.
International is 3.9 percent.
The refund amount is $20 + taxes, if applicable.
No charges for installation or setup or monthly fees.

Authorize.net

Authorize.net's main customers are small and medium-sized businesses and their targeted business model is also designed for them.

This service accepts almost all payment methods, including Paypal and Amazon Pay.

Its security service is quite advanced which facilitates its customers for a seamless transaction for web and mobile applications.

Pricing:

Domestic transaction: 2.9 percent + $0.30 per transaction.

There is a $25 monthly fee for a gateway and $49 for a merchant account setup.

2Checkout

2Checkout offers its service in approximately 87 currencies and 15 languages. Its service is such that it easily connects with businesses of different sizes and offers them a worthy choice of customizable service.

Pricing:

No setup charges.
Domestic transaction: 3.5 percent + $0.35 per transaction.
2Monetize charges: 6.0 percent + $0.60 per transaction.

Why Custom Payment Gateway?

The third-party payment system is perfect for small or middle-class merchants because it gives them good facility on a certain amount in less time but custom payment gateway becomes necessary for large entrepreneurs or big business organizations that they should not have any kind of restriction.

Having a system to make your own payment according to your own direction, free from all kinds of extra instructions, is an essential step in making the business successful.

However, a custom payment gateway can give you several benefits:

Low Transaction Fee:

If you create your own payment gateway, then the first benefit is that you are saved from transactional charges.

When a large business saves some amount on every single transaction, that becomes a huge number which helps in business growth.

Customization:

When you decide on a custom payment method, then you can completely customize it according to your business, which facilitates the payment of the customer of your business and increases your business growth.

You can also customize your transaction fee according to your business.

Once you have developed the facility to make a custom payment, you can also offer your service to another business and in return, you can do business deals or apply some transaction charges.

Conclusion

In conclusion, we can say that you can choose the payment gateway according to the convenience of your business.

If you are a small-scale merchant then it is better to use a third-party payment gateway.

When you use your own payment gateway, it increases your customer's trust in your business and contributes significantly to your sales growth.

Custom payment gateway needs development and maintenance all the time, it should have good ability to eliminate any kind of fraud methods

Recommended Post:

PayPal Account: How to Create New PayPal Account, Transfer

How to Add Owl Carousel Slider in Magento 2 Products

Posted by Hemant Singh On January 8, 2022 January 8, 2022 Filed under Magento 2

In this tutorial, I am going to explain to you how you can add owl carousel slider in Magento 2. When making the user interface of Magento, it has to be taken care of that how to show more and better content in less space.

Owl carousel slider is very helpful to have that user interface look good. This slider is most widely used in eCommerce websites.

Magento 2 website owners mostly use the Owl Carousel slider to display various types of products such as new arrival products, most viewed products, more liked products slider, featured product slider, best seller product slider, etc.

How to Add Owl Carousel Slider in Magento 2

1) In the first step, we will add

 app/code/Wishusucess/OwlSlider/view/frontend/templates/slider.phtml file

<!--
/**
* Created By : Hemant Kumar Singh Magento 2x Developer
*/
-->
<!DOCTYPE html>
<html>
<body>
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item"><img src="http://wishusucess.com/350x300?text=1"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=2"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=3"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=4"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=5"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=6"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=7"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=8"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=9"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=10"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=11"></div>
<div class="item"><img src="http://wishusucess.com/350x300?text=12"></div>
</div>
</div>
</body>
</html>

2) In the second step you have to add this javascript file to your custom extension.

app/code/Wishusucess/OwlSlider/view/frontend/web/js/common.js

/**
* Created By : Hemant Kumar Singh Magento 2x Developer
*/
require(['jquery', 'owlcarousel'], function($) {
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
});
});
});

3) Now in the third step you have to add the javascript file in the phtml file so you have to create a file.

app/code/Wishusucess/OwlSlider/view/frontend/owlslider_index_index.xml

<?xml version="1.0"?>
<!--
/**
* Created By : Hemant Kumar Singh Magento 2x Developer
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
layout="1column"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="Wishusucess_OwlSlider::js/common.js" async="async" />
</head>
<body>
<referenceBlock name="content">
<block class="Magento\Framework\View\Element\Template"
name="proslider"
template="Wishusucess_OwlSlider::productslider.phtml" />
</referenceBlock>
</body>
</page>

4) In the fourth step we have to add an owl slider

app/code/Wishusucess/OwlSlider/view/frontend/requirejs-config.js

/**
* Created By : Hemant Kumar Singh Magento 2x Developer
*/
var config = {
paths: {
owlcarousel: "Wishusucess_OwlSlider/js/owl.carousel"
},
shim: {
owlcarousel: {
deps: ['jquery']
}
}
};

Now in order to make your slider more attractive and beautiful, you can add extra CSS and js files in your Magento 2 custom OwlSlider module’s web folder. We can add this code as per our requirement and can add this slider on any cms page also.

That’s it !!!

You can check the full module here: GitHub

How to Call Owl Slider in Magento2 Related Products

This step will help you to add the Owl Slider in Magento 2.x You just have to follow the below steps.

I assume that you are using a custom Magento 2 theme so here I am taking as an example.

ThemeVender : Wishusucess

ThemeName: WishusucessTheme

Let's start

If you want to put the slider in the related product on the product details page of Magento 2 then you can follow the steps given below.

This step will help you to add Owl Slider for Related Product in the product detail page.

You need to update

app/design/frontend/Wishusucess/WishusucessTheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml

The file to implement OwlCarousel for Related Products.

Step 1: Download OwlCarousel from here: Owl Carousel

Please put all OwlCarousel JS files owl.carousel.min.js and owlcarousel.js in this directory

app/design/frontend/Wishusucess/WishusucessTheme/Magento_Catalog/web/js

After that put all OwlCarousel CSS files owl.carousel.css and owl.theme.default.css etc... in this directory

app/design/frontend/Wishusucess/WishusucessTheme/web/css/owlcarousel/assets

Step 2: Include OwlCarousel CSS files using default_head_blocks.xml layout XML file.

For that create

app/design/frontend/Wishusucess/WishusucessTheme/Magento_Theme/layout/default_head_blocks.xml

default_head_blocks.xml file code.

<?xml version="1.0"?>
<!--
/**
* Hemant Kumar Singh Magento 2x Developer
* Website url: http://www.wishusucess.com/
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> 
<css src="css/owlcarousel/assets/owl.carousel.min.css" />
<css src="css/owlcarousel/assets/owl.theme.default.min.css" />
</head>
</page>

Step 3: Include OwlCarousel JS using requirejs config file.

Now you have to create a file

app/design/frontend/Wishusucess/WishusucessTheme/Magento_Catalog/requirejs-config.js

requirejs-config.js file code.

var config = {
paths: { 
'owlcarousel': "Magento_Catalog/js/owlcarousel"
}, 
shim: {
'owlcarousel': {
deps: ['jquery']
}
}
};

Step 4: Update items.phtml File

Copy from

/vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml

and paste to

app/design/frontend/Wishusucess/WishusucessTheme/Magento_Theme/Magento_Catalog/templates/product/list/items.phtml

Now update the item.phtml file to implement OwlCarousel

Here, I am giving you the items.phtml code, you can just copy and paste.

<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* Developer: Hemant Kumar Singh Magento 2x Developer
*/

// @codingStandardsIgnoreFile

/* @var $block \Magento\Catalog\Block\Product\AbstractProduct */
?>

<?php
switch ($type = $block->getType()) {

case 'related-rule':
if ($exist = $block->hasItems()) {
$type = 'related';
$class = $type;

$image = 'related_products_list';
$title = __('Related Products');
$items = $block->getAllItems();
$limit = $block->getPositionLimit();
$shuffle = (int) $block->isShuffled();
$canItemsAddToCart = $block->canItemsAddToCart();

$showAddTo = false;
$showCart = false;
$templateType = null;
$description = false;
}
break;

case 'related':
/** @var \Magento\Catalog\Block\Product\ProductList\Related $block */
if ($exist = $block->getItems()->getSize()) {
$type = 'related';
$class = $type;

$image = 'related_products_list';
$title = __('Related Products');
$items = $block->getItems();
$limit = 0;
$shuffle = 0;
$canItemsAddToCart = $block->canItemsAddToCart();

$showAddTo = true;
$showCart = false;
$templateType = null;
$description = false;
}
break;

case 'upsell-rule':
if ($exist = $block->hasItems()) {
$type = 'upsell';
$class = $type;

$image = 'upsell_products_list';
$title = __('We found other products you might like!');
$items = $block->getAllItems();
$limit = $block->getPositionLimit();
$shuffle = (int) $block->isShuffled();

$showAddTo = false;
$showCart = false;
$templateType = null;
$description = false;
$canItemsAddToCart = false;
}
break;

case 'upsell':
/** @var \Magento\Catalog\Block\Product\ProductList\Upsell $block */
if ($exist = count($block->getItemCollection()->getItems())) {
$type = 'upsell';
$class = $type;

$image = 'upsell_products_list';
$title = __('You may also like');
$items = $block->getItemCollection()->getItems();
$limit = $block->getItemLimit('upsell');
$shuffle = 0;

$showAddTo = false;
$showCart = false;
$templateType = null;
$description = false;
$canItemsAddToCart = false;
}
break;

case 'crosssell-rule':
/** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
if ($exist = $block->hasItems()) {
$type = 'crosssell';
$class = $type;

$image = 'cart_cross_sell_products';
$title = __('More Choices:');
$items = $block->getItemCollection();

$showAddTo = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = false;
$canItemsAddToCart = false;
}
break;

case 'crosssell':
/** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
if ($exist = count($block->getItems())) {
$type = 'crosssell';
$class = $type;

$image = 'cart_cross_sell_products';
$title = __('More Choices:');
$items = $block->getItems();

$showAddTo = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = false;
$canItemsAddToCart = false;
}
break;

case 'new':
if ($exist = $block->getProductCollection()) {
$type = 'new';
$mode = 'grid';
$type = $type . ' ' . $mode;

$class = 'widget' . ' ' . $type;

$image = 'new_products_content_widget_grid';
$title = __('New Products');
$items = $exist;

$showAddTo = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = ($mode == 'list') ? true : false;
$canItemsAddToCart = false;
}
break;

case 'other':
break;
}
?>

<?php if ($exist):?>
<div class="clearfix"></div>
<?php if ($type == 'related' || $type == 'upsell'): ?>
<?php if ($type == 'related'): ?>
<div class="block <?= /* @escapeNotVerified */ $class ?>" data-mage-init='{"relatedProducts":{"relatedCheckbox":".related.checkbox"}}' data-limit="<?= /* @escapeNotVerified */ $limit ?>" data-shuffle="<?= /* @escapeNotVerified */ $shuffle ?>">
<?php else: ?>
<div class="block <?= /* @escapeNotVerified */ $class ?>" data-mage-init='{"upsellProducts":{}}' data-limit="<?= /* @escapeNotVerified */ $limit ?>" data-shuffle="<?= /* @escapeNotVerified */ $shuffle ?>">
<?php endif; ?>
<?php else: ?>
<div class="block <?= /* @escapeNotVerified */ $class ?>">
<?php endif; ?>
<div class="block-title title">
<strong id="block-<?= /* @escapeNotVerified */ $class ?>-heading" role="heading" aria-level="2"><?= /* @escapeNotVerified */ $title ?></strong>
</div>
<div class="block-content content" aria-labelledby="block-<?= /* @escapeNotVerified */ $class ?>-heading">
<?php if ($type == 'related' && $canItemsAddToCart): ?>
<div class="block-actions">
<?= /* @escapeNotVerified */ __('Check items to add to the cart or') ?>
<button type="button" class="action select" role="select-all"><span><?= /* @escapeNotVerified */ __('select all') ?></span></button>
</div>
<?php endif; ?>
<div class="products wrapper grid products-grid products-<?= /* @escapeNotVerified */ $type ?>">
<div id="relateditem_carousel" class="products list items product-items owl-carousel owl-theme"> 
<?php $iterator = 1; ?>
<?php foreach ($items as $_item): ?>

<?php $available = ''; ?>
<?php if (!$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
<?php if (!$_item->getRequiredOptions()): ?>
<?php $available = 'related-available'; ?>
<?php endif; ?>
<?php endif; ?>
<?php if ($type == 'related' || $type == 'upsell'): ?>
<?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<div class="item product product-item" style="display: none;">' : '</div><div class="item product product-item" style="display: none;">' ?>
<?php else: ?>
<?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<div class="item product product-item">' : '</div><div class="item product product-item">' ?>
<?php endif; ?>
<div class="product-item-info <?= /* @escapeNotVerified */ $available ?>">
<?= /* @escapeNotVerified */ '<!-- ' . $image . '-->' ?>
<a href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product photo product-item-photo">
<?= $block->getImage($_item, $image)->toHtml() ?>
</a>
<div class="product details product-item-details">
<!--<strong class="product name product-item-name"><a class="product-item-link" title="<?= $block->escapeHtml($_item->getName()) ?>" href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>">
<?= $block->escapeHtml($_item->getName()) ?></a>
</strong>-->

<!--<?= /* @escapeNotVerified */ $block->getProductPrice($_item) ?>-->

<?php if ($templateType): ?>
<?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
<?php endif; ?>

<?php if ($canItemsAddToCart && !$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
<?php if (!$_item->getRequiredOptions()): ?>
<div class="field choice related">
<input type="checkbox" class="checkbox related" id="related-checkbox<?= /* @escapeNotVerified */ $_item->getId() ?>" name="related_products[]" value="<?= /* @escapeNotVerified */ $_item->getId() ?>" />
<label class="label" for="related-checkbox<?= /* @escapeNotVerified */ $_item->getId() ?>"><span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span></label>
</div>
<?php endif; ?>
<?php endif; ?>

<?php if ($showAddTo || $showCart): ?>
<div class="product actions product-item-actions">
<?php if ($showCart): ?>
<div class="actions-primary">
<?php if ($_item->isSaleable()): ?>
<?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
<button class="action tocart primary" data-mage-init='{"redirectUrl": {"url": "<?= /* @escapeNotVerified */ $block->getAddToCartUrl($_item) ?>"}}' type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
<span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
</button>
<?php else: ?>
<?php $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
?>
<button class="action tocart primary"
data-post='<?= /* @escapeNotVerified */ $postData ?>'
type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
<span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
</button>
<?php endif; ?>
<?php else: ?>
<?php if ($_item->getIsSalable()): ?>
<div class="stock available"><span><?= /* @escapeNotVerified */ __('In stock') ?></span></div>
<?php else: ?>
<div class="stock unavailable"><span><?= /* @escapeNotVerified */ __('Out of stock') ?></span></div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>

<?php if ($showAddTo): ?>
<div class="secondary-addto-links actions-secondary" data-role="add-to-links">
<?php if ($addToBlock = $block->getChildBlock('addto')): ?>
<?= $addToBlock->setProduct($_item)->getChildHtml() ?>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?= ($iterator == count($items)+1) ? '</div>' : '' ?>
<?php endforeach ?>
</div> 
</div>
</div>
</div>
<script type="text/javascript">
requirejs(['jquery','owlcarousel'],function(jQuery,owlCarousel){
(function($) {
$(window).load(function () {
$('#relateditem_carousel').owlCarousel({
items:4,
lazyLoad:false,
loop:false,
margin:10,
nav:false,
dots:false,
autoplay:true,
response:true,
autoplayHoverPause:false,
autoWidth:false,
responsive : {
0 : {
items:1,
},
420 : {
items:2,
},
768 : {
items:3,
},
991 : {
items:4,
}
}
});
});
})(jQuery);
});
</script> 
<?php endif;?>

Step 5: Now run the following CLI commands.

sudo rm -rf pub/static/frontend/*

sudo rm -rf var/cache/*

php bin/magento setup:upgrade

Thats' all!!

Add JS File in Magento 2 Module: How to Add Java Script

Add Multiple Product Attribute Using InstallData in Magento2

Posted by Hemant Singh On January 7, 2022 January 7, 2022 Filed under Magento 2

In this article, I am going to explain how to add multiple product attribute or create product attributes by using the installData.php file programmatically in Magento 2.

Magento 2 eCommerce follows the EAV database model, So in such a situation, it becomes necessary that its standard should be followed. So in order to add the custom attributes in Magento 2, we have to create the InsatllData PHP file.

In the chances of any online e-commerce website being successful, it matters a lot that how well you define the product.

When we want to define the product in a better way, we take the help of custom attribute which plays an important role in conveying to the customer of that store easily.

Custom product attribute is one of the important characteristics of the products. That is responsible to define the character and specification of the product so the customer easily understands their requirement and influence to buy that product. Examples of product attributes can be any type like product price, product quantity, product size, etc.

Steps to Add Product Attribute Programmatically

In order to create the product attributes we have to follow the following steps, Wishusucess MultipleAttribute module will help you to understand how to add a product attribute in Magento 2.

Create file InstallData.php
Define the install() method
Create custom attribute

In the first step, we have to create an InstallData file then in the second step we will define the install method and in the third step, we will add a custom attribute.

Magento 2 Add Multiple Product Attribute Programmatically

We will create a file inside of Setup folder with the InstallData file name in the below location.

Wishusucess/ProductAttributes/Setup/InstallData.php

Now the content will look like the below class.

<?php
namespace Wishusucess\ProductAttributes\Setup;

use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;

class InstallData implements InstallDataInterface
{
/**
* EAV setup factory
*
* @var EavSetupFactory
*/
private $eavSetupFactory;

/**
* Init
*
* @param EavSetupFactory $eavSetupFactory
*/
public function __construct(EavSetupFactory $eavSetupFactory)
{
$this->eavSetupFactory = $eavSetupFactory;
}

public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
{
/** @var EavSetup $eavSetup */
$eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

/**
* Add attributes to the eav/attribute
*/
$eavSetup->addAttribute(
\Magento\Catalog\Model\Product::ENTITY,
'wishusucess_featured',
[
'group' => 'General',
'type' => 'int',
'backend' => '',
'frontend' => '',
'label' => 'Featured Product',
'input' => 'boolean',
'class' => '',
'source' => '',
'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_GLOBAL,
'visible' => true,
'required' => false,
'user_defined' => true,
'default' => '',
'searchable' => false,
'filterable' => false,
'comparable' => false,
'visible_on_front' => false,
'used_in_product_listing' => true,
'unique' => false,
'apply_to' => 'simple,configurable,virtual,bundle,downloadable'
],
);

$eavSetup->addAttribute(
\Magento\Catalog\Model\Product::ENTITY,
'wishusucess_bestseller',
[
'group' => 'General',
'type' => 'int',
'backend' => '',
'frontend' => '',
'label' => 'Bestseller Product',
'input' => 'boolean',
'class' => '',
'source' => '',
'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_GLOBAL,
'visible' => true,
'required' => false,
'user_defined' => true,
'default' => '',
'searchable' => false,
'filterable' => false,
'comparable' => false,
'visible_on_front' => false,
'used_in_product_listing' => true,
'unique' => false,
'apply_to' => 'simple,configurable,virtual,bundle,downloadable'
],
);

$eavSetup->addAttribute(
\Magento\Catalog\Model\Product::ENTITY,
'wishusucess_specialproducts',
[
'group' => 'General',
'type' => 'int',
'backend' => '',
'frontend' => '',
'label' => 'Special Product',
'input' => 'boolean',
'class' => '',
'source' => '',
'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_GLOBAL,
'visible' => true,
'required' => false,
'user_defined' => true,
'default' => '',
'searchable' => false,
'filterable' => false,
'comparable' => false,
'visible_on_front' => false,
'used_in_product_listing' => true,
'unique' => false,
'apply_to' => 'simple,configurable,virtual,bundle,downloadable'
],
);

$eavSetup->addAttribute(
\Magento\Catalog\Model\Product::ENTITY, 
'wishusucess_newproducts',
[
'group' => 'General',
'type' => 'int',
'backend' => '',
'frontend' => '',
'label' => 'New Product',
'input' => 'boolean',
'class' => '',
'source' => '',
'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_GLOBAL,
'visible' => true,
'required' => false,
'user_defined' => true,
'default' => '',
'searchable' => false,
'filterable' => false,
'comparable' => false,
'visible_on_front' => false,
'used_in_product_listing' => true,
'unique' => false,
'apply_to' => 'simple,configurable,virtual,bundle,downloadable'
]
);
}
}

Step 4: Run Magento 2 Command

Now run the below command

php bin/magento setup:upgrade

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

php bin/magento c:c

That's it!!

Now go to the Admin > Catalog > Product > Click on any product you will see like the below image.

The above code will help you to create multiple filter product attribute like best seller attribute, featured attribute, a new attribute, special attribute by using a single file.

If you are looking for this complete extension then you can check our GitHub link.

Add JS File in Magento 2 Module: How to Add Java Script

How to Get Data on Frontend From System Configuration File in Magento2

Posted by Hemant Singh On January 5, 2022 January 5, 2022 Filed under Magento 2, Magento 2 Extensions

When we create a model inside Magento 2, we also give the system configuration of that model so that the admin user can manage it easily.

And any extension or model is considered good only when its user experience is good.

The more you manage or customize the admin side of the extension, the better your admin experience will be.

In this article, I am going to tell you how to create a configuration of System.xml in the admin of any model and get its data in the front end.

Get System Configuration Data in Phtml File

The system.xml is a configuration file that is used to manage any extension or module in Magento 2 by giving the option on the admin side to customize or change the behavior.

Configuration options are available in Magento 2

Store -> Settings -> Configuration

Step 1: Create Registration File

Here in the first step, you have to create a registration file to register your Magento 2 module or extension.

Wishusucess/SystemHelloworld/registration.php

<?php
/**
* @Developer: Hemant Kumar Singh Magento 2x Developer
* @Website: http://www.wishusucess.com/
*/ 
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Wishusucess_SystemHelloworld',
__DIR__
);

Step 2: Create Module XML File

Now you have to create a module XML file to give the module version and basic information of your Magento 2 System configuration module.

Wishusucess/SystemHelloworld/etc/module.xml

<?xml version="1.0"?>
<!--
/**
* @Developer: Hemant Kumar Singh Magento 2x Developer
* @Website: http://www.wishusucess.com/
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Wishusucess_SystemHelloworld" setup_version="1.0.0" active="true"></module>
</config>

Step 3: Create System Configuration XML File

The system. xml file is known as the configuration file that we used to create admin configuration fields in Magento 2 Module or extension.

This file decides the admin setting options for any extension or Module.

Store -> Setting -> Configuration

Wishusucess/SystemHelloworld/etc/adminhtml/system.xml

<?xml version="1.0"?>
<!--
/**
* @Developer: Hemant Kumar Singh Magento 2x Developer
* @Website: http://www.wishusucess.com/
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="wus" translate="label" sortOrder="10">
<label>Wishusucess</label>
</tab>
<section id="wishusucess_systemhelloworld" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
<class>separator-top</class>
<label>Hello World</label>
<tab>wus</tab>
<resource>Wishusucess_SystemHelloworld::wishusucess_systemhelloworld</resource>
<group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
<label>General Configuration</label>
<field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
<label>Module Enable</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<field id="text_title" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
<label>Title</label>
<comment>This title text.</comment>
</field>
<field id="text_description" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
<label>Description</label>
<comment>This is description text.</comment>
</field>
</group>
</section>
</system>
</config>

Step 4: Config XML file for Admin

Now we are going to create a config XML file that we used to provide the default value in admin configuration fields in Magento 2 admin.

Wishusucess/SystemHelloworld/etc/config.xml

<?xml version="1.0"?>
<!--
/**
* @Developer: Hemant Kumar Singh Magento 2x Developer
* @Website: http://www.wishusucess.com/
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
<default>
<wishusucess_systemhelloworld>
<general>
<enable>0</enable>
<text_title>Wishusucess System Config Hello World</text_title>
<text_description>Wishusucess System Configuration Hello World Module</text_description>
</general>
</wishusucess_systemhelloworld>
</default>
</config>

Now till here, if you will run the below command then you will see the configuration like below screenshot

php bin/magento setup:upgrade

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

php bin/magento cache:clean

Step 5: System Configuration Helper Class

Now here we will get the data from a system XML file, we will initialize the path of each field id of the system.xml file in Magento 2.

In order to initialize the field path, we will prefer the order hierarchy.

Section_id/group_id/field_id

Wishusucess/SystemHelloworld/Helper/Data.php

<?php
/**
* @Developer: Hemant Kumar Singh Magento 2x Developer
* @Website: http://www.wishusucess.com/
*/
namespace Wishusucess\SystemHelloworld\Helper;
use Magento\Framework\App\Config\ScopeConfigInterface;

class Data extends \Magento\Framework\App\Helper\AbstractHelper
{

/**
* Admin configuration paths
*
*/
const IS_ENABLED = 'helloworld_config/general/enable';

const TEXT_TITLE = 'helloworld_config/general/text_title';

const TEXT_DESCRIPTION = 'helloworld_config/general/text_description'; 
/**
* @var \Magento\Framework\App\Config\ScopeConfigInterface
*/
protected $scopeConfig;

/**
* Data constructor
* @param \Magento\Framework\App\Helper\Context $context
* @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
*/
public function __construct(
\Magento\Framework\App\Helper\Context $context,
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
) {
parent::__construct($context);

}

/**
* @return $isEnabled
*/
public function isEnabled()
{
$isEnabled = $this->scopeConfig->getValue(self::IS_ENABLED, 
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
);

return $isEnabled;
}

/**
* @return $textTitle
*/
public function getTextTitle()
{
$textTitle = $this->scopeConfig->getValue(self::TEXT_TITLE,
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
);

return $textTitle;
}

/**
* @return $textDescription
*/
public function getDisplayText()
{
$textDescription = $this->scopeConfig->getValue(self::TEXT_DESCRIPTION,
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
);

return $textDescription;
}

}

Step 6: Call Helper in Block Class

Here, we have to create a block class in order to call the helper. So that we can directly use the block function in the phtml file.

Wishusucess/SystemHelloworld/Block/AdminConfiguration.php

<?php
/**
* @Developer: Hemant Kumar Singh Magento 2x Developer
* @Website: http://www.wishusucess.com/
*/
namespace Wishusucess\SystemHelloworld\Block;

use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;
use Wishusucess\SystemHelloworld\Helper\Data;
use Magento\Framework\App\Config\ScopeConfigInterface;

class AdminConfiguration extends \Magento\Framework\View\Element\Template
{ 
public function __construct(
\Magento\Backend\Block\Template\Context $context,
Data $helper,
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig, 
array $data = []
)
{ 
$this->helper = $helper;
$this->scopeConfig = $scopeConfig;
parent::__construct($context, $data);
}

/*
* @return bool
*/
public function isEnabled()
{
return $this->helper->isEnabled();
} 
/*
* @return string
*/
public function getDisplayText()
{
return $this->helper->getDisplayText();
} 
}

Step 7: Call System Config Value in PHTML File

Now you will call the block method here so that the data of your admin field can be printed.

Another way is that you can directly call the helper class in this file and use its method.

In Magento 2, any system XML fields show the data of the common file ie admin fields on the front end

Wishusucess/SystemHelloworld/view/frontend/templates/helloworld.phtml

<?= $isEnabled; ?>

<?= $getTextTitle; ?>

<?= $getDisplayText; ?>

<?php
$helper = $this->helper('Wishusucess\SystemHelloworld\Helper\Data');
$isEnabled = $helper->isEnabled();
$getTextTitle = $helper->getTextTitle();
$getDisplayText = $helper->getDisplayText();
?>
//Print Text title
<?php echo $getTextTitle; ?>

//Print Text Description 
<?php $getDisplayText; ?>

Now make this module enable and save it, then call this phtml in cms page or block if you want to check this simple module in Magento 2.

<p>{{block class="Wishusucess\SystemHelloworld\Block\AdminConfiguration" template="Wishusucess_SystemHelloworld::helloworld.phtml"}}</p>

Run the below command and then check

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

php bin/magento cache:clean

That's all !!

If you need any help with Magento 2 extension or module development you can directly contact me.

Thanks

Check with GitHub

Magento 2 Featured Products: How to Add Featured Products

Add JS File in Magento 2 Module: How to Add Java Script

Posted by Hemant Singh On January 4, 2022 January 4, 2022 Filed under Magento 2

When we create a magneto model or extension then at that time we also need to use javascript and style sheet file etc.
Let us know how we add js file in Magento 2 or style sheet in Magento 2 module or extension.

Magento 2 has its own structure to define the javascript and CSS file. So we will follow the same path in order to add the js file to execute JavaScript code.

Here, I am going to explain with an example so I will create a Magento 2 module to add a JS file to execute the code and pass the parameters inside a script.

Steps to Add JS File in Magento 2 Module

There are five steps to add the js and CSS file in Magento 2 module.

Create or add in the existing module.
Create a requirejs-config.js and a JavaScript module file.
Create a layout update to add a template that will enable the JavaScript module.
Create a template file.

Step 1: Create a New Module

app/code/Wishusucess/AddJsfile/registration.php

<?php
/**
* Developer: Hemant Singh Magento 2x Developer
* Website: http://www.wishusucess.com/
*/

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Wishusucess_AddJsfile',
__DIR__
);

Step 2: Create a Module XML file

app/code/Wishusucess/AddJsfile/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Wishusucess_AddJsfile" setup_version="0.0.1">
</module>
</config>

Step 3: Create requirejs-config.js and a JavaScript

Add the file

app/code/Wishusucess/AddJsfile/view/frontend/requirejs-config.js

var config = {
map: {
'*': {
hello: 'Wishusucess_AddJsfile/js/hello',
}
}
};

Step 4: Add JS File in Magento 2 Extension

In this step, we will add the javascript file in Magento 2 extension or module.

And finally, add the file

app/code/Wishusucess/AddJsfile/view/frontend/web/js/hello.js

define([
"jquery"
], function($){
"use strict";
return function(config, element) {
alert(config.message);
}
}
)

Step 5: Add XML File

Now we have to create a layout file in order to add a template file so that will enable the JavaScript in that file of the module.

And then add the file catalog_product_view.xml

app/code/Wishusucess/AddJsfile/view/frontend/layout/catalog_product_view.xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" template="Wishusucess_AddJsfile::hello.phtml" />
</referenceContainer>
</body>
</page>

Step 6: Create a Template File

So, this template is a frontend view so we can choose any template in order to show the js functionality.

Now, suppose we have a template file hello.phtml and we want to add the javascript in that file so we will add in the file like below.

 app/code/Wishusucess/AddJsfile/view/frontend/templates/hello.phtml

<div data-mage-init='{"hello": {"message": "Hello Wishusucess Magento Team!"}}'>
Content
</div>

Step 6: Run Below Magento 2 Command

Now we have to run the below upgrade and cache command in Magento 2 root directory.

bin/magento setup:upgrade

bin/magento cache:clean

Add CSS File in Magento 2 Module

In this step, we will learn how we can add the style sheet in Magento 2 extension or Module.

In order to add the CSS file in the Module. first, we will create a CSS file.

app/code/Wishusucess/AddJsfile/view/frontend/web/css/cssfilename.css

Recommended Post:

Magento 2.4 Installation Guide: How to Install Magento 2.4.2

Magento 2 Featured Products: How to Add Featured Products

Posted by Hemant Singh On January 4, 2022 January 4, 2022 Filed under Magento 2

For any online store to be successful, it is important that its customer experience should be as good as possible. Many factors are involved in this chain of experience and filter products experience in Magento 2 is one of them for the customers.

In such a situation, it is necessary that the store should be well designed, its design should be made according to the customers.

Filtering the products and showing them on the different pages like the Home page, category page, cms page, product details page increases the chances of sales.

Showing best seller products, featured products, New Products, special products is one of the most important aspects of Magento 2 eCommerce store that directly affects the customer shopping experience and sales growth.

Filter Products Extension in Magento 2

This extension will add functionality in your stores and allow admin users to decide filter attibute based on any type of attribute like best seller products attribute, featured products attribute, special products attribute using Wishusucess filter products extension of Magento 2.

Best Seller Products Filter
Featured Products Filter
New Products Filter
Special Products Filter

Admin Configuration of Filter Products Extension

In this Magento 2 extension given in admin configuration by which admin user can set title and description of filter attribute.

It gives your admin user the flexibility to customize everything in a better way.

Now, you have the options to filter the products by bestseller attribute, featured products attribute, special products attribute. If you need to change their title or need to add some message or description you can add their information from admin.

Store > Setting > Configuration > Wishusucess > Filterd Products

Products are filters based on the attributes, so as soon as you will enable the products as a featured or special or best seller that will display on the frontend.

This features allows you to enable or disable product attributes directly from the admin catalog product section.

How to Display Filter Products on Page

Choose the attribute that you want to filter products by in the catalog product section and get all products of that particular attribute by adding widget on the page.

Now, you simply need to keep enable to show the product in frontend and if you don't want to show then you can keep it disable. This Magento 2 Filter Product extension already has all this attribute in setup install data file. So you don't have to create all this product attributes.

You can add this widget of special products, featured products, best seller products, new products on any cms page or cms block like: home page, about us page etc.

Magento 2 InstallData for Filter Attributes

Here, I am giving you the code to create filter products attributes to filter products programmatically. This code will create four cutom product attribute programmatically in Magento 2.

Wishusucess/FilterProducts/Setup/InstallData.php

<?php
namespace Wishusucess\FilterProducts\Setup;

use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;

class InstallData implements InstallDataInterface
{
/**
* EAV setup factory
*
* @var EavSetupFactory
*/
private $eavSetupFactory;

/**
* Init
*
* @param EavSetupFactory $eavSetupFactory
*/
public function __construct(EavSetupFactory $eavSetupFactory)
{
$this->eavSetupFactory = $eavSetupFactory;
}

public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
{
/** @var EavSetup $eavSetup */
$eavSetup = $this->eavSetupFactory
->create(['setup' => $setup]);

/**
* Add attributes to the eav/attribute
*/
$eavSetup->addAttribute(
\Magento\Catalog\Model\Product::ENTITY,
'wishusucess_featured',
[
'group' => 'General',
'type' => 'int',
'backend' => '',
'frontend' => '',
'label' => 'Featured Product',
'input' => 'boolean',
'class' => '',
'source' => '',
'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_GLOBAL,
'visible' => true,
'required' => false,
'user_defined' => true,
'default' => '',
'searchable' => false,
'filterable' => false,
'comparable' => false,
'visible_on_front' => false,
'used_in_product_listing' => true,
'unique' => false,
'apply_to' => 'simple,configurable,virtual,bundle,downloadable'
],
'wishusucess_bestseller',
[
'group' => 'General',
'type' => 'int',
'backend' => '',
'frontend' => '',
'label' => 'Bestseller Product',
'input' => 'boolean',
'class' => '',
'source' => '',
'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_GLOBAL,
'visible' => true,
'required' => false,
'user_defined' => true,
'default' => '',
'searchable' => false,
'filterable' => false,
'comparable' => false,
'visible_on_front' => false,
'used_in_product_listing' => true,
'unique' => false,
'apply_to' => 'simple,configurable,virtual,bundle,downloadable'
],
'wishusucess_special',
[
'group' => 'General',
'type' => 'int',
'backend' => '',
'frontend' => '',
'label' => 'Special Product',
'input' => 'boolean',
'class' => '',
'source' => '',
'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_GLOBAL,
'visible' => true,
'required' => false,
'user_defined' => true,
'default' => '',
'searchable' => false,
'filterable' => false,
'comparable' => false,
'visible_on_front' => false,
'used_in_product_listing' => true,
'unique' => false,
'apply_to' => 'simple,configurable,virtual,bundle,downloadable'
],
'wishusucess_newproduct',
[
'group' => 'General',
'type' => 'int',
'backend' => '',
'frontend' => '',
'label' => 'New Product',
'input' => 'boolean',
'class' => '',
'source' => '',
'global' => \Magento\Catalog\Model\ResourceModel\Eav\Attribute::SCOPE_GLOBAL,
'visible' => true,
'required' => false,
'user_defined' => true,
'default' => '',
'searchable' => false,
'filterable' => false,
'comparable' => false,
'visible_on_front' => false,
'used_in_product_listing' => true,
'unique' => false,
'apply_to' => 'simple,configurable,virtual,bundle,downloadable'
]
);
}
}

Just create a simple registration.php file and module.xml file to create the extension in Magento 2 and then create a folder inside of your module name with Setup and then create InstallData.php file and paste above code.

Now run the upgrade command in order to create the all custom product attribute programmatically in Magento 2.

That's all!

If you need help to implement this full extension you can directly contact me.

I am here to help you 24*7

Magento 2.4 Installation Guide: How to Install Magento 2.4.2

Recommended Posts:

Form Field Manager: How to Manage Magento 2 Customer Form Fields

RMA Extension Magento 2: What is RMA and How it Works

Google reCAPTCHA in Magento 2: How to Add reCaptcha

System XML File: How to Create Admin Configuration in Magento 2

Posted by Hemant Singh On January 3, 2022 January 3, 2022 Filed under Magento 2, Magento 2 Extensions

When we create a model or extension, then its control should be given in the admin configuration by using the system XML file, this is a better model and extension scale, which decides how better the model or extension that you have created is.

In Magento 2 there is one file that is System.xml that is used to create admin configuration fields.

This file we need when we want to provide some setting option inside of the admin configuration for admin users.

Store > Setting > Configuration

Step 1: Register Extension

In order to create a menu in Magento 2 extension first, you have to create a registration.php file inside of the module folder.

Wishusucess/Conf/registration.php

<?php
/**
* @Category Wishusucess
* @Package Wishusucess_Conf
* @website http://www.wishusucess.com/
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Wishusucess_Conf',
__DIR__
);

Step 2: Module information and Version

The module XML file consists of the basic information of your extension. This is one of the most basic files of the Magento 2 extension.

In the Wishusucess module’s root directory, I have created a new directory that is called the, etc directory. So here I have created a file that is module.xml file under the etc directory.

Wishusucess/Conf/etc/module.xml

<?xml version="1.0"?>
<!--
/**
* @Category Wishusucess
* @Package Wishusucess_Conf
* @website http://www.wishusucess.com/
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Wishusucess_Conf" setup_version="2.1.0" />
</config>

Step 3: Create Adminhtml Menu XML File

To Create Admin Menu in Magento 2 extension we need to create the menu XML file.

This is the file about the routing and navigation of the items.

By using this link we can navigate to the other page. These files are used to create a link that helps to the landing on another page that is added in the left navigation and tells Magento framework how to resolve requests for that page.

The menu.xml file gives us options to add items in the content section of the left navigation.

Each item we use to add by action attribute and that action can be decided by the Magento 2 developers, where they want to redirect after clicking the link.

Wishusucess/Conf/etc/adminhtml/menu.xml

<?xml version="1.0"?>
<!--
/**
* @Category Wishusucess
* @Package Wishusucess_Conf
* @website http://www.wishusucess.com/
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
<menu>
<add id="Wishusucess_Conf::conf" title="Wishusucess" translate="title" module="Wishusucess_Conf" sortOrder="20" resource="Wishusucess_Conf::conf"/>
</menu>
</config>

Add Menu Items in Magento 2 Extension

Now, we can add the menu item from the other module to another module or

We can add the menu item in the same file of

Wishusucess/Conf/etc/adminhtml/menu.xml

But here,

I am adding the menu item from another module. So I am creating a menu file

Wishusucess/Recaptcha/etc/adminhtml/menu.xml

<?xml version="1.0"?>
<!--
/**
* Tech9logy
* @category Recaptcha
* @package Wishusucess_Recaptcha
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Magento/Backend/etc/menu.xsd">
<menu>
<add id="Wishusucess_Recaptcha::view" title="Google reCaptcha" translate="title" module="Wishusucess_Recaptcha" sortOrder="10" resource="Wishusucess_Recaptcha::view"/>
<add id="Wishusucess_Recaptcha::grid" title="reCAPTCHA Configuration" module="Wishusucess_Recaptcha" sortOrder="20" parent="Wishusucess_Recaptcha::view" action="adminhtml/system_config/edit/section/wishusucess/" resource="Wishusucess_Recaptcha::view"/>
</menu>
</config>

After executing the setup upgrade command you will see the output like the below image.

Steps to Create Admin Configuration By System XML File

We have to create a file inside of etc/adminhtml/system.xml then we can

Step 2: Set default value

Step 3: Flush Magento cache

Step 4: Get value from the configuration

Magento 2 System XML File for Admin Configuration

The System configuration page is logically divided into four parts:

Tabs
Sections
Groups
Fields.

Now if you will see the admin you can see the menu item which I have added here,

Now, adding system XML file and linking the Recaptcha configuration with system configuration via menu item link.

Wishusucess/Recaptcha/etc/adminhtml/system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="recaptcha" translate="label" sortOrder="10">
<label>Wishusucess</label>
</tab>
<section id="wishusucess_recaptcha" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<class>separator-top</class>
<label>reCAPTCHA Setting</label>
<tab>recaptcha</tab>
<resource>Wishusucess_Recaptcha::wishusucess_recaptcha</resource>
<group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
<label>reCAPTCHA Configuration</label>
<field id="enabled" translate="label comment" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Enabled</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<field id="googlesitekey" translate="label comment" type="text" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Site Key</label>
<comment><![CDATA[Enter Site Key]]></comment>
</field>
<field id="googlesecretkey" translate="label comment" type="text" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
<label>Secret Key</label>
<comment><![CDATA[Enter Secret Key]]></comment>
</field>
<field id="moduleposition" translate="Module" type="multiselect" sortOrder="4" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Select Form</label>
<source_model>Wishusucess\Recaptcha\Model\Config\Source\ConfigOption</source_model>
</field>
</group>
</section>
</system>
</config>

Now the output will look like the below image.

So this is the simple way to add the menu item and system XML configurations in the module and extension.

Google reCAPTCHA in Magento 2: How to Add reCaptcha

How to Get Catalog Product Images URL Using REST API

Posted by Hemant Singh On January 2, 2022 January 2, 2022 Filed under Magento 2 API, Magento 2 REST API

When we create a mobile application using Magento 2 eCommerce then we use rest API to get the catalog product image URL.

This post will give you an idea about how you can get the product image and product URL from the REST API in Magento 2.

As we know without images we can give a greater user experience to our customers on any e-commerce website. Images give clarity about the product so customers get engaged with stores and sales increase.

Get Catalog Product Image REST API

This is a step-by-step code to get the product image URLs in Magento 2 eCommerce store.

This is useful in all kinds of situations like if you are developing a mobile application for your Magento 2 store then you need the product images so in order to show the product image you need to retrieve the image URL.

Step 1: Registration of ProductImageApi

first, we have to register our first API by rergistration.php file so we have to create the file in the below location.

Wishusucess/ProductImageApi/registration.php

<?php
/**
* Category: Wishusucess_ProductImageApi
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Wishusucess_ProductImageApi',
__DIR__
);

Step 2: Create a Module XML file

Wishusucess/ProductImageApi/etc/module.xml

<?xml version="1.0"?>
<!--
/**
* Category: Wishusucess_ProductImageApi
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Wishusucess_ProductImageApi" setup_version="1.0.2" />
</config>

Step 3: Declare Dependency Injection

Wishusucess/ProductImageApi/etc/di.xml

<?xml version="1.0"?>
<!--
/**
* Category: Wishusucess_ProductImageApi
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<preference for="Wishusucess\ProductImageApi\Api\GetProductImage" type="Wishusucess\ProductImageApi\Model\GetProductImageUrl" />
</config>

Step 4: Create Web API Route Path

Wishusucess/ProductImageApi/etc/webapi.xml

<?xml version="1.0"?>
<!--
/**
* Category: Wishusucess_ProductImageApi
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
-->
<routes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../app/code/Magento/Webapi/etc/webapi.xsd">
<route url="/V1/getproductimage/:sku" method="GET">
<service class="Wishusucess\ProductImageApi\Api\GetProductImage" method="getProductImageUrl"/>
<resources>
<resource ref="anonymous"/>
</resources>
</route>
</routes>

Step 5: Get Catalog Product Image API Model Class

Wishusucess/ProductImageApi/Model/GetProductImageUrl.php

This model class has the actual login, so we have to write the following code in order to get the catalog product image URL.

<?php
/**
* Category: Wishusucess_ProductImageApi
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
namespace Wishusucess\ProductImageApi\Model;

use Wishusucess\ProductImageApi\Api\GetProductImage;

class GetProductImageUrl implements GetProductImage {
/**
* @var \Magento\Store\Model\App\Emulation
*/
protected $appEmulation;
/**
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $storeManager;
/**
* @var \Magento\Catalog\Api\ProductRepositoryInterface
*/
protected $productRepository;
/**
* @var \Magento\Catalog\Helper\Image
*/
protected $imageHelper;
/**
* @param \Magento\Store\Model\App\Emulation $appEmulation
* @param \Magento\Store\Model\StoreManagerInterface $storeManager
* @param \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
* @param \Magento\Catalog\Helper\Image $imageHelper
*/
public function __construct(
\Magento\Store\Model\App\Emulation $appEmulation,
\Magento\Store\Model\StoreManagerInterface $storeManager,
\Magento\Catalog\Api\ProductRepositoryInterface $productRepository,
\Magento\Catalog\Helper\Image $imageHelper
) {
$this->appEmulation = $appEmulation;
$this->storeManager = $storeManager;
$this->productRepository = $productRepository;
$this->imageHelper = $imageHelper;
}
public function getProductImageUrl($sku) {
$storeId = $this->storeManager->getStore()->getId();
$product = $this->productRepository->get($sku);
$this->appEmulation->startEnvironmentEmulation($storeId, \Magento\Framework\App\Area::AREA_FRONTEND, true);
if (!$product) {
$response = [
[
"code" => '301',
"message" => "SKU " . $productSku . " Not Found On Magento",
],
];
return $response;
} else {
$image_url = $this->imageHelper->init($product, 'product_base_image')->getUrl();
$response = [
[
"product_image_url" => $image_url,
],
];
return $response;
}
$this->appEmulation->stopEnvironmentEmulation();
}
}

Step 6: Images URL API Class

Wishusucess/ProductImageApi/Api/GetProductPage.php

<?php
/**
* Category: Wishusucess_ProductImageApi
* Developer: Hemant Singh Magento 2x Developer
* Website: http://wwww.wishusucess.com
*/
namespace Wishusucess\ProductImageApi\Api;
interface GetProductImage {
/**
* @api
* @param string $sku
* @return array
*/
public function getProductImageUrl($sku);
}

That's it.

Now, we execute the following command.

php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:c

Now you can test your product images rest API on the postman by hitting the web route URL.

Now you can see the above images, here

The method is POST and the route URL path for the rest of API is your store URL address and the method and the product that you want the images path details.

https://www.your_store_url.com/rest/V1/products/sku

https://www.your_store_url.com/rest/V1/getproductimage/sku

GitHub Wishusucess

Online Help & Support for Magento 2 REST API

If you need any kind of help and support in Magento 2 rest API then you can call me.

I am always available to support you while extension development REST API development or any help related to Magento 2 stores.

I am giving you the helpline details in the below images.

Payment API: How to Make Payment Through REST API in Magento 2

Magento 2 Return & Exchange (RMA) Extension: Send Mail

Posted by Hemant Singh On January 1, 2022 January 1, 2022 Filed under Magento 2, Magento 2 Extensions

If you are looking for the best Magento 2 return & exchange (RMA) Extensions in 2022 then you are on the right page. Here I am going to show you how this RMA extension works.

Wishusucess Magento 2 Return and exchange (RMA) extension are one of the simplest and easily manageable Magento 2 extension that will help you to manage the returned order by the customer.

Our Magento 2 team has developed these Magento 2 RMA extensions based on the market analysis of various factors like usability scores, rating reviews, frontend experience, backend experience, search results, social metrics.

Magento 2 Return & Exchange Management

Here, I have added a very simple interface for the admin user so anyone can easily understand the configuration.

A returned merchandise authorization (RMA) ensures to your customer that the product returned by him will also get a refund. And if the customers want to request to replace the item then they can also use the same process to replace the item.

The Wishusucess RMA extension has an admin functionality to approve the request or reject the request or close the request.

In the Magento 2 admin configuration, we have added the option to keep enabling RMA or keep disabling RMA for any products.

Magento 2 RMA Form Fields

Magento 2 Product Return RMA form fields are given in the admin configuration so anyone can decide the form fields for the frontend customer view.

RMA (Return Merchandise Authorization) form fields can be customizable according to your requirement that will help you to decide easy and optionable form fields for your customer.

Admin > Wishusucess > RMA Form > Manage RMA form

Select Status of Return Order

Each state will send the mail as soon as we change the status.

Return Order in RMA

This is the dashboard of this extension, where all the returned items will show in the list.

Now admin users can change the status as per their terms and conditions.

This Magento 2 return and management extension has there status options. Whenever we change returned order status of the customer, the mail will be sent to the email details of the customer.

Magento 2 Return & Exchange Product

Frontend User:

There is no need to register for the customer so if the customer wants to return the item without registering the account so they can simply fill the RMA form and return the products, and If the customers are registered then they can also use their account to return their products by submitting the RMA form request.

RMA Admin Option:

And admin can approve the request and send the mail to the customer that their request has been successfully accepted. Admin can also reject the request and send the mail that their request has been rejected.

Magento 2 Return & Exchange (RMA) Status

When the customer creates a new request for product return that will show in the admin RMA request as a pending status.

Admin can review requests and decide whether they have to approve or reject RMA return requests.

Current RMA Version - 2.1.0

Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

Online Helpline Magento Extension Installation

You can call us anytime for free help and support. We will help you to install this extension and make it compatible with your current version of the Magento 2 store.

Google reCAPTCHA in Magento 2: How to Add reCaptcha

Custom SMTP: Magento 2 SMTP Settings for Mail Sending

Posted by Hemant Singh On January 1, 2022 January 1, 2022 Filed under Magento 2

Many times there is a problem in the mailing system of Magento e-commerce and the mail does not ask at all, that is why the custom SMTP feature has been introduced for Magento 2 which provides convenience in sending your emails.

If an email sent from the Magento 2 store reaches the spam box then there is a need to install a custom SMTP extension. As soon as it is installed, the problem of mail reaching the mail spam box is solved.

Many times we send mail from Gmail, then it does not reach
The main reason for this is the setting of Gmail.

If you haven't turned on Two-Step Verification or Google Mail doesn't allow you to send mail from less secure eCommerce stores, you need to change your settings.

Turn on Google Mail Less Secure App

Step 1: Install Magento 2 Custom SMTP Extension

First, we have to install the Magento 2 custom SMTP extension in our store, then we have to configure the extension by submitting required details like port number, mailing server, SMTP user id, and password.

Successful testing of SMTP extension will show messages like the below images.

Mageplaza SMTP Configuration

In order to configure the SMTP General Configuration, go to

Stores > Settings > Configuration > Mageplaza > SMTP

Then choose SMTP Configuration

Here, SMTP Username is your email id

and SMTP password is your email id password

Note: Complete the second step in order to send the test mail.

Now check your mailbox, you must have received an email that the test was successful.

Magepal SMTP Configuration in Magento 2

In order to configure magepal Simple Mail Transfer Protocol (SMTP) extension, you have to go into store configuration, after successful configuration, you will be able to send email through a specific third-party mail SMTP server.

Online Help for Custom SMTP Configuration in Magento 2

If you need any help in configuring custom SMTP in your Magento 2 website then you can call us, we will configure your Magento 2 store at a fixed rate for this. We charge only 30 dollars and that store configuration gets ready within 30 minutes and then you can send your mail from your store.

Email or Skype ID: cs.hemantsingh@gmail.com

Contact Number/WhatsApp: +91-8197565002

Step 2: Change Magento 2 Store Email Address

You will receive the mail only after the configured store email addresses in your Magento 2 store.

Here, you have to enter the sender's email address that represents the business representative.

Stores > Setting > Configuration > General > Store Email Address

Now your SMTP mail configuration has been done, now you can send mail from your Magento 2 stores.

Google reCAPTCHA in Magento 2: How to Add reCaptcha

Your Session Has Expired Error in Magento 2 While Add to Cart Product

E-Commerce, Page 5 Category

Payment Gateway Integration With eCommerce Store

Best Payment Gateway for Magento 2 in 2022

Stripe

PayPal

Amazon Pay

Authorize.net

2Checkout

Why Custom Payment Gateway?

Conclusion

How to Add Owl Carousel Slider in Magento 2

How to Call Owl Slider in Magento2 Related Products

Steps to Add Product Attribute Programmatically

Magento 2 Add Multiple Product Attribute Programmatically

Step 4: Run Magento 2 Command

Get System Configuration Data in Phtml File

Step 1: Create Registration File

Step 2: Create Module XML File

Step 3: Create System Configuration XML File

Step 4: Config XML file for Admin

Step 5: System Configuration Helper Class

Step 6: Call Helper in Block Class

Step 7: Call System Config Value in PHTML File

Steps to Add JS File in Magento 2 Module

Step 1: Create a New Module

Step 2: Create a Module XML file

Step 3: Create requirejs-config.js and a JavaScript

Step 4: Add JS File in Magento 2 Extension

Step 5: Add XML File

Step 6: Create a Template File

Step 6: Run Below Magento 2 Command

Add CSS File in Magento 2 Module

Filter Products Extension in Magento 2

Admin Configuration of Filter Products Extension

How to Display Filter Products on Page

Magento 2 InstallData for Filter Attributes

Step 1: Register Extension

Step 2: Module information and Version

Step 3: Create Adminhtml Menu XML File

Add Menu Items in Magento 2 Extension

Steps to Create Admin Configuration By System XML File

Magento 2 System XML File for Admin Configuration

Get Catalog Product Image REST API

Step 1: Registration of ProductImageApi

Step 2: Create a Module XML file

Step 3: Declare Dependency Injection

Step 4: Create Web API Route Path

Step 5: Get Catalog Product Image API Model Class

Step 6: Images URL API Class

Online Help & Support for Magento 2 REST API

Magento 2 Return & Exchange Management

Magento 2 RMA Form Fields

Select Status of Return Order

Return Order in RMA

Magento 2 Return & Exchange Product

Magento 2 Return & Exchange (RMA) Status

Current RMA Version - 2.1.0

Online Helpline Magento Extension Installation

Step 1: Install Magento 2 Custom SMTP Extension

Mageplaza SMTP Configuration

Magepal SMTP Configuration in Magento 2

Online Help for Custom SMTP Configuration in Magento 2

Step 2: Change Magento 2 Store Email Address