Magento 2 Module

How to add a new checkout step in Magento 2

Hide/Show description

Hi Everybody, I am Cuong, Welcome back to my Magento 2 tutorial video series. #magento2tutorial Today, I am going to show everybody a best practice, how to add a new checkout step in Magento 2. As far as we know, the default Magento Checkout consists of two steps: 1. Shipping Information 2. Review and Payments Information In this exercise, I am going to add a new custom checkout step called "Hot Deals", It will be displayed before the shipping step and it will show the products in the category named "Hot Deals", that allows the customer to add these products to the shopping cart if they would like to purchase it. To complete this best practice please follow the below steps: Step 1: Create a new module named PHPCuong_HotDeals - Create the namespace PHPCuong in the path app\code. - Create the module named HotDeals in the path app\code\PHPCuong. - Create the file named registration.php in the path app\code\PHPCuong\HotDeals \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'PHPCuong_HotDeals', __DIR__ ); - Create the file named module.xml in the path app\code\PHPCuong\HotDeals\etc End of the step #1, I completed the steps declare the new module. Step 2: Create the category named "Hot Deals" and add the products to this category Step 3: Add a new checkout step called "Hot Deals" before the shipping step and display the hot deals products on this step. - Create the hot-deals.js file implementing the view model in the path app\code\PHPCuong\HotDeals\view\frontend\web\js\view - Create the hot-deals.html template for the component in the path app\code\PHPCuong\HotDeals\view\frontend\web\template - Create the checkout_index_index.xml layout in the path app\code\PHPCuong\HotDeals\view\frontend\layout - Create mixins for the payment and shipping steps 1. Create the requirejs-config.js file in the path app\code\PHPCuong\HotDeals\view\frontend 2. Create the shipping-payment-mixin.js file mixin in the path app\code\PHPCuong\HotDeals\view\frontend\web\js\view Step 5: Install the new module and deploy static content Run the command lines: - php bin/magento setup:upgrade - php bin/magento setup:static-content:deploy -f (Magento 2.2.x) - php bin/magento setup:static-content:deploy (Magento 2.1.x) Step 6: Test and see the results - Add a product to the shopping cart. - Go to the checkout page. I'm sorry, I need to update something. Great!, It is working perfectly. Thank you for your watching. If you have any questions about this best practice please feel free to leave a comment below. Don't forget to like, comment, share and subscribe to my channel for getting the latest videos. Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2. Get the source codes of this tutorial at the github https://github.com/php-cuong/magento2-hot-deals

Today Hex Color Code

#052418
#264539
#47665a
#68877b
#89a89c
#aac9bd