{"id":314056,"date":"2021-12-03T13:39:32","date_gmt":"2021-12-03T13:39:32","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=314056"},"modified":"2023-01-12T13:10:50","modified_gmt":"2023-01-12T13:10:50","slug":"how-to-add-custom-mixins-in-the-administration","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/","title":{"rendered":"How to add custom Mixins in the administration"},"content":{"rendered":"\n<p>In this blog, you are going to learn \u201cHow to add custom Mixins in the administration.\u201d<br>I hope you know the directory structure of&nbsp;<a href=\"https:\/\/webkul.com\/blog\/create-product-and-product-variant-in-shopware-6\/\">Shopware<\/a>&nbsp;6 plugin, if you don\u2019t know, see here-&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/webkul.com\/blog\/create-product-and-product-variant-in-shopware-6\/\" target=\"_blank\">https:\/\/docs.shopware.com\/en\/shopware-platform-dev-en\/internals\/directory-structure<\/a>.<\/p>\n\n\n\n<p>The purpose of Mixins is we don&#8217;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.<\/p>\n\n\n\n<p>Create an file for mixin under the administration root.<br><code>&lt;administration root&gt;\/mixins\/test.js<\/code><\/p>\n\n\n\n<h6 class=\"wp-block-heading\">test.js<\/h6>\n\n\n\n<pre class=\"EnlighterJSRAW\">const {Mixin} = Shopware;\nconst { Criteria } = Shopware.Data;\n\nMixin.register(&#039;test.js&#039;, {\n    inject: &#091;&quot;repositoryFactory&quot;],\n    created() {\n        this.test();\n    },\n\n    computed: {\n        productRepository() {\n            return this.repositoryFactory.create(&#039;product&#039;);\n        },\n\n        productCriteria() {\n            const criteria = new Criteria(this.page, this.limit);\n            criteria.addFilter(Criteria.equals(&#039;childCount&#039;, 0));\n            criteria.addFilter(Criteria.equals(&#039;parentId&#039;, null));\n        }\n    },\n\n    methods: {\n        test() {\n            this.productRepository.search(this.productCriteria, Shopware.Context.api).then((response) =&gt; {\n                return response;\n            })\n        }\n    }\n})<\/pre>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>After creating the mixin file we have to import our file in the <code>main.js<\/code> file so that we can used any where in the project, ofcourse in the administration part not for storefront.<\/p>\n\n\n\n<p>Creating <code>main.js<\/code> file under the administration root. <code>Main.js<\/code> is excecute first and after that all the import file is executed.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">main.js<\/h6>\n\n\n\n<p>import &#8216;&lt;administration root&gt;\/mixins\/test.js&#8217;<\/p>\n\n\n\n<p>We can use same as we used in the other component. Here we call the <code>testProduct<\/code> function which return the product data from the product repository.<code>Index.js<\/code> file is the custom component to use the mixin or how mixin work.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">index.js<\/h6>\n\n\n\n<pre class=\"EnlighterJSRAW\">const { Component, Mixin } = Shopware;\n\nComponent.register(&#039;test&#039;, {\n\n    mixins: &#091;\n        Mixin.getByName(&#039;test&#039;)\n    ],\n\n    methods: {\n        callMixinFunction() {\n            const product = this.testProduct();\n        }\n    }\n});<\/pre>\n\n\n\n<p>Hope it will help you. Thanks for reading. Happy Coding \ud83d\ude42. Looking for <a href=\"https:\/\/webkul.com\/shopware-theme-template-development-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">Shopware theme development<\/a> services, then collaborate with our team to design the best storefront for your online store.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, you are going to learn \u201cHow to add custom Mixins in the administration.\u201dI hope you know the directory structure of&nbsp;Shopware&nbsp;6 plugin, if you don\u2019t know, see here-&nbsp;https:\/\/docs.shopware.com\/en\/shopware-platform-dev-en\/internals\/directory-structure. The purpose of Mixins is we don&#8217;t need to write the code again and again. Mixins is the reuseable as the Vue component. In Mixins, <a href=\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":284,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9568],"tags":[],"class_list":["post-314056","post","type-post","status-publish","format-standard","hentry","category-shopware"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to add custom Mixins in the administration - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add custom Mixins in the administration - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog, you are going to learn \u201cHow to add custom Mixins in the administration.\u201dI hope you know the directory structure of&nbsp;Shopware&nbsp;6 plugin, if you don\u2019t know, see here-&nbsp;https:\/\/docs.shopware.com\/en\/shopware-platform-dev-en\/internals\/directory-structure. The purpose of Mixins is we don&#8217;t need to write the code again and again. Mixins is the reuseable as the Vue component. In Mixins, [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-03T13:39:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-12T13:10:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Diwakar Rana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Diwakar Rana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/\"},\"author\":{\"name\":\"Diwakar Rana\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/4b025fe4ecbc5c0378cd13bb70da654f\"},\"headline\":\"How to add custom Mixins in the administration\",\"datePublished\":\"2021-12-03T13:39:32+00:00\",\"dateModified\":\"2023-01-12T13:10:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/\"},\"wordCount\":301,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"articleSection\":[\"Shopware\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/\",\"name\":\"How to add custom Mixins in the administration - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2021-12-03T13:39:32+00:00\",\"dateModified\":\"2023-01-12T13:10:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add custom Mixins in the administration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/4b025fe4ecbc5c0378cd13bb70da654f\",\"name\":\"Diwakar Rana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/46482d0264c191ccd0337892016340a80ca4e4987a37f42514a0506aaee7e8dc?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/46482d0264c191ccd0337892016340a80ca4e4987a37f42514a0506aaee7e8dc?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Diwakar Rana\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/diwakar-rana829\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add custom Mixins in the administration - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/","og_locale":"en_US","og_type":"article","og_title":"How to add custom Mixins in the administration - Webkul Blog","og_description":"In this blog, you are going to learn \u201cHow to add custom Mixins in the administration.\u201dI hope you know the directory structure of&nbsp;Shopware&nbsp;6 plugin, if you don\u2019t know, see here-&nbsp;https:\/\/docs.shopware.com\/en\/shopware-platform-dev-en\/internals\/directory-structure. The purpose of Mixins is we don&#8217;t need to write the code again and again. Mixins is the reuseable as the Vue component. In Mixins, [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2021-12-03T13:39:32+00:00","article_modified_time":"2023-01-12T13:10:50+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Diwakar Rana","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Diwakar Rana","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/"},"author":{"name":"Diwakar Rana","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/4b025fe4ecbc5c0378cd13bb70da654f"},"headline":"How to add custom Mixins in the administration","datePublished":"2021-12-03T13:39:32+00:00","dateModified":"2023-01-12T13:10:50+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/"},"wordCount":301,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"articleSection":["Shopware"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/","url":"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/","name":"How to add custom Mixins in the administration - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2021-12-03T13:39:32+00:00","dateModified":"2023-01-12T13:10:50+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-mixins-in-the-administration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add custom Mixins in the administration"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/4b025fe4ecbc5c0378cd13bb70da654f","name":"Diwakar Rana","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/46482d0264c191ccd0337892016340a80ca4e4987a37f42514a0506aaee7e8dc?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/46482d0264c191ccd0337892016340a80ca4e4987a37f42514a0506aaee7e8dc?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Diwakar Rana"},"url":"https:\/\/webkul.com\/blog\/author\/diwakar-rana829\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/314056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/284"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=314056"}],"version-history":[{"count":3,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/314056\/revisions"}],"predecessor-version":[{"id":364354,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/314056\/revisions\/364354"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=314056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=314056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=314056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}