Jump to content

Jak rozszerzyć GRID za pomocą rozszerzeń JavaScript we własnym module? PS 1.7.6.8


Recommended Posts

Dzień dobry,

Tworzę moduł w PrestaShop 1.7.6.8 do przetwarzania zgłoszeń serwisowych który posiada swoją tabelę w bazie danych.
Możliwość dodawania zgłoszeń z Front Office przez klienta, rozszerzenie kontrolera ModuleFrontController.
Zarządzanie po stronie Back Office przez rozszerzenie kontrolera FrameworkBundleAdminController.

Akcja index (lista wszystkich zgłoszeń serwisowych) w panelu admina jest oparta o Grid.
Wzorowałem się na podmodule Customers z modułu Sell.

Widok wygląda następująco index.html.twig

{% set layoutHeaderToolbarBtn = {
    'add': {
        'href': path('admin_service_requests_create'),
        'desc': 'Dodaj nowe zgloszenie',
        'icon': 'add_circle_outline'
    }
} %}

{% extends 'PrestaShopBundle:Admin:layout.html.twig' %}

{% block content %}
    {% block service_requests_listing %}
        <div class="row">
            <div class="col-12">
                {% include '@PrestaShop/Admin/Common/Grid/grid_panel.html.twig' with {'grid': serviceRequestGrid} %}
            </div>
        </div>
    {% endblock %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('../modules/gs_service/views/js/admin/service_request/index.js') }}"></script>
    <script src="{{ asset('themes/default/js/bundle/pagination.js') }}"></script>
{% endblock %}

Skrypt index.js (zamiast adminXXX jest poprawna nazwa katalogu)

import Grid from '../../../../../../adminXXX/themes/new-theme/js/components/grid/grid';
import SortingExtension from "../../../../../../adminXXX/themes/new-theme/js/components/grid/extension/sorting-extension";

const $ = window.$;

$(() => {
  const serviceRequestGrid = new Grid('service_request');
  serviceRequestGrid.addExtension(new SortingExtension());
});

W przeglądarce dostaję taki błąd: index.js?1.7.6.8:1 Uncaught SyntaxError: Cannot use import statement outside a module

Próbowałem importować również w ten sposób ale efekt jest taki sam.

import Grid from '@components/grid/grid';
import SortingExtension from "@components/grid/extension/sorting-extension";

Bez tych rozszerzeń nie działa w pełni poprawnie filtrowanie (przycisk wyczyść) oraz sortowanie.
Nic się nie dzieje po naciśnięciu przycisku lub strzałki sortowania.

Jak poprawnie zaimportować Grid i SortExtension w pliku js we własnym module?
Czy jest to możliwe bez Webpack? Jeśli nie to jak do skonfigurować?
W dokumentacji znalazłem tylko to: https://devdocs.prestashop.com/1.7/development/components/grid/tutorials/extend-grid-with-javascript/

Z góry dziękuje za pomoc w rozwiązaniu mojego problemu.

Edited by GS Dawid (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More