Read More
Menu Close

    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.

    Searching for an experienced
    Shopware Company ?
    Read More

    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 🙂
    Thank You.

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top