Dlaczego sklepy na Magento 2 są drogie? część 1

Dlaczego koszty i utrzymanie sklepów na magento 2 jest drogie? Co to znaczy drogie i czy napewno są aż tak drogie? Zapraszam do pierwszej części z cyklu.

Kiedyś zadzwoniła do mnie osoba pytając się o koszty wdrożenia magento 2, jak usłyszała cenę… to trochę się nasłuchałem o sobie i nie tylko… przykre to było.

No właśnie czemu są takie drogie, na oferii bez problemu znajdę ludzi co mi za 1000zł zrobią…

Zacznę od początku od tej strony technologicznej, zakładając, że wiesz jak Twój model biznesowy ma wyglądać, co chcesz sprzedawać, na jakie rynki itd. Tak jak dom potrzebuje solidnych fundamentów, tak samo magento 2 potrzebuję dobrego i wydajnego serwera.

Zapomnij na wejściu o hostingach współdzielonych takich od 150zł do 500zł rocznie (nazwa, home, zenbox, ibc, itp.), magento 2 zwyczajnie dostanie zadyszki, a sklep, który działa wolno nie sprzedaje…nie mówiąc już że na tego typach hostingów nie zainstalujesz inteligentnej wyszukiwarki np. Elastic Search, nie zainstalujesz dodatkowych mechanizmów cacheujących, nie zoptymalizujesz serwera itd.

Hosting dla Magento 2 to szybki VPS albo Public Cloud. Ja polecam klientom hosting Upcloud, dlaczego? Jest najszybszy i najtańszy i od 3 lat nie miał ani jednej awarii no i Polsce nic lepszego nie ma 🙁

Pamiętaj

Szybkość Hostingu wpływa na SEO i odczucia behawioralne Twoich klientów

Wracając do tych 1000zł zdziwionego klienta, przyjrzyjmy się cenom za hosting, rozliczenie jest miesięczne.

Decydując się na najprostszy sklep na magento 2, opcja jaka tylko wchodzi w grę to opcja od 20$/miesiąc. Zasoby te mogą zostać szybko wykorzystane przez magento, ruch na stronie, ilość zestawów cech, parametry, ilość produktów, multistore, ilość wtyczek, elastic search.

To tylko nie liczne elementy, które mogą nam znacznie podnieść miesięczny abonament. No i należy trochę doliczyć za backup danych, co w przypadku upcloud jest zrobione idealnie. Backup całego serwera robisz dosłownie w sekundę i tak samo szybko przywracasz, poezja.

Wrócę tylko do kosztów serwera, jeżeli zdecydujesz się mieć Elastic Search czyli lepszą i inteligentniejszą wyszukiwarkę, musisz na wejściu dorzucić minimum dodatkowo 4gb ramu. Sam widzisz koszta rosną. Jeśli jesteś zdziwiony, to porównam to do samochodów, czemu klocki hamulcowe do Bmw są droższe niż do Dacii?

cdn.

Jak wyeksportować do API WordPressa dane z wtyczki Yoast SEO

Yoast SEO to potężna i must have wtyczka dla wordpressa. Nię będą opisywał do czego ona służy, ale w tym miejscu pokaże ci jak wystawić do API wordpressa takie dane jak meta title i description. Takie dane w API będziesz mógł wykorzystać w swojej stronie np. opartej o Nuxt.js z SSR, czyli jednym słowem masz pełne wsparcie dla SEO.

Wszystko co musisz zrobić do dodać poniższy kod do pliku functions.php w twoim motywie.

add_action( 'rest_api_init', 'slug_register_yoast_seo_meta' );function slug_register_yoast_seo_meta() {
register_rest_field( 'post',
'_yoast_wpseo_title',
array(
'get_callback' => 'get_seo_meta_field',
'update_callback' => null,
'schema' => null,
)
);
register_rest_field( 'post',
'_yoast_wpseo_metadesc',
array(
'get_callback' => 'get_seo_meta_field',
'update_callback' => null,
'schema' => null,
)
);
}function get_seo_meta_field( $object, $field_name, $request ) {
return get_post_meta( $object[ 'id' ], $field_name, true );
}

ten kawałek sprawia, że w API wordpressa pojawią się dwa najważniejsze pola z wtyczki Yoast SEO, czyli meta tytuł i opis, które są mega ważne jeśli chcemy dobrze pozycjonować naszą witrynę.

Kolejnym elementem jest przekazanie tych wartości w naszym projekcie nuxt.js. W moim przypadku w pliku pages/blog/_slug.vue wklejamy kod.

head () {
    return {
      title: this.post._yoast_wpseo_title,
      meta: [
        { hid: 'description', id: 'description', name: 'description', content: this.post._yoast_wpseo_metadesc }
      ]
    }
  }

To sprawi, że każdy nasz post pobierany z wordpressa poprzez bibliotekę axios, będzie zawierał meta dane z wtyczki Yoast SEO. Dane możemy wykorzystać też do tagów Open Graph.

head () {
return {
title: this.post._yoast_wpseo_title,
meta: [
{ hid: 'description', id: 'description', name: 'description', content: this.post._yoast_wpseo_metadesc },
{ hid: 'og:title', name: 'og:title', content: this.post._yoast_wpseo_title },
{ hid: 'og:description', name: 'og:description', content: this.post._yoast_wpseo_metadesc},
]
}
}

Jaki sklep wybrać Magento, Prestashop, Woocommerce czy inny? część 1

Uwielbiam to pytanie, dlaczego? Bo jest z pokroju czy kupić chleb czy angielkę…

Jest to też pytanie na które można napisać nawet pracę doktorską, ponieważ temat jest bardzo rozległy. Każdy skrypt sklepu internetowego to inna para kaloszy pomimo, że posiadają wiele cech wspólnych. Teraz pewnie postawisz znak ? Lubię bardzo porównania i skrypty sklepów można porównać do samochodów, i np:

  • każdy ma koła
  • każdy ma silnik
  • każdy klimatyzację
  • każdy ma radio
  • każdy ma bagażnik
  • każdy jeździ
  • każdego trzeba jakoś tankować
  • każdego trzeba serwisować i naprawiać

Po mimo tych cech wspólnych, auta różnych marek będą inaczej się prowadziły, będą dawały zupełnie różne odczucia z jazdy, będą miały inne koszta itd.

Podobnie jest ze sklepami internetowymi:

  • każdy ma panel do zarządzania
  • w każdym możesz tworzyć kategorie i produkty
  • każdy ma wysyłki i płatności
  • każdy możliwość zalogowania
  • każdy ma możliwość dowolnej konfiguracji i rozbudowy
  • itd.

Po mimo tych wspólnych cech, w każdym zarządzanie contentem produktowym, obsługa zamówień, cena wdrożenia, aktualizacje będą się znacząco różnić.

cdn.

Polecenia jakie musisz znać pracując z magento 2

Pracując z magento 2 prędzej czy później musimy używać określonych poleceń, które wywołujemy w wierszu poleceń. Poniżej zebrałem wszystkie polecenia jakie wykorzystuje na codzień pracując z magento 2.

Aktualny tryb

php bin/magento deploy:mode:show

Zmień tryb na developer

php bin/magento deploy:mode:set developer

Zmień tryb na production

php bin/magento deploy:mode:set production

Lista indexerów

php bin/magento indexer:info

Reindeksacja

php bin/magento indexer:reindex

Status indexera

php bin/magento indexer:status

Wyczyść cache

php bin/magento cache:clean

Opróżnij cache

php bin/magento cache:flush

Status cache

php bin/magento cache:status

Włączenie pojedynczego cache(u)

php bin/magento cache:enable [cache_type]

Wyłączenie pojedynczego cache(u)

php bin/magento cache:disable [cache_type]

Deploy statycznej zawartości

php bin/magento setup:static-content:deploy

Deploy statycznej zawartości dla danego języka

php bin/magento setup:static-content:deploy pl_PL

Setup upgrade

php bin/magento setup:upgrade

Kompilacja

php bin/magento setup:di:compile

Brak miniaturek na froncie po imporcie danych w Magento 2.x

Dziś robiąc export danych z Woocommerce do Magento 2 (2.1.6) zauważyłem dziwną przypadłość samego Magento. Otóż po zakończeniu importu danych okazało się, że brakuje miniaturek na listingach produktowych, natomiast na karcie produktu i w samym panelu administracyjnym zdjęcia są poprawnie wyświetlane. Samo użycie:

php bin/magento setup:static-content:deploy
php bin/magento cache:flush

nie naprawia problemu:(

Lekarstwem na tą przypadłość jest wygenerowanie fotek jeszcze raz za pomocą prostego polecenia które odpalamy z konsoli.

php bin/magento catalog:images:resize

W zależności od ilości zdjęć, proces ten może trwać bardzo długo! W moim przypadku dla 375 SKU proces tworzenia zdjęć zajął ponad 1 h.

Modal Popup – gotowe rozwiązanie na popupa w Magento 2

Popup element, który występuję praktycznie na każdej witrynie internetowej 🙂 Magento 2 w standardzie ma załączoną całą masę przydatnych wtyczek za pomocą, których możemy upiększać UX w naszym e-commerce. Jedną z takich natywnych wtyczek jest modal, służący do tworzenia popupów czy to od strony frontu czy od strony admina jako dodatkowe elementy modułu. Ale do rzeczy, poniższy kod służy do zainicjowania popupu po kliknięciu w dany element.

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: false,
                innerScroll: true,
                title: 'tytuł naszego popupa',
               
            };

            $(".element-klikany").click(function() {

                $(".element-otwierany").modal(options).modal('openModal');

            });
        }
    );
</script>

Na zakończenie wystarczy wystylizować naszego popupa za pomocą styli css. Modal jest dość uniwersalnym elementem, który można wykorzystać do tworzenia customowych komunikatów na naszej witrynie lub włożyć do niego np. formularz logowania itp.

Własny kontener za pomocą XML w Magento 2

W magento 2 tak jak w przypadku magento 1, ważnym elementem jest znajomość stryktury layoutu opartego o XML, która daje możliwość kontroli i rozbudowy naszego serwisu. Pracując z magento za pomocą XMLa, poszczególne elementy sklepu możemy wyłączać, przemieszczać czy też tworzyć nowe. W tym poście chciałem chce przestawić jak przemieścić block newsletter z footera do własnego kontenera, który będzie tuż nad nim, zaczynamy. Poniżej gotowy kod do umieszczenia w naszym szablonie w pliku default.xml

<referenceContainer name="page.wrapper">
    <container name="newsletter-section" htmlTag="div" before="footer-container" htmlClass="newsletter-section">
    
    </container>
</referenceContainer>
    
<move element="form.subscribe" destination="newsletter-section" />

Nasz nowy blok ma być widoczny zawsze nad stopką dlatego najpierw wpisujemy:

 <referenceContainer name="page.wrapper">
    
 </referenceContainer>

Nowy blok ma być elementem div, ma zawierać class i być umiejscowiony na footerem

<container name="newsletter-section" htmlTag="div" before="footer-container" htmlClass="newsletter-section">

</container>

Na koniec pozostaje tylko, przemieścić blok newslettera do nowego elementu.

<move element="form.subscribe" destination="newsletter-section" />

Plus/Minus na karcie produktu w Magento 1.X

Bardzo ciekawe a zarazem proste zagadnienie, plus i minus przy polu ilości na karcie produktu. Przez pewien okres ignorowałem tą funkcjonalność myśląc, że każdy użytkownik komputera i internetu włada nim doskonale. Jednak praca przy wielu projektach, badania zachowań ludzkich pokazują, że jest to bardzo przydatna funkcjonalność zwłaszcza dla ludzi, którzy wszystko wykonują na ekranie przeglądarki za pomocą klawiatury.

Aby to wykonać modyfikujemy lekko plik addtocart.phtml w swoim szablonie

<?php if($_product->isSaleable()): ?>      
        <?php if(!$_product->isGrouped()): ?>
<div class="add-to-cart">
        <label for="qty"><?php echo $this->__('Qty:') ?></label>        
        <input type="text" name="qty" id="qty"  maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Quantity:') ?>" class="input-text qty" />
        <button class="button-up" type="button">+</button>
        <button class="button-down" type="button">-</button>       
</div> <!--add-to-cart-->
        <?php endif; ?>    
        <button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><?php echo $buttonTitle ?></span></button>      
        <?php echo $this->getChildHtml('', true, true) ?>                     
<?php endif; ?>

Aby powyższy kod zadziałać musimy trochę poczarować w jQuery w tym samym pliku

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('.add-to-cart .button-up').click(function() {
$qty = $(this).parent().find('.qty');
qty = parseInt($qty.val()) + 1;
$qty.val(qty);
});
$('.add-to-cart .button-down').click(function() {
$qty = $(this).parent().find('.qty');
qty = parseInt($qty.val()) - 1;
if (qty < 0)
qty = 0;
$qty.val(qty);
});
});
//]]>
</script>

Pozostaje tylko dodać kod css.

Foundation 6 i WordPress

Foundation określany jest przez swoich twórców jako najbardziej zaawansowany framework do tworzenia responsywnych witryn, posiadający całą masę przydatnych wtyczek, które na pewno zostaną wykorzystane w niejednym projekcie. Jak mam porównywać Bootstrapa do FF, to FF zyskał odrazu moje uznanie, nie umniejszając temu pierwszemu 😉 O samym FF6 rozpisywać się nie będę, wszystkie informacje można znaleść na stronie autorów.

Ok, czas połączyć Foundation 6 z WordPressem. Po skonfigurowaniu i pobraniu FF6 umieszczamy fragment kodu w header.php

 <link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/foundation.min.css">
 <link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/custom.css">
 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/vendor/jquery.js"></script>
 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/vendor/foundation.min.js"></script>

Aby FF6 zadziałał w footer.php dodajmy tylko

W paczce, którą pobraliśmy nie ma pliku custom.css jest to plik, który musimy stworzyć i w nim będziemy nadpisywać i tworzyć kod css.

<script>
    $(document).foundation();
</script>

W ten sposób FF6 został zaimplementowany do naszego szablonu WordPress.