{"id":254828,"date":"2021-08-05T08:26:51","date_gmt":"2021-08-05T08:26:51","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=254828"},"modified":"2024-02-22T07:25:34","modified_gmt":"2024-02-22T07:25:34","slug":"add-dynamic-scripts-to-any-layout-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/","title":{"rendered":"Add Dynamic Scripts to any Layout in Magento 2"},"content":{"rendered":"\n

We will learn how to add a script or style file that requires some dynamic data and parameters before rendering on the page.<\/p>\n\n\n\n

Firstly, we will add following code in our layout xml file.<\/p>\n\n\n\n

<referenceBlock name="head.additional">\n    <block class="Webkul\\Test\\Block\\Head" name="test_scripts_add" \/>\n<\/referenceBlock><\/pre>\n\n\n\n
Then we will create the block mentioned above.<\/p>\n\n\n\n
<?php\n\nnamespace Webkul\\Test\\Block;\n \nuse Magento\\Framework\\View\\Element\\Template;\n \nclass Head extends Template\n{\n    \/**\n     * @var \\Magento\\Framework\\View\\Asset\\Repository\n     *\/\n    protected $assetRepository;\n \n    \/**\n     * Header constructor.\n     * @param Template\\Context $context\n     * @param \\Magento\\Framework\\View\\Page\\Config $pageConfig\n     * @param array $data\n     *\/\n    public function __construct(\n        Template\\Context $context,\n        \\Magento\\Framework\\View\\Page\\Config $pageConfig,\n        array $data = []\n    ) {\n        parent::__construct($context, $data);\n        $this->pageConfig = $pageConfig;\n        $this->manageScripts();\n    }\n \n    \/**\n     * @return void\n     *\/\n    public function manageScripts()\n    {\n        \/\/ additional attributes goes here\n        $attributes = [];\n\n        $this->pageConfig->addRemotePageAsset(\n                "https:\/\/www.test.com\/js?client-id=xyz",\n                'js',\n                $attributes\n            );\n        }\n    }\n}<\/pre>\n\n\n\n
The important method above is addRemotePageAsset()<\/strong><\/p>\n\n\n\n
This method accepts 3 parametes.<\/p>\n\n\n\n
addRemotePageAsset($url, $contentType, array $properties = [])<\/p>\n\n\n\n
$url -> the dynamic url for the script or style file.<\/p>\n\n\n\n
$contentType -> whether it is a js file or css file.<\/p>\n\n\n\n
$array -> additional parameters<\/p>\n\n\n\n
Happy Coding ! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
We will learn how to add a script or style file that requires some dynamic data and parameters before rendering on the page. Firstly, we will add following code in our layout xml file. Then we will create the block mentioned above. The important method above is addRemotePageAsset() This method accepts 3 parametes. addRemotePageAsset($url, $contentType, […]<\/a><\/p>\n","protected":false},"author":204,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[2070],"class_list":["post-254828","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-magento2"],"yoast_head":"\nAdd Dynamic Scripts to any Layout in Magento 2 - 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\/add-dynamic-scripts-to-any-layout-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Dynamic Scripts to any Layout in Magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"We will learn how to add a script or style file that requires some dynamic data and parameters before rendering on the page. Firstly, we will add following code in our layout xml file. Then we will create the block mentioned above. The important method above is addRemotePageAsset() This method accepts 3 parametes. addRemotePageAsset($url, $contentType, [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/\" \/>\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-08-05T08:26:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-22T07:25:34+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=\"Sagar Bathla\" \/>\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=\"Sagar Bathla\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/\"},\"author\":{\"name\":\"Sagar Bathla\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/6fcd235eb54dfa1a0fbfc662b8618463\"},\"headline\":\"Add Dynamic Scripts to any Layout in Magento 2\",\"datePublished\":\"2021-08-05T08:26:51+00:00\",\"dateModified\":\"2024-02-22T07:25:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/\"},\"wordCount\":96,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"Magento2\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/\",\"name\":\"Add Dynamic Scripts to any Layout in Magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2021-08-05T08:26:51+00:00\",\"dateModified\":\"2024-02-22T07:25:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add Dynamic Scripts to any Layout in Magento 2\"}]},{\"@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\/6fcd235eb54dfa1a0fbfc662b8618463\",\"name\":\"Sagar Bathla\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/06e15f8abbf8155cc1124049027a7849db68d785d26bd10e4932883b83def757?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\/06e15f8abbf8155cc1124049027a7849db68d785d26bd10e4932883b83def757?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sagar Bathla\"},\"description\":\"Sagar Bathla, a Magento Certified Developer, is an expert in Magento 2 development and eCommerce platforms. He specializes in creating cutting-edge Headless PWA solutions, ensuring scalability and exceptional user experiences. Sagar's focus on innovative technology results in transformative digital growth.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/sagar-bathla901\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add Dynamic Scripts to any Layout in Magento 2 - 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\/add-dynamic-scripts-to-any-layout-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Add Dynamic Scripts to any Layout in Magento 2 - Webkul Blog","og_description":"We will learn how to add a script or style file that requires some dynamic data and parameters before rendering on the page. Firstly, we will add following code in our layout xml file. Then we will create the block mentioned above. The important method above is addRemotePageAsset() This method accepts 3 parametes. addRemotePageAsset($url, $contentType, [...]","og_url":"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2021-08-05T08:26:51+00:00","article_modified_time":"2024-02-22T07:25:34+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":"Sagar Bathla","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sagar Bathla","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/"},"author":{"name":"Sagar Bathla","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/6fcd235eb54dfa1a0fbfc662b8618463"},"headline":"Add Dynamic Scripts to any Layout in Magento 2","datePublished":"2021-08-05T08:26:51+00:00","dateModified":"2024-02-22T07:25:34+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/"},"wordCount":96,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["Magento2"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/","url":"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/","name":"Add Dynamic Scripts to any Layout in Magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2021-08-05T08:26:51+00:00","dateModified":"2024-02-22T07:25:34+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/add-dynamic-scripts-to-any-layout-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add Dynamic Scripts to any Layout in Magento 2"}]},{"@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\/6fcd235eb54dfa1a0fbfc662b8618463","name":"Sagar Bathla","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/06e15f8abbf8155cc1124049027a7849db68d785d26bd10e4932883b83def757?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\/06e15f8abbf8155cc1124049027a7849db68d785d26bd10e4932883b83def757?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sagar Bathla"},"description":"Sagar Bathla, a Magento Certified Developer, is an expert in Magento 2 development and eCommerce platforms. He specializes in creating cutting-edge Headless PWA solutions, ensuring scalability and exceptional user experiences. Sagar's focus on innovative technology results in transformative digital growth.","url":"https:\/\/webkul.com\/blog\/author\/sagar-bathla901\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/254828","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\/204"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=254828"}],"version-history":[{"count":4,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/254828\/revisions"}],"predecessor-version":[{"id":423707,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/254828\/revisions\/423707"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=254828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=254828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=254828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}