aqlrc

Composants permettant de créer un thème React pour les boutiques Aquila

Usage no npm install needed!

<script type="module">
  import aqlrc from 'https://cdn.skypack.dev/aqlrc';
</script>

README

aqlrc

Installation

  1. Add aqlrc to your package.json

  2. Install package with yarn install

  3. In your code, add "import NomDuComposant from 'aqlrc';" to use it

  4. Use imported classes to use them as parent class, you can override functions etc...

  5. Enjoy !

Pour compiler

  1. Lancez "$ npm run build"

  2. Ensuite, lors de la première utilisation, lancez "$ yarn link", ceci va ajouter le module aqlrc à la librairie de package locale sous le nom qui figure dans le package.json (en l'occurence ici aqlrc)

  3. Ensuite, rendez vous à la racine d'Aquila et lancez "$ yarn link aqlrc", ceci permet d'installer le package aqlrc de votre bibliothèque locale, et donc fera reference à votre repo, si vous le rebuildez, les modifications seront appliquées

  4. Enjoy !

Composants for React

  • <_NSconfig /> : Export des composants disponibles dans les blocs CMS

  • <NSAccordion /> : Affiche des blocs en accordéon

  • <NSAddressMultiple /> : Gère les adresses

  • <NSBlogArticles /> : Affiche la liste des articles du blog

  • <NSBreadcrumb /> : Affiche un fil d'ariane basé sur l'URL

  • <NSBundleProduct /> : Affiche la composition d'un produit bundle

  • <NSButtonLoginAccount /> : Affiche l'icône du compte client

  • <NSCartPaymentStep /> : TODO Explication

  • <NSCartProductCounter /> : Affiche l'icône du panier avec le nombre de produits qu'il contient

  • <NSCartResume /> : Affiche le bloc résumé du panier

  • <NSCodePromo /> : Affiche le bloc pour entrer un code promo dans le panier

  • <NSContact /> : Affiche le bouton pour valider le formulaire de contact et gère le traitement qui avec

    • Props:
      • button-title: Label du bouton submit
      • captchaKey: clé du captcha (requit si l'on veut utiliser le captcha)
      • mode: mode d'utilisation des données (default: 'send', alowed value: 'send', 'store', 'store&send')
    • Remplissage auto de certain champ :
      • Pour le nom, mettre id="contact_firstname"
      • Pour le prénom, mettre id="contact_lastname"
      • Pour l'email, insérer simplement un input type="email"

  • <NSContext /> : Crée le contexte React

  • <NSCookieBanner /> : Affiche la barre d'acceptation des cookies

  • <NSCrossSelling /> : TODO Explication

  • <NSDrawStars /> : Affiche 5 étoiles pour les avis

  • <NSFilters /> : Affiche le bloc des filtres dans une page catégorie ou de recherche

  • <NSGallery /> : Affiche une gallerie d'image / vidéo YouTube

  • <NSGoToTopButton /> : Affiche un bouton pour scroller en haut de la page

  • <NSInterObserver /> : Met en place un observer sur un bloc, permet de déclencher l'affichage seulement lorsqu'il est visible à l'écran

    • props:
      • threshold : Nombre entre 0 et 1 indiquant le pourcentage qui doit être visible avant le déclenchement
      • triggerOnce : booléen permettant de déclencher l'observer qu'une seule fois

  • <NSLanguageChange /> : Affiche le bloc des langues

  • <NSLogin /> : Formulaire de connexion

  • <NSMegaMenu /> : Affiche le bloc du menu correspondant au code passé en prop (ns-code)

  • <NSMenu /> : Affiche le bloc du menu correspondant au code passé en prop (ns-code)

  • <NSNewsletter /> : TODO Explication

  • <NSProductCard /> : Affiche une vignette produit

  • <NSProductCardList /> : Affiche une liste de vignettes produit

  • <NSProductStock /> : Affichage du label de stock pour un produit et la disponibilité

  • <NSSearchBar /> : Affichage du champ de recherche

  • <NSSidebarAccount /> : Affiche le bloc du menu compte client

  • <NSSlider /> : Charge les informations du slider (via son ns-code), affiche les image en permettant un slide lattéral

  • : Affiche les toasts

    • Insérez la balise dans votre application
    • Pour afficher un toast :
      • NSToast.error([message]) : erreur
      • NSToast.warn([message]) : avertissement
      • NSToast.success([message]) : succès

  • <NSPageAccount /> : Page de type compte utilisateur

  • <NSPageAccountOrders /> : Page des commandes utilisateurs

  • <NSPageBlogArticle /> : Page blog

  • <NSPageCart /> : Page panier

  • <NSPageCategory /> : Page catégorie

  • <NSPageProduct /> : Page produit

  • <NSPageSearch /> : Page recherche

  • <NSPageStatic /> : Page statique

Fonctions

Une grande partie des routes API d'Aquila sont liées à des fonctions. Voici une liste de chacune d'entre elles.

Route de type "cart"

  • getCart(cartId, lang, PostBody = {}, ctx = undefined) : Récupère un panier

    • cartId : ID du panier
    • lang : langue
    • PostBody : paramètres de la requête
    • ctx : contexte Next (requête côté serveur)

  • getShipmentsCart(cart, withCountry = null, lang, PostBody = {}, ctx = undefined) : Récupère les modes de frais de port dans le panier

    • cart : l'objet panier
    • withCountry : le code du pays
    • lang : langue
    • ctx : contexte Next (requête côté serveur)

  • getPayementMethodsCart(lang, PostBody, ctx = undefined) : Récupère les modes de paiement dans le panier

    • lang : langue
    • PostBody : paramètres de la requête
    • ctx : contexte Next (requête côté serveur)

  • addToCart(cartId, product, qty, selections = undefined, ctx = undefined) : Ajoute un produit au panier

    • product : Objet produit
    • qty : quantité du produit à ajouter dans le panier
    • selections :
    • ctx : contexte Next (requête côté serveur)
    • => Retourne le panier à jour

  • addToCartKdo(product, qty, parent = undefined, ctx = undefined) : Ajoute un produit cadeau au panier

    • product : Objet produit
    • qty : quantité du produit à ajouter dans le panier
    • ctx : contexte Next (requête côté serveur)

  • deleteItemCart(cartId, itemId, ctx = undefined) : Supprime un produit au panier

    • cartId : ID du panier
    • itemId : ID du produit dans le panier
    • ctx : contexte Next (requête côté serveur)
    • => Retourne le panier à jour

  • updateQtyItemCart(cartId, itemId, quantity, ctx = undefined) : Modifie la quantité d'un produit au panier

    • cartId : ID du panier
    • itemId : ID du produit dans le panier
    • quantity : quantité à appliquer au produit dans le panier
    • ctx : contexte Next (requête côté serveur)
    • => Retourne le panier à jour

  • addDiscountCart(cartId, code, ctx = undefined) : Ajoute un code promo au panier

    • cartId : ID du panier
    • code : code promo
    • ctx : contexte Next (requête côté serveur)
    • => Retourne le panier à jour

  • deleteDiscountCart(cartId, ctx = undefined) : Supprime un code promo du panier

    • cartId : ID du panier
    • ctx : contexte Next (requête côté serveur)
    • => Retourne le panier à jour

  • updateAddressesCart(cartId, addresses, ctx = undefined) : Modifie les adresses du panier

    • cartId : ID du panier
    • addresses : objet contenant les adresses de facturation et de livraison
    • ctx : contexte Next (requête côté serveur)
    • => Retourne le panier à jour

  • getEstimatedShipmentFeeCart(cartId, shipmentId, countryCode, ctx = undefined) : Récupère l'estimation des frais de port d'un mode de livraison ainsi que les infos de ce dernier du panier

    • cartId : ID du panier
    • shipmentId : ID du mode livraison
    • countryCode : code du pays
    • ctx : contexte Next (requête côté serveur)

  • updateDeliveryCart(cartId, shipment, isoCountryCode, lang, ctx = undefined) : Modifie le mode de livraison du panier

    • cartId : ID du panier
    • shipment : objet contenant le mode de livraison sélectionné
    • isoCountryCode : code du pays
    • lang : langue
    • ctx : contexte Next (requête côté serveur)
    • => Retourne le panier à jour

  • cartToOrder(cartId, lang, ctx = undefined) : Transforme un panier en commande

    • cartId : ID du panier
    • lang : langue
    • ctx : contexte Next (requête côté serveur)
    • => Retourne la commande créée

Route de type "gallery"

  • getItemsGallery(code, ctx = undefined) : Récupère les items d'une gallerie en fonction du code
    • code : code de la gallerie
    • ctx : contexte Next (requête côté serveur)

Route de type "order"

  • getOrder(lang, PostBody = {}, ctx = undefined) : Récupère la (les) commande(s) d'un utilisateur

    • lang : langue
    • PostBody : paramètres de la requête
    • ctx : contexte Next (requête côté serveur)

  • getOrderById(orderId, lang, PostBody = {}, ctx = undefined) : Récupère une commande en fonction de l'ID

    • orderId : ID de la commande
    • lang : langue
    • PostBody : paramètres de la requête
    • ctx : contexte Next (requête côté serveur)

  • deferredPaymentOrder(orderNumber, paymentMethod, lang, ctx = undefined) : Paye une commande en différé

    • orderNumber : numéro de commande
    • lang : langue
    • paymentMethod : code du mode de paiement
    • ctx : contexte Next (requête côté serveur)

  • immediatePaymentOrder(orderNumber, paymentMethod, ctx = undefined) : Paye une commande immédiatement

    • orderNumber : numéro de commande
    • paymentMethod : mode de paiement
    • ctx : contexte Next (requête côté serveur)

  • askCancelOrder(OrderId, ctx = undefined) : Envoi une demande d'annulation de commande

    • orderId : ID de commande
    • ctx : contexte Next (requête côté serveur)

  • downloadbillOrder(billId, ctx = undefined) : Télécharge la facture d'une commande

    • billId : ID de la facture
    • ctx : contexte Next (requête côté serveur)
    • => Retourne le fichier en blob

Route de type "product"

  • getProduct(lang, countviews, withFilters, PostBody = {}, ctx = undefined, params = undefined) : Récupère le(s) produit(s) en fonction du PostBody

    • lang : langue
    • countviews : booléen pour activer ou non les statistiques de vue sur le produit
    • PostBody : paramètres de la requête
    • ctx : contexte Next (requête côté serveur)

  • getProductByCategory(categoryId, lang, PostBody = {}, ctx = undefined) : Récupère le(s) produit(s) d'une catégorie

    • categoryId : ID de catégorie
    • lang : langue
    • PostBody : paramètres de la requête
    • ctx : contexte Next (requête côté serveur)

  • downloadFreeVitualProduct(productId, ctx = undefined) : Télécharge un produit virtuel gratuit depuis la catégorie ou la page produit

    • productId : ID produit
    • ctx : contexte Next (requête côté serveur)
    • Retourne le fichier en blob

  • downloadVitualProduct(itemId, ctx = undefined) : Télécharge un produit virtuel payant depuis la liste des commandes de l'utilisateur

    • itemId : ID produit dans la commande
    • ctx : contexte Next (requête côté serveur)
    • Retourne le fichier en blob

  • storeCommentProduct(productId, review, title, rate, lang, questions, ctx = undefined) : Enregistre un avis sur un produit

    • productId : ID produit
    • review : commentaire
    • title : titre
    • rate : note
    • lang : langue
    • questions : questions
    • ctx : contexte Next (requête côté serveur)

Route de type "territory"

  • getTerritories(lang, PostBody = {}, ctx = undefined) : Récupère les territoires

    • lang : langue
    • PostBody : paramètres de la requête
    • ctx : contexte Next (requête côté serveur)

  • getTerritory(lang, PostBody = {}, ctx = undefined) : Récupère un territoire

    • lang : langue
    • PostBody : paramètres de la requête
    • ctx : contexte Next (requête côté serveur)

Route de type "user"

  • getUser(userId, PostBody = {}, ctx = undefined) : Récupère un utilisateur

    • userId : ID de l'utilisateur
    • PostBody : paramètres de la requête
    • ctx : contexte Next (requête côté serveur)

  • getNewsletterUser(email, ctx = undefined) : Récupère le(s) newsletter(s) correspdante(s) à d'un utilisateur

    • email : email utilisateur
    • ctx : contexte Next (requête côté serveur)

  • createOrUpdateUser(user, ctx = undefined) : Crée / modifie un compte utilisateur

    • user : Objet user
    • ctx : contexte Next (requête côté serveur)

  • anonymizeUser(userId, ctx = undefined) : Anonymise un compte utilisateur

    • userId : ID utilisateur
    • ctx : contexte Next (requête côté serveur)

  • deleteUser(userId, ctx = undefined) : Supprime un compte utilisateur

    • userId : ID utilisateur
    • ctx : contexte Next (requête côté serveur)

  • updateNewsletterUser(email, name, optin, ctx = undefined) : Modifie l'abonnement à la newsletter de utilisateur

    • email : email utilisateur
    • name : nom de la newsletter
    • optin : booléen acception de la newsletter
    • ctx : contexte Next (requête côté serveur)

  • updateAddressUser(userId, billingAddress, deliveryAddress, addresses, ctx = undefined) : Ajoute une adresse à utilisateur

    • userId : Id de l'utilisateur
    • billingAddress : l'index de l'adresse de facturation
    • deliveryAddress : l'index de l'adresse de livraison
    • addresses : l'objet qui contient les adresses de l'utilisateur
    • ctx : contexte Next (requête côté serveur)
    • => Retourne l'utilisateur

  • authUser(username, password, ctx = undefined) : Authentifie un utilisateur

    • username : identifiant
    • password : mot de passe
    • ctx : contexte Next (requête côté serveur)

  • logoutUser(ctx = undefined) : Déconnecte un utilisateur

    • ctx : contexte Next (requête côté serveur)

  • sendMailResetPasswordUser(email, lang, ctx = undefined) : Envoi un mail pour reset le mot de passe de l'utilisateur

    • email : email
    • ctx : contexte Next (requête côté serveur)

  • resetPasswordUser(token, password = undefined, ctx = undefined) : Remet à zéro le mot de passe d'un utilisateur

    • token : token
    • password : mot de passe
    • ctx : contexte Next (requête côté serveur)