Come personalizzare il processo di pagamento in Magento 2
Pubblicato: 2018-04-23Sommario
In Magento 2, il processo di pagamento è stato riprogettato per un'esperienza più rapida e semplice. La pagina Checkout guida il cliente attraverso 2 semplici passaggi del processo. I clienti che hanno effettuato l'accesso ai loro account possono completare il checkout rapidamente, perché gran parte delle informazioni sono già nei loro account. Il primo passaggio della procedura di pagamento prevede che il cliente completi le informazioni sull'indirizzo di spedizione e scelga il metodo di spedizione. Nella seconda fase, il cliente sceglie la modalità di pagamento e applica gli eventuali coupon per completare l'acquisto.
Personalizza il checkout predefinito di Magento 2
Puoi aggiungere un nuovo passaggio di check-out o modificare la visualizzazione di un check-out esistente per personalizzare il check-out predefinito a modo tuo.
Aggiungi un nuovo passaggio di pagamento
Puoi aggiungere un passaggio di checkout personalizzato, dovrebbe essere implementato come componente dell'interfaccia utente. Per motivi di compatibilità, aggiornabilità e facile manutenzione, non modificare il codice Magento predefinito, aggiungi le tue personalizzazioni in un modulo separato.
Passaggio 1: crea la parte della vista del componente della fase di pagamento
Per creare la parte della vista della nuova fase di checkout:
- Aggiungi una directory di moduli. Tutti i file personalizzati devono essere archiviati lì. Affinché la personalizzazione del checkout venga applicata correttamente, il modulo personalizzato dovrebbe dipendere dal modulo
Magento_Checkout. Non utilizzareUiper il nome del modulo personalizzato, poiché la notazione%Vendor%_Ui, richiesta per specificare i percorsi, potrebbe causare problemi. - Crea il file
.jsimplementando il modello di visualizzazione. - Crea un modello
.htmlper il componente.
Ogni passaggio è descritto in dettaglio di seguito:
1. Aggiungi il file JavaScript che implementa il nuovo passaggio
Un nuovo passaggio di checkout deve essere implementato come componente dell'interfaccia utente. Cioè, la sua implementazione JavaScript deve essere un modulo JavaScript.
Il file deve essere archiviato nella <your_module_dir>/view/frontend/web/js/view .
La notazione <your_module_dir> sta per il percorso della directory del modulo dalla directory radice. Di solito sarà uno dei seguenti: app/code/<YourVendor>/<YourModule> or vendor/<yourvendor>/module-<module>-<name> .
Segue un esempio my-step-view.js con commenti:
definire(
['ko', 'uiComponent', 'underscore', 'Magento_Checkout / js / model / step - navigator'],
funzione(
ko,
Componente,
_,
passoNavigatore
) {'
usare rigoroso';
/**
*
* mystep – è il nome del modello .html del componente,
* <Vendor>_<Module> – è il nome della directory del tuo modulo.
*
*/
return Component.extend({
valori predefiniti: {
modello: ' < Venditore > _ < Modulo > /miopasso'
},
//aggiungi qui la tua logica per visualizzare il passaggio,
isVisible: ko.observable(true),
/**
*
* @ritorna {*}
*/
inizializza: funzione() {
this._super();
// registra il tuo passaggio
stepNavigator.registerStep(
//il codice del passaggio verrà utilizzato come ID contenuto del passaggio nel modello del componente
'codice_passo',
//alias passo
nullo,
//valore del titolo del passaggio
'Titolo del passaggio',
//proprietà osservabile con logica quando visualizza passo o nascondi passo
questo.è visibile,
_.bind(questo.navigare, questo),
/**
* valore dell'ordine di ordinamento
* 'sort order value' < 10: la fase viene visualizzata prima della fase di spedizione;
* 10 < 'sort order value' < 20 : viene visualizzato il passaggio tra la spedizione e il pagamento
* 'sort order value' > 20 : il passaggio viene visualizzato dopo il passaggio del pagamento
*/
15
);
restituire questo;
},
/**
* Il metodo navigate() è responsabile della navigazione tra le fasi di checkout
* durante il checkout. È possibile aggiungere una logica personalizzata, ad esempio alcune condizioni
* per passare al tuo passaggio personalizzato
*/
naviga: funzione() {
},
/**
* @restituisce nullo
*/
navigareToNextStep: funzione() {
stepNavigator.next();
}
});
}
);2. Aggiungi il modello .html
Nella directory del modulo, aggiungi il modello .html per il componente. Deve trovarsi nella <your_module_dir>/view/frontend/web/template .
Segue un esempio mystep.html :
<!–È necessario utilizzare il valore 'step_code' del file .js–>
<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="invia: navigateToNextStep" novalidate="novalidate">
<div class="actions-toolbar">
<div class="primario">
<button data-role="opc-continue" type="submit" class="button action continue primary">
<span><!– ko i18n: 'Avanti'–><!– /ko –></span>
</pulsante>
</div>
</div>
</modulo>
</div>
</li>Passaggio 2: aggiungi il tuo passaggio al layout della pagina di pagamento
Affinché il nuovo passaggio venga visualizzato nella pagina, è necessario dichiararlo nel layout della pagina Checkout, definito in checkout_index_index.xml .
Quindi è necessario aggiungere un file di layout checkout_index_index.xml esteso nella seguente posizione: <your_module_dir>/view/frontend/layout/checkout_index_index.xml
Segue un esempio di 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">
<corpo>
<referenceBlock name="checkout.root">
<argomenti>
<nome argomento="jsLayout" xsi:type="array">
<nome oggetto="componenti" xsi:type="array">
<item name="checkout" xsi:type="array">
<nome oggetto="bambini" xsi:type="array">
<nome oggetto="passi" xsi:type="array">
<nome oggetto="bambini" xsi:type="array">
<!– Il nuovo passaggio che aggiungi –>
<item name="my-new-step" xsi:type="array">
<item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
<!–Per visualizzare il contenuto della fase prima della spedizione, il valore "sortOrder" della fase deve essere < 1–>
<!–Per visualizzare il contenuto della fase tra la fase di spedizione e la fase di pagamento 1 < "sortOrder" < 2 –>
<!–Per visualizzare il contenuto della fase dopo la fase di pagamento "sortOrder" >2 –>
<item name="sortOrder" xsi:type="string">2</item>
<nome oggetto="bambini" xsi:type="array">
<!–aggiungi qui la dichiarazione del componente figlio per il tuo passaggio–>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argomento>
</argomenti>
</referenceBlock>
</corpo>
</pagina> 
Magento 2 Checkout campo personalizzato
$ 119,00
Magento 2 One Step Checkout
$ 99 $ 119,00
Personalizza la visualizzazione di una cassa esistente
Nelle applicazioni Magento, il checkout viene implementato utilizzando i componenti dell'interfaccia utente. Puoi personalizzare ogni passaggio modificando l'implementazione JavaScript o il modello per un componente, aggiungendo, rimuovendo o disabilitando un componente.
Passaggio 1: modifica l'implementazione e il modello .js del componente
Per modificare l'implementazione e il modello .js utilizzati per il rendering dei componenti, è necessario dichiarare i nuovi file nel layout della pagina di checkout. Per fare ciò, attenersi alla seguente procedura:
- Nella directory del modulo personalizzato, crea il seguente nuovo file:
<your_module_dir>/view/frontend/layout/checkout_index_index.xml. (Affinché la personalizzazione del checkout venga applicata correttamente, il modulo personalizzato dovrebbe dipendere dal modulo Magento_Checkout.) - In questo file, aggiungi quanto segue:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corpo>
<referenceBlock name="checkout.root">
<argomenti>
<nome argomento="jsLayout" xsi:type="array">
<!– La tua personalizzazione sarà qui –>
…
</argomento>
</argomenti>
</referenceBlock>
</corpo>
</pagina>- Nel file
<Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml, trova il componente che devi personalizzare. Copia il nodo corrispondente e tutti i nodi principali fino a<argument>. Non è necessario lasciare tutti gli attributi e i valori dei nodi parente, poiché non li cambierai. - Modificare il percorso del file
.js, del modello o di qualsiasi altra proprietà del componente.
Esempio:
Il modulo Magento_Shipping aggiunge un componente reso come collegamento alle informazioni sulla politica di spedizione nella fase di spedizione:
<Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml
sembra il seguente:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corpo>
<referenceBlock name="checkout.root">
<argomenti>
<nome argomento="jsLayout" xsi:type="array">
<nome oggetto="componenti" xsi:type="array">
<item name="checkout" xsi:type="array">
<nome oggetto="bambini" xsi:type="array">
<nome oggetto="passi" xsi:type="array">
<nome oggetto="bambini" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<nome oggetto="bambini" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<nome oggetto="bambini" xsi:type="array">
<item name="before-shipping-method-form" xsi:type="array">
<nome oggetto="bambini" 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>
</argomento>
</argomenti>
</referenceBlock>
</corpo>
</pagina> Passaggio 2: aggiungi il nuovo componente al layout della pagina di pagamento
Qualsiasi componente dell'interfaccia utente viene aggiunto in checkout_index_index.xml in modo simile al modo in cui viene aggiunto un componente della fase di checkout.
Assicurati di dichiarare un componente in modo che venga visualizzato correttamente dal componente padre. Se un componente padre è un componente dell'interfaccia utente generale (a cui fa riferimento l'alias uiComponent ), i suoi componenti figlio vengono visualizzati senza alcuna condizione. Ma se un componente padre è un'estensione di un componente generale dell'interfaccia utente, il rendering dei figli potrebbe essere limitato in un certo modo. Ad esempio, un componente può eseguire il rendering solo di bambini da una determinata displayArea .
Passaggio 3 : disabilitare un componente
Per disabilitare il componente nel tuo checkout_index_index.xml usa le seguenti istruzioni:
<item name="%the_component_to_be_disabled%" xsi:type="array">
<nome oggetto="config" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
</item>Passaggio 4: rimuovere un componente
Per rimuovere un componente dal rendering del layout, è necessario creare un plug-in per il metodo \Magento\Checkout\Block\Checkout\LayoutProcessor::process . Nel tuo plugin, implementa il metodo around rimuovendo i nodi di layout corrispondenti in fase di esecuzione.
L'esempio seguente è un esempio del metodo around che rimuove un componente:
unset($jsLayout['components']['checkout']['children']['steps'][%path_to_target_node%]); //%path_to_target_node% è il percorso del nodo del componente in checkout_index_index.xml restituisce $jsLayout;
(Se desideri utilizzare questo esempio nel tuo codice, sostituisci il segnaposto %path_to_target_node% con un valore reale.)
*Disabilita o rimuovi un componente: se disabiliti un componente, viene caricato ma non visualizzato. Se rimuovi un componente, questo non viene caricato.
Articoli correlati:
Come aggiungere un codice sconto alla cassa in Magento
Come aggiungere un pagamento personalizzato alla cassa di Magento 2