Comment personnaliser le processus de paiement dans Magento 2
Publié: 2018-04-23Table des matières
Dans Magento 2, le processus de paiement a été repensé pour une expérience plus rapide et plus facile. La page de paiement guide le client à travers 2 étapes simples du processus. Les clients qui sont connectés à leurs comptes peuvent terminer le paiement rapidement, car la plupart des informations sont déjà dans leurs comptes. La première étape du processus de paiement consiste pour le client à compléter les informations d'adresse d'expédition et à choisir la méthode d'expédition. Au cours de la deuxième étape, le client choisit le mode de paiement et applique d'éventuels coupons pour finaliser l'achat.
Personnalisez la caisse par défaut de Magento 2
Vous pouvez soit ajouter une nouvelle étape de paiement, soit modifier la vue d'un paiement existant pour personnaliser le paiement par défaut à votre manière.
Ajouter une nouvelle étape de paiement
Vous pouvez ajouter une étape de paiement personnalisée, elle doit être implémentée en tant que composant d'interface utilisateur. Dans un souci de compatibilité, d'évolutivité et de facilité de maintenance, ne modifiez pas le code Magento par défaut, ajoutez vos personnalisations dans un module séparé.
Étape 1 : Créer la partie vue du composant de l'étape de paiement
Pour créer la partie vue de la nouvelle étape de paiement :
- Ajouter un répertoire de module. Tous les fichiers personnalisés doivent y être stockés. Pour que votre personnalisation de paiement soit appliquée correctement, votre module personnalisé doit dépendre du module
Magento_Checkout. N'utilisez pasUipour le nom de votre module personnalisé, car la notation%Vendor%_Ui, requise lors de la spécification des chemins, peut entraîner des problèmes. - Créez le fichier
.jsimplémentant le modèle de vue. - Créez un modèle
.htmlpour le composant.
Chaque étape est décrite en détail ci-dessous :
1. Ajoutez le fichier JavaScript implémentant la nouvelle étape
Une nouvelle étape de paiement doit être implémentée en tant que composant de l'interface utilisateur. Autrement dit, son implémentation JavaScript doit être un module JavaScript.
Le fichier doit être stocké dans le <your_module_dir>/view/frontend/web/js/view .
La notation <your_module_dir> représente le chemin d'accès au répertoire de votre module à partir du répertoire racine. Il s'agira généralement de l'un des éléments suivants : app/code/<YourVendor>/<YourModule> ou vendor/<yourvendor>/module-<module>-<name> .
Voici un exemple my-step-view.js avec commentaires :
définir(
['ko', 'uiComponent', 'underscore', 'Magento_Checkout/js/model/step - navigator'],
fonction(
ko,
Composant,
_,
stepNavigator
) {'
utiliser strict' ;
/**
*
* mystep - est le nom du modèle .html du composant,
* <Vendor>_<Module> – est le nom du répertoire de votre module.
*
*/
return Component.extend({
par défaut : {
template : ' < Fournisseur > _ < Module > /mystep'
},
//ajoutez ici votre logique pour afficher l'étape,
isVisible : ko.observable(true),
/**
*
* @Retour {*}
*/
initialiser : fonction() {
this._super();
// enregistrez votre étape
stepNavigator.registerStep(
// Le code d'étape sera utilisé comme identifiant de contenu d'étape dans le modèle de composant
'code_étape',
// alias d'étape
nul,
//valeur du titre de l'étape
'Titre de l'étape',
// propriété observable avec logique lors de l'affichage de l'étape ou du masquage de l'étape
this.isVisible,
_.bind(this.navigate, this),
/**
* trier la valeur de la commande
* 'sort order value' < 10 : l'étape s'affiche avant l'étape d'expédition ;
* 10 < 'sort order value' < 20 : l'étape s'affiche entre l'expédition et l'étape de paiement
* 'sort order value' > 20 : l'étape s'affiche après l'étape de paiement
*/
15
);
retournez ceci;
},
/**
* La méthodenaviguer() est responsable de la navigation entre les étapes de paiement
* lors du paiement. Vous pouvez ajouter une logique personnalisée, par exemple certaines conditions
* pour passer à votre étape personnalisée
*/
naviguer : fonction() {
},
/**
* @retours vide
*/
naviguer vers l'étape suivante : fonction () {
stepNavigator.next();
}
});
}
);2. Ajoutez le modèle .html
Dans le répertoire du module, ajoutez le modèle .html du composant. Il doit être situé sous le <your_module_dir>/view/frontend/web/template .
Un exemple mystep.html suit :
<!–La valeur 'step_code' du fichier .js doit être utilisée–>
<li data-bind="fadeVisible : isVisible">
<div class="step-title" data-bind="i18n : 'Titre de l'étape'" data-role="title"></div>
<div class="step-content" data-role="content">
<form data-bind="submit :naviguer vers l'étape suivante" novalidate="novalidate">
<div class="actions-toolbar">
<div class="primaire">
<button data-role="opc-continue" type="submit" class="action du bouton continuer primaire">
<span><!– ko i18n : 'Suivant'–><!– /ko –></span>
</bouton>
</div>
</div>
</form>
</div>
</li>Étape 2 : Ajoutez votre étape à la présentation de la page de paiement
Pour que la nouvelle étape s'affiche sur la page, vous devez la déclarer dans la mise en page de la page de paiement, qui est définie dans checkout_index_index.xml .
Vous devez donc ajouter un fichier de mise en page extension checkout_index_index.xml à l'emplacement suivant : <your_module_dir>/view/frontend/layout/checkout_index_index.xml
Voici un exemple 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">
<corps>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="enfants" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="enfants" xsi:type="array">
<!– La nouvelle étape que vous ajoutez –>
<item name="ma-nouvelle-étape" xsi:type="array">
<item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
<!–Pour afficher le contenu de l'étape avant l'expédition, la valeur "sortOrder" doit être < 1–>
<!–Pour afficher le contenu de l'étape entre l'étape d'expédition et l'étape de paiement 1 < "sortOrder" < 2 –>
<!–Pour afficher le contenu de l'étape après l'étape de paiement "sortOrder" >2 –>
<item name="sortOrder" xsi:type="string">2</item>
<item name="enfants" xsi:type="array">
<!–ajoutez ici la déclaration de composant enfant pour votre étape–>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</ arguments>
</referenceBlock>
</body>
</page> 
Champ personnalisé de paiement Magento 2
119,00 $
Paiement en une étape Magento 2
99 $ 119,00 $
Personnaliser la vue d'une caisse existante
Dans les applications Magento, le paiement est implémenté à l'aide de composants d'interface utilisateur. Vous pouvez personnaliser chaque étape en modifiant l'implémentation JavaScript ou le modèle d'un composant, en ajoutant, en supprimant ou en désactivant un composant.
Étape 1 : Modifier l'implémentation et le modèle .js du composant
Pour modifier l'implémentation .js et le modèle utilisé pour le rendu des composants, vous devez déclarer les nouveaux fichiers dans la mise en page de la page de paiement. Pour ce faire, procédez comme suit :
- Dans votre répertoire de module personnalisé, créez le nouveau fichier suivant :
<your_module_dir>/view/frontend/layout/checkout_index_index.xml. (Pour que votre personnalisation de paiement soit appliquée correctement, votre module personnalisé doit dépendre du module Magento_Checkout.) - Dans ce fichier, ajoutez ce qui suit :
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corps>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<!– Votre personnalisation sera ici –>
…
</argument>
</ arguments>
</referenceBlock>
</body>
</page>- Dans le
<Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml, recherchez le composant que vous devez personnaliser. Copiez le nœud correspondant et tous les nœuds parents jusqu'à<argument>. Il n'est pas nécessaire de laisser tous les attributs et valeurs des nœuds parents, car vous n'allez pas les modifier. - Modifiez le chemin d'accès au fichier
.js, au modèle ou à toute autre propriété du composant.
Exemple:
Le module Magento_Shipping ajoute un composant rendu sous la forme d'un lien vers les informations sur la politique d'expédition à l'étape d'expédition :
<Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml
ressemble à ceci :
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corps>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="enfants" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="enfants" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="enfants" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="enfants" xsi:type="array">
<item name="before-shipping-method-form" xsi:type="array">
<item name="enfants" 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>
</ arguments>
</referenceBlock>
</body>
</page> Étape 2 : Ajouter le nouveau composant à la mise en page de la page de paiement
Tout composant d'interface utilisateur est ajouté dans checkout_index_index.xml de la même manière qu'un composant d'étape de paiement est ajouté.
Assurez-vous de déclarer un composant afin qu'il soit rendu correctement par le composant parent. Si un composant parent est un composant d'interface utilisateur général (référencé par l'alias uiComponent ), ses composants enfants sont rendus sans aucune condition. Mais si un composant parent est une extension d'un composant général de l'interface utilisateur, le rendu des enfants peut être restreint d'une certaine manière. Par exemple, un composant ne peut rendre que les enfants d'un certain displayArea .
Etape 3 : Désactiver un composant
Pour désactiver le composant dans votre checkout_index_index.xml , suivez les instructions suivantes :
<item name="%the_component_to_be_disabled%" xsi:type="array">
<item name="config" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">vrai</item>
</item>
</item>Étape 4 : Supprimer un composant
Pour supprimer un composant du rendu de mise en page, vous devez créer un plugin pour la méthode \Magento\Checkout\Block\Checkout\LayoutProcessor::process . Dans votre plugin, implémentez la méthode around en supprimant les nœuds de mise en page correspondants au moment de l'exécution.
L'exemple suivant est un exemple de la méthode autour supprimant un composant :
unset($jsLayout['components']['checkout']['children']['steps'][%path_to_target_node%]); //%path_to_target_node% est le chemin vers le nœud du composant dans checkout_index_index.xml retourne $jsLayout ;
(Si vous souhaitez utiliser cet exemple dans votre code, remplacez l'espace réservé %path_to_target_node% par une valeur réelle.)
*Désactiver ou supprimer un composant : si vous désactivez un composant, il est chargé mais pas rendu. Si vous supprimez un composant, il n'est pas chargé.
Articles Similaires:
Comment ajouter un code de réduction à la caisse dans Magento
Comment ajouter un paiement personnalisé à Magento 2 Checkout