{"id":389095,"date":"2023-06-30T12:13:02","date_gmt":"2023-06-30T12:13:02","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=389095"},"modified":"2023-06-30T12:13:09","modified_gmt":"2023-06-30T12:13:09","slug":"how-to-use-js-routing-component-in-prestashop-backoffice","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/","title":{"rendered":"How to use JS routing component in PrestaShop Backoffice"},"content":{"rendered":"\n

In this blog, we will learn how to use the Javascript routing component in the PrestaShop back office. Since the 1.7.8.0 version, you can use components without importing them. window.prestashop.component<\/strong><\/code> the object is used for this purpose.
These are some rules to understand the JS component<\/a><\/p>\n\n\n\n

i) Reusable components in BO will be available globally through window.prestashop<\/strong> object.<\/p>\n\n\n\n

ii) PrestaShop components will be grouped together and made available on all pages. So you have to decide on the controller page which components need to initialize.<\/p>\n\n\n\n

iii) Reusable components will be available as a namespace window.prestashop.component<\/strong>.<\/p>\n\n\n\n

iv) The namespace will contain classes like this prestashop.component.SomeComponent<\/strong>. If you want to get a new instance of SomeComponent, you call the new prestashop.component.SomeComponent(…params)<\/strong><\/p>\n\n\n\n

v) Reusable components will be available as initialized instances through window.prestashop.instance<\/strong>. These instances are initialized with default parameters by the initComponents<\/a><\/strong> function.<\/p>\n\n\n\n

vi) A function initComponents<\/strong> available through prestashop.component<\/strong> is responsible for building window.prestashop.instance<\/strong>.<\/p>\n\n\n\n

Here, we are showing the process step by step with an example module \u2018wkjsrouting<\/strong>\u2018<\/p>\n\n\n\n

Step 1:<\/strong> Create the module class<\/strong><\/p>\n\n\n\n

Here, we have created the module class file \u201cwkjsrouting\/wkjsrouting.php<\/strong>\u201c<\/p>\n\n\n\n

In this class, we are initializing the module and redirecting the configuration page to modern page routes.<\/p>\n\n\n\n

<?php\ndeclare(strict_types=1);\n\nuse PrestaShop\\Module\\WkJsRouting\\Install\\Installer;\n\nif (!defined('_PS_VERSION_')) {\n    exit;\n}\n\nrequire_once __DIR__ . '\/vendor\/autoload.php';\n\nclass WkJsRouting extends Module\n{\n    public $tabs = [\n        [\n            'class_name' => 'DemoPageController',\n            'visible' => true,\n            'name' => 'Demo page',\n            'parent_class_name' => 'CONFIGURE',\n        ],\n    ];\n\n    public function __construct()\n    {\n        $this->name = 'wkjsrouting';\n        $this->author = 'Webkul';\n        $this->version = '1.0.0';\n        $this->ps_versions_compliancy = ['min' => '1.7.7.0', 'max' => '8.99.99'];\n\n        parent::__construct();\n\n        $this->displayName = $this->l('Demo Module');\n        $this->description = $this->l('Javascript component Router usage in BO');\n    }\n\n    \/**\n     * @return bool\n     *\/\n    public function install()\n    {\n        if (!parent::install()) {\n            return false;\n        }\n\n        $installer = new Installer();\n\n        return $installer->install($this);\n    }\n\n    public function getContent()\n    {\n        $moduleAdminLink = Context::getContext()->link->getAdminLink('DemoPageController', true);\n        Tools::redirectAdmin($moduleAdminLink);\n    }\n}<\/pre>\n\n\n\n
Step 2<\/strong>: Define routes<\/strong>
Create routes.yml file inside the wkjsrouting\/config folder<\/p>\n\n\n\n
demo_page_index:\n    path: demo-page\/\n    methods: [GET]\n    defaults:\n        _controller: PrestaShop\\Module\\WkJsRouting\\Controller\\DemoPageController::indexAction\n        _legacy_controller: 'DemoPageController'\n        _legacy_link: 'DemoPageController'<\/pre>\n\n\n\n
Step 3: Create a controller to handle the<\/strong> JS request<\/strong> <\/p>\n\n\n\n
Path: wkjsrouting\/src\/Controller\/DemoPageController.php<\/p>\n\n\n\n
<?php\n\ndeclare(strict_types=1);\n\nnamespace PrestaShop\\Module\\WkJsRouting\\Controller;\n\nuse PrestaShopBundle\\Controller\\Admin\\FrameworkBundleAdminController;\nuse Symfony\\Component\\HttpFoundation\\Response;\n\nclass DemoPageController extends FrameworkBundleAdminController\n{\n    public function indexAction(): Response\n    {\n        return $this->render('@Modules\/wkjsrouting\/views\/templates\/admin\/demo_page.html.twig');\n    }\n}<\/pre>\n\n\n\n
Step 4: <\/strong> Create an installer class<\/strong><\/p>\n\n\n\n
Path: wkjsrouting\/src\/Install\/Installer.php<\/p>\n\n\n\n
<?php\n\ndeclare(strict_types=1);\n\nnamespace PrestaShop\\Module\\WkJsRouting\\Install;\n\nuse Module;\n\nclass Installer\n{\n    \/**\n     * Module's installation entry point.\n     *\n     * @param Module $module\n     *\n     * @return bool\n     *\/\n    public function install(Module $module): bool\n    {\n        if (!$this->registerHooks($module)) {\n            return false;\n        }\n\n        return true;\n    }\n\n    \/**\n     * Register hooks for the module.\n     *\n     * @param Module $module\n     *\n     * @return bool\n     *\/\n    private function registerHooks(Module $module): bool\n    {\n        $hooks = [];\n\n        return (bool) $module->registerHook($hooks);\n    }\n}<\/pre>\n\n\n\n
Step 5:<\/strong> Create a view<\/strong><\/p>\n\n\n\n
Twig file\u00a0demo_page.html.twig,\u00a0<\/strong>path: wkjsrouting\/views\/templates\/admin\/demo_page.html.twig<\/p>\n\n\n\n
{% extends '@PrestaShop\/Admin\/layout.html.twig' %}\n\n{% block content %}\n  <div>\n    <div class="form-group">\n\t\t\t<div class="row">\n\t\t\t\t<label class="col-lg-3 control-label text-right" for="demo_search_customer">\n          {{ 'Search customer'|trans({}, 'Modules.Wkjsrouting.Admin') }}\n\t\t\t\t<\/label>\n\t\t\t\t<div class="col-lg-6">\n          <div class="input-group">\n            <input type="text" class="form-control" id="demo_search_customer">\n            <div class="input-group-addon"><button type="button" class="btn btn-primary" id="demo_search_customer_btn"> {{ 'Search'|trans({}, 'Modules.Wkjsrouting.Admin') }}<\/button><\/div>\n          <\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n  <\/div>\n  <div id="info-block" class="d-none"><\/div>\n  <div id="customers-results" class="d-none">\n    <table class="table table-striped">\n      <thead>\n        <tr>\n          <th>{{ 'Email'|trans({}, 'Modules.Wkjsrouting.Admin') }}<\/th>\n          <th>{{ 'Full Name'|trans({}, 'Modules.Wkjsrouting.Admin') }}<\/th>\n        <\/tr>\n      <\/thead>\n      <tbody>\n      <\/tbody>\n    <\/table>\n  <\/div>\n{% endblock %}\n\n{% block javascripts %}\n  {{ parent() }}\n  <script src="{{ asset('..\/modules\/wkjsrouting\/views\/js\/admin.js') }}"><\/script>\n{% endblock %}<\/pre>\n\n\n\n
Step 6: JS file for routing<\/strong><\/p>\n\n\n\n
This file is responsible to use the PrestaShop JS component<\/p>\n\n\n\n
Path: wkjsrouting\/views\/js\/admin.js<\/p>\n\n\n\n
$(() => {\n    \/\/ initialize the Router component in PS 1.7.8+ \n    if (typeof window.prestashop.component !== 'undefined') { window.prestashop.component.initComponents(['Router']); }\n\n    \/\/ initiate the search on button click\n    $(document).on('click', '#demo_search_customer_btn', () => search($('#demo_search_customer').val()));\n\n    \/**\n     * Performs ajax request to search for customers by search phrase\n     *\n     * @param searchPhrase\n     *\/\n    function search(searchPhrase) {\n        var route;\n        var getParams = { 'customer_search': searchPhrase };\n\n        if (typeof window.prestashop.component !== 'undefined') {\n            \/\/ use the router component to generate the existing route in PS 1.7.8+\n            route = window.prestashop.instance.router.generate('admin_customers_search');\n        } else {\n            \/\/ use pure JS functions if PS search route component is unavailable\n            const locationSearch = new URLSearchParams(window.location.search);\n            const locationPathname = window.location.pathname.split('\/');\n\n            for (const param of locationSearch) {\n                if (param[0] === '_token') getParams[param[0]] = param[1];\n            }\n            route = `${locationPathname[0]}\/${locationPathname[1]}\/sell\/customers\/search`;\n        }\n\n        \/\/ use the ajax request to get customers\n        $.get(route, getParams\n            \/\/ render the customers\n        ).then((data) => renderResults(data));\n    }\n\n    \/**\n     * Renders the results block\n     *\n     * @param {Object} data\n     *\/\n    function renderResults(data) {\n        var $infoBlock = $('#info-block')\n        $infoBlock.addClass('d-none').empty();\n        var $resultsBlock = $('#customers-results');\n        var $resultsBody = $('#customers-results tbody');\n\n        if (data.found === false) {\n            $infoBlock.text('No customers found').removeClass('d-none');\n            $resultsBlock.addClass('d-none');\n            $resultsBody.empty();\n\n            return;\n        }\n\n        $resultsBlock.removeClass('d-none');\n        $resultsBody.empty();\n\n        for (const id in data.customers) {\n            const customer = data.customers[id];\n            $resultsBody.append(`<tr><td>${customer.email}<\/td><td>${customer.firstname} ${customer.lastname}<\/td><\/tr>`);\n        }\n    }\n});<\/pre>\n\n\n\n
Step 7: Create a composer.json file to install the dependency<\/strong><\/p>\n\n\n\n
{\n    "name": "prestashop\/wkjsrouting",\n    "description": "Demo Module",\n    "license": "AFL-3.0",\n    "authors": [{\n            "name": "Webkul"\n        },\n        {\n            "name": "dev"\n        }\n    ],\n    "autoload": {\n        "psr-4": {\n            "PrestaShop\\\\Module\\\\WkJsRouting\\\\": "src\/"\n        },\n        "config": {\n            "prepend-autoloader": false\n        },\n        "type": "prestashop-module"\n    }\n}<\/pre>\n\n\n\n
Step 8:<\/strong> Installation<\/strong><\/p>\n\n\n\n
Copy created a module on the modules directory of PrestaShop and run the composer command composer install<\/strong> to install all dependencies. The complete module folder structure is attached in the screenshot.<\/p>\n\n\n\n
\"folder_structure\"<\/figure>\n\n\n\n
After installing the module, click on configure button, and you will able to see the search page and search customers by name.<\/p>\n\n\n\n
\"output\"<\/figure>\n\n\n\n
\"routing_results\"<\/figure>\n\n\n\n
That\u2019s all about this blog.<\/p>\n\n\n\n
If any issues or doubts please feel free to mention them in the comment section.<\/p>\n\n\n\n
I would be happy to help.<\/p>\n\n\n\n
Also, you can explore our PrestaShop Development Services<\/a> & a large range of quality PrestaShop Modules<\/a>.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we will learn how to use the Javascript routing component in the PrestaShop back office. Since the 1.7.8.0 version, you can use components without importing them. window.prestashop.component the object is used for this purpose.These are some rules to understand the JS component i) Reusable components in BO will be available globally through […]<\/a><\/p>\n","protected":false},"author":388,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[209,1],"tags":[2065,4126,14458,2710],"class_list":["post-389095","post","type-post","status-publish","format-standard","hentry","category-prestashop","category-uncategorized","tag-prestashop","tag-prestashop-1-7","tag-prestashop-8","tag-symfony"],"yoast_head":"\nHow to use JS routing component in PrestaShop Backoffice - 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-js-routing-component-in-prestashop-backoffice\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use JS routing component in PrestaShop Backoffice - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog, we will learn how to use the Javascript routing component in the PrestaShop back office. Since the 1.7.8.0 version, you can use components without importing them. window.prestashop.component the object is used for this purpose.These are some rules to understand the JS component i) Reusable components in BO will be available globally through [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/\" \/>\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=\"2023-06-30T12:13:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-30T12:13:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/folder_structure.png\" \/>\n<meta name=\"author\" content=\"Amit Kumar Tiwari\" \/>\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=\"Amit Kumar Tiwari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 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-js-routing-component-in-prestashop-backoffice\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/\"},\"author\":{\"name\":\"Amit Kumar Tiwari\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d9ce9e306c32df23a286ed9b5eb81257\"},\"headline\":\"How to use JS routing component in PrestaShop Backoffice\",\"datePublished\":\"2023-06-30T12:13:02+00:00\",\"dateModified\":\"2023-06-30T12:13:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/\"},\"wordCount\":411,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/folder_structure.png\",\"keywords\":[\"prestashop\",\"Prestashop 1.7\",\"Prestashop 8\",\"symfony\"],\"articleSection\":[\"prestashop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/\",\"name\":\"How to use JS routing component in PrestaShop Backoffice - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/folder_structure.png\",\"datePublished\":\"2023-06-30T12:13:02+00:00\",\"dateModified\":\"2023-06-30T12:13:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/folder_structure.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/folder_structure.png\",\"width\":279,\"height\":435,\"caption\":\"folder_structure\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use JS routing component in PrestaShop Backoffice\"}]},{\"@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\/d9ce9e306c32df23a286ed9b5eb81257\",\"name\":\"Amit Kumar Tiwari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0bfab402e3d85cb3f1ed4fbac60ad1c4532edd47917a00da0f77d94c75b54f7d?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\/0bfab402e3d85cb3f1ed4fbac60ad1c4532edd47917a00da0f77d94c75b54f7d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Amit Kumar Tiwari\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/amitkr-tiwari139\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use JS routing component in PrestaShop Backoffice - 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-js-routing-component-in-prestashop-backoffice\/","og_locale":"en_US","og_type":"article","og_title":"How to use JS routing component in PrestaShop Backoffice - Webkul Blog","og_description":"In this blog, we will learn how to use the Javascript routing component in the PrestaShop back office. Since the 1.7.8.0 version, you can use components without importing them. window.prestashop.component the object is used for this purpose.These are some rules to understand the JS component i) Reusable components in BO will be available globally through [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-06-30T12:13:02+00:00","article_modified_time":"2023-06-30T12:13:09+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/folder_structure.png","type":"","width":"","height":""}],"author":"Amit Kumar Tiwari","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Amit Kumar Tiwari","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/"},"author":{"name":"Amit Kumar Tiwari","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d9ce9e306c32df23a286ed9b5eb81257"},"headline":"How to use JS routing component in PrestaShop Backoffice","datePublished":"2023-06-30T12:13:02+00:00","dateModified":"2023-06-30T12:13:09+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/"},"wordCount":411,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/folder_structure.png","keywords":["prestashop","Prestashop 1.7","Prestashop 8","symfony"],"articleSection":["prestashop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/","url":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/","name":"How to use JS routing component in PrestaShop Backoffice - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/folder_structure.png","datePublished":"2023-06-30T12:13:02+00:00","dateModified":"2023-06-30T12:13:09+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/folder_structure.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/folder_structure.png","width":279,"height":435,"caption":"folder_structure"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-use-js-routing-component-in-prestashop-backoffice\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use JS routing component in PrestaShop Backoffice"}]},{"@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\/d9ce9e306c32df23a286ed9b5eb81257","name":"Amit Kumar Tiwari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0bfab402e3d85cb3f1ed4fbac60ad1c4532edd47917a00da0f77d94c75b54f7d?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\/0bfab402e3d85cb3f1ed4fbac60ad1c4532edd47917a00da0f77d94c75b54f7d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Amit Kumar Tiwari"},"url":"https:\/\/webkul.com\/blog\/author\/amitkr-tiwari139\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/389095","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\/388"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=389095"}],"version-history":[{"count":18,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/389095\/revisions"}],"predecessor-version":[{"id":389231,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/389095\/revisions\/389231"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=389095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=389095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=389095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}