Blog

  • Zmiana kolejności produktów powiązanych (related) – Moduł PrestaShop

    Domyślnie w PrestaShop produkty powiązane (related) są sortowane według ich ID w bazie danych. Dla większości sklepów jest to wystarczające, ale w przypadku niestandardowych rozwiązań oczekiwaniem właściciela sklepu może być możliwość ręcznego ustalania kolejności produktów.

    Dlaczego standardowe sortowanie może być niewystarczające?

    Kolejność według ID nie zawsze odzwierciedla strategię sprzedaży. Czasami produkty powiązane są wykorzystywane jako komplementarne. Produkty starsze (z niższym ID) mogą być już niedostępne lub po prostu warte zaproponowania są produkty nowsze.

    Reasumując – często jest potrzeba określone produkty powiązane wyswietlać w pierwszej kolejności.

    Darmowe rozwiązanie – Moduł sortablerelated

    Na GitHub dostępny jest darmowy moduł , który umożliwia ręczne sortowanie produktów powiązanych.

    https://github.com/SqrtLewy/sortablerelated

    Moduł jest kompatybilny z PrestaShop 1.7 oraz PrestaShop 8 (oraz z Product Page V2).

    Po zainstalowaniu modułu kolejność produktów będzie można zmieniać za pomocą drag&drop.

  • Magento 2 – jak wyświetlić blok CMS w pliku PHTML

    W Magento 2 bloki CMS najczęściej używane są bezpośrednio w layoutach XML, jednak czasami zachodzi potrzeba wyświetlenia bloku CMS bezpośrednio w pliku PHTML np. przy warunkowej logice. W tym wpisie przybliżymy jak poprawnie wywołać blok CMS w plikach .phtml.

    Wyświetlanie bloku CMS w .phtml

    <?php
    echo $this->getLayout()
    ->createBlock('Magento\Cms\Block\Block')
    ->setBlockId('id_bloku_cms')
    ->toHtml();
    ?>

    W miejscu „id_bloku_cms” podajemy ID bloku statycznego CMS. Ważne – wprowadzamy identyfikator ustalony po stronie panelu, nie ID z bazy danych.

    Wywołanie bloku CMS na stronie CMS

    Jeśli blok CMS ma być użyty wewnątrz treści strony CMS, należy skorzystać z dyrektywy:

    {{block class="Magento\\Cms\\Block\\Block" block_id="id_bloku_cms"}}

    Wywołanie statycznego bloku CMS za pomocą pliku xml

    <referenceContainer name="product.info.main"> 
        <block class="Magento\Cms\Block\Block" name="block_identifier"> 
            <arguments> 
                <argument name="block_id" xsi:type="string">id_bloku</argument> 
            </arguments> 
        </block> 
    </referenceContainer>
    Czy można wywołać blok CMS warunkowo?

    Tak. W pliku .phtml możesz dodać dowolną logikę PHP np. sprawdzenie: typu produktu, danej cechy produktu, atrybutu klienta itd.).

    Czy to rozwiązanie działa w Magento 2.4.x?

    Tak. Wszystkie opisane metody są zgodne z każdą wersją Magento 2.

    Dlaczego zamiast statycznego HTMLa warto użyć bloku CMS?

    Ponieważ treść umieszczona w bloku CMS nie wymaga deployu kodu po zmianie i może być dowolnie modyfikowana przez administratora (bezpośrednio z poziomu panelu).

  • <meta name=”theme-color”> – Mała zmiana, przyjemny efekt

    Meta tag <meta name=”theme-color”> pozwala kontrolować kolor elementów interfejsu przeglądarki (takich jak pasek adresu), szczególnie na urządzeniach mobilnych – działa w przeglądarkach opartych o Chromium, np. Google Chrome na Androidzie. Tag meta umieszczamy w sekcji head strony internetowej.

    Poniżej przykład dla koloru #202020:

    <meta name="theme-color" content="#202020" />

    Poniżej zrzut ekranu:

    Warto dodać do swoich projektów – tym bardziej, że jest to tylko jedna linia kodu. Chyba, że strona obsługuje tryb light/dark – wtedy dwie linie – można ustawić kolor per tryb za pomocą tagu media:

    <meta  name="theme-color" content="#202020" media="(prefers-color-scheme: dark)" />
    
    <meta name="theme-color" content="#cccccc" media="(prefers-color-scheme: light)" />
    Czy meta theme-color wpływa na SEO?

    Bezpośrednio nie, ale poprawia estetykę strony mobilnej, co pośrednio może wpłynąć na zaangażowanie użytkowników.

    Czy theme-color działa we wszystkich przeglądarkach?

    Nie. Najlepsze wsparcie oferują przeglądarki Chromium (Chrome, Edge, Opera), szczególnie na Androidzie.

    Czy warto używać theme-color przy trybie dark/light?

    Tak. To drobny detal, który robi bardzo dobre wrażenie i zwiększa spójność interfejsu.

  • Zmiana limitu produktów crosssell w koszyku – Magento 2

    W Magento 2 domyślnie w koszyku w sekcji crosssell wyświetlane są maksymalnie 4 produkty. W wielu sklepach to ograniczenie jest uciążliwe – szczególnie przy rozbudowanej ofercie.

    Domyślny limit cross-sell w Magento 2

    W standardowej instalacji Magento 2 limit produktów cross-sell w koszyku wynosi 4. Wartość ta jest na stałe zdefiniowana w module Magento_Checkout i nie może być zmieniona z poziomu panelu administracyjnego.

    Gdzie zdefiniowany jest limit cross-sell

    Limit zdefiniowany jest w module Magento_Checkout – w klasie Crosssell. Ścieżka do pliku: vendor/magento/module-checkout/Block/Cart/Crosssell.php.

    Tak jak wspominaliśmy wyżej – Magento nie udostępnia do tego konfiguracji, dlatego jedynym poprawnym rozwiązaniem jest nadpisanie klasy poprzez własny moduł.

    Zmiana limitu cross-sell poprzez własny moduł Magento 2

    Potrzebne będą:

    – plik rejestrujący preference (di.xml)

    – plik nadpisujący limit

    LionBrothers/CrosssellLimit/etc/frontend/di.xml:

    <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <preference for="Magento\Checkout\Block\Cart\Crosssell" type="LionBrothers\CrosssellLimit\Block\Cart\Crosssell"/>
    </config>

    LionBrothers/CrosssellLimit/Block/Cart/Crosssell.php

    <?php
    
    namespace LionBrothers\CrosssellLimit\Block\Cart;
    
    class Crosssell extends \Magento\Checkout\Block\Cart\Crosssell
    {
        /**
         * Items quantity will be capped to this value
         *
         * @var int
         */
        protected $_maxItemCount = 8;
    }
    

    Trzeba pamiętać również o standardowych plikach każdego modułu – registration.php oraz module.xml.

    Dlaczego używamy preference, a nie pluginu?

    W tym przypadku limit produktów cross-sell jest ustawiony jako protected property, a nie metoda. Oznacza to, że nie możemy zmienić go za pomocą pluginu (before/after/around). Najprostszym rozwiązaniem (i zarazem dobrą praktyką) jest użycie preference i rozszerzenie oryginalnej klasy.

    Masz pytania? Napisz komentarz!

    Czy można zmienić limit wyświetlanych produktów crosssell z poziomu panelu administracyjnego?

    Nie, Magento 2 nie udostępnia takiej konfiguracji w panelu administracyjnym.

    Czy to działa w Magento 2.4.x?

    Tak, rozwiązanie działa we wszystkich wersjach Magento 2.

  • Strony internetowe w czasach AI

    Dzisiejszy post typowo refleksyjny. W ostatnich latach ze względu na rozwój sztucznej inteligencji powstaje coraz więcej stron w pełni wygenerowanych przez narzędzia AI. Często są do siebie bardzo podobne. Czy to źle? Moim zdaniem nie. Przed erą AI popularne były przecież zakupy gotowych szablonów. Te najpopularniejsze były sprzedawane w tysiącach licencji – więc finalnie wiele stron wyglądało dokładnie tak samo. Wraz z rozwojem przedsiębiorstwa potrzebne były zmiany – dedykowany branding, inne (wygodniejsze) ułożenie contentu etc. Co wysyp stron „klepanych” przez AI oznacza dla Web Developera? Może paradoksalnie – więcej potencjalnej pracy.

    Często zauważam wygenerowane strony, które są bardzo słabej jakości. Napchana jest masa ciężkich animacji, zbyt pstrokate wyróżniki wymieszane z generycznymi grafikami. Takich twórców będzie coraz więcej – bo wykonanie czegoś takiego to kwestia średniej jakości prompta do AI. Czasami widać też strony lepsze, ładniejsze oraz wygodniejsze, które też mają vibe w pełni wygenerowanej strony – ale wygląda to tak jakby czuwał nad tym ktoś kto się zna na temacie i chociaż zwracał uwagę narzędziom, że X tak nie powinno wyglądać/działać.

    Dlaczego zatem więcej pracy? Wykonanie generycznego landingu jest banalne – ale jego modyfikacja skrojona pod wymagania już niekoniecznie. Trzeba pamiętać, że każda firma chce się wyróżniać i ma dedykowaną wizję. Czasami wykonanie z pozoru prostej zmiany bez znajomości kodu „kopiąc się” z AI będzie bardzo czasochłonna + efekt finalny może być niezadowalający. Biorąc pod uwagę skalowalność (np. przy sklepach internetowych) bezrefleksyjne pakowanie wszystkiego co podsunie AI może być opłakane w skutkach – wolna strona, poważne luki bezpieczeństwa etc. W skrajnych przypadkach błąd krytyczny i brak backupu. Przed erą AI przecież też można było skorzystać z gotowców i stworzyć prosty landing w parę minut podmieniając po prostu treść. Kluczowy jednak był i jest rozwój, modyfikacje i utrzymanie.

    Wielu właścicieli stron dojdzie do momentu gdzie stwierdzi, że woli oddelegować modyfikowanie strony doświadczonemu developerowi. Trzeba wziąć pod uwagę, że strona to nie tylko strona. Zawsze warto mieć chociażby repozytorium gita, przy większych projektach jest to must have.

    Próg wejścia do Web Developmentu i ogólnie szeroko pojętego programowania przy pomocy narzędzi AI bardzo się obniżył. Ale nadal trzeba chcieć zrozumieć i się uczyć – aktualnie zdecydowanie więcej niż wcześniej.

    Traktuję AI jako świetnego pomocnika. To dobre narzędzia, które mogą znacznie ułatwić czy przyspieszyć pracę. Osobiście korzystam na co dzień. Jak każde inne narzędzie wymaga jednak pojęcia osoby korzystającej.

    Ostatnio natrafiłem na stronę, która była wolna. Bardzo wolna. W sumie to mało powiedziane – ciężko znaleźć odpowiednie określenie. Był to onepage reklamujący usługi freelancera. Byłem ciekaw co na tak prostej stronie może aż tak drenować przeglądarkę i jej zasoby. W kodzie znalazłem animację, która polegała na podmianie relatywnie dużych plików svg (w środku był jpg w base64) co kilka milisekund. Sekcja była tak mała, że nawet nie zwróciłem na niej uwagi. Obciążenie, które generowała było w sumie bez sensu. W kodzie były przesłanki, że całość została wygenerowana – np. typowe dla AI nadmiarowe komentarze.

    A Ty jak widzisz tę kwestię? Zapraszam do dyskusji w komentarzach.

  • PageSpeed – wskaźnik CLS

    Jednym z głównym wskaźników testu prędkości strony internetowej od Google (PageSpeed Insights) jest CLS. Rozwinięcie skrótu to Cumulative Layout Shift.

    Nie zagłębiając się w techniczne nazewnictwo wskaźnik określa stabilność tego co widzi użytkownik. Jeśli elementy „skaczą”/przesuwają się po inicjalizacji – wskaźnik będzie miał wysoką wartość.

    Stabilność viewportu jest bardzo ważna, wskaźnika CLS nie należy pomijać. Ma sporą wartość punktową w wyniku a często jest relatywnie najłatwiejszy do poprawienia. Nie patrząc tylko na wynik – wysoki CLS może znacząco obniżyć UX strony internetowej.

    Dlaczego stabilność viewportu jest ważna? Spora część użytkowników działa bardzo szybko. Strona nie zdąży się jeszcze się w pełni wczytać a chcą już wykonywać jakieś akcje (np. kliknięcie boxa z promocją). Użytkownik najeżdża kursorem na element, klika – ale w tym momencie elementy zaczęły się przemieszczać. Finalnie nie trafił tam gdzie powinien.

    Co najczęściej powoduje przesunięcia? Elementy, których zachowanie jest zmieniane za pomocą JavaScript. Skrypty potrzebują chwili żeby się wykonać, bazowy kod HTML i CSS powinien być „przygotowany” na doładowanie skryptu. Idealnym przykładem mogą być slidery. Załóżmy, że w sliderze są 3 zdjęcia – skrypt po inicjalizacji ukrywa wszystkie oprócz pierwszego, przerabia strukturę, dodaje nawigację (strzałki, kropki). Po stronie HTMLa i CSSa te pozostałe elementy powinny być ukryte bazowo. Jeśli nie będą – wstępnie na krótką chwilę użytkownik zobaczy 3 zdjęcia, skrypt się wykona, dwa nadmiarowe znikną. Elementy się przesunęły, wskaźnik CLS podskoczył również.

    Jak temu zaradzić? Sprawdź, które elementy powodują przesunięcie. Można to wyłapać odświeżając stronę lub skorzystać z wtyczek do przeglądarek (nie polecę konkretnej bo mi zazwyczaj najwygodniej zlokalizować odświeżając w DevToolsach). Następnie określ czemu przesunięcie następuje – może np. inne klasy po doładowaniu JS’a? Często wystarczy ustawić minimalną wysokość elementu (min-height).

    Masz pytania? Napisz komentarz poniżej.

    Czy CLS różni się między desktopem a mobile?

    Tak. CLS często jest wyższy na urządzeniach mobilnych – szczególnie ze względu na mniejszy viewport.

    Czy CLS wpływa bezpośrednio na SEO?

    CLS jest jednym z Core Web Vitals, które według specjalistów są sygnałem rankingowym Google. Opinie na temat tego czy prędkość strony/wynik testów ma bezpośredni/znaczący wpływ na pozycje w wyszukiwarce są bardzo mieszane – niemniej jednak ważniejszy jest wpływ pośredni. Wysoki CLS znacznie pogarsza UX co może skutkować większym współczynnikiem odrzuceń.