Cum să personalizați procesul de plată în Magento 2
Publicat: 2018-04-23Cuprins
În Magento 2, procesul de plată este reproiectat pentru o experiență mai rapidă și mai ușoară. Pagina Checkout conduce clientul prin 2 pași simpli ai procesului. Clienții care sunt autentificați în conturile lor pot finaliza rapid finalizarea comenzii, deoarece multe dintre informații se află deja în conturile lor. Primul pas al procesului de checkout este ca clientul să completeze informațiile despre adresa de expediere și să aleagă metoda de livrare. În timpul celui de-al doilea pas, clientul alege metoda de plată și aplică eventualele cupoane pentru a finaliza achiziția.
Personalizați finalizarea implicită a Magento 2
Puteți fie să adăugați un nou pas de plată, fie să modificați vizualizarea unei plăți existente pentru a personaliza finalizarea implicită în modul dvs.
Adăugați un nou pas de plată
Puteți adăuga un pas personalizat de plată, acesta ar trebui să fie implementat ca componentă a interfeței de utilizare. Pentru compatibilitate, upgradabilitate și întreținere ușoară, nu editați codul Magento implicit, adăugați personalizările într-un modul separat.
Pasul 1: Creați partea de vizualizare a componentei pasului de finalizare
Pentru a crea partea de vizualizare a noului pas de plată:
- Adăugați un director de module. Toate fișierele personalizate trebuie să fie stocate acolo. Pentru ca personalizarea plății să fie aplicată corect, modulul personalizat ar trebui să depindă de modulul
Magento_Checkout. Nu utilizațiUipentru numele modulului dvs. personalizat, deoarece notația%Vendor%_Ui, necesară la specificarea căilor, poate cauza probleme. - Creați fișierul
.jsimplementând modelul de vizualizare. - Creați un șablon
.htmlpentru componentă.
Fiecare pas este descris în detaliu mai jos:
1. Adăugați fișierul JavaScript implementând noul pas
Un nou pas de plată trebuie implementat ca componentă a interfeței de utilizare. Adică, implementarea sa JavaScript trebuie să fie un modul JavaScript.
Fișierul trebuie să fie stocat în directorul <your_module_dir>/view/frontend/web/js/view .
<your_module_dir> reprezintă calea către directorul modulului din directorul rădăcină. De obicei, va fi unul dintre următoarele: app/code/<YourVendor>/<YourModule> sau vendor/<yourvendor>/module-<module>-<name> .
Urmează un exemplu my-step-view.js cu comentarii:
defini(
['ko', 'uiComponent', 'subliniere', 'Magento_Checkout / js / model / pas - navigator'],
funcţie(
ko,
componentă,
_,
stepNavigator
) {'
folosiți strict';
/**
*
* mystep – este numele șablonului .html al componentei,
* <Vendor>_<Module> – este numele directorului modulului dumneavoastră.
*
*/
returnează Component.extend({
valori implicite: {
șablon: ' < Furnizor > _ < Modul > /mystep'
},
//adăugați aici logica pentru a afișa pasul,
isVisible: ko.observable(true),
/**
*
* @se intoarce {*}
*/
initialize: function() {
asta._super();
// înregistrează-ți pasul
stepNavigator.registerStep(
//codul pasului va fi folosit ca id de conținut al pasului în șablonul de componentă
'cod_pas',
//alias de pas
nul,
//valoarea titlului pasului
„Titlul pasului”,
//proprietate observabilă cu logică atunci când afișează pasul sau ascunde pasul
acesta este vizibil,
_.bind(this.navigate, this),
/**
* valoarea ordinului de sortare
* „Valoarea comenzii de sortare” < 10: pasul se afișează înainte de pasul de expediere;
* 10 < „valoarea comenzii de sortare” < 20 : se afișează pasul dintre etapa de livrare și cea de plată
* „Valoarea ordinului de sortare” > 20: pasul este afișat după pasul de plată
*/
15
);
returnează asta;
},
/**
* Metoda navigate() este responsabilă pentru navigarea între etapele de plată
* la checkout. Puteți adăuga o logică personalizată, de exemplu unele condiții
* pentru trecerea la pasul personalizat
*/
navigare: function() {
},
/**
* @returns nul
*/
navigateToNextStep: function() {
stepNavigator.next();
}
});
}
);2. Adăugați șablonul .html
În directorul modulului, adăugați șablonul .html pentru componentă. Acesta trebuie să fie localizat în directorul <your_module_dir>/view/frontend/web/template .
Urmează un exemplu de mystep.html :
<!–Valoarea „step_code” din fișierul .js trebuie utilizată–>
<li data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Step Title'" data-role="title"></div>
<div class="step-content" data-role="content">
<form data-bind="submit: navigateToNextStep" novalidate="novalidate">
<div class="actions-toolbar">
<div class="primary">
<button data-role="opc-continue" type="submit" class="button action continue primary">
<span><!– ko i18n: „Următorul”–><!– /ko –></span>
</button>
</div>
</div>
</form>
</div>
</li>Pasul 2: adăugați pasul dvs. la aspectul paginii Checkout
Pentru ca noul pas să fie afișat pe pagină, trebuie să îl declarați în aspectul paginii Checkout, care este definit în checkout_index_index.xml .
Deci, trebuie să adăugați un fișier de aspect extins checkout_index_index.xml în următoarea locație: <your_module_dir>/view/frontend/layout/checkout_index_index.xml
Urmează un exemplu de checkout_index_index.xml :
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corp>
<referenceBlock name="checkout.root">
<argumente>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<!– Noul pas pe care îl adăugați –>
<item name="my-new-step" xsi:type="array">
<item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
<!–Pentru a afișa conținutul pasului înainte de expediere, valoarea „sortOrder” ar trebui să fie < 1–>
<!–Pentru a afișa conținutul pasului dintre etapa de expediere și etapa de plată 1 < "sortOrder" < 2 –>
<!–Pentru a afișa conținutul pasului după pasul de plată „sortOrder” >2 –>
<item name="sortOrder" xsi:type="string">2</item>
<item name="children" xsi:type="array">
<!–adăugați aici declarația de componentă copil pentru pasul dvs.–>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</argumente>
</referenceBlock>
</corp>
</pagina> 
Câmp personalizat Magento 2 Checkout
119,00 USD
Cazare Magento 2 într-un singur pas
99 USD 119,00 USD
Personalizați vizualizarea unei plăți existente
În aplicațiile Magento, checkout-ul este implementat folosind componente UI. Puteți personaliza fiecare pas modificând implementarea JavaScript sau șablonul pentru o componentă, adăugând, eliminând sau dezactivând o componentă.
Pasul 1: Schimbați implementarea și șablonul .js ale componentei
Pentru a modifica implementarea .js și șablonul utilizat pentru randarea componentelor, trebuie să declarați noile fișiere în aspectul paginii de finalizare. Pentru a face acest lucru, faceți următorii pași:
- În directorul modulului personalizat, creați următorul fișier nou:
<your_module_dir>/view/frontend/layout/checkout_index_index.xml. (Pentru ca personalizarea plății să fie aplicată corect, modulul personalizat ar trebui să depindă de modulul Magento_Checkout.) - În acest fișier, adăugați următoarele:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corp>
<referenceBlock name="checkout.root">
<argumente>
<argument name="jsLayout" xsi:type="array">
<!– Personalizarea dvs. va fi aici –>
…
</argument>
</argumente>
</referenceBlock>
</corp>
</pagina>- În
<Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml, găsiți componenta pe care trebuie să o personalizați. Copiați nodul corespunzător și toate nodurile părinte până la<argument>. Nu este nevoie să lăsați toate atributele și valorile nodurilor parentale, deoarece nu le veți schimba. - Schimbați calea către fișierul
.jsal componentei, șablonul sau orice altă proprietate.
Exemplu:
Modulul Magento_Shipping adaugă o componentă redată ca link către informațiile privind politica de expediere la pasul de expediere:
<Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml
arata asa:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corp>
<referenceBlock name="checkout.root">
<argumente>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="before-shipping-method-form" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping_policy" xsi:type="array">
<item name="component" 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>
</argumente>
</referenceBlock>
</corp>
</pagina> Pasul 2: Adăugați noua componentă la aspectul paginii de plată
Orice componentă a interfeței de utilizare este adăugată în checkout_index_index.xml , similar modului în care este adăugată o componentă de pas de finalizare.
Asigurați-vă că declarați o componentă astfel încât să fie redată corect de componenta părinte. Dacă o componentă părinte este o componentă generală a interfeței de utilizare (la care se face referire de aliasul uiComponent ), componentele sale secundare sunt redate fără nicio condiție. Dar dacă o componentă părinte este o extensie a componentelor UI generale, atunci redarea copiilor ar putea fi restricționată într-un anumit fel. De exemplu, o componentă poate randa numai copii dintr-o anumită displayArea .
Pasul 3 : Dezactivați o componentă
Pentru a dezactiva componenta din checkout_index_index.xml , utilizați următoarele instrucțiuni:
<item name="%the_component_to_be_disabled%" xsi:type="array">
<item name="config" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
</item>Pasul 4: Scoateți o componentă
Pentru a elimina o componentă din redarea aspectului, trebuie să creați un plugin pentru metoda \Magento\Checkout\Block\Checkout\LayoutProcessor::process . În pluginul dvs., implementați metoda around eliminând nodurile de aspect corespunzătoare în timpul execuției.
Următorul eșantion este un exemplu de metodă de eliminare a unei componente:
unset($jsLayout['components']['checkout']['children']['steps'][%path_to_target_node%]); //%path_to_target_node% este calea către nodul componentei în checkout_index_index.xml returnează $jsLayout;
(Dacă doriți să utilizați acest exemplu în codul dvs., înlocuiți substituentul %path_to_target_node% cu valoare reală.)
*Dezactivați vs eliminați o componentă: dacă dezactivați o componentă, aceasta este încărcată, dar nu este redată. Dacă eliminați o componentă, aceasta nu este încărcată.
Postări asemănatoare:
Cum să adăugați un cod de reducere la Checkout în Magento
Cum să adăugați o plată personalizată la Magento 2 Checkout