Motyw Hummingbird PrestaShop 9: Bootstrap 5, TypeScript i Nowoczesny Frontend

Motyw Hummingbird to nowy domyslny motyw PrestaShop 9, zastepujacy motyw Classic. Zbudowany z Bootstrap 5 i TypeScript, zapewnia szybsze zakupy z natywna obsluga WebP/AVIF i ulepszonym procesem zamowienia.

Co to jest 'M15'?

* M15 * to oficjalny domyślny motyw wysyłany z * M19 * 9. Stanowi ona kompletną odbudowę front-end przy użyciu nowoczesnych technologii internetowych.

Kluczowe cechy techniczne

• * P0 * - zaktualizowany z * M17 * używany w * M22 * motyw. Lepsza siatka, narzędzia i komponenty.
• * P0 * - zastępuje zwykły JavaScript dla lepszego bezpieczeństwa i zachowania
• * P0 * - czystsza struktura CSS, łatwiejsze do obejścia i dostosowania
• * P0 * - nowoczesne formaty obrazów obsługiwane automatycznie dla szybszych obciążeń stron
• * P0 * - * M25 * ładunki asynchroniczne, poprawiające * M9 * wyniki

Poprawa wydajności

* M15 * Temat zdobywa znacznie lepsze wyniki w Google * M5 * w porównaniu do tematu * M22 *:

• Mniejszy rozmiar pakietu CSS dzięki optymalizacji BEM i * M16 *
• Zmniejszony czas blokowania JavaScript
• Better Largest Contentful Paint (* M38 *) via * M30 * images

Ulepszony przepływ wymeldowania

Proces checkout został przeprojektowany w * M15 * z czystszym krok-by-krok UI, mniej rozpraszania, i lepszej mobilnej reakcji - wszystko to ma na celu zmniejszenie porzucenia wózka.

* M15 * vs * M22 * Theme

Czy mogę użyć * M22 * Theme on * M19 * 9?

Tak. * M22 * motyw nadal działa na * M19 * 9, ale nie korzysta z nowych * M30 * / * M31 * rurociąg lub * M15 * optymalizacje wydajności. Jeśli masz niestandardowy motyw oparty na * M22 *, to na ogół będzie nadal pracować z drobnych korekt.

Zasoby powiązane

Przeczytaj nasze * P0 * lub porównaj * P1 *.

Jak dostosować motyw * M15 *

Bezpośrednia modyfikacja plików motywu * M15 jest zniechęcona - aktualizacje nadpisują zmiany. Zalecanym podejściem jest stworzenie * P0 *.

Tworzenie motywu dziecka

1. Kopiuj folder motywu * M15 *: * P0 * → * P1 *
2. Edycja * P0 * i zmiana nazwy i wzorca rodzica
3. Zachowaj tylko pliki, które chcesz nadpisać w temacie dla dziecka - wszystkie pozostałe zostaną zwrócone do rodzica
4. Pomiń CSS dodając swoje style do * P0 *

Override Zmienne CSS

* M15 * wykorzystuje niestandardowe właściwości CSS (zmienne) dla kolorów i odstępów, ułatwiając dostosowanie:

/* In your custom.css */
:root {
  --color-primary: #e63946;        /* Change brand color */
  --color-secondary: #457b9d;
  --font-family-base: "Inter", sans-serif;
  --border-radius-base: 8px;
}

* M15 * vs * M22 * Theme

* P0 *

Zmiana z * M22 * na * M15 *

1. Idź do biura.
2. Zainstaluj motyw * M15 * (pobierz z oficjalnego * M19 * Addons jeśli nie jest wcześniej zainstalowany)
3. * P0 * obok * M15 *
4. Wyczyść wszystkie bufory: Back Office → Zaawansowane parametry → Wydajność → Wyczyść cache
5. Sprawdź dokładnie swój sklep - strony produktów, wymeldowanie, widok na telefon komórkowy

* P0 * If you have a custom child theme based on * M22 *, switching to * M15 * will show the new domyślny design. Będziesz musiał odbudować swoje dostosowania jako motyw dziecka * M15 *.

* M15 * dla deweloperów - struktura klasy BEM

BEM (Block, Element, Modifier) to konwencja nazewnictwa CSS, która sprawia, że arkusze stylów są bardziej przewidywalne i łatwiejsze do obejścia:

/* BEM examples in Hummingbird */
.product-miniature { }                    /* Block */
.product-miniature__title { }             /* Element */
.product-miniature__title--on-sale { }    /* Modifier */

/* Override example */
.product-miniature__price {
  color: var(--color-primary);
  font-weight: 700;
}

Często zadawane pytania

Czy motyw * M22 * jest nadal dostępny w * M19 * 9?

Tak. * M22 * nadal działa w PS9. * M15 * jest nowym domyślnym, ale nie jesteś zmuszony do zmiany. Jednakże, ominie Cię * M30 * / * M31 * support, * M16 *, i ulepszone checkout, które pochodzą z * M15 *.

Czy mogę używać * M17 * komponentów z * M15 *?

* M15 * uses * M16 *, który ma przełomowe zmiany vs * M17 * (zwłaszcza, * M25 * nie jest już wymagane i niektóre nazwy klasy zmienione). * M17 * składniki będą na ogół potrzebować aktualizacji do pracy z * M15 *.

Czy * M15 * działa ze wszystkimi modułami * M19 *?

Większość modułów biurowych działa zarówno z * M22 *, jak i * M15 *. Jednakże moduły, które wstrzykują konkretne klasy tematyczne CSS, mogą wymagać aktualizacji. Sprawdź nasze * P0 * dla szczegółów.

Jak to możliwe?

* M19 * 9 z * M15 * automatycznie generuje * M30 * i * M31 * wersje Twoich obrazów produktów. Temat służy do najlepszego formatu obsługiwanego przez przeglądarkę odwiedzających - nowoczesne przeglądarki otrzymują * M30 * / * M31 *, starsze przeglądarki dostać JPEG / PNG fallback. Konfiguracja nie jest konieczna.