Widget prise de commande rapide

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Qu'est-ce que le widget « Prise de commande rapide » ?

Le widget « Prise de commande rapide » permet à vos clients d'ajouter rapidement leurs articles au panier, après les avoir choisis, par exemple, sur votre catalogue papier si vous en éditez un. Pour ce faire, ils saisissent, via un espace spécifique sur votre site, uniquement la référence article et la quantité souhaitée, puis valident. L'ajout est instantané. Ils sont ensuite redirigés vers la page panier.
En pratique, vous pouvez également utiliser ce widget s'il vous arrive de passer des commandes pour vos clients par téléphone. En utilisant ce module, vous gagnez ainsi du temps et saisissez leur commande en seulement quelques clics sur votre site.

N.B. : l'utilisation de ce widget est réservée aux marchands qui n'ont pas activé la gestion des stocks sur leur catalogue.
N.B. : vous pouvez ajouter plusieurs articles à la fois en séparant les références par une virgule. Dans ce cas, la quantité sera appliquée à la première référence, les suivantes seront ajoutées à l'unité.

Voir le site démo

Voir le site démo Exemple de widget « Prise de commande rapide » positionné en page d'accueil.


Caractéristiques

Version minimale requise : PowerBoutique© V4.6.2
Technologies utilisées : HTML / CSS
Navigateurs compatibles : Firefox.gif Chrome.gif Ie.gif Safari.gif Opera.gif
Versions : Francais.gif   Anglais.gif

Dernières modifications : le 19 mars 2014

La procédure suivante a été conçue pour vous permettre d'installer ce widget de façon autonome.
L'intégration et le fonctionnement de ce widget sont conditionnés aux intitulés des dossiers et des fichiers précisés dans cette procédure. Nous vous recommandons de ne pas les renommer.
N.B. : un widget est une extension technique d'une ou plusieurs fonctionnalités du logiciel PowerBoutique©. Les procédures de mise en place et de personnalisation ne sont pas couvertes par l’Assistance Utilisateurs.

Important : ce widget est réservé aux marchands n'ayant pas activé la gestion des stocks sur leur catalogue.

Étapes d'intégration

  • Étape 1
    Créez un espace promotionnel via la fonction "Apparence" > "Modèles de site". Sélectionnez, dans le menu déroulant en haut à droite, "site FR" puis cliquez sur le bouton "Personnaliser". Dans l'écran suivant, cliquez sur le bouton "Nouvel espace promotionnel". Positionnez ensuite ce nouvel espace promotionnel à l'endroit désiré à l'aide du bouton Deplacer code dev.gif. Enregistrez son emplacement en cliquant sur le bouton Enregistrer position des blocs.png. Enfin, activez-le en cliquant sur le bouton Off.gif (qui passera en On.gif ).
    N.B. : renouvelez l'étape 1 si vous possédez un site multilingue, en prenant soin de sélectionner "site US" dans la fonction "Apparence" > "Modèles de site".
    N.B. : l'espace promotionnel contenant le code doit impérativement être appelé dans toutes les pages pour que le widget fonctionne dans tout le site.
    N.B. : dans le cas où vous utilisez votre propre gabarit html pour personnaliser l'apparence de votre site, créez votre espace promotionnel via la fonction "Apparence" > "Outils Experts - Web-design" > "Intégration gabarits html" > bouton "Espaces promotionnels", puis éditez-le dans la fonction "Animation" > "Bloc libre - cms". Pour finir, appelez ce nouveau cms dans votre gabarit.

  • Étape 2
    Insérez ensuite le code de la Version Française dans l'espace promotionnel créé dans la Version Française à l'aide du bouton Style edit fo.gif. Placez ce code dans l'onglet HTML puis cliquez sur "Enregistrer".
    N.B. : renouvelez l'étape 2 si vous possédez un site multilingue, en prenant soin de copier-coller le code de la Version Anglaise cette fois-ci.

    Version Française Francais.gif :
     1 <!-- DEBUT - Widget prise de commande rapide -->
     2 
     3 <fieldset id="blocCommandeRapide" style="padding-bottom: 4px;margin-top: 5px;">
     4 <legend class="texte_gras_defaut">Commande rapide :</legend> <!-- Titre du widget -->
     5 <form action="../boutique/com_act.cfm" name="formCommandeRapide" id="formCommandeRapide">
     6 <span class="texte_defaut">
     7 <span style="white-space:nowrap;">Ref : <input style="margin-bottom: 10px;" name="ref" id="champ" class="champ_commande_reference" size="12" value="" type="text"></span>
     8 <span style="white-space:nowrap;">Qte : <input name="qte" class="champ_commande_reference" size="4" style="width:40px !important;" id="champ" value="1" type="text"></span>
     9 <span style="white-space:nowrap;"><input id="habillage_bouton_defaut" name="habillage_bouton_texte_recalculer_panierb" value="Ajouter" type="submit"></span>
    10 </span>
    11 </form>
    12 </fieldset>
    13 
    14 <!-- FIN - Widget prise de commande rapide -->
    
    Version Anglaise Anglais.gif :
     1 <!-- DEBUT - Widget prise de commande rapide -->
     2 
     3 <fieldset id="blocCommandeRapide" style="padding-bottom: 4px;margin-top: 5px;">
     4 <legend class="texte_gras_defaut">Quick order :</legend> <!-- Titre du widget -->
     5 <form action="../boutique/com_act.cfm" name="formCommandeRapide" id="formCommandeRapide">
     6 <span class="texte_defaut">
     7 <span style="white-space:nowrap;">Ref : <input style="margin-bottom: 10px;" name="ref" id="champ" class="champ_commande_reference" size="12" value="" type="text"></span>
     8 <span style="white-space:nowrap;">Qty : <input name="qte" class="champ_commande_reference" size="4" style="width:40px !important;" id="champ" value="1" type="text"></span>
     9 <span style="white-space:nowrap;"><input id="habillage_bouton_defaut" name="habillage_bouton_texte_recalculer_panierb" value="Add" type="submit"></span>
    10 </span>
    11 </form>
    12 </fieldset>
    13 
    14 <!-- FIN - Widget prise de commande rapide -->
    


Personnalisation du widget (facultatif)

Il est possible de personnaliser l'apparence de ce widget.

Remarques concernant les extraits de codes :
Les numéros de lignes sont précisés à titre indicatif sur la base des fichiers téléchargés dans l'étape 1 d'intégration. Ces numéros peuvent varier, en fonction des modifications apportées aux fichiers ou du logiciel utilisé pour les éditer.
Les textes entourés de /* ... */ ou <! -- ... --> ou encore // ... // sont des commentaires. Ils sont là pour vous aider dans la compréhension du code. Une partie de code commentée ne sera pas visible sur votre site.

Éditer les textes
  • Par défaut, ce widget est composé des textes suivants :

    - "Commande rapide :" , "Ref :" , "Qte :" et "Ajouter" pour la Version Française.
    - "Quick Order :" , "Ref :" , "Qty :" et "Add" pour la Version Anglaise.

    Pour modifier ces textes, il faut éditer le(s) code(s) FR et/ou US de l'étape 4 d'intégration. Rendez-vous à la fonction "Apparence" > "Modèles de site". Sélectionnez, dans le menu déroulant en haut à droite, "site FR" ou "site US" puis cliquez sur le bouton "Personnaliser". Dans l'écran suivant, cliquez sur le bouton Style edit fo.gif de l'espace promotionnel contenant le(s) code(s) de l'étape 4 d'intégration. Effectuez les modifications et cliquez sur "Enregistrer".

L'exemple ci-dessous est une personnalisation de la Version Française :

Francais.gif
 1 <!-- DEBUT - Widget prise de commande rapide -->
 2 
 3 <fieldset id="blocCommandeRapide" style="padding-bottom: 4px;margin-top: 5px;">
 4 <legend class="texte_gras_defaut">Commandez en 1 clic !</legend> <!-- Titre du widget -->
 5 <form action="../boutique/com_act.cfm" name="formCommandeRapide" id="formCommandeRapide">
 6 <span class="texte_defaut">
 7 <span style="white-space:nowrap;">Référence produit : <input style="margin-bottom: 10px;" name="ref" id="champ" class="champ_commande_reference" size="12" value="" type="text"></span>
 8 <span style="white-space:nowrap;">Nombre : <input name="qte" class="champ_commande_reference" size="4" style="width:40px !important;" id="champ" value="1" type="text"></span>
 9 <span style="white-space:nowrap;"><input id="habillage_bouton_defaut" name="habillage_bouton_texte_recalculer_panierb" value="Valider" type="submit"></span>
10 </span>
11 </form>
12 </fieldset>
13 
14 <!-- FIN - Widget prise de commande rapide -->


L'exemple ci-dessous est une personnalisation de la Version Anglaise :

Anglais.gif
 1 <!-- DEBUT - Widget prise de commande rapide -->
 2 
 3 <fieldset id="blocCommandeRapide" style="padding-bottom: 4px;margin-top: 5px;">
 4 <legend class="texte_gras_defaut">Very Quick Order !</legend> <!-- Titre du widget -->
 5 <form action="../boutique/com_act.cfm" name="formCommandeRapide" id="formCommandeRapide">
 6 <span class="texte_defaut">
 7 <span style="white-space:nowrap;">Product reference : <input style="margin-bottom: 10px;" name="ref" id="champ" class="champ_commande_reference" size="12" value="" type="text"></span>
 8 <span style="white-space:nowrap;">Quantity : <input name="qte" class="champ_commande_reference" size="4" style="width:40px !important;" id="champ" value="1" type="text"></span>
 9 <span style="white-space:nowrap;"><input id="habillage_bouton_defaut" name="habillage_bouton_texte_recalculer_panierb" value="Add to cart" type="submit"></span>
10 </span>
11 </form>
12 </fieldset>
13 
14 <!-- FIN - Widget prise de commande rapide -->


N.B. : le titre du widget est présent sur la ligne 4. Il faut modifier "Commande rapide :" pour la Version Française et "Quick command :" pour la Version Anglaise.
N.B. : le texte pour la référence est présent sur la ligne 7. Il faut modifier "Ref :" pour la Version Française et pour la Version Anglaise.
N.B. : le texte pour la quantité est présent sur la ligne 8. Il faut modifier "Qte :" pour la Version Française et "Qty :" pour la Version Anglaise.
N.B. : par défaut, la quantité est de 1. Vous pouvez changer cette valeur à la ligne 8 : il faut modifier value="1". Exemples : value="10" pour une quantité de 10 par défaut ou même value="" pour aucune quantité par défaut.
N.B. : le texte du bouton est présent sur la ligne 9. Il faut modifier value="Ajouter" pour la Version Française et value="Add" pour la Version Anglaise. Exemple : value="Valider".



Services d'intégration et de personnalisation des widgets PowerBoutique©

Nos équipes sont à votre disposition pour intervenir depuis l'intégration de ce widget jusqu'à sa personnalisation complète, selon vos besoins et les spécificités de votre site.
Contactez votre consultant e-business pour en savoir plus : cliquez ici.



Cet espace de documentation vise à vous aider dans la personnalisation avancée de votre site PowerBoutique©. L'Assistance Utilisateurs PowerBoutique© ne couvre pas l'utilisation que vous pouvez faire des informations issues de cette documentation. cf. Conditions d'utilisation