Le Widget Statique permet aux marchands d’intégrer le widget Sezzle dans leur site web sans communication directe avec les serveurs de Sezzle. Tout le code du widget, les configurations personnalisées, les images et les feuilles de style sont hébergés localement dans le thème de la boutique du marchand. Cette approche offre :

• Des temps de chargement plus rapides
  • L’hébergement local réduit la dépendance aux serveurs externes.
• Un plus grand contrôle
  • Les marchands ont un contrôle total sur l’apparence et le comportement du widget, car l’équipe Sezzle ne peut pas le modifier.

​

Implémentation NPM

Utilisation de npm :

npm install @sezzle/sezzle-static-widget@latest

Dans votre page de produit, ajoutez le snippet de code suivant où vous voulez que le widget s’affiche, en mettant à jour le chemin vers node_modules selon votre structure de fichiers :

<script
    type="text/javascript"
    src="../node_modules/@sezzle/sezzle-static-widget/dist/bundle.js"
></script>
<script>
    const renderSezzle = new AwesomeSezzle({
        amount: `${yourPriceVariableHere}`,
    });
    renderSezzle.init();
</script>

Utilisez les options de Configuration ci-dessous pour personnaliser l’apparence du widget selon vos souhaits.

​

Implémentation HTML

1. Créez un nouveau fichier Javascript dans le code de votre site à l’endroit approprié

2. Copiez et collez ce code minifié dans le fichier nouvellement créé

3. Importez le nouveau fichier dans la/les page(s) où le widget Sezzle sera ajouté

   Copy

   Ask AI

   <script src="../scripts/sezzle-static-widget.js"></script>
   

4. Créez un élément de placeholder où le widget Sezzle doit être rendu sur la/les page(s), généralement en dessous de l’élément contenant le prix

   Copy

   Ask AI

   <div id="sezzle-widget"></div>
   

5. Ajoutez le script suivant en dessous de l’élément de placeholder, en mettant à jour la valeur du montant pour refléter votre variable de prix qui affiche le prix actuel du produit ou le total du panier selon le cas

   Copy

   Ask AI

   <script>
       var renderSezzle = new AwesomeSezzle({
           amount: `${yourPriceVariableHere}`,
       });
       renderSezzle.init();
   </script>
   

6. Prévisualisez vos modifications pour confirmer que le widget s’affiche correctement dans chacun des scénarios suivants

   • Utilisez les options de Configuration ci-dessous pour personnaliser l’apparence du widget selon vos souhaits :
     • Prix normal
     • Prix en solde
     • Sélection de variante
     • Bureau
     • Mobile

​

Implémentation Shopify

1. Connectez-vous à l’administration de votre boutique Shopify

2. Cliquez sur Online Store > Themes

3. À côté du thème que vous souhaitez modifier, cliquez sur Actions, puis sélectionnez Edit Code

4. Sous le dossier Assets, cliquez sur Add a new asset

5. Dans l’onglet Create a Blank File, nommez le fichier sezzle-static-widget et sélectionnez .js comme type de fichier, puis cliquez sur Add Asset

6. Copiez le code du fichier du dépôt et collez-le dans ce nouveau fichier, puis cliquez sur Save

7. Ajoutez les lignes de code suivantes là où le widget doit s’afficher sur la page du produit dans templates/product.liquid ou sections/product-template.liquid selon le cas

   Copy

   Ask AI

   <!-- Sezzle Static Widget -->
   <div id="sezzle-widget"></div>
   {{ 'sezzle-static-widget.js' | asset_url | script_tag }}
   <script>
       var renderSezzle = new AwesomeSezzle({
           amount: "{{ product.selected_or_first_available_variant.price | money }}",
       });
       renderSezzle.init();
       document.onchange = function () {
           var newPrice =
               "{{product.selected_or_first_available_variant.price | money}}";
           renderSezzle.alterPrice(newPrice);
       };
   </script>
   <!-- End Sezzle Static Widget -->
   

8. Ajoutez les lignes de code suivantes là où le widget doit s’afficher sur la page du panier dans templates/cart.liquid ou sections/cart-template.liquid selon le cas

   Copy

   Ask AI

   <!-- Sezzle Static Widget -->
   <div id="sezzle-widget"></div>
   {{ 'sezzle-static-widget.js' | asset_url | script_tag }}
   <script>
       var renderSezzle = new AwesomeSezzle({
           amount: "{{ cart.total_price | money }}",
           alignment: "right",
       });
       renderSezzle.init();
   </script>
   <!-- End Sezzle Static Widget -->
   

​

Personnalisation de la configuration

Une fois que le widget s’affiche, des configurations supplémentaires peuvent être ajoutées à AwesomeSezzle pour modifier son apparence. Voici un exemple présentant toutes les options. Cependant, amount est la seule valeur requise.

<script>
    var renderSezzle = new AwesomeSezzle({
        amount: string,
        renderElement: string,
        theme: string,
        modalTheme: string,
        maxWidth: number,
        marginTop: number,
        marginBottom: number,
        marginLeft: number,
        marginRight: number,
        alignment: string,
        alignmentSwitchMinWidth: number,
        alignmentSwitchType: string,
        textColor: string,
        fontFamily: string,
        fontSize: number,
        fontWeight: number,
        widgetType: string,
        fixedHeight: number,
        logoSize: number,
        logoStyle: object,
        language: string,
        parseMode: string,
        merchantLocale: string,
        ineligibleWidgetTemplate: string,
        minPrice: number,
        maxPrice: number,
    });
    renderSezzle.init();
</script>

<script>
    var renderSezzle = new AwesomeSezzle({
        amount: string,
        renderElement: string,
        theme: string,
        modalTheme: string,
        maxWidth: number,
        marginTop: number,
        marginBottom: number,
        marginLeft: number,
        marginRight: number,
        alignment: string,
        alignmentSwitchMinWidth: number,
        alignmentSwitchType: string,
        textColor: string,
        fontFamily: string,
        fontSize: number,
        fontWeight: number,
        widgetType: string,
        fixedHeight: number,
        logoSize: number,
        logoStyle: object,
        language: string,
        parseMode: string,
        merchantLocale: string,
        ineligibleWidgetTemplate: string,
        minPrice: number,
        maxPrice: number,
    });
    renderSezzle.init();
</script>

<script>
    var renderSezzle = new AwesomeSezzle({
        amount: "{{ product.selected_or_first_available_variant.price | money }}",
        renderElement: "new-sezzle-widget-container-id",
        theme: "light",
        modalTheme: "color",
        maxWidth: 400,
        marginTop: 0,
        marginBottom: 0,
        marginLeft: 0,
        marginRight: 0,
        alignment: "left",
        alignmentSwitchMinWidth: 576,
        alignmentSwitchType: "center",
        textColor: "#111",
        fontFamily: "Comfortaa, sans-serif",
        fontSize: 12,
        fontWeight: 400,
        widgetType: "product-page",
        fixedHeight: 0,
        logoSize: 1.0,
        logoStyle: {},
        language: "en",
        parseMode: "default",
        merchantLocale: "North America",
        ineligibleWidgetTemplate:
            "%%logo%% Pay in 4 interest-free payments on purchases $35-$2,500. %%info%%",
        minPrice: 3500, // Amount in cents
        maxPrice: 250000, // Amount in cents
    });
    renderSezzle.init();
</script>

​

Méthodes

Les fonctions suivantes sont intégrées dans le widget statique et sont prêtes à être utilisées pour votre installation de widget. Ajoutez simplement l’extrait de code applicable à votre code de page web, en mettant à jour l’écouteur d’événements et les variables si nécessaire.

​

alterPrice(newPrice)

Modifie le prix sur le widget. Créez un écouteur d’événements aprèsrenderSezzle.init()qui invoque cette fonction oùnewPriceest la nouvelle valeur de prix de la variante sélectionnée. Exemple :

document.onchange = function () {
    var newPrice = "${yourPriceVariableHere}";
    renderSezzle.alterPrice(newPrice);
};

​

renderModalByfunction()

Ouvre la fenêtre modale Sezzle par une fonction. Créez un écouteur d’événements qui invoque cette fonction si l’emplacement de l’événement est autre que l’icône d’information.

var clickElement = document.querySelector("#yourClickableElementIdHere");
clickElement.addEventListener("click", function () {
    renderSezzle.renderModalByfunction();
});

​

isMobileBrowser()

Renvoie true sur un navigateur mobile. Utilisez cet événement pour afficher ou masquer le widget à différents emplacements de la page en fonction du type d’appareil.

document.onreadystatechange = function () {
    if (renderSezzle.isMobileBrowser()) {
        document.getElementById("sezzle-widget-mobile").style.display = "block";
        document.getElementById("sezzle-widget").style.display = "none";
    } else {
        document.getElementById("sezzle-widget").style.display = "block";
        document.getElementById("sezzle-widget-mobile").style.display = "none";
    }
};

​

getElementToRender()

Renvoie l’élément où le widget sera rendu. Créez un écouteur d’événements qui invoque cette fonction si le widget doit apparaître lorsque l’événement se produit.

document.body.insertBefore(
    renderSezzle.getElementToRender(),
    document.getElementById("price").nextElementSibling
);