Kategoria: Bez kategorii

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

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.

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

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 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.