PrestaShop 8.2 wyrównanie checkboxów, gwiazdki pól wymaganych i warianty w podsumowaniu (krok płatności)

Ten przewodnik krok-po-kroku pokaże Ci, jak bez programowania poprawić checkout w PrestaShop 8.2 (Classic): wyrównać checkboxy „zgód” do lewej, dodać czerwoną gwiazdkę przy polach wymaganych oraz wyświetlić wybraną kombinację/atrybuty produktu w kroku płatności.

WAŻNE: Zanim cokolwiek zmienisz, zrób kopię zapasową edytowanych plików motywu. Pobierz je przez FTP (np. FileZilla) i odłóż na dysk. To minuta pracy, a ratuje w razie pomyłki.

---

Spis treści

1. Podpięcie własnego JavaScriptu w PrestaShop Classic
2. Wyrównanie checkboxów „zgód” do lewej i redukcja odstępów
3. „* Pole wymagane” pod formularzem klienta
4. Gwiazdka przy akceptacji regulaminu w kroku płatności
5. Wariant/atrybuty produktu w tabeli podsumowania (krok 4)
6. Czyszczenie cache, testy i typowe pułapki

---

1) Podpięcie własnego JavaScriptu w PrestaShop Classic

Krok 1: utwórz plik JS

Na serwerze (FTP) dodaj plik:

themes/classic/assets/js/custom.js

W tym pliku umieszczaj czysty kod JS (bez tagów <script>…</script>).

Krok 2: zarejestruj plik w motywie

Otwórz plik:

themes/classic/config/theme.yml

Dodaj sekcję, która ładuje Twój skrypt globalnie:

assets:
  js:
    all:
      - id: custom-js
        path: assets/js/custom.js

---

2) Wyrównanie checkboxów „zgód” do lewej (pełna szerokość) + redukcja odstępów

Poniższy kod ustawia wiersze zgód na pełną szerokość, ukrywa puste etykiety/komentarze i dodaje klasę pomocniczą do ciaśniejszych odstępów.

Dodaj na koniec pliku custom.js:

document.addEventListener('DOMContentLoaded', function () {
  // 2.1) Rozciągnij wiersze z checkboxami zgód na pełną szerokość
  document.querySelectorAll('#customer-form .form-group.row').forEach(function(group){
    const cb = group.querySelector('.custom-checkbox input[type="checkbox"]');
    if (!cb) return;

```
const labelCol   = group.querySelector('.form-control-label');
const inputCol   = group.querySelector('.js-input-column');
const commentCol = group.querySelector('.form-control-comment');

if (labelCol)   { labelCol.className   = 'col-md-12 form-control-label d-none'; }
if (inputCol)   { inputCol.className   = 'col-md-12 js-input-column'; }
if (commentCol && !commentCol.textContent.trim()) {
  commentCol.classList.add('is-empty-comment');
}
```

});

// 2.2) Dodaj gwiazdki do wymaganych zgód (po ikonie, przed tekstem)
document.querySelectorAll('#customer-form .custom-checkbox input\[required]').forEach(function (input) {
const label = input.closest('label');
const iconSpan = input.nextElementSibling; // \ z kwadratem/ptaszkiem
if (!label || !iconSpan) return;

```
label.querySelectorAll('.required-star').forEach(el => el.remove());

const star = document.createElement('span');
star.className = 'required-star';
star.textContent = '*';

// wstaw PO ikonie – będzie przed tekstem zgody
label.insertBefore(star, iconSpan.nextSibling);
```

});

// 2.3) Oznacz wiersze zgód (przyda się w CSS do marginesów)
document.querySelectorAll('#customer-form .form-group.row').forEach(function (group) {
if (group.querySelector('.custom-checkbox input\[type="checkbox"]')) {
group.classList.add('consent-row');
}
});
});

Dodaj do arkusza CSS (np. themes/classic/assets/css/custom.css albo „Dodatkowy CSS” w BO):

/* schowaj puste komentarze w wierszach zgód */
#customer-form .form-control-comment.is-empty-comment { display: none; }

/\* wygląd czerwonej gwiazdki \*/
.required-star{
display\:inline-block;
margin-left:6px;
margin-right:6px;
color:#dc3545;
font-weight:700;
line-height:1;
vertical-align\:middle;
}

/\* (opcjonalnie) ciaśniej między zgodami \*/
\#customer-form .form-group.row\.consent-row { margin-bottom: .5rem; }

---

3) „* Pole wymagane” pod formularzem klienta

Najczyściej umieścić notkę w stopce formularza, obok przycisku. Edytujemy plik Smarty.

Plik:

themes/classic/templates/customer/_partials/customer-form.tpl

W stopce (wewnątrz bloku {block name='customer_form_footer'}) wstaw akapit przed blokiem z przyciskiem:

{block name='customer_form_footer'}
  <footer class="form-footer clearfix">
    <input type="hidden" name="submitCreate" value="1">

```
{* notka o polach wymaganych *}
<p class="form-required-note text-muted float-xs-left m-0">* Pole wymagane</p>

{block "form_buttons"}
  <button class="btn btn-primary form-control-submit float-xs-right" data-link-action="save-customer" type="submit">
    {l s='Save' d='Shop.Theme.Actions'}
  </button>
{/block}
```

\
{/block}

Alternatywnie (bez edycji TPL) możesz dodać notkę tylko na checkoutcie samym CSS-em:

body#checkout .js-customer-form::after {
  content: "* Pole wymagane";
  display: block;
  margin-top: .75rem;
  font-size: .875rem;
  color: #6c757d;
}

---

4) Gwiazdka przy akceptacji regulaminu w kroku płatności

Krok płatności (sekcja #checkout-payment-step) potrafi się przeładowywać dynamicznie. Dodamy gwiazdkę JS-em i odświeżymy ją po zmianach checkoutu.

Dopisz na koniec custom.js:

// Gwiazdka przy akceptacji regulaminu w kroku płatności
(function () {
  function addPaymentStar() {
    const step = document.querySelector('#checkout-payment-step');
    if (!step) return;

```
step.querySelectorAll('#conditions-to-approve label, .conditions-to-approve label').forEach(function (label) {
  if (label.querySelector('.required-star')) return;

  const input = label.querySelector('input[type="checkbox"]');
  const iconSpan = input ? input.nextElementSibling : null;

  const star = document.createElement('span');
  star.className = 'required-star';
  star.textContent = '*';

  if (iconSpan && iconSpan.tagName === 'SPAN') {
    label.insertBefore(star, iconSpan.nextSibling);
  } else {
    label.prepend(star);
  }
});
```

}

document.addEventListener('DOMContentLoaded', addPaymentStar);
// Presta potrafi re-renderować krok płatności (AJAX) – dodaj ponownie
document.addEventListener('updatedCheckout', addPaymentStar);
})();

Styl klasy .required-star masz już dodany w sekcji CSS wyżej.

---

5) Wariant/atrybuty produktu w tabeli podsumowania (krok 4)

Chodzi o sekcję #checkout-payment-step i blok .order-confirmation-table. Dodamy wyświetlanie atrybutów (np. rozmiar, kolor) pod nazwą produktu.

Plik:

themes/classic/templates/checkout/_partials/order-confirmation-table.tpl

W pętli produktów, tuż pod nazwą ({$product.name}), wstaw ten blok:

{assign var=attrs value=$product.attributes_small|default:$product.attributes}
{if $attrs}
  <div class="product-variants text-muted small">{$attrs nofilter}</div>
{/if}

(Używamy nofilter, bo atrybuty często zawierają wstawione przełamania linii <br/>.)

Opcjonalnie, drobny styl, by wariant był delikatniejszy i bliżej nazwy:

.order-confirmation-table .product-variants{
  margin-top:.25rem;
  font-size:.875rem;
  color:#6c757d;
}

---

6) Czyszczenie cache, testy i typowe pułapki

1. W panelu: Zaawansowane → Wydajność → Wyczyść pamięć podręczną.
2. Na czas testów włącz „Kompiluj szablony”.
3. Odśwież stronę „na twardo” (Ctrl/Cmd + F5).
4. Sprawdź w Konsoli przeglądarki, czy nie ma błędów JS i czy custom.js się ładuje.

Najczęstsze pułapki

• custom.js się nie ładuje — sprawdź wcięcia w theme.yml i upewnij się, że w pliku JS nie ma tagów <script>.
• Gwiazdka „wpada” w kwadrat checkboxa — wstawiaj ją po elemencie ikony: label.insertBefore(star, iconSpan.nextSibling).
• Za duże odstępy — dodaj klasę is-empty-comment w JS i ukryj w CSS puste .form-control-comment.
• Nie widać zmian w TPL — włącz kompilację szablonów i wyczyść cache.

---

Podsumowanie

Dzięki kilku bezpiecznym poprawkom w JS/CSS oraz jednej modyfikacji szablonu, uporządkujesz layout zgód, wyróżnisz pola wymagane gwiazdką i pokażesz kombinacje produktów w kroku płatności. Zawsze wykonuj kopię zapasową plików i pracuj przez FTP (np. FileZilla), aby mieć pełną kontrolę nad zmianami.