@faume/account v1.0.84

Module compte

Installation

yarn add @faume/account

account.js

• Créer un fichier account.js à la racine de src
• Importer account.js dans le layout ou le snippet layout-head. Attention à l'importer uniquement lorsque template.name == "account"

import Account from "@faume/account";

window.addEventListener('DOMContentLoaded', () => {

    new Account({
        shop_name: "Nom de la boutique",
        shop_website: "Url de la boutique",
        displayAccountSection: true,
        secondhand_shop_name: "Nom de la boutique vintage",
        secondhand_shop_website: "Url de la boutique vintage",
        voucherFromArticle: false,
        apiBaseUrl: "[Domaine]-app"
    })

})

Il est important de mettre à true la valeur de displayAccountSection lors de l'installation, car ça va nous permettre de générer le contenu de la section account.liquid. Une fois le contenu de la section mis à jour, on pourra remettre à false sa valeur.

webpack.config.js

• Ajouter cette variable avant le module-exports

const account = {
    entry: './account.js',
    output: {
        path: path.resolve(__dirname, '../assets/'),
        filename: 'account.js'
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                resourceQuery: /blockType=i18n/,
                type: 'javascript/auto',
                loader: '@kazupon/vue-i18n-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [new VueLoaderPlugin()]
};

• Ajouter account dans la tableau module.exports = [..., account];

template account

• Créer une nouvelle section account
• L'importer dans le template account

{% section 'account' %}
<div class="vue-account"></div>

Résumé de l'insallation

• Lancer yarn add @faume/account dans src
• Créer account.js dans src
• Copier coller le contenu et modifier ses arguments. Attention de mettre à true la valeur de displayAccountSection
• Modifier webpack.config.js
• Créer une section account.liquid
• Importer le fichier account.js dans le layout
• Remplacer le contenu du template account.liquid
• Lancer theme watch --env=X à la racine
• Lancer ensuite yarn watch dans src
• Dans le navigateur, copier l'intégralité du dernier console.log, et coller le dans la section account.liquid
• Dans account.js, mettre à false la valeur de displayAccountSection pour ne plus afficher le console.log

Mise à jour

• Lancer yarn add @faume/account@latest dans src
• Lancer theme watch --env=X à la racine
• Lancer ensuite yarn watch dans src
• Mettre à true la valeur de displayAccountSection
• Dans le navigateur, copier l'intégralité du dernier console.log, et coller le dans la section account.liquid
• Dans account.js, mettre à false la valeur de displayAccountSection pour ne plus afficher le console.log

Personnalisation

Les paramètres

new Account({

    container: '.vue-container',
    
    shop_name: "Nom de la marque",
    shop_website: "Url du site officiel",
    
    secondhand_shop_name: "Nom du site vintage",
    secondhand_shop_website: "Url du site",
    
    voucherFromArticle: false,
    // true : Générer un bon d'achat à partir d'un article
    // false : Générer à partir d'un montant
    
    displayAccountSection: false, 
    // Générer et afficher le contenu de la section account dans la console
    // Attention à bien copier coller l'intégralité du console.log

    apiBaseUrl: "[Domaine]-app",
    
})

Styles

Pour modifier l'apparence du module, on peut créer des fichiers .scss comme pour éditer n'importe quelle page. On peut également, et c'est recommandé, modifier directement les variables css suivantes :

    --ac-color-red: #b81b1b;
    --ac-color-red-light: #FFECEB;
    --ac-color-green: #6c973d;
    --ac-color-green-light: #e9efe3;
    --ac-color-grey: #aaa;
    --ac-color-border: #ddd;
    --ac-color-text: #000;
    --ac-color-background: #eee;

    --ac-title-font: 'Helvetica', Arial, sans-serif;
    --ac-title-transform: uppercase;
    --ac-title-weight: 700;
    --ac-title-line-height: 1.2;
    --ac-title-letter: normal;

    --ac-text-font: 'Helvetica', Arial, sans-serif;
    --ac-text-weight: 300;
    --ac-text-line-height: 1.4;
    --ac-text-letter: normal;

    --ac-title-1-desktop: 2.6rem;
    --ac-title-1-mobile: 2.6rem;
    --ac-title-2-desktop: 2rem;
    --ac-title-2-mobile: 2rem;
    --ac-title-3-desktop: 1.6rem;
    --ac-title-3-mobile: 1.6rem;
    --ac-title-4-desktop: 1.3rem;
    --ac-title-4-mobile: 1.3rem;

    --ac-text-1: 1.3rem;
    --ac-text-2: 1.2rem;
    --ac-text-3: 1.1rem;
    --ac-text-4: 1rem;

    --ac-number-size: 4rem;

    --ac-btn-height: 44px;