Micro App Usage on Bigcommerce

Here is a micro app for all custom functionalities. It is platform independent however, I present you the Bigcommerce way.

I coded this page for the MysticStamp client, and it looks functional, clean and makes our work more efficient, and makes it a booster.

This cheat code is upper version of the boilerplate cheat code.

Open the templates/layout/base.html and add this code block above the </head> tag. It stores the whole setting of the template, and we can use it easily in our javascript apps.

<script>
    (function () {
        "{{~inject 'settings' settings}}";
        let jsContext = {{jsContext}};
        window.BCSettings = JSON.parse(jsContext);
    })();
</script>

Then create a file named OPT7App.js in assets/js/theme/custom/custom-apps/ folder.

import $ from "jquery";
import axios from "axios";

class OPT7App {

    constructor() {
        // This code is used to show which page you are working on.
        this.$page = window.BCSettings.template;

        console.log(`%cOPT7 Custom App Constructor [${this.$page}]`, 'font-weight:bold;');

        this.$BCSettings = window.BCSettings.settings;

        this.$storeFrontToken = this.$BCSettings.storefront_api.token;

        this.$productId = window.BCSettings.productId; // If the page is product page, it will assign the product id.

        this.$cartId = window.BCSettings.cartId; // If the cart is not empty, cartId will be assigned.
    }

    getAllProperties() {
        return {
            settings : this.$BCSettings,
            storeFrontToken : this.$storeFrontToken,
            productId : this.$productId,
            cartId : this.$cartId,
        }
    }

    sampleFunction(){
        return object;
    }
}

export default OPT7App;

And then you can import it in assets/js/app.js and call it in load() function of the window.stencilBootstrap();

    // First you should import the file; 
    import OPT7Application from "./theme/custom/custom-apps/OPT7App";

    const OPT7App = new OPT7Application('App JS');
    //Basic callback the object.
    OPT7App
    // Get all constructor properties
    console.log(OPT7App.getAllProperties());
    // Or  Get a spesific constructor property
    console.log(OPT7App.getAllProperties().settings);

    // Getting a function property from the class.
    OPT7App.sampleFunction()

That's all!

Happy Hacking! 🧡