How to Add Custom Maxine to Administration

In this blog, you are going to learn “How to add custom mixes to the administration.”
I hope you know the directory structure of the Shopware 6 plugin, if you do not know see here – https://docs.shopware.com/en/shopware-platform-dev-en/internals/directory-structure.

Maxine’s goal is that we don’t have to write code over and over again. Mixins Vue is reusable as a component. At Maxine, we have the function we need. Maxine does the same thing as they do in Vue, but we have to create and register in the shopware so that it works throughout the project.

Create a file for Maxine under Administration Root.
<administration root>/mixins/test.js

test.js
const {Mixin} = Shopware;
const { Criteria } = Shopware.Data;

Mixin.register('test.js', {
    inject: ["repositoryFactory"],
    created() {
        this.test();
    },

    computed: {
        productRepository() {
            return this.repositoryFactory.create('product');
        },

        productCriteria() {
            const criteria = new Criteria(this.page, this.limit);
            criteria.addFilter(Criteria.equals('childCount', 0));
            criteria.addFilter(Criteria.equals('parentId', null));
        }
    },

    methods: {
        test() {
            this.productRepository.search(this.productCriteria, Shopware.Context.api).then((response) => {
                return response;
            })
        }
    }
})

This mixin returns product data without any variant and it is like a component register where we call one or more components as required and in mixin we add function for small work as we Maxin does in the file.

After creating the Maxon file, we need to import our file into. main.js File so we can use it anywhere in the project, certainly not for the store front in the admin section.

To create main.js File under administration root. Main.js First excecute and then all the import file is executed.

main.js

/mixins/test.js’ Import

We can use the same as we use in the other component. Here we call. testProduct Function that returns product data from product repository.Index.js The file is a custom component for using Maxine or how the Mix works.

index.js
const { Component, Mixin } = Shopware;

Component.register('test', {

    mixins: [
        Mixin.getByName('test')
    ],

    methods: {
        callMixinFunction() {
            const product = this.testProduct();
        }
    }
});

Hope this helps. Thanks for reading. Congratulations
Thanks

Write a Comment