Modèles personnalisés

Link2Quotes utilise un système de modèle vous permettant de créer votre propre modèle de devis à l’aide des langages de gabarits HTML, CSS et Handlebars. Une connaissance préalable de la programmation Web est requise.

Un fichier de modèle dans Link2Quotes a une extension. hbs et se compose de quatre sections, à savoir le modèle, le style, la configuration et le mode ‘’Thumb’’. Son contenu est le suivant :

<template name="Template Name" description="Description goes here">
    <div class="no-print">
        {{{ValidationSummary}}}
    </div>

    <div class="heading mb-4">
        {{#if LogoUrl}}
            <div class="logo">
                <img src="{{LogoUrl}}" />
            </div>
        {{/if}}
        <div class="doc-title">{{Title}}</div>
        <div class="contact-info">{{ContactInfo}}</div>
    </div>

    ...
</template>

<style>
    body {
        font-family: '{{Config.FontFamily}}', sans-serif;
        font-size: .875rem;
    }
    a {
        color: {{Config.AccentColor}};
    }
    a:hover {
        color: {{Config.AccentColorHover}};
    }
    .logo {
        text-align: {{Config.LogoAlign}};
    }
</style>

<config>
  {
    "Presets": {
        {
            "_name": "Blue",
            "AccentColor": "#039AEE",
            "AccentColorHover": "#21B5FF"
        },
    },
    "Options: {
        "LogoAlign": {
            "Type": "select",
            "Label": "Logo Placement",
            "Default": "left",
            "Options": {
                "left": "Left",
                "center": "Center",
                "right": "Right"
            }
        },
        "FontFamily": {
            "Type": "font",
            "Label": "Font Face",
            "Default": "Ubuntu"
        },
        "AccentColor": {
            "Type": "color",
            "Label": "Accent Color - Normal",
            "Default": "#F87C1D"
        },
        "AccentColorHover": {
            "Type": "color",
            "Label": "Accent Color - Active",
            "Default": "#DB6307"
        }
    }
  }
</config>

<thumb>
data:image/png;base64,iVBOR...
</thumb>

Ce fichier de modèle unique est utilisé pour créer des versions en ligne (web) et PDF des devis. Dans les sections <modèle> et <style>, vous pouvez utiliser Handlebars pour imprimer des variables et exécuter la logique conditionnelle et de boucle de base.

Pour plus d’informations sur Handlebars, cliquez ICI .

Section de modèles

Cette section définit le modèle HTML à utiliser pour créer des formulaires. Elle utilise le langage de gabarit Handlebars pour créer les données et les entrées de page. Bien qu’il soit basé sur HTML, toutes les balises HTML ne sont pas prises en charge.

Veuillez noter que certaines variables contiennent du code HTML, qui doit être affiché sans modification à l’aide de trois crochets. Par exemple :

<!--Text string-->
{{Title}}

<!--HTML string-->
{{{ValidationSummary}}}

Section de style

Les feuilles de style CSS doivent être placée dans cette section. Lors de l’écriture de règles de style, nous recommandons d’utiliser des unités de mesure rem ou em et d’éviter d’utiliser px, cm ou d’autres unités absolues. En effet, un même modèle doit être compatible pour l’affichage à l’écran ainsi que sur support papier.

Dans les modèles de Link2Quotes, un rem est équivalent à 16px à l’écran, et 12pt ou 1/6in sur support papier. La taille de page par défaut est "lettre" (8.5x11in) avec une marge de 3rem (0.5in) de chaque côté. Par conséquent, vous devriez avoir un total de 45 rem (7,5 po) d’espace horizontal lors de l’impression. Sur le Web, vous avez le même espace horizontal maximal de 45rem (720px), mais il peut être réduit pour s’adapter à la fenêtre de visualisation du navigateur lors de l’affichage sur un appareil mobile, par exemple.

La taille de police par défaut est 1rem.

Section de configuration

Cette section vous permet de définir des options de personnalisation pour le modèle. Les valeurs d’option sont ensuite accessibles dans les sections <modèles> et <style> sous forme de variables Handlebars dans la section Config avec le nom de la configuration comme nom de propriété. La définition de la configuration est écrite en tant qu’objet JSON. Cet objet contient les propriétés suivantes :

• Prédéfinir - Collection de personnalisations prédéfinies.
• Options - Collection de nom et de l’objet de configuration.

Paramètres d'options

Par défaut int|string - Valeur par défaut lorsqu’aucune valeur personnalisée n’est définie.

Indice string - Description supplémentaire de l’entrée.

Étiquette string - Étiquette de champ.

Max int?- Valeur maximale autorisée pour l’entrée numérique.

Min int?- Valeur minimale autorisée pour l’entrée numérique.

Options

string []- Utilisé par l’entrée de plusieurs types de choix, tels que select. Liste de tableaux associatifs de valeur : paire d’étiquettes.

Type

string - Type d’option utilisé pour rendre le contrôle d’entrée sur la page de personnalisation. Valeurs possibles :

• Couleur - sélecteur de couleur. La valeur du peut-être au format CSS hex ou rgba().
• Nombre - entrée numérique
• Sélection - liste déroulante
• Texte - saisie de zone de texte. C’est la valeur par défaut si une valeur non valide est spécifiée.

Section ‘’Thumb’’

Cette section peut contenir des données d’image codées en base64 du modèle. Il est recommandé que le fichier image soit supprimé de toutes les balises de métadonnées et redimensionné à 200x150 pour garder la taille du fichier minimum. La taille de chaîne codée en base64 recommandée est de 10 Ko.

Variables du modèle

Pour la liste des variables disponibles, veuillez consulter la page Variables de modèle .

^^ Dernière révision : 2023.06.14