On this weblog, we’ll discover ways to use the Javascript routing element within the PrestaShop again workplace. Because the 1.7.8.0 model, you need to use elements with out importing them. window.prestashop.element the thing is used for this objective.
These are some guidelines to grasp the JS element
i) Reusable elements in BO will probably be accessible globally by way of window.prestashop object.
ii) PrestaShop elements will probably be grouped collectively and made accessible on all pages. So you need to determine on the controller web page which elements have to initialize.
iii) Reusable elements will probably be accessible as a namespace window.prestashop.element.
iv) The namespace will include lessons like this prestashop.element.SomeComponent. If you wish to get a brand new occasion of SomeComponent, you name the brand new prestashop.element.SomeComponent(…params)
v) Reusable elements will probably be accessible as initialized cases by way of window.prestashop.occasion. These cases are initialized with default parameters by the initComponents operate.
vi) A operate initComponents accessible by way of prestashop.element is accountable for constructing window.prestashop.occasion.
Right here, we’re exhibiting the method step-by-step with an instance module ‘wkjsrouting‘
Step 1: Create the module class
Right here, now we have created the module class file “wkjsrouting/wkjsrouting.php“
On this class, we’re initializing the module and redirecting the configuration web page to fashionable web page routes.
<?php
declare(strict_types=1);
use PrestaShopModuleWkJsRoutingInstallInstaller;
if (!outlined('_PS_VERSION_')) {
exit;
}
require_once __DIR__ . '/vendor/autoload.php';
class WkJsRouting extends Module
{
public $tabs = [
[
'class_name' => 'DemoPageController',
'visible' => true,
'name' => 'Demo page',
'parent_class_name' => 'CONFIGURE',
],
];
public operate __construct()
{
$this->title = 'wkjsrouting';
$this->writer = 'Webkul';
$this->model = '1.0.0';
$this->ps_versions_compliancy = ['min' => '1.7.7.0', 'max' => '8.99.99'];
father or mother::__construct();
$this->displayName = $this->l('Demo Module');
$this->description = $this->l('Javascript element Router utilization in BO');
}
/**
* @return bool
*/
public operate set up()
{
if (!father or mother::set up()) {
return false;
}
$installer = new Installer();
return $installer->set up($this);
}
public operate getContent()
{
$moduleAdminLink = Context::getContext()->link->getAdminLink('DemoPageController', true);
Instruments::redirectAdmin($moduleAdminLink);
}
}Step 2: Outline routes
Create routes.yml file contained in the wkjsrouting/config folder
demo_page_index:
path: demo-page/
strategies: [GET]
defaults:
_controller: PrestaShopModuleWkJsRoutingControllerDemoPageController::indexAction
_legacy_controller: 'DemoPageController'
_legacy_link: 'DemoPageController'Step 3: Create a controller to deal with the JS request
Path: wkjsrouting/src/Controller/DemoPageController.php
<?php
declare(strict_types=1);
namespace PrestaShopModuleWkJsRoutingController;
use PrestaShopBundleControllerAdminFrameworkBundleAdminController;
use SymfonyComponentHttpFoundationResponse;
class DemoPageController extends FrameworkBundleAdminController
{
public operate indexAction(): Response
{
return $this->render('@Modules/wkjsrouting/views/templates/admin/demo_page.html.twig');
}
}Step 4: Create an installer class
Path: wkjsrouting/src/Set up/Installer.php
<?php
declare(strict_types=1);
namespace PrestaShopModuleWkJsRoutingInstall;
use Module;
class Installer
{
/**
* Module's set up entry level.
*
* @param Module $module
*
* @return bool
*/
public operate set up(Module $module): bool
{
if (!$this->registerHooks($module)) {
return false;
}
return true;
}
/**
* Register hooks for the module.
*
* @param Module $module
*
* @return bool
*/
personal operate registerHooks(Module $module): bool
{
$hooks = [];
return (bool) $module->registerHook($hooks);
}
}Step 5: Create a view
Twig file demo_page.html.twig, path: wkjsrouting/views/templates/admin/demo_page.html.twig
{% extends '@PrestaShop/Admin/format.html.twig' %}
{% block content material %}
<div>
<div class="form-group">
<div class="row">
<label class="col-lg-3 control-label text-right" for="demo_search_customer">
{{ 'Search buyer'|trans({}, 'Modules.Wkjsrouting.Admin') }}
</label>
<div class="col-lg-6">
<div class="input-group">
<enter sort="textual content" class="form-control" id="demo_search_customer">
<div class="input-group-addon"><button sort="button" class="btn btn-primary" id="demo_search_customer_btn"> {{ 'Search'|trans({}, 'Modules.Wkjsrouting.Admin') }}</button></div>
</div>
</div>
</div>
</div>
</div>
<div id="info-block" class="d-none"></div>
<div id="customers-results" class="d-none">
<desk class="desk table-striped">
<thead>
<tr>
<th>{{ 'E-mail'|trans({}, 'Modules.Wkjsrouting.Admin') }}</th>
<th>{{ 'Full Title'|trans({}, 'Modules.Wkjsrouting.Admin') }}</th>
</tr>
</thead>
<tbody>
</tbody>
</desk>
</div>
{% endblock %}
{% block javascripts %}
{{ father or mother() }}
<script src="https://webkul.com/weblog/how-to-use-js-routing-component-in-prestashop-backoffice/{{ asset("../modules/wkjsrouting/views/js/admin.js') }}"></script>
{% endblock %}Step 6: JS file for routing
This file is accountable to make use of the PrestaShop JS element
Path: wkjsrouting/views/js/admin.js
$(() => {
// initialize the Router element in PS 1.7.8+
if (typeof window.prestashop.element !== 'undefined') { window.prestashop.element.initComponents(['Router']); }
// provoke the search on button click on
$(doc).on('click on', '#demo_search_customer_btn', () => search($('#demo_search_customer').val()));
/**
* Performs ajax request to seek for clients by search phrase
*
* @param searchPhrase
*/
operate search(searchPhrase) {
var route;
var getParams = { 'customer_search': searchPhrase };
if (typeof window.prestashop.element !== 'undefined') {
// use the router element to generate the present route in PS 1.7.8+
route = window.prestashop.occasion.router.generate('admin_customers_search');
} else {
// use pure JS features if PS search route element is unavailable
const locationSearch = new URLSearchParams(window.location.search);
const locationPathname = window.location.pathname.cut up('/');
for (const param of locationSearch) {
if (param[0] === '_token') getParams[param[0]] = param[1];
}
route = `${locationPathname[0]}/${locationPathname[1]}/promote/clients/search`;
}
// use the ajax request to get clients
$.get(route, getParams
// render the purchasers
).then((information) => renderResults(information));
}
/**
* Renders the outcomes block
*
* @param {Object} information
*/
operate renderResults(information) {
var $infoBlock = $('#info-block')
$infoBlock.addClass('d-none').empty();
var $resultsBlock = $('#customers-results');
var $resultsBody = $('#customers-results tbody');
if (information.discovered === false) {
$infoBlock.textual content('No clients discovered').removeClass('d-none');
$resultsBlock.addClass('d-none');
$resultsBody.empty();
return;
}
$resultsBlock.removeClass('d-none');
$resultsBody.empty();
for (const id in information.clients) {
const buyer = information.clients[id];
$resultsBody.append(`<tr><td>${buyer.e mail}</td><td>${buyer.firstname} ${buyer.lastname}</td></tr>`);
}
}
});Step 7: Create a composer.json file to put in the dependency
{
"title": "prestashop/wkjsrouting",
"description": "Demo Module",
"license": "AFL-3.0",
"authors": [{
"name": "Webkul"
},
{
"name": "dev"
}
],
"autoload": {
"psr-4": {
"PrestaShopModuleWkJsRouting": "src/"
},
"config": {
"prepend-autoloader": false
},
"sort": "prestashop-module"
}
}Step 8: Set up
Copy created a module on the modules listing of PrestaShop and run the composer command composer set up to put in all dependencies. The whole module folder construction is hooked up within the screenshot.
After putting in the module, click on on configure button, and you’ll capable of see the search web page and search clients by title.
That’s all about this weblog.
If any points or doubts please be happy to say them within the remark part.
I’d be comfortable to assist.
Additionally, you may discover our PrestaShop Growth Companies & a wide range of high quality PrestaShop Modules.
