Passer au contenu principal
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 :
  • Temps de Chargement Plus Rapides
    • L’hébergement local réduit la dépendance aux serveurs externes.
  • 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.
Ce contrôle local signifie que les marchands sont responsables de toutes les mises à jour ou modifications du widget.

​
Installation

Sélectionnez l’implémentation qui correspond à vos besoins :

​
Implémentation NPM

Utilisation de npm: npm install @sezzle/sezzle-static-widget@latest Dans votre page produit, ajoutez l’extrait de code suivant à l’endroit où vous souhaitez 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

L’implémentation varie considérablement selon la plateforme, le thème, etc. Voici un aperçu général du processus. Les extraits de code ci-dessous sont des exemples et peuvent nécessiter des modifications pour s’adapter à votre site. Pour les marchands Shopify, veuillez passer à la section suivante.
  1. Créez un nouveau fichier Javascript dans le code de votre site où cela est approprié
  2. Copiez et collez this minified code dans le fichier nouvellement créé
  3. Importez le nouveau fichier dans la/les page(s) où le widget Sezzle sera ajouté 
    <script src="../scripts/sezzle-static-widget.js"></script>
  4. Créez un élément d’emplacement où le widget Sezzle doit être rendu sur la/les page(s), généralement sous l’élément conteneur de prix 
    <div id="sezzle-widget"></div>
  5. Ajoutez le script suivant sous l’élément d’emplacement, 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 
    <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 Promotionnel
      • 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. Sur 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 repository file et collez-le dans ce nouveau fichier, puis cliquez sur Save
  7. Ajoutez les lignes de code suivantes partout où le widget doit s’afficher sur la page produit dans templates/product.liquid ou sections/product-template.liquid selon le cas 
    <!-- 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 partout où le widget doit s’afficher sur la page du panier dans templates/cart.liquid ou sections/cart-template.liquid selon le cas 
    <!-- 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 l’apparence. Ci-dessous un exemple présentant toutes les options. Cependant, amount est la seule valeur requise.
  • Modèle
  • Exemple
  • Options
<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>

​
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ès renderSezzle.init() qui invoque cette fonction où newPrice est 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
);