Intégration Axeptio Shopify

Intégration du SDK
Pour charger le SDK nécessaire à l'exécution d'Axeptio sur la page, il faut modifier les templates du thème actif.

Cliquer sur Online Store > Themes > Actions > Edit Code.
Ouvrir le fichier Layout / theme.liquid
Ajouter le script suivant avant la fermeture de la balise <body>

<script type="text/javascript">
window.axeptioSettings = {
clientId: " {{ INSERER ICI VOTRE CLIENT_ID AXEPTIO}} ",
token: ShopifyAnalytics.meta.page.customerId
};
</script>
<script type="text/javascript" src="https://platform.axept.io/embed.js"></script>


theme

Cliquer ensuite sur "Save". Le SDK Axeptio est maintenant chargé et accessible dans toutes les pages de votre site.

Ajout de la case à cocher CGU / CGV dans le panier
Conformément à ce qui est indiqué dans la documentation de Shopify, il n'est pas possible d'ajouter la validation contractuelle à un autre endroit que dans le panier. https://help.shopify.com/en/themes/customization/cart/add-terms-and-conditions-checkbox

Il faut donc modifier la page cart-template.liquid qui se trouve dans la catégorie "Sections".

Puis ajouter le code suivant entre les informations de Shipping et les boutons d'action, comme montré dans la capture ci après.

<div style="text-align: right">
<div style="display: inline-block; max-width: 500px">
<!-- remplacer la ligne suivante par celle donnée dans votre back-office Axeptio -->
<input type="checkbox" name="cgv" data-axeptio='{"lang":"FR","id":"cgv","type":"doc"}'/>
<!-- fin du remplacement -->
</div>
</div>

Backoffice Axeptio

Afin de conditionner l'activation du bouton checkout à la validation des CGV, il faut intégrer un bout de javascript supplémentaire dans la fin de la page Cart :

<script>
window._axeptioReadyHandlers = [function(token){
axeptio.settings.onChange = function(name, checked){
if(name === " [[ REMPLACER ICI PAR LA VALEUR DE L'ATTRIBUT NAME DU CODE AXEPTIO ]] ") {
$('input[name="checkout"]').attr('disabled', !checked)
}
}
}]
</script>

Pour trouver l'attribut name, prenez la valeur entre guillemets :
Attr_name

Ce script a pour objet d'écouter les événements de type change sur la case à cocher Axeptio, et dans le cas des CGV, changer l'état disabled .

Intégration dans la page
cart-template
Cet article a-t-il répondu à vos questions ?
Merci !