Jump to content

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


GS Dawid

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)
Link to comment
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...