free
web stats

Fill the form & Get Installation Support

Connect With Us





captcha

Connect With Us





captcha

How to move checkout buttons to order review on desktop view and to the bottom on mobile view?

Let’s start with the plan of what we need to do. I would like to keep the buttons in the same place on mobile, at the bottom of the page. So my plan will be to just hide them on the desktop via styles. So on the desktop, I need to hide the original buttons, add new buttons to the order summary block, but I also need to detect when I should show the Next button and when I should show the  Place Order button. In this case, I will need to add a couple of methods to my code.

Template

Let’s focus first on templates, so we know how to look at the problem. We will need to add two buttons to the summary.html file. I will copy summary.html file into vendor/vendor-name/theme-name/Magento_Checkout/web/template/ where “vendor-name“, “theme-name” needs to be replaced with your name of vendor and theme name. For this example, I am adding a file into a theme. In order to overwrite this file via the module, you need to update XML file, but I will not talk about it now.

summary.html

At this point, I will copy summary.html into the path mentioned above and add custom code as below:

Let’s analyze the code I have added. The first part is default Magento, however, the two next ones are mine.

First of all, I have added the method isVisibleShippingButton() which I still need to create, however this method will detect if I should show the Next button or if it is the payment step and I shouldn’t show it. I also created a special wrapper with id "continue-to-payment-trigger-wrapper" and added a button which is pretty much the same as the default ones, I just added id "continue-to-payment-trigger" which I will use later on as well.

A really similar story over here. I have added the method isVisiblePaymentButton() which I will create later on. I have added a wrapper with id "place-order-trigger-wrapper" and button with id "place-order-trigger" which I will use later on.

Javascript

My next step will be to create missing methods and actions. As I have added code into summary.html I will extend the summary.js file.

requirejs-config.js

We will use Javascript Mixins as we want to add new methods to the class and augment the behavior of the base class by adding different mixins to it.

It is really important to add this file into the correct place. It should be added to vendor/vendor-name/module-name/view/frontend/ or vendor/vendor-name/theme-name/module-nameor vendor/vendor-name/theme-name/ where “vendor-name“, “theme-name” and “module-name” needs to be replaced with your name of vendor, theme and module name. If you are not creating a new module, you can follow the second example and use the Magento_Checkout module in your theme for this case as we make an implementation into the checkout part. Another solution would be to follow the third example and add files directly into your theme.

Whichever solution you will choose, requirejs-config.js needs to be in the root folder of the module, theme or theme module. As soon as you choose one way, you need to follow it.

Solution 1

Let’s say we will add our file to vendor/vendor-name/module-name/view/frontend/ or vendor/vendor-name/theme-name/module-name/,  our file should look like the one below:

Solution 2

In case you decide to choose the last solution vendor/vendor-name/theme-name/,  your file should look like the following:

summary-mixin.js

At this point, we will add our new file summary-mixin.js. The new file will be added to vendor/vendor-name/module-name/view/frontend/web/js/ or vendor/vendor-name/theme-name/module-name/web/js/ or vendor/vendor-name/theme-name/web/js/ where “vendor-name“, “theme-name” and “module-name” needs to be replaced with your name of vendor, theme and module name. If you are not creating a new module, you can follow the second example and use the Magento_Checkout module in your theme for this case, as we make an implementation into the checkout part. Another solution would be to follow the third example and add files directly into your theme. Your decision depends on where you have added requirejs-config.js file.

Let’s analyze this code. I have been following the Magento 2 documentation JavaScript Mixins where I wanted to add a mixin module that extends the target component with new functions.

These are references to certain functions which I will use in the code.

These are aliases to the functions above.

These are the two missing methods which return a value, certain values based on stepNavigator.getActiveItemIndex() which return 0 for shipping step and 1 for payment step.

In the next part of the code, I trigger click action on the original button after clicking my custom buttons.

At this point, I return the original code of the initialize method.

This part is the default Magento method to extend targeted function by our mixins.

Styling

The last thing which we need to do is add styling to hide buttons depending on the resolution of the screen. You can add it to any of the styling files in your module, or your theme. For example you can use vendor/vendor-name/module-name/view/frontend/web/css/source/_module.less for modules.

_module.less or _order-summary.less

I have decided to use Magento_Checkout/web/css/source/module/checkout/_order-summary.less in my theme and added following code:

I just hide buttons in certain parts on desktop and mobile. That’s it!

Result

I have taken some screenshots of our implementations based on the Luma theme. I have not added any styling so this is how it will be displayed by default.

Desktop

Mobile

Was this article helpful?
YesNo
Fill the below form if you have any Magento programming need.




captcha