Jak dostosować proces realizacji transakcji w Magento 2?

Opublikowany: 2018-04-23

Spis treści

W Magento 2 proces kasy został przeprojektowany, aby przyspieszyć i ułatwić obsługę. Strona kasy prowadzi klienta przez 2 proste etapy procesu. Klienci, którzy są zalogowani na swoje konta, mogą szybko zakończyć transakcję, ponieważ wiele informacji znajduje się już na ich kontach. Pierwszym krokiem w procesie realizacji transakcji jest uzupełnienie przez klienta informacji o adresie wysyłki oraz wybór metody wysyłki. W drugim kroku klient wybiera metodę płatności i stosuje dowolne kupony, aby sfinalizować zakup.

Dostosuj domyślną kasę Magento 2

Możesz dodać nowy krok do kasy lub zmienić widok istniejącej kasy, aby dostosować domyślną kasę na swój własny sposób.

Dodaj nowy krok kasy

Możesz dodać niestandardowy krok kasy, powinien być zaimplementowany jako komponent UI. Ze względu na kompatybilność, możliwość aktualizacji i łatwą konserwację nie edytuj domyślnego kodu Magento, dodaj swoje dostosowania w osobnym module.

Krok 1: Utwórz część widoku komponentu kroku kasy

Aby utworzyć część widoku nowego kroku kasowania:

  1. Dodaj katalog modułów. Wszystkie niestandardowe pliki muszą być tam przechowywane. Aby Twoje dostosowanie do kasy zostało zastosowane poprawnie, Twój niestandardowy moduł powinien zależeć od modułu Magento_Checkout . Nie używaj interfejsu użytkownika jako nazwy niestandardowego modułu, ponieważ notacja %Vendor%_Ui Ui podczas określania ścieżek może powodować problemy.
  2. Utwórz plik .js implementujący model widoku.
  3. Utwórz szablon .html dla komponentu.

Każdy krok jest szczegółowo opisany poniżej:

1. Dodaj plik JavaScript implementujący nowy krok

Nowy etap realizacji transakcji musi zostać zaimplementowany jako składnik interfejsu użytkownika. Oznacza to, że jego implementacja JavaScript musi być modułem JavaScript.

Plik musi być przechowywany w katalogu <your_module_dir>/view/frontend/web/js/view .

<your_module_dir> oznacza ścieżkę do katalogu modułu z katalogu głównego. Zwykle będzie to jeden z następujących: app/code/<YourVendor>/<YourModule> lub vendor/<yourvendor>/module-<module>-<name> .

Oto przykładowy my-step-view.js z komentarzami:

 definiować(
    ['ko', 'uiComponent', 'podkreślenie', 'Magento_Checkout / js / model / step - nawigator'],
    funkcjonować(
        ko,
        Składnik,
        _,
        krokNawigator
    ) {'
        użyj ścisłego';
        /**
         *
         * mystep – to nazwa szablonu .html komponentu,
         * <Vendor>_<Module> – to nazwa katalogu Twojego modułu.
         *
         */
        return Component.extend({
            wartości domyślne: {
                szablon: ' < Dostawca > _ < Moduł > /mójkrok'
            },

            //dodaj tutaj swoją logikę, aby wyświetlić krok,
            isVisible: ko.observable(true),

            /**
             *
             * @zwroty {*}
             */
            inicjalizuj: funkcja() {
                to._super();
                // zarejestruj swój krok
                stepNavigator.registerStep(
                    //kod kroku zostanie użyty jako identyfikator zawartości kroku w szablonie komponentu
                    „kod_krokowy”,
                    //krok alias
                    zero,
                    //wartość tytułu kroku
                    „Tytuł kroku”,
                    //observable właściwość z logiką podczas wyświetlania kroku lub ukrywania kroku
                    to.jest Widoczne,

                    _.bind(to.nawiguj, to),

                    /**
                     * wartość porządku sortowania
                     * 'wartość porządku sortowania' < 10: krok jest wyświetlany przed krokiem wysyłki;
                     * 10 < 'wartość zamówienia sortowania' < 20 : krok jest wyświetlany między etapem wysyłki i płatności
                     * 'wartość zamówienia sortowania' > 20: krok wyświetla się po kroku płatności
                     */
                    15
                );

                zwróć to;
            },

            /**
             * Metoda navigation() odpowiada za nawigację między krokami kasy
             * podczas kasy. Możesz dodać własną logikę, na przykład niektóre warunki
             * za przejście do niestandardowego kroku
             */
            nawiguj: funkcja() {

            },

            /**
             * @zwraca nieważne
             */
            nawigacja do następnego kroku: function() {
                stepNavigator.next();
            }
        });
    }
);
2. Dodaj szablon .html

W katalogu modułu dodaj szablon .html dla komponentu. Musi znajdować się w katalogu <your_module_dir>/view/frontend/web/template .

Przykładowy mystep.html wygląda następująco:

 <!–Należy użyć wartości „step_code” z pliku .js–>
<li data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Tytuł kroku'" data-role="title"></div>
    <div class="step-content" data-role="content">

        <form data-bind="submit: navigationToNextStep" novalidate="novalidate">
            <div class="actions-toolbar">
                <div class="podstawowy">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!– ko i18n: 'Dalej'–><!– /ko –></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

Krok 2: Dodaj swój krok do układu strony kasy

Aby nowy krok był wyświetlany na stronie, należy go zadeklarować w układzie strony Checkout, który jest zdefiniowany w checkout_index_index.xml .

Musisz więc dodać rozszerzający plik układu checkout_index_index.xml w następującej lokalizacji: <your_module_dir>/view/frontend/layout/checkout_index_index.xml

Przykładowy checkout_index_index.xml wygląda następująco:

 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1kolumna" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <ciało>
        <referenceBlock name="checkout.root">
            <argumenty>
                <argument name="jsLayout" xsi:type="array">
                    <item name="komponenty" xsi:type="array">
                        <item name="do kasy" xsi:type="array">
                            <item name="dzieci" xsi:type="array">
                                <item name="kroki" xsi:type="array">
                                    <item name="dzieci" xsi:type="array">
                                        <!– Nowy krok, który dodasz –>
                                        <item name="mój-nowy-krok" xsi:type="array">
                                            <item name="komponent" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
                                            <!–Aby wyświetlić zawartość kroku przed wysyłką, wartość „sortOrder” powinna wynosić < 1–>
                                            <!–Aby wyświetlić zawartość kroku między krokiem wysyłki a krokiem płatności 1 < "sortOrder" < 2 –>
                                            <!–Aby wyświetlić zawartość kroku po kroku płatności "sortOrder" >2 –>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="dzieci" xsi:type="array">
                                                <!–dodaj tutaj deklarację komponentu podrzędnego dla swojego kroku–>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page> 

Magento 2 Checkout Pole niestandardowe

$119,00

Magento 2 w jednym kroku

99 zł 119,00 zł

Dostosuj widok istniejącej kasy

W aplikacjach Magento kasa jest realizowana za pomocą komponentów UI. Możesz dostosować każdy krok, zmieniając implementację JavaScript lub szablon dla komponentu, dodając, usuwając lub wyłączając komponent.

Krok 1: Zmień implementację i szablon komponentu .js

Aby zmienić implementację .js i szablon używany do renderowania komponentów, musisz zadeklarować nowe pliki w układzie strony kasy. Aby to zrobić, wykonaj następujące czynności:

  1. W swoim katalogu modułów niestandardowych utwórz następujący nowy plik: <your_module_dir>/view/frontend/layout/checkout_index_index.xml . (Aby dostosowanie kasy zostało zastosowane poprawnie, twój niestandardowy moduł powinien zależeć od modułu Magento_Checkout.)
  2. W tym pliku dodaj następujące:
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1kolumna" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <ciało>
        <referenceBlock name="checkout.root">
            <argumenty>
                <argument name="jsLayout" xsi:type="array">
                    <!– Twoja personalizacja będzie tutaj –>
                    …
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
  1. W pliku <Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml znajdź komponent, który chcesz dostosować. Skopiuj odpowiedni węzeł i wszystkie węzły nadrzędne do <argument> . Nie ma potrzeby pozostawiania wszystkich atrybutów i wartości węzłów parente, ponieważ nie zamierzasz ich zmieniać.
  2. Zmień ścieżkę do pliku .js komponentu, szablonu lub dowolnej innej właściwości.

Przykład:

Moduł Magento_Shipping dodaje komponent renderowany jako link do informacji o zasadach wysyłki do kroku Wysyłka:

 <Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml

wygląda następująco:

 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1kolumna" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <ciało>
        <referenceBlock name="checkout.root">
            <argumenty>
                <argument name="jsLayout" xsi:type="array">
                    <item name="komponenty" xsi:type="array">
                        <item name="do kasy" xsi:type="array">
                            <item name="dzieci" xsi:type="array">
                                <item name="kroki" xsi:type="array">
                                    <item name="dzieci" xsi:type="array">
                                        <item name="krok-wysyłki" xsi:type="array">
                                            <item name="dzieci" xsi:type="array">
                                                <item name="AdresWysyłki" xsi:type="array">
                                                    <item name="dzieci" xsi:type="array">
                                                        <item name="forma-metody-przed-wysyłką" xsi:type="array">
                                                            <item name="dzieci" xsi:type="array">
                                                                <item name="polityka_wysyłki" xsi:type="array">
                                                                    <item name="komponent" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page> 

Krok 2: Dodaj nowy komponent do układu strony kasy

Każdy składnik interfejsu użytkownika jest dodawany w pliku checkout_index_index.xml , podobnie jak dodawany jest składnik kroku realizacji transakcji.

Upewnij się, że deklarujesz składnik, aby był poprawnie renderowany przez składnik nadrzędny. Jeśli składnik nadrzędny jest ogólnym składnikiem interfejsu użytkownika (do którego odwołuje się alias uiComponent ), jego składniki podrzędne są renderowane bez żadnych warunków. Ale jeśli składnik nadrzędny jest rozszerzeniem ogólnych składników interfejsu użytkownika, renderowanie potomków może być w pewien sposób ograniczone. Na przykład składnik może renderować tylko dzieci z określonego displayArea .

Krok 3 : Wyłącz komponent

Aby wyłączyć komponent w checkout_index_index.xml , skorzystaj z następujących instrukcji:

 <item name="%the_component_to_be_disabled%" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="componentDisabled" xsi:type="boolean">prawda</item>
    </item>
</item>

Krok 4: Usuń komponent

Aby usunąć komponent z renderowania układu, musisz utworzyć wtyczkę dla metody \Magento\Checkout\Block\Checkout\LayoutProcessor::process . W swojej wtyczce zaimplementuj metodę around, usuwając odpowiednie węzły układu w czasie wykonywania.

Poniższy przykład jest przykładem metody around usuwającej komponent:

 unset($jsLayout['components']['checkout']['children']['steps'][%path_to_target_node%]); //%path_to_target_node% to ścieżka do węzła komponentu w checkout_index_index.xml
return $jsLayout;

(Jeśli chcesz użyć tego przykładu w kodzie, zastąp symbol zastępczy %path_to_target_node% wartością rzeczywistą).

*Wyłącz a usuń komponent: Jeśli wyłączysz komponent, jest on ładowany, ale nie renderowany. Jeśli usuniesz komponent, nie zostanie on załadowany.

Powiązane posty:
Jak dodać kod rabatowy do kasy w Magento?
Jak dodać niestandardową płatność do Magento 2 Checkout