How to add custom Mixins in the administration

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

The purpose of Mixins is we don’t need to write the code again and again. Mixins is the reuseable as the Vue component. In Mixins, we have the function according to our need. Mixins work same as they do in Vue but in the shopware we have to create and register in the shopware so that it works in all over the project.

Create an file for mixin under the 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 return the product data without variant and it is same like the component register where we call one or more component according to need and in the mixin, we add the function for small task as we do in the mixin file.

After creating the mixin file we have to import our file in the main.js file so that we can used any where in the project, ofcourse in the administration part not for storefront.

Creating main.js file under the administration root. Main.js is excecute first and after that all the import file is executed.

main.js

import ‘<administration root>/mixins/test.js’

We can use same as we used in the other component. Here we call the testProduct function which return the product data from the product repository.Index.js file is the custom component to use the mixin or how mixin work.

index.js

const { Component, Mixin } = Shopware;

Component.register('test', {

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

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

Hope it will help you. Thanks for reading. Happy Coding 🙂. Looking for Shopware theme development services, then collaborate with our team to design the best storefront for your online store.