PrestaShop + Creative Elements: jak naprawić niedziałający modal koszyka (bez aktualizacji modułu)

W starszych wersjach Creative Elements (Elementor dla PrestaShop) występował uciążliwy problem: po dodaniu produktu do koszyka modal z podsumowaniem nie działał poprawnie.

Efekty były różne:

klient był automatycznie przekierowywany do checkoutu,
albo modal się otwierał, ale nie można go było zamknąć (X i „Kontynuuj zakupy” nie działały, a tło pozostawało przyciemnione).

1. Poprawne ustawienia w Creative Elements

Najpierw musimy upewnić się, że CE w ogóle pozwala Preście otworzyć modal. W edytorze Creative Elements → Header Template:

znajdź widget Shopping Cart i ustaw:
- Add to Cart Action = Add to Cart (nie „Buy Now”),
- włącz przełącznik Show Modal.
jeżeli masz aktywny „Sidebar” koszyka → wyłącz go lub ustaw Skin = Classic.

2. Poprawne hooki w Preście

Sam modal to część modułu ps_shoppingcart, który musi być wpięty w odpowiednie miejsce. Sprawdź w Design → Positions, że:

ps_shoppingcart jest przypisany do displayAfterBodyOpeningTag (to zapewnia, że element #blockcart-modal pojawia się w DOM od razu po <body>).

3. Fix w JavaScript

Jeżeli powyższe jest ustawione, modal pojawia się, ale w starszych CE nie działa zamykanie. Wtedy dodajemy własną obsługę zamykania w pliku custom.js (lub w tym samym widget HTML).


// HARD CLOSE: poprawka modala koszyka dla starszych wersji Creative Elements
(function () {
  function closeAllModals() {
    document.querySelectorAll('.modal.show, .modal[style*="display: block"]').forEach(function (m) {
      m.classList.remove('show', 'in');
      m.style.display = 'none';
      m.setAttribute('aria-hidden', 'true');
    });
    document.querySelectorAll('.modal-backdrop').forEach(function (bd) { bd.remove(); });
    document.body.classList.remove('modal-open');
    document.body.style.removeProperty('padding-right');
  }

  document.addEventListener('click', function (e) {
    if (
      e.target.closest('#blockcart-modal .close') ||
      e.target.closest('#blockcart-modal .btn.btn-secondary')
    ) {
      e.preventDefault();
      e.stopPropagation();
      closeAllModals();
    }
  }, true);

  document.addEventListener('click', function (e) {
    if (e.target.classList && e.target.classList.contains('modal-backdrop')) {
      e.preventDefault();
      e.stopPropagation();
      closeAllModals();
    }
  }, true);

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      closeAllModals();
    }
  }, true);
})();

4. Dlaczego to działa?

Creative Elements blokuje data-dismiss="modal", które normalnie obsługuje zamykanie. Nasz skrypt ignoruje ten atrybut i ręcznie chowa modal: usuwa klasy .show, display:block, modal-open i wszystkie modal-backdrop. Dzięki temu modal zamyka się w całości na X, „Kontynuuj zakupy”, ESC i klik w tło.

Podsumowanie

W Creative Elements ustaw w koszyku Add to Cart Action = Add to Cart i Show Modal = ON.
Upewnij się w Design → Positions, że ps_shoppingcart jest wpięty do displayAfterBodyOpeningTag.
Dodaj fix JS (powyżej) w custom.js lub w widżecie HTML w CE.

To rozwiązanie przywróci poprawne działanie popupu koszyka i poprawi UX sklepu – bez konieczności natychmiastowej aktualizacji Creative Elements. Docelowo warto rozważyć aktualizację, bo nowsze wersje mają już naprawiony problem natywnie.