Custom event after an order has been placed in Magento 2

Sometimes it can be pretty hard to find the right spot where you can hook up your custom code in Magento 2, without messing up the entire application. No worries, we are here to help!

The framework has the entire frontend structured into small components called UI Components and are glued together using RequireJS. In our case, we want to “do something” in frontend, right after the user successfully placed an order.

Step 1

So let’s start by creating a module for Magento 2.


Create a folder in your “app/code” directory called “Foo”, this would be our namespace. And inside the “Foo” directory, create another directory called “Bar”, this would be our module name. So the entire path would look like this: “app/code/Foo/Bar”.

Now it’s time to let Magento know that we have a new module called “Bar” from “Foo”.

Create a file inside the newly created module called “registration.php” and fill it with the following code:

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Foo_Bar',
    __DIR__
);

This file should have the following path: “app/code/Foo/Bar/registration.php”.

Create a directory inside your module called “etc”. Inside this directory, you will create a new file called “module.xml”. Paste the following code inside the file:

<?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="Foo_Bar" setup_version="1.0.0">
    </module>
</config>

This file should be located at the following path: “app/code/Foo/Bar/etc/module.xml”.

Everything we did in this step is just creating a standard Magento 2 module. This is pretty standard.

Step 2

Now it’s time to overwrite some front end UI Components.


After placing some Javascript debuggers and following the order flow, I figured out that the UI Component called “Magento_Checkout/js/view/payment/default” has a method called “afterPlaceOrder” which begs to be overwritten.


Tip: In Magento 2, the name of the components are the same with the paths where you can find them. This is just in case you ever need to override other components.

Create a new Javascript file which will extend the previous component at the following path: “app/code/Foo/Bar/view/frontend/web/js/view/payment/default.js” and paste in the following code:

define(
    [
        'jquery',
        'Magento_Checkout/js/view/payment/default'
    ],
    function (
        $,
        Parent
    ) {
        'use strict';
        return Parent.extend({
            redirectAfterPlaceOrder: false, // this is optional
            /**
             * After place order callback
             */
            afterPlaceOrder: function(){
                // your super awesome code
            }
        });
    }
);

As you can see, we pass in the original UI Component and storing it as variable Parent. After which we return the new component with the overridden method.

Cool! Now it’s time to inform Magento that we have a new UI Component that overrides another component.

Create a new Javascript file located at the following path: “app/code/Foo/Bar/view/frontend/requirejs-config.js” and fill it with the following code:

var config = {
    "map": {
        "Foo_Bar/js/view/payment/default": {
            "Magento_Checkout/js/view/payment/default": "Magento_Checkout/js/view/payment/default"
        },
        "*": {
            "Magento_Checkout/js/view/payment/default": "Foo_Bar/js/view/payment/default"
        }
    }
};

Basically what we are saying with this RequireJS config is that anyone* who requires the old component should actually receive the one that we created.

*Anyone besides the new component which requires the old component so that it can extend it.

Enjoy overriding and extending your UI Components!

Leave a Reply

Your email address will not be published. Required fields are marked *