Guide d'installation de la cartouche SFCC

1 - Compte Alma

Vous pouvez créer votre compte en 1 minute sur notre site . Ce compte vous permettra d'accéder à notre API et de configurer votre module.

2 - Obtenir le plugin

Vous pouvez télécharger la dernière version du plugin ici ou lancer cette commande dans votre terminal :

curl -L -o alma-plugin.zip `curl -s https://api.github.com/repos/alma/sfcc-cartridge/releases/latest | grep zipball_url | cut -d '"' -f 4`

3 - SFCC Metadata

a. Installation Npm

Pour cette étape vous aurez besoin de Node.js et de npm

Nous utilisons une partie des outils SFRA dans notre cartridge. Ces outils nécessitent une version particulière de npm : 6.14^.

Vous pouvez rétrograder votre npm avec cette commande :

npm i [email protected]

Une fois les bonnes versions installées, installez le module :

npm i

b. Secret setup

Pour simplifier la gestion des secrets, nous utilisons un fichier .env .

Nous vous proposons un fichier d'exemple que vous pouvez copier ou renommer :

cp .env.example .env

Veuillez le compléter avec les informations de votre compte Alma

ALMA_API_MODE=live
ALMA_LIVE_API_KEY=sk_live_xxxxxxxxxxxxxxxxxxxxxxxx
ALMA_TEST_API_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxx
SFCC_SITE_NAME=RefArchGlobal
  • ALMA_API_MODE - mettre 'live' pour utiliser en production, n'importe quelle autre valeur utilisera le mode 'test'
  • ALMA_TEST_API_KEY - votre clé d'API. commence par 'sktest'
  • ALMA_LIVE_API_KEY - votre clé d'API test. commence par 'sklive'
  • SFCC_SITE_NAME - Le nom de votre site SFCC

c. Créer le fichier .zip contenant les metadata

Il vous suffit de lancer cette commande pour générer site_template.zip :

npm run build

Cette archive contient toutes les metadatas dont le plugin Alma a besoin pour fonctionner.

Importez ce fichier dans votre sandbox :

Administration >  Site Development >  Site Import & Export

d. Custom site preference configuration

Une fois l'import réussi, vous pourrez voir de nouveaux groupes de custom site preferences :

Merchant Tools > Site Preferences > Custom Site Preference Groups

Dans le groupe 'ALMA' , vous pourrez voir :

  • API Url - L'url de l'API Alma
  • API Key - Votre clé d'API
  • Merchant Id - Votre id de marchand

Si l'une de ces valeurs ne semble pas remplie correctement, veuillez vérifier votre .env et retourner à l'étape c.

Dans ce groupe, vous pouvez également configurer les paramètres généraux de votre module Alma.

Dans les autres groupes, vous pouvez configurer chaque méthode de paiement, individuellement :

4 - Cartridge upload

a. Code upload

Comme SFRA, nous utilisons un fichier 'dw.json' pour uploader nos cartridges.

Vous etes libres d'uploader la cartridge par d'autres moyens.

Si vous souhaitez utiliser un dw.json, nous fournissons un exemple à copier ou renommer :

{
    "hostname": "your-sandbox.demandware.net",
    "username": "[email protected]",
    "password": "yourpassword",
    "code-version": "your_code_version",
    "p12": "/absolute/path/for/a/p12/key", // optional, only needed for PIG env, remove it if you don't need it
    "passphrase": "passphrase of the p12 key" // optional, only needed for PIG env, remove it if you don't need it
}

une fois rempli avec toutes les infos et dans le bon dossier (le même que dw.json.example), vous pouvez uploader la cartridge avec cette commande :

npm run uploadCartridge 

b. Cartridge path

Il faut maintenant ajouter int_alma a votre cartridge path :

Administration >  Sites >  Manage Sites > YourSite - Settings

Vous devrez mettre int_alma avant vos storefronts mais après vos autres cartridges.

any_other_cartridge:int_alma:app_storefront_base

5. Ajouter Alma a votre code

a. Ajouter le badge Alma a votre page produit

dans votre fichier 'productDetails.isml', qui se trouve normalement ici :

cartridges/*/cartridge/templates/default/product/productDetails.isml

Ajouter cette ligne, à l'endroit ou vous voulez voir le badge apparaitre :

<isinclude template="alma/widget" sf-toolkit="off" />

Si votre site est proche du Sitegenesis, nous vous recommandons de le rajouter a la fin de <div class="attributes">.

<div class="attributes">
    ...
    <isinclude template="alma/widget" sf-toolkit="off" />
</div>

Exemple

b. Ajouter le badge Alma a votre page panier

dans votre fichier 'cart.isml', qui se trouve normalement ici :

cartridges/*/cartridge/templates/default/cart/cart.isml

Ajouter cette ligne, à l'endroit ou vous voulez voir le badge apparaitre :

<isinclude template="alma/cartWidget" sf-toolkit="off" />

Si votre site est proche du Sitegenesis, nous vous recommandons de le rajouter a l'intérieur de <div class="col-12 checkout-continue"> .

<div class="col-12 checkout-continue">
    <isinclude template="alma/cartWidget" sf-toolkit="off" />
    <isinclude template="cart/checkoutButtons" />
</div>

Exemple

c. Afficher Alma comme methode de paiement

Il y a 3 fichiers à changer :

cartridges/*/cartridge/templates/default/checkout/billing/paymentOptions/
    paymentOptionsTabs.isml
    paymentOptionsContent.isml
    paymentOptionsSummary.isml

Voici ce qu'il faut y ajouter :

<!-- paymentOptionsTabs.isml -->
<isloop items="${pdict.order.billing.payment.applicablePaymentMethods}" var="paymentOption">
    <isif condition="${paymentOption.ID === 'CREDIT_CARD'}">
        <isinclude template="checkout/billing/paymentOptions/creditCardTab" />
    </isif>
    <isif condition="${pdict.isAlmaEnable && paymentOption && paymentOption.ID === 'ALMA'}">
        <isinclude template="checkout/billing/paymentOptions/almaTab" />
    </isif>
</isloop>

Exemple

<!-- paymentOptionsContent.isml -->
<isloop items="${pdict.order.billing.payment.applicablePaymentMethods}" var="paymentOption">
    <isif condition="${paymentOption.ID === 'CREDIT_CARD'}">
        <isinclude template="checkout/billing/paymentOptions/creditCardContent" />
    </isif>
    <isif condition="${pdict.isAlmaEnable && paymentOption.ID === 'ALMA'}">
        <isinclude template="checkout/billing/paymentOptions/almaContent" />
    </isif>
</isloop>

Exemple

<!-- paymentOptionsSummary.isml -->
<div class="payment-details">
    <isloop items="${pdict.order.billing.payment.selectedPaymentInstruments}" var="payment">
        <isif condition="${payment.paymentMethod === 'CREDIT_CARD'}">
            <isinclude template="checkout/billing/paymentOptions/creditCardSummary" />
        </isif>
        <isif condition="${payment.paymentMethod === 'ALMA'}">
            <isinclude template="checkout/billing/paymentOptions/almaSummary" />
        </isif>
    </isloop>
</div>

Exemple

d. Verifier votre storefront

Aller sur votre storefront et vérifier que votre badge est affiché correctement sur la page produit et sur la page panier :

Dans la page de checkout vous devriez voir Alma :

Félicitations ! Alma est installé.


Did this page help you?