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
| Cecha | * M22 * (PS8) | * M15 * (PS9) |
|---|---|---|
| Ramy CSS | * M17 * | * M16 * |
| JavaScript | Plain JS | * M20 * |
| Formaty obrazków | JPG / PNG | * M30 *, * M31 *, JPG, PNG |
| Metodologia CSS | Mieszane | BEM |
| * M25 * Ładowanie | Synchroniczne | Odroczone (async) |
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
- Kopiuj folder motywu * M15 *: * P0 * → * P1 *
- Edycja * P0 * i zmiana nazwy i wzorca rodzica
- Zachowaj tylko pliki, które chcesz nadpisać w temacie dla dziecka - wszystkie pozostałe zostaną zwrócone do rodzica
- 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
| Metric | * M22 * Theme (PS8) | * M15 * (PS9) |
|---|---|---|
| Mobile Performance Score | ~55–65 | ~75–85 |
| Największa Contentful Paint (* M38 *) | ~3.5s | ~2.2s |
| Całkowity czas blokowania (TBT) | - 450ms | - 180ms |
| Rozmiar zestawu CSS | - 180KB | ~ 120KB (zoptymalizowany BEM) |
| JavaScript (początkowe obciążenie) | - 280KB | ~ 200KB (odroczone) |
| * M30 * Wsparcie | Tylko ręcznie | Automatyczne |
* P0 *
Zmiana z * M22 * na * M15 *
- Idź do biura.
- Zainstaluj motyw * M15 * (pobierz z oficjalnego * M19 * Addons jeśli nie jest wcześniej zainstalowany)
- * P0 * obok * M15 *
- Wyczyść wszystkie bufory: Back Office → Zaawansowane parametry → Wydajność → Wyczyść cache
- 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.