{"id":55235,"date":"2022-02-15T13:25:05","date_gmt":"2022-02-15T13:25:05","guid":{"rendered":"https:\/\/www.icreativetechnologies.com\/?p=13077"},"modified":"2022-02-15T13:25:05","modified_gmt":"2022-02-15T13:25:05","slug":"add-tab-to-existing-module","status":"publish","type":"post","link":"https:\/\/www.icreativetechnologies.com\/de\/add-tab-to-existing-module\/","title":{"rendered":"How to add a new tab to the module?"},"content":{"rendered":"

Overview<\/strong><\/p>\n\n\n\n

Do you want to create a new tab in the administration? This guide gets you covered on this subject. A realistic example would be adding a new association for an entity, which you want to configure on a separate tab on the entity detail page.<\/strong><\/p>\n\n\n\n

Prerequisites<\/strong><\/p>\n\n\n\n

This guide requires you to already have a basic plugin running. If you don’t know how to do this, have a look at the <\/strong>plugin base guide<\/a>.<\/p>\n\n\n\n

You need to create a custom component and route. You can refer a below guides for it:<\/strong><\/p>\n\n\n\n

Add custom component<\/a><\/p>\n\n\n\n

Add custom route<\/a><\/p>\n\n\n\n


<\/strong>Creating a custom tab<\/strong><\/h2><\/p>\n\n\n\n

Find the block to extend<\/strong><\/p>\n\n\n\n

For this guide, we’ll think about the following example: The product detail page is extended by a new tab, which then only contains a ‘Hello world!’. In order to refer to this example, let’s have a look at the twig code of the product detail page found <\/strong>here<\/strong><\/a>.<\/strong><\/p>\n\n\n\n

Let’s imagine your first goal is to create a new tab on the product detail page. Having a look at the template, you might find the block sw_product_detail_content_tabs, which seems to contain all available tabs. It starts by creating a new <sw-tabs> element to contain all the tabs available. Here you can see an excerpt of this block:<\/strong><\/p>\n\n\n\n

platform\/src\/Administration\/Resources\/app\/administration\/src\/module\/sw-product\/page\/sw-product-detail\/sw-product-detail.html.twig<\/strong><\/p>\n\n\n

\n
\n\n\n\n
<div data-gb-custom-block data-<\/strong>tag<\/strong>=<\/strong>“block”<\/strong>><\/strong>
<\/strong>
<\/strong>\u00a0 \u00a0 <<\/strong>sw<\/strong>–<\/strong>tabs<\/strong> class=<\/strong>“sw-product-detail-page__tabs”<\/strong> v-<\/strong>if<\/strong>=<\/strong>“productId”<\/strong>><\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 <\/strong>
<\/strong>
<\/strong><div data-gb-custom-block data-<\/strong>tag<\/strong>=<\/strong>“block”<\/strong>><\/strong>
<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <<\/strong>sw<\/strong>–<\/strong>tabs<\/strong>-item<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 class=<\/strong>“sw-product-detail__tab-general”<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :route=<\/strong>“{ name: ‘sw.product.detail.base’, params: { id: $route.params.id } }”<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :hasError=<\/strong>“swProductDetailBaseError”<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :title=<\/strong>“$tc(‘sw-product.detail.tabGeneral’)”<\/strong>><\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {{ $<\/strong>tc<\/strong>(<\/strong>‘sw-product.detail.tabGeneral’<\/strong>) }}<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/<\/strong>sw<\/strong>–<\/strong>tabs<\/strong>-item><\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 <\/strong>
<\/strong>
<\/strong><\/div><\/strong>
<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 …<\/strong>
<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 <\/strong>
<\/strong>
<\/strong><div data-gb-custom-block data-<\/strong>tag<\/strong>=<\/strong>“block”<\/strong>><\/strong>
<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <<\/strong>sw<\/strong>–<\/strong>tabs<\/strong>-item<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 class=<\/strong>“sw-product-detail__tab-reviews”<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :route=<\/strong>“{ name: ‘sw.product.detail.reviews’, params: { id: $route.params.id } }”<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 :title=<\/strong>“$tc(‘sw-product.detail.tabReviews’)”<\/strong>><\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {{ $<\/strong>tc<\/strong>(<\/strong>‘sw-product.detail.tabReviews’<\/strong>) }}<\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/<\/strong>sw<\/strong>–<\/strong>tabs<\/strong>-item><\/strong>
<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 <\/strong>
<\/strong>
<\/strong><\/div><\/strong>
<\/strong>
<\/strong>\u00a0 \u00a0 <\/<\/strong>sw<\/strong>–<\/strong>tabs<\/strong>><\/strong>
<\/strong>
<\/strong><\/div><\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/figure>\n\n\n

Unfortunately, you cannot use the block mentioned above, because then your new tab wouldn’t be inside the <sw-tabs> element. Instead, you can choose the last available block inside the element, which is sw_product_detail_content_tabs_reviews at this moment.<\/strong><\/p>\n\n\n\n

Create custom tab<\/strong><\/p>\n\n\n\n

Knowing the block you have to override in your plugin, you can now start doing this: Add your custom tab by overriding this block called sw_product_detail_content_tabs_reviews.<\/strong><\/p>\n\n\n\n

First, please re-create the directory structure from the core code in your plugin. In this case, you’ll have to create a directory structure like the following: <plugin root>\/src\/Resources\/app\/administration\/src\/page\/sw-product-detail<\/strong><\/p>\n\n\n\n

In there you create a new file index.js, which then contains the following code:<\/strong><\/p>\n\n\n\n

<plugin root>\/src\/Resources\/app\/administration\/src\/page\/sw-product-detail\/index.js<\/strong><\/p>\n\n\n\n

import<\/strong> <\/strong>template<\/strong> from <\/strong>‘.\/sw-product-detail.html.twig’<\/strong>;<\/strong>
<\/strong>
<\/strong>\/\/ Override your template here, using the actual template from the core<\/strong>
<\/strong>Shopware.Component.override(<\/strong>‘sw-product-detail’<\/strong>, {<\/strong>
<\/strong>    <\/strong>template<\/strong>
<\/strong>});<\/strong><\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n\n

All this file is doing is to basically override the sw-product-detail component with a new template. The new template does not exist yet though, so create a new file sw-product-detail.html.twig in the same directory as your index.js file. It then has to use the block we figured out earlier and override it by adding a new tab element:<\/strong><\/p>\n\n\n\n

<plugin root>\/src\/Resources\/app\/administration\/src\/page\/sw-product-detail\/sw-product-detail.html.twig<\/strong><\/p>\n\n\n\n

<<\/strong>div<\/strong> data-gb-custom-<\/strong>block<\/strong> data-tag=<\/strong>“block”<\/strong>><\/strong>
<\/strong>
<\/strong>    {<\/strong># This parent is very important as you don’t want to override the review tab completely #}<\/strong>
<\/strong>    <\/strong>
<\/strong>
<\/strong><<\/strong>div<\/strong> data-gb-custom-<\/strong>block<\/strong> data-tag=<\/strong>“parent”<\/strong>><\/strong>
<\/strong>
<\/strong><\/<\/strong>div<\/strong>><\/strong><\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n\n

After that, we’ll create the actual sw-tabs-item element, which, as the name suggests, represents a new tab item. We want this tab to have a custom route, so we’re also adding this route directly. Don’t worry, we’ll explain this custom route in a bit. The product detail page’s route contains the product’s ID, which you also want to have in your custom tab: So make sure to also pass the ID in, like shown in the example above.<\/strong><\/p>\n\n\n\n

<plugin root>\/src\/Resources\/app\/administration\/src\/page\/sw-product-detail\/sw-product-detail.html.twig<\/strong><\/p>\n\n\n\n

<<\/strong>div<\/strong> data-gb-custom-block data-tag=<\/strong>“block”<\/strong>><\/strong>
<\/strong>
<\/strong>    <\/strong>
<\/strong>
<\/strong><<\/strong>div<\/strong> data-gb-custom-block data-tag=<\/strong>“parent”<\/strong>><\/strong>
<\/strong>
<\/strong>    <\/strong><!– We’ll define a custom route here, an explanation will follow later –><\/strong>
<\/strong>    <\/strong><<\/strong>sw-tabs-item<\/strong> :route=<\/strong>“<\/strong>{ name: ‘sw.product.detail.custom’, params: { id: $route.params.id }<\/strong> }”<\/strong> title=<\/strong>“Custom”<\/strong>><\/strong>
<\/strong>        Individuelle<\/strong>
<\/strong>    <\/strong><\/<\/strong>sw-tabs-item<\/strong>><\/strong>
<\/strong>
<\/strong><\/<\/strong>div<\/strong>><\/strong><\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n\n

The <\/strong>route<\/a> being used here has the name sw.product.detail.custom, this will become important again later on.<\/strong><\/p>\n\n\n\n

Loading the new tab<\/strong><\/p>\n\n\n\n

You’ve now created a new tab, but your new template is not yet loaded. Remember, that the main entry point for custom javascript for the administration is the your plugin’s main.js file. And that’s also the file you need to adjust now, so it loads your sw-product-detail override.<\/strong><\/p>\n\n\n\n

This is an example of what your main.js should look like to load your override:<\/strong><\/p>\n\n\n\n

import<\/strong> ‘.\/<\/strong>page<\/strong>\/sw-product-detail’;<\/strong><\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n\n

Don’t forget to rebuild the administration after applying changes to your main.js.<\/strong><\/p>\n\n\n\n

.\/psh<\/strong>.phar<\/strong> administration:build<\/strong><\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n\n

Registering the tab’s new route<\/strong><\/p>\n\n\n\n

Your new tab should now already show up on the product detail page, but clicking it should always result in an error. It’s basically pointing to a new route, which you have never defined yet.<\/strong><\/p>\n\n\n\n

The next step would be the following: Create a new route and map it to your own component. This is done by registering a new dummy module, which then overrides the method route middleware of a module. It gets called for each and every route that is called in the administration. Once the sw.product.detail route is called, you want to add your new child route to it.<\/strong><\/p>\n\n\n\n

<plugin root>\/src\/Resources\/app\/administration\/src\/main.js<\/strong><\/p>\n\n\n\n

import<\/strong> ‘.\/<\/strong>page<\/strong>\/sw-product-detail’;<\/strong>
<\/strong>import<\/strong> ‘.\/view\/sw-product-detail-custom’;<\/strong>
<\/strong>
<\/strong>\/\/ Here you create your new route, refer to the mentioned guide for more information<\/strong>
<\/strong>Shopware.Module.register(<\/strong>‘sw-new-tab-custom’<\/strong>, {<\/strong>
<\/strong>    routeMiddleware(next, currentRoute) {<\/strong>
<\/strong>        <\/strong>if<\/strong> (currentRoute.<\/strong>name<\/strong> === <\/strong>‘sw.product.detail’<\/strong>) {<\/strong>
<\/strong>            currentRoute.children.push({<\/strong>
<\/strong>                <\/strong>name<\/strong>: <\/strong>‘sw.product.detail.custom’<\/strong>,<\/strong>
<\/strong>                <\/strong>path<\/strong>: <\/strong>‘\/sw\/product\/detail\/:id\/custom’<\/strong>,<\/strong>
<\/strong>                component: <\/strong>‘sw-product-detail-custom’<\/strong>,<\/strong>
<\/strong>                meta: {<\/strong>
<\/strong>                    parentPath: <\/strong>“sw.product.index”<\/strong>
<\/strong>                }<\/strong>
<\/strong>            });<\/strong>
<\/strong>        }<\/strong>
<\/strong>        next(currentRoute);<\/strong>
<\/strong>    }<\/strong>
<\/strong>});<\/strong><\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n\n

As already mentioned, you need to create a dummy module in order to override the route middleware method. In there, you’re listening for the current route that got called. If the current route matches sw.product.detail, you want to add your new child route to it, and that’s what’s done here.<\/strong><\/p>\n\n\n\n

The path should be identical to the default ones, which look like this: \/sw\/product\/detail\/:id\/base Just replace the base here with custom or anything you like.<\/strong><\/p>\n\n\n\n

It then points to a component, which represents the route’s actual content – so you’ll have to create <\/strong>a new component<\/strong><\/a> in the next step. Note the new import that’s already part of this example: view\/sw-product-detail-custom<\/strong><\/p>\n\n\n\n

Creating your new component<\/strong><\/h2><\/p>\n\n\n\n

As shown in the previous example, your custom component is expected to be in a directory view\/sw-product-detail-custom, so create this directory in your plugin now. The directory structure inside of your administration directory should then look like this:<\/strong><\/p>\n\n\n\n

administration<\/strong>
<\/strong>\u251c\u2500\u2500<\/strong> page<\/strong>
<\/strong>\u2502   \u2514\u2500\u2500 sw-product-detail<\/strong>
<\/strong>\u2502       \u2514\u2500\u2500 sw-product-detail<\/strong>
<\/strong>\u2502           \u251c\u2500\u2500 index.js<\/strong>
<\/strong>\u2502           \u2514\u2500\u2500 sw-product-detail.html.twig<\/strong>
<\/strong>\u251c\u2500\u2500 view<\/strong>
<\/strong>\u2502   \u2514\u2500\u2500 sw-product-detail-custom<\/strong>
<\/strong>\u2514\u2500\u2500 main.js<\/strong><\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n\n

Since a component always gets initiated by a file called index.js, create such a new file in the sw-product-detail-custom directory:<\/strong><\/p>\n\n\n\n

<plugin root>\/src\/Resources\/app\/administration\/src\/view\/sw-product-detail-custom\/index.js<\/strong><\/p>\n\n\n\n

import<\/strong> <\/strong>template<\/strong> from <\/strong>‘.\/sw-product-detail-custom.html.twig’<\/strong>;<\/strong>
<\/strong>
<\/strong>Shopware.Component.<\/strong>register<\/strong>(<\/strong>‘sw-product-detail-custom’<\/strong>, {<\/strong>
<\/strong>    <\/strong>template<\/strong>,<\/strong>
<\/strong>
<\/strong>    metaInfo() {<\/strong>
<\/strong>        <\/strong>return<\/strong> {<\/strong>
<\/strong>            title: <\/strong>‘Custom’<\/strong>
<\/strong>        };<\/strong>
<\/strong>    },<\/strong>
<\/strong>});<\/strong><\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n\n

This file mainly registers a new component with a custom title and a custom template. Once more, the referenced template is still missing, so make sure to create the file sw-product-detail-custom.html.twig next to your index.js file.<\/strong><\/p>\n\n\n\n

Here’s what this new template could look like:<\/strong><\/p>\n\n\n\n

<plugin root>\/src\/Resources\/app\/administration\/src\/view\/sw-product-detail-custom\/sw-product-detail-custom.html.twig<\/strong><\/p>\n\n\n\n

<<\/strong>sw-card<\/strong> title=<\/strong>“Custom”<\/strong>><\/strong>
<\/strong>    Hello world!<\/strong>
<\/strong><\/<\/strong>sw-card<\/strong>><\/strong><\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n\n

It simply creates a new card with a title, which only contains a ‘Hello world!’ string. And that’s it – your tab should now be fully functional.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"

Overview Do you want to create a new tab in the administration? […]<\/p>\n","protected":false},"author":8,"featured_media":18463,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[86],"tags":[],"class_list":["post-55235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopware"],"acf":[],"yoast_head":"\nHow to add new tab to existing module? iCreative Technologies<\/title>\n<meta name=\"description\" content=\"If you want to know how to add new tab in existing module or new module then in read this article to know in detail.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add new tab to existing module? iCreative Technologies\" \/>\n<meta property=\"og:description\" content=\"If you want to know how to add new tab in existing module or new module then in read this article to know in detail.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.icreativetechnologies.com\/de\/add-tab-to-existing-module\/\" \/>\n<meta property=\"og:site_name\" content=\"iCreative Technologies\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-15T13:25:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2022\/02\/How-to-add-tab-to-existing-module-in-Shopware-6-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1030\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rajanik Bambhaniya - Shopware 6 Team Lead\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rajanik Bambhaniya - Shopware 6 Team Lead\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/\"},\"author\":{\"name\":\"Rajanik Bambhaniya - Shopware 6 Team Lead\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#\\\/schema\\\/person\\\/66d9c33c2e2e219aafa7f95176cce629\"},\"headline\":\"How to add a new tab to the module?\",\"datePublished\":\"2022-02-15T13:25:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/\"},\"wordCount\":1518,\"publisher\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/How-to-add-tab-to-existing-module-in-Shopware-6-1.png\",\"articleSection\":[\"Shopware\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/\",\"url\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/\",\"name\":\"How to add new tab to existing module? iCreative Technologies\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/How-to-add-tab-to-existing-module-in-Shopware-6-1.png\",\"datePublished\":\"2022-02-15T13:25:05+00:00\",\"description\":\"If you want to know how to add new tab in existing module or new module then in read this article to know in detail.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/How-to-add-tab-to-existing-module-in-Shopware-6-1.png\",\"contentUrl\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/How-to-add-tab-to-existing-module-in-Shopware-6-1.png\",\"width\":1920,\"height\":1030,\"caption\":\"How-to-add-tab-to-existing-module-in-Shopware-6-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/add-tab-to-existing-module\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add a new tab to the module?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#website\",\"url\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/\",\"name\":\"iCreative Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#organization\",\"name\":\"iCreative Technologies\",\"url\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/logo-e1628229333795.png.png\",\"contentUrl\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/logo-e1628229333795.png.png\",\"width\":240,\"height\":66,\"caption\":\"iCreative Technologies\"},\"image\":{\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.icreativetechnologies.com\\\/#\\\/schema\\\/person\\\/66d9c33c2e2e219aafa7f95176cce629\",\"name\":\"Rajanik Bambhaniya - Shopware 6 Team Lead\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ab8ee394ffda3b27429710e11341d6b1c3d8f608fc12db315b94e7adbb74c19a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ab8ee394ffda3b27429710e11341d6b1c3d8f608fc12db315b94e7adbb74c19a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ab8ee394ffda3b27429710e11341d6b1c3d8f608fc12db315b94e7adbb74c19a?s=96&d=mm&r=g\",\"caption\":\"Rajanik Bambhaniya - Shopware 6 Team Lead\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add new tab to existing module? iCreative Technologies","description":"If you want to know how to add new tab in existing module or new module then in read this article to know in detail.","robots":{"index":"noindex","follow":"follow"},"og_locale":"de_DE","og_type":"article","og_title":"How to add new tab to existing module? iCreative Technologies","og_description":"If you want to know how to add new tab in existing module or new module then in read this article to know in detail.","og_url":"https:\/\/www.icreativetechnologies.com\/de\/add-tab-to-existing-module\/","og_site_name":"iCreative Technologies","article_published_time":"2022-02-15T13:25:05+00:00","og_image":[{"width":1920,"height":1030,"url":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2022\/02\/How-to-add-tab-to-existing-module-in-Shopware-6-1.png","type":"image\/png"}],"author":"Rajanik Bambhaniya - Shopware 6 Team Lead","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Rajanik Bambhaniya - Shopware 6 Team Lead","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/#article","isPartOf":{"@id":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/"},"author":{"name":"Rajanik Bambhaniya - Shopware 6 Team Lead","@id":"https:\/\/www.icreativetechnologies.com\/#\/schema\/person\/66d9c33c2e2e219aafa7f95176cce629"},"headline":"How to add a new tab to the module?","datePublished":"2022-02-15T13:25:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/"},"wordCount":1518,"publisher":{"@id":"https:\/\/www.icreativetechnologies.com\/#organization"},"image":{"@id":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/#primaryimage"},"thumbnailUrl":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2022\/02\/How-to-add-tab-to-existing-module-in-Shopware-6-1.png","articleSection":["Shopware"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/","url":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/","name":"How to add new tab to existing module? iCreative Technologies","isPartOf":{"@id":"https:\/\/www.icreativetechnologies.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/#primaryimage"},"image":{"@id":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/#primaryimage"},"thumbnailUrl":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2022\/02\/How-to-add-tab-to-existing-module-in-Shopware-6-1.png","datePublished":"2022-02-15T13:25:05+00:00","description":"If you want to know how to add new tab in existing module or new module then in read this article to know in detail.","breadcrumb":{"@id":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/#primaryimage","url":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2022\/02\/How-to-add-tab-to-existing-module-in-Shopware-6-1.png","contentUrl":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2022\/02\/How-to-add-tab-to-existing-module-in-Shopware-6-1.png","width":1920,"height":1030,"caption":"How-to-add-tab-to-existing-module-in-Shopware-6-1"},{"@type":"BreadcrumbList","@id":"https:\/\/www.icreativetechnologies.com\/add-tab-to-existing-module\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.icreativetechnologies.com\/"},{"@type":"ListItem","position":2,"name":"How to add a new tab to the module?"}]},{"@type":"WebSite","@id":"https:\/\/www.icreativetechnologies.com\/#website","url":"https:\/\/www.icreativetechnologies.com\/","name":"iCreative Technologies","description":"","publisher":{"@id":"https:\/\/www.icreativetechnologies.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.icreativetechnologies.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.icreativetechnologies.com\/#organization","name":"iCreative Technologies","url":"https:\/\/www.icreativetechnologies.com\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.icreativetechnologies.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2024\/11\/logo-e1628229333795.png.png","contentUrl":"https:\/\/www.icreativetechnologies.com\/wp-content\/uploads\/2024\/11\/logo-e1628229333795.png.png","width":240,"height":66,"caption":"iCreative Technologies"},"image":{"@id":"https:\/\/www.icreativetechnologies.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.icreativetechnologies.com\/#\/schema\/person\/66d9c33c2e2e219aafa7f95176cce629","name":"Rajanik Bambhaniya - Shopware 6 Team Lead","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/ab8ee394ffda3b27429710e11341d6b1c3d8f608fc12db315b94e7adbb74c19a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ab8ee394ffda3b27429710e11341d6b1c3d8f608fc12db315b94e7adbb74c19a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ab8ee394ffda3b27429710e11341d6b1c3d8f608fc12db315b94e7adbb74c19a?s=96&d=mm&r=g","caption":"Rajanik Bambhaniya - Shopware 6 Team Lead"}}]}},"_links":{"self":[{"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/posts\/55235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/comments?post=55235"}],"version-history":[{"count":0,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/posts\/55235\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/media\/18463"}],"wp:attachment":[{"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/media?parent=55235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/categories?post=55235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.icreativetechnologies.com\/de\/wp-json\/wp\/v2\/tags?post=55235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}