Warsztat z FSE #2: Stwórz NIESAMOWITY szablon dla swoich produktów w WooCommerce z FSE!

Kiedy i dlaczego warto skorzystać z FSE?

Przyda się dla:

Firm – które specjalizują się w tworzeniu stron i sklepów w konkretnym stylu. Dzięki temu mogą stworzyć dla siebie „bazowy” szablon, który z powodzeniem będą mogli wykorzystywać w wielu projektach.
Marek – posiadających własną księgę styli (brandbook) i przerabianie szablonów spowodowałoby, że kod CSS i PHP rósłby w nieskończoność. Pozwoli też zachować spójność,
Małych, nieskomplikowanych stron www – jeżeli zależy Ci na prostej stronie internetowej, która szybko się ładuje i ma stosunkowo prostą strukturę – będzie to dobry pomysł,
Jeżeli jesteś kreatywny i potrzebujesz innych, niestandardowych układów.

Nie przyda Ci się, jeżeli:

Stronę internetową zrobić szybko, wystarczy Ci gotowy szablon i nie ograniczają Cię żadne style (np. Kadence będzie wtedy dobrym wyborem).

Zalety FSE:

Pozwala zachować spójność witryny,
Pełną edytowalność każdego szablonu,
Jest stosunkowo prosty w obsłudze (mam klientów, dla których Kadence jest zbyt skomplikowany w stosunku do Gutenberga),
Mała ilość kodu CSS, którą bardzo łatwo zoptymalizować.

Wady FSE:

Przygotowanie Full Site Editing do użytkownika wymaga dobrej organizacji, czasu i… pomysłu,
Biblioteka wzorców jest na ten moment dosyć uboga, ale… warto dołożyć tam też swoją cząstkę!
https://wordpress.org/patterns/?curation=community.

1. Struktura naszego nowego projektu

Poniżej znajduje się minimalna struktura projektu w WooCommerce.

Pobierz motyw lw-woo-classic.zip

Pobierz zdjęcia nagich papug

2. Którego superbohatera potrzebujemy?

Grafik/Klikacz/Organizator, czyli ktoś kto:
- Przemyśli układ dla szablonów naszego sklepu:
  - Strona Główna,
  - Strona kategorii,
  - Pojedyncza strona produktu (dziś się tym zajmiemy!),
  - Pojedynczy wpis blogowy,
  - Pojedyncza podstrona pusta (Polityki prywatności, regulaminy, etc.),
  - Pojedyncze podstrony innego typu,
- Fajnie, gdyby potrafił:
  - Podstawowa znajomość obsługi bloków w Gutenbergu:
    - Grupa,
    - Kolumny,
    - Obrazki, Nagłówki, Akapity,
    - Reszta przyjdzie potem!
  - Rozumiał czym są w WordPressie:
    - Wzorce i fragmenty szablonu
      - Header/Nagłówek strony internetowej z logo, wyszukiwarką, nawigacją i odnośnikiem do koszyka i listy życzeń,
      - Footer/Stopka strony internetowej z danymi kontaktowymi i odnośnikami do kluczowych podstron,
      - Minikoszyk
Programista, czyli osoba która pomoże nam zrobić bardziej skomplikowane rzeczy:
- Przygotuje podstawową strukturę motywu potomnego lub stworzy nowy podstawowy szablon pod FSE
  - assets/ – Folder z plikami CSS, JS oraz fontami do naszego motywu,
  - includes/ – Nie wszystko da się zrobić w JSie, nie wszystko można zrobić w panelu WordPressa. Warto mieć taki folder w pogotowiu „by co nie co dodać”,
  - parts/ – Zawierający plik header.html, footer.html (przeznaczenie dla nagłówka/góry strony www oraz stopki naszej www)
  - patterns/ – W Kadence przyrównać można to do „Design Library”, w Gutenbergu to są po prostu wzorce. Jeżeli tworzycie wiele projektów możecie budować „bazę” wzorców mających np: układ do slidera, układ do bannerów etc.
    To takie powtarzalne układy, które zawsze mogą zostać przez kogoś użyte!
  - source/ – Folder z plikami źródłowymi SCSS, JS (nie będziemy tutaj omawiać żadnych npm, Node.js – ale warto o tym pamiętać!)
  - templates/ – Folder przechowujący szablony strony www (w zupełności wystarczy index.html)
- Zadba o to by strona w edytorze Gutenberga odwzorowywała główną stronę www,
- Będzie w stanie stworzyć w pełni edytowalny blok do edytora Gutenberg.

3. Niesamowity szablon dla produktów w WooCommerce

3.0 Aktywacja potrzebnych wtyczek!

WooCommerce – (to zrozumiałe)
Gutenberg – ma fajną możliwość użycia bloku siatki, ale też daje możliwość załadowania własnych fontów z poziomu panelu Edytora!
Variation Swatches for WooCommerce – może się przydać, ale nie musi opcjonalnie jak będzie czas,

3.1. Aktywacja Gutenberga dla produktów

functions.php

    function lw_activate_gutenberg_product( $can_edit, $post_type ) {
        if ( $post_type == 'product' ) {
            $can_edit = true;
        }
        return $can_edit;
    }

    add_filter( 'use_block_editor_for_post_type', 'lw_activate_gutenberg_product', 10, 2 );

3.2. Jak dodać CSS do edytora Gutenberg

functions.php

    if ( ! function_exists('lw_enqueue_styles') ) {
        
        function lw_enqueue_styles() {

            wp_enqueue_style( 'lw-woo-classic-style', get_template_directory_uri() .'/assets/css/main.css' );

            wp_enqueue_script(
                'lw-woo-classic-script',
                get_stylesheet_directory_uri() .'/assets/js/index.js',
                '',
                array(
                    'strategy'  => 'defer',
                    'in_footer '  => 'true'
                )
            );

        }        

        add_action('wp_enqueue_scripts', 'lw_enqueue_styles');

    }

    add_theme_support( 'editor-styles' );
    add_action( 'after_setup_theme', 'lw_theme_add_editor_styles' );

3.3 Jak dodać własny styl do edytora w Gutenberg?

Kod PHP:



    if( function_exists('register_block_style') ) {

        register_block_style(
            'core/group',
            array(
                'name' => 'carousel',
                'label' => __('Carousel Group', 'fse'),
                'is_default' => false
            )
        );

        register_block_style(
            'core/list',
            array(
                'name' => 'parrot',
                'label' => __('Parrot list', 'fse'),
                'is_default' => false
            )
        );

    }

Kod CSS:

.is-style-parrot {

    list-style-type: none;

    margin-left: 0;
    padding-left: 0;


}

.is-style-parrot li {
    position: relative;

    padding-left: 50px;
    padding-bottom: 15px;
    
}

.is-style-parrot li:before {
    
    content: "";

    background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='99.046' height='108' viewBox='0 0 99.046 108'%3E%3Ccircle id='Ellipse_1' data-name='Ellipse 1' cx='48' cy='48' r='48' transform='translate(0 12)' fill='%23afdbca'/%3E%3Cg id='parrot' transform='translate(10.74 -5.302)'%3E%3Cpath id='Path_1' data-name='Path 1' d='M57.388,82.4a51.886,51.886,0,0,0,14.853,3.693l11.385,16.743a25.63,25.63,0,0,1-11.769-4.7c-4.94-3.416-10.324-8.574-16.3-15.378a12.041,12.041,0,0,0,1.829-.358ZM45,38.426,75.232,82.612C63.276,82.3,49.949,77,42.43,68.7c-4.1-4.516-6.438-9.641-6.2-14.94C36.455,48.861,39.227,43.657,45,38.426Zm-1.346-12.14L49.6,32.478a9.853,9.853,0,0,1-3.833,1.458c-1.234.159-2.1-.006-2.56-.908a6.759,6.759,0,0,1,.446-6.742Zm10.773-10a16.092,16.092,0,0,1,2.66,8.984c0,2.852-1.221,5.444-2.606,7.9L45.566,23.91a12.813,12.813,0,0,1,4.243-2.586,7.639,7.639,0,0,0,4.223-3.958,7.058,7.058,0,0,0,.392-1.081ZM39.359,8.315a17.983,17.983,0,0,1,11.9,4.39,3.65,3.65,0,0,1,.034,3.381,4.889,4.889,0,0,1-2.514,2.387A14.891,14.891,0,0,0,41.237,24.4a10.486,10.486,0,0,0-.824,9.819,4.42,4.42,0,0,0,2,2.135c-6.074,5.6-8.944,11.518-9.211,17.267C32.914,59.9,35.713,65.8,40.189,70.729a45.4,45.4,0,0,0,12.425,9.443,39.128,39.128,0,0,1-7.446.337c-11.83-.671-19.142-6.758-22.711-14.88s-3.09-18.314.862-27.006a8.313,8.313,0,0,0,.139-5.914,21.492,21.492,0,0,1-1.426-6.8,16.65,16.65,0,0,1,7.746-14.707,17.928,17.928,0,0,1,9.581-2.89ZM39.34,5.3a20.962,20.962,0,0,0-11.213,3.37A19.706,19.706,0,0,0,19,26.052a24.755,24.755,0,0,0,1.585,7.618c.523,1.565.735,2.083-.006,3.66-4.456,9.4-4.867,20.477-.9,29.514S32.185,82.8,45,83.534a42.179,42.179,0,0,0,7-.244c6.57,7.639,12.506,13.445,18.12,17.331,5.8,4.013,11.326,6.021,16.755,5.7a1.52,1.52,0,0,0,1.167-2.362L76.04,86.292c.856,0,1.7-.02,2.546-.066a1.513,1.513,0,0,0,1.16-2.368L47.482,36.686a11.544,11.544,0,0,0,4.243-2l2.25,2.341a1.511,1.511,0,0,0,2.307-.153,19.559,19.559,0,0,0,3.833-11.6,19.066,19.066,0,0,0-6.194-14.191,21.108,21.108,0,0,0-12.9-5.723C40.461,5.317,39.9,5.3,39.34,5.3Z' fill='%23202020' fill-rule='evenodd'/%3E%3Cpath id='Path_2' data-name='Path 2' d='M40.22,69.028a8.547,8.547,0,0,0-8.474,8.567,1.517,1.517,0,1,0,3.03,0,5.469,5.469,0,0,1,5.412-5.53,8.555,8.555,0,0,0-2.031,5.53,1.518,1.518,0,1,0,3.036,0,5.457,5.457,0,0,1,5.444-5.537,1.515,1.515,0,1,0,0-3.03Z' transform='translate(4.039 17.404)' fill='%23202020' fill-rule='evenodd'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M37.323,12a2.371,2.371,0,1,1-2.374,2.367A2.375,2.375,0,0,1,37.323,12Z' transform='translate(4.914 1.83)' fill='%23202020' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 100% auto;

    position: absolute;
    left: 0px;

    width: 32px;
    height: 40px;

}

3.4 Zabieramy się za układ strony produktowej!

4. Nic nie znaczące dodatki, które mogą się Wam przydać

Jak zmienić w okruszkach w WooCommerce separator?

    add_filter( 'woocommerce_breadcrumb_defaults', 'lw_change_breadcrumb_delimiter' );
    function lw_change_breadcrumb_delimiter( $defaults ) {
        
        $defaults['delimiter'] = ' › ';
        return $defaults;

    }

Jak wyłączyć automatyczne sortowanie produktów powiązanych w WooCommerce?

function lw_related_sortable_disable() {
        
        echo '"<script type="text/javascript">';
        ?>
        jQuery(document).ready(function ($) {
            
            $( 'select.wc-product-search.enhanced' ).each( function() {
                
                //Add sortable attribute to select2 product fields (upsell and cross-sell)
                $(this).attr('data-sortable', true);
                
                let $select = $(this);
                let $list   = $(this).next( '.select2-container' ).find( 'ul.select2-selection__rendered' );
                
                $list.sortable({
                    placeholder : 'ui-state-highlight select2-selection__choice',
                    forcePlaceholderSize: true,
                    items       : 'li:not(.select2-search__field)',
                    tolerance   : 'pointer',
                    stop: function() {
                        $( $list.find( '.select2-selection__choice' ).get().reverse() ).each( function() {
                            var id     = $( this ).data( 'data' ).id;
                            var option = $select.find( 'option[value="' + id + '"]' )[0];
                            $select.prepend( option );
                        } );
                    }
                });
            
            });
            
        });
        <?php        
        echo '</script>"';

    }
    add_action('admin_footer', 'lw_related_sortable_disable');