{"id":332291,"date":"2022-05-02T12:57:41","date_gmt":"2022-05-02T12:57:41","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=332291"},"modified":"2022-05-02T12:57:49","modified_gmt":"2022-05-02T12:57:49","slug":"how-to-use-global-javascript-components-in-prestashop-modern-pages","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/","title":{"rendered":"How to use PrestaShop Global JavaScript components in modern pages"},"content":{"rendered":"\n<p>In this blog, we are about to learn the use of PrestaShop Global JavaScript components in modern forms.<\/p>\n\n\n\n<p>A PrestaShop JavaScript component is a reusable code and these\u00a0are created in core PrestaShop. For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>tinymce-editor.js<\/strong><\/li><li><strong>router.js:<\/strong><\/li><li><strong>text-to-link-rewrite-copier.js<\/strong><\/li><li><strong>generatable-input.js<\/strong><\/li><\/ul>\n\n\n\n<p>These global javascript components are defined in the admin directory.<br><strong>admin-dev\\themes\\new-theme\\js\\components.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Global JavaScript component introduced:<\/strong><\/h2>\n\n\n\n<p>In order for modules to use JavaScript components from the Core in lower versions ( &lt; 1.7.8), we needed to import them using the below statements <br>To use translatable type, we write below code : <br><strong>import TranslatableInput from &#8216;..\/..\/..\/..\/..\/admin-dev\/themes\/new-theme\/js\/components\/translatable-input&#8217;;<\/strong><\/p>\n\n\n\n<p>This path is not compatible so we cannot use them like this.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to use<\/strong> <\/h2>\n\n\n\n<p>We are going to learn about components by creating a module.<\/p>\n\n\n\n<p>So lets start.<\/p>\n\n\n\n<p>Firstly we will create a module and an admin controller inside it <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">modules\/demojscomponent\/src\/Controller\/DemoFormController.php<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\ndeclare(strict_types=1);\n\nnamespace DemoJsComponent\\Controller;\n\nuse PrestaShopBundle\\Controller\\Admin\\FrameworkBundleAdminController;\nuse Symfony\\Component\\HttpFoundation\\Request;\nuse Symfony\\Component\\HttpFoundation\\Response;\nuse DemoJsComponent\\Form\\DemoForm;\n\n\nclass DemoFormController extends FrameworkBundleAdminController\n{\n    public function indexAction(Request $request): Response\n    {\n        $form = $this-&gt;createForm(DemoForm::class);\n        return $this-&gt;render(&#039;@Modules\/demojscomponent\/views\/templates\/admin\/demo_form.html.twig&#039;,&#091;\n            &#039;demoForm&#039; =&gt; $form-&gt;createView(),\n        ]);\n    }\n}<\/pre>\n\n\n\n<p>Now, to create the form, we will create a form class <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">modules\/your-module\/src\/Form\/DemoForm.php<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\ndeclare(strict_types=1);\n\nnamespace DemoJsComponent\\Form;\n\nuse PrestaShopBundle\\Form\\Admin\\Type\\FormattedTextareaType;\nuse PrestaShopBundle\\Form\\Admin\\Type\\GeneratableTextType;\nuse PrestaShopBundle\\Form\\Admin\\Type\\TextWithLengthCounterType;\nuse Symfony\\Component\\Form\\AbstractType;\nuse Symfony\\Component\\Form\\FormBuilderInterface;\n\nclass DemoForm extends AbstractType\n{\n    \/**\n     * {@inheritdoc}\n     *\/\n    public function buildForm(FormBuilderInterface $builder, array $options): void\n    {\n        $builder\n            -&gt;add(&#039;formatted_text_area_type&#039;, FormattedTextareaType::class, &#091;\n                &#039;label&#039; =&gt; &#039;Formatted text area type&#039;,\n            ])\n            -&gt;add(&#039;generatable_text_type&#039;, GeneratableTextType::class, &#091;\n                &#039;label&#039; =&gt; &#039;Generatable text type&#039;,\n                &#039;generated_value_length&#039; =&gt; 5,\n            ])\n            -&gt;add(&#039;text_with_length_counter_type&#039;, TextWithLengthCounterType::class, &#091;\n                &#039;max_length&#039; =&gt; 50,\n                &#039;label&#039; =&gt; &#039;Text with length counter type&#039;,\n            ]);\n    }\n}<\/pre>\n\n\n\n<p>To to render the form, we will create a twig file  <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">modules\/your-module\/views\/templates\/admin\/demo_form.html.twig<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">{% extends &#039;@PrestaShop\/Admin\/layout.html.twig&#039; %}\n\n{% block content %}\n \n&lt;div class=&quot;card&quot;&gt;\n  &lt;h3 class=&quot;card-header&quot;&gt;\n    &lt;i class=&quot;material-icons&quot;&gt;settings&lt;\/i&gt;Text form types\n&lt;\/h3&gt;\n&lt;div class=&quot;card-block row&quot;&gt;\n    &lt;div class=&quot;card-text&quot;&gt;\n      {{form_start(demoForm)}}\n      {{form_end(demoForm)}}\n  &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;div class=&quot;card&quot;&gt;\n  &lt;h3 class=&quot;card-header&quot;&gt;\n    &lt;i class=&quot;material-icons&quot;&gt;settings&lt;\/i&gt;Search Customer\n&lt;\/h3&gt;\n&lt;div class=&quot;card-block&quot;&gt;\n    &lt;div class=&quot;card-text&quot;&gt;\n       &lt;div class=&quot;form-group row type-text &quot;&gt;\n        &lt;label class=&quot;form-control-label col-md-4&quot; for=&quot;demo_search_customer&quot;&gt;Search for customer&lt;\/label&gt;\n        &lt;input type=&quot;text&quot; id=&quot;demo_search_customer&quot; class=&quot;col-md-4 form-control&quot;&gt;\n        &lt;button type=&quot;button&quot; class=&quot;col-md-4 btn btn-primary&quot; id=&quot;demo_search_customer_btn&quot;&gt;Search&lt;\/button&gt;\n    &lt;\/div&gt;\n    &lt;div id=&quot;info-block&quot; class=&quot;d-none&quot;&gt;&lt;\/div&gt;\n    &lt;div id=&quot;customers-results&quot; class=&quot;d-none&quot;&gt;\n        &lt;table class=&quot;table table-striped&quot;&gt;\n          &lt;thead&gt;\n            &lt;tr&gt;\n              &lt;th&gt;ID&lt;\/th&gt;\n              &lt;th&gt;First name&lt;\/th&gt;\n              &lt;th&gt;Last name&lt;\/th&gt;\n              &lt;th&gt;Email&lt;\/th&gt;\n          &lt;\/tr&gt;\n      &lt;\/thead&gt;\n      &lt;tbody&gt;\n      &lt;\/tbody&gt;\n  &lt;\/table&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n\n\n{% endblock %}\n\n{% block javascripts %}\n  {{ parent() }}\n  &lt;script src=&quot;{{ asset(&#039;..\/modules\/demojscomponent\/views\/js\/demo-form.js&#039;) }}&quot;&gt;&lt;\/script&gt;\n{% endblock %}<\/pre>\n\n\n\n<p>Now we need to create and include a JS file in template file because PrestaShop global javascript components are defined in JS files.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/modules\/your-module\/views\/js\/demo-form.js<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">$(document).ready(function () {\n    window.prestashop.component.initComponents(\n        &#091;\n            &#039;TinyMCEEditor&#039;,\n            &#039;TranslatableInput&#039;,\n            &#039;GeneratableInput&#039;,\n            &#039;TextWithLengthCounter&#039;,\n            &#039;Router&#039;\n        ],\n    );\n\nwindow.prestashop.instance.generatableInput.attachOn(&#039;.js-generator-btn&#039;);\n    $(document).on(&#039;click&#039;, &#039;#demo_search_customer_btn&#039;, () =&gt; search($(&#039;#demo_search_customer&#039;).val()));\n\nfunction search(searchPhrase) {\n    var route = window.prestashop.instance.router.generate(&#039;admin_customers_search&#039;);\n    $.get(route, {\n      &#039;customer_search&#039;: searchPhrase,\n    }).then((data) =&gt; renderResults(data));\n}\n\nfunction renderResults(data) {\n    var $infoBlock = $(&#039;#info-block&#039;)\n    $infoBlock.addClass(&#039;d-none&#039;).empty();\n    var $resultsBlock = $(&#039;#customers-results&#039;);\n    var $resultsBody = $(&#039;#customers-results tbody&#039;);\n\n    if (data.found === false) {\n      $infoBlock.text(&#039;No customers found&#039;).removeClass(&#039;d-none&#039;);\n      $resultsBlock.addClass(&#039;d-none&#039;);\n      $resultsBody.empty();\n\n      return;\n    }\n\n    $resultsBlock.removeClass(&#039;d-none&#039;);\n    $resultsBody.empty();\n\n    for (const id in data.customers) {\n      const customer = data.customers&#091;id];\n      $resultsBody.append(`\n      &lt;tr&gt;\n      &lt;td&gt;${customer.id_customer}&lt;\/td&gt;\n      &lt;td&gt;${customer.firstname}&lt;\/td&gt;\n      &lt;td&gt;${customer.lastname}&lt;\/td&gt;\n      &lt;td&gt;${customer.email}&lt;\/td&gt;\n      &lt;\/tr&gt;`);\n    }\n  }\n});<\/pre>\n\n\n\n<p>Below output is the result of using:<\/p>\n\n\n\n<p>TinyMCEEditor , GeneratableInput and TextWithLengthCounter component.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1040\" height=\"347\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png\" alt=\"Forms generated by PrestaShop Global JavaScript Components\" class=\"wp-image-332331\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png 1040w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1-300x100.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1-250x83.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1-768x256.png 768w\" sizes=\"(max-width: 1040px) 100vw, 1040px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/2-1.png\" alt=\"Search list generated by PrestaShop Global JavaScript Components\" class=\"wp-image-332327\" width=\"820\" height=\"160\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/2-1.png 1041w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/2-1-300x59.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/2-1-250x49.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/2-1-768x151.png 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>That\u2019s all about this blog.<\/p>\n\n\n\n<p>If any issue or doubt in the above step, please feel free to let us know in the comment section.<\/p>\n\n\n\n<p>We would be happy to help.<\/p>\n\n\n\n<p>You can also explore our\u00a0<a href=\"https:\/\/webkul.com\/prestashop-development\/\">PrestaShop Development Services<\/a>\u00a0and a large range of quality\u00a0<a href=\"https:\/\/store.webkul.com\/PrestaShop-Extensions.html\">PrestaShop Modules<\/a>.<\/p>\n\n\n\n<p>For any doubt contact us at&nbsp;<a href=\"mailto:support@webkul.com\">support@webkul.com<\/a>.<\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we are about to learn the use of PrestaShop Global JavaScript components in modern forms. A PrestaShop JavaScript component is a reusable code and these\u00a0are created in core PrestaShop. For example: tinymce-editor.js router.js: text-to-link-rewrite-copier.js generatable-input.js These global javascript components are defined in the admin directory.admin-dev\\themes\\new-theme\\js\\components. Why Global JavaScript component introduced: In order <a href=\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":431,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[12668,2065,12670],"class_list":["post-332291","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-global-javascript","tag-prestashop","tag-prestashop-component"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>PrestaShop Global JavaScript component<\/title>\n<meta name=\"description\" content=\"How to use the PrestaShop Global JavaScript component in modern pages. A JavaScript component is a reusable code that\u00a0is created in PrestaShop\" \/>\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-global-javascript-components-in-prestashop-modern-pages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PrestaShop Global JavaScript component\" \/>\n<meta property=\"og:description\" content=\"How to use the PrestaShop Global JavaScript component in modern pages. A JavaScript component is a reusable code that\u00a0is created in PrestaShop\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/\" \/>\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=\"2022-05-02T12:57:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-02T12:57:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png\" \/>\n<meta name=\"author\" content=\"Raghvendra Pratap\" \/>\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=\"Raghvendra Pratap\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 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-global-javascript-components-in-prestashop-modern-pages\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/\"},\"author\":{\"name\":\"Raghvendra Pratap\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d819867cc25c4d70d2d114e78196e7d5\"},\"headline\":\"How to use PrestaShop Global JavaScript components in modern pages\",\"datePublished\":\"2022-05-02T12:57:41+00:00\",\"dateModified\":\"2022-05-02T12:57:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/\"},\"wordCount\":271,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png\",\"keywords\":[\"Global javascript\",\"prestashop\",\"PrestaShop Component\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/\",\"name\":\"PrestaShop Global JavaScript component\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png\",\"datePublished\":\"2022-05-02T12:57:41+00:00\",\"dateModified\":\"2022-05-02T12:57:49+00:00\",\"description\":\"How to use the PrestaShop Global JavaScript component in modern pages. A JavaScript component is a reusable code that\u00a0is created in PrestaShop\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png\",\"width\":1040,\"height\":347,\"caption\":\"1-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use PrestaShop Global JavaScript components in modern pages\"}]},{\"@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\/d819867cc25c4d70d2d114e78196e7d5\",\"name\":\"Raghvendra Pratap\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2aa578a93576e581ac028fb555d206ee963ff164044b165aaff0d6c3e5cfd49a?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\/2aa578a93576e581ac028fb555d206ee963ff164044b165aaff0d6c3e5cfd49a?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Raghvendra Pratap\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/raghvendrapratap-singh822\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PrestaShop Global JavaScript component","description":"How to use the PrestaShop Global JavaScript component in modern pages. A JavaScript component is a reusable code that\u00a0is created in PrestaShop","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-global-javascript-components-in-prestashop-modern-pages\/","og_locale":"en_US","og_type":"article","og_title":"PrestaShop Global JavaScript component","og_description":"How to use the PrestaShop Global JavaScript component in modern pages. A JavaScript component is a reusable code that\u00a0is created in PrestaShop","og_url":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-05-02T12:57:41+00:00","article_modified_time":"2022-05-02T12:57:49+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png","type":"","width":"","height":""}],"author":"Raghvendra Pratap","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Raghvendra Pratap","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/"},"author":{"name":"Raghvendra Pratap","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d819867cc25c4d70d2d114e78196e7d5"},"headline":"How to use PrestaShop Global JavaScript components in modern pages","datePublished":"2022-05-02T12:57:41+00:00","dateModified":"2022-05-02T12:57:49+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/"},"wordCount":271,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png","keywords":["Global javascript","prestashop","PrestaShop Component"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/","url":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/","name":"PrestaShop Global JavaScript component","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png","datePublished":"2022-05-02T12:57:41+00:00","dateModified":"2022-05-02T12:57:49+00:00","description":"How to use the PrestaShop Global JavaScript component in modern pages. A JavaScript component is a reusable code that\u00a0is created in PrestaShop","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/05\/1-1.png","width":1040,"height":347,"caption":"1-1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-use-global-javascript-components-in-prestashop-modern-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use PrestaShop Global JavaScript components in modern pages"}]},{"@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\/d819867cc25c4d70d2d114e78196e7d5","name":"Raghvendra Pratap","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2aa578a93576e581ac028fb555d206ee963ff164044b165aaff0d6c3e5cfd49a?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\/2aa578a93576e581ac028fb555d206ee963ff164044b165aaff0d6c3e5cfd49a?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Raghvendra Pratap"},"url":"https:\/\/webkul.com\/blog\/author\/raghvendrapratap-singh822\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/332291","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\/431"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=332291"}],"version-history":[{"count":93,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/332291\/revisions"}],"predecessor-version":[{"id":332438,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/332291\/revisions\/332438"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=332291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=332291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=332291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}