{"id":217557,"date":"2019-12-27T15:02:31","date_gmt":"2019-12-27T15:02:31","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=217557"},"modified":"2019-12-30T04:29:39","modified_gmt":"2019-12-30T04:29:39","slug":"how-to-use-service-api-in-shopware-6","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/","title":{"rendered":"How to use Service API in Shopware 6"},"content":{"rendered":"\n

In this article, we will look into the module which can inject Service API in Shopware 6.<\/p>\n\n\n\n

Overview<\/h2>\n\n\n\n

The main entry point for this purpose is the plugin’s main.js<\/code> file. It has to be placed into the <plugin root>\/src\/Resources\/app\/administration<\/code>\/src the directory in order to be automatically found by Shopware 6.<\/p>\n\n\n\n

Creating a service<\/h2>\n\n\n\n

Firstly, You have to create a service file in <plugin root>\/src\/Resources\/app\/administration\/src \/core\/service\/api<\/code> .
In my case file name is test-api.service.js<\/code>.
To learn more about service, there is a link<\/a>.<\/p>\n\n\n\n

import ApiService from 'src\/core\/service\/api.service';\nclass TestService  extends ApiService \n{\n  constructor(httpClient, loginService, apiEndpoint = 'test') {\n      super(httpClient, loginService, apiEndpoint);\n  }\n\n saveConfig(config) {\n   const apiRoute = `${this.getApiBasePath()}\/save\/config`\n   return this.httpClient.post(\n         apiRoute,  {\n                config: config            \n          }, {\n                headers: this.getBasicHeaders()\n            }\n           ).then((response) => {\n            return ApiService.handleResponse(response);\n        });\n    }\n}\nexport default TestService;<\/pre>\n\n\n\n
Import Service API file and then create a class of your service. In saveConfig<\/code> function, ${this.getApiBasePath()}<\/code> is a base path and this.getBasicHeaders()<\/code> is a header of the request and apiRoute<\/code> is a path of API controller as described in the above example.<\/p>\n\n\n\n
To init this service class, a new script is placed at <plugin root>\/src\/Resources\/app\/administration\/src \/init\/api-service.init.js<\/code>.<\/p>See below the code example-<\/cite><\/blockquote>\n\n\n\n
const Application = Shopware.Application;\nimport TestService from '..\/..\/src\/core\/service\/api\/test-api.service';\nApplication.addServiceProvider('TestService', (container) => {\n    const initContainer = Application.getContainer('init');\n    return new TestService(initContainer.httpClient, container.loginService);\n});<\/pre>\n\n\n\n
Service Injection <\/h2>\n\n\n\n
Service is injected into a Vue component and can be referenced in the inject<\/code> property:<\/p>\n\n\n\n
inject: [\n   'TestService'\n]\nmethods: {\n    saveConfig {\n      this.TestService.saveConfig(this.config);\n    }\n}<\/pre>\n\n\n\n
To learn about the Vue component, there is a link<\/a>.
Now you can use your service API in your Vue component.

I hope It will help you. Thanks<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In this article, we will look into the module which can inject Service API in Shopware 6. Overview The main entry point for this purpose is the plugin’s main.js file. It has to be placed into the <plugin root>\/src\/Resources\/app\/administration\/src the directory in order to be automatically found by Shopware 6. Creating a service Firstly, You have to create a […]<\/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,1],"tags":[],"class_list":["post-217557","post","type-post","status-publish","format-standard","hentry","category-shopware","category-uncategorized"],"yoast_head":"\nHow to use Service API in Shopware 6 - 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-use-service-api-in-shopware-6\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Service API in Shopware 6 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this article, we will look into the module which can inject Service API in Shopware 6. Overview The main entry point for this purpose is the plugin’s main.js file. It has to be placed into the <plugin root>\/src\/Resources\/app\/administration\/src the directory in order to be automatically found by Shopware 6. Creating a service Firstly, You have to create a [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/\" \/>\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=\"2019-12-27T15:02:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-30T04:29:39+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-use-service-api-in-shopware-6\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/\"},\"author\":{\"name\":\"Diwakar Rana\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/4b025fe4ecbc5c0378cd13bb70da654f\"},\"headline\":\"How to use Service API in Shopware 6\",\"datePublished\":\"2019-12-27T15:02:31+00:00\",\"dateModified\":\"2019-12-30T04:29:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/\"},\"wordCount\":185,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"articleSection\":[\"Shopware\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/\",\"name\":\"How to use Service API in Shopware 6 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2019-12-27T15:02:31+00:00\",\"dateModified\":\"2019-12-30T04:29:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Service API in Shopware 6\"}]},{\"@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 use Service API in Shopware 6 - 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-use-service-api-in-shopware-6\/","og_locale":"en_US","og_type":"article","og_title":"How to use Service API in Shopware 6 - Webkul Blog","og_description":"In this article, we will look into the module which can inject Service API in Shopware 6. Overview The main entry point for this purpose is the plugin’s main.js file. It has to be placed into the <plugin root>\/src\/Resources\/app\/administration\/src the directory in order to be automatically found by Shopware 6. Creating a service Firstly, You have to create a [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2019-12-27T15:02:31+00:00","article_modified_time":"2019-12-30T04:29:39+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-use-service-api-in-shopware-6\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/"},"author":{"name":"Diwakar Rana","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/4b025fe4ecbc5c0378cd13bb70da654f"},"headline":"How to use Service API in Shopware 6","datePublished":"2019-12-27T15:02:31+00:00","dateModified":"2019-12-30T04:29:39+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/"},"wordCount":185,"commentCount":5,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"articleSection":["Shopware"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/","url":"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/","name":"How to use Service API in Shopware 6 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2019-12-27T15:02:31+00:00","dateModified":"2019-12-30T04:29:39+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-use-service-api-in-shopware-6\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use Service API in Shopware 6"}]},{"@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\/217557","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=217557"}],"version-history":[{"count":16,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/217557\/revisions"}],"predecessor-version":[{"id":241886,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/217557\/revisions\/241886"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=217557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=217557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=217557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}