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.

Artykuł Zmiana kolejności produktów powiązanych (related) – Moduł PrestaShop pochodzi z serwisu LionBrothers - Web Development.

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>

Artykuł Magento 2 – jak wyświetlić blok CMS w pliku PHTML pochodzi z serwisu LionBrothers - Web Development.

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)" />

Artykuł <meta name=”theme-color”> – Mała zmiana, przyjemny efekt pochodzi z serwisu LionBrothers - Web Development.

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!

Artykuł Zmiana limitu produktów crosssell w koszyku – Magento 2 pochodzi z serwisu LionBrothers - Web Development.

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.

Artykuł Strony internetowe w czasach AI pochodzi z serwisu LionBrothers - Web Development.

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.

Artykuł PageSpeed – wskaźnik CLS pochodzi z serwisu LionBrothers - Web Development.