{"id":202349,"date":"2019-10-21T16:10:11","date_gmt":"2019-10-21T16:10:11","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=202349"},"modified":"2019-10-21T16:10:13","modified_gmt":"2019-10-21T16:10:13","slug":"overriding-shopware-6-storefront-page","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/overriding-shopware-6-storefront-page\/","title":{"rendered":"Overriding Shopware 6 Storefront Page"},"content":{"rendered":"\n

In this blog, we are going to explain the overriding Shopware 6<\/a> Storefront page by which we can add some extra feature in a section of page.<\/p>\n\n\n\n

It is supposed that you know the directory structure of the Shopware 6 plugin, if not, you can visit- https:\/\/docs.shopware.com\/en\/shopware-platform-dev-en\/internals\/directory-structure<\/a>.<\/p>\n\n\n\n

Shopware 6 plugin by default searches for template files in Resource\/views\/{page-path} folder of plugin, path could be: <plugin name>\/src\/Resources\/views. <\/p>\n\n\n\n

Shopware 6 uses Twig<\/a> template for Storefront. <\/p>\n\n\n\n

Next step is to find the template you want to extend can be found at <shopware root directory>\/platform\/src\/Storefront. <\/p>\n\n\n\n

Now create the exact directory structure in your plugin starting from the views(of storefront)\"\"and create their a template file with same name just like the original file. <\/p>\n\n\n\n

Now you can override the original template by overriding its blocks,but before that you need to write a line at the very beginning of the file with its respective path like written example below.<\/p>\n\n\n\n

{% sw_extends ‘@Storefront\/component\/account\/login.html.twig’ %}<\/p>\n\n\n\n

Now find the block in original twig file in which you want to make changes(override) and add the same block in your custom twig file and replace its contents.<\/p>\n\n\n\n

We can use parent() function to get original content of block and then we can add our own content to it (example in overridden “component_account_login_submit” block below)<\/strong><\/p>\n\n\n\n

The example below shows block in original file and same overridden block in custom template.This will override the login form description.<\/p>\n\n\n\n

\"\"
original form description block<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
original form login submit block<\/figcaption><\/figure>\n\n\n\n
\"\"
Overridden blocks<\/figcaption><\/figure>\n\n\n\n
\"\"
Original login form<\/figcaption><\/figure>\n\n\n\n
\"\"
Overridden login form<\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n\n\n