Changeset 87474 in spip-zone


Ignore:
Timestamp:
Feb 15, 2015, 6:05:09 PM (5 years ago)
Author:
tcharlss@…
Message:
  • La coloration syntaxique, c'est fantastique. On ajoute le plugin qu'il faut en dépendance pour avoir du code plus lisible.
  • On applique le filtre |propre aux textes d'explication.
  • Utiliser les chaînes de langue des plugins
  • Quelques pétouilles CSS.

up de z

Location:
_squelettes_/tutocommerce/trunk
Files:
1 added
10 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/tutocommerce/trunk/demo/css/style-tutocommerce.css.html

    r87452 r87474  
    55/* blocs principaux */
    66*, *:before, *:after { box-sizing: border-box; }
    7 body               { color:#444; background-color: #eee; }
    8 .page              {
     7body               { color:#444; background-color: white; }
     8.zone-demo         {
    99                     padding: 3rem 4rem; position: relative;
    10                      background-color: white;
     10                     background-color: #eee;
    1111                     font-size: 1.2rem; font-family: 'sourcesans', Sans-Serif;
    1212                   }
    13 .explications      {
     13.zone-explications {
    1414                     padding: 3rem 4rem;
    1515                     font-size: 1rem; line-height: 1.4; font-family: 'poly',Serif;
    16                      border-top: 1px dotted rgba(0,0,0,.3); box-shadow: 0px 0.33rem 0.33rem rgba(0, 0, 0, 0.1) inset;
     16                     border-top: 1px dotted rgba(0,0,0,.3);
    1717                   }
    18 .page:after, .page:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
    19 .page:after        { border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 22px; margin-left: -22px; }
    20 .page:before       { border-color: rgba(187, 6, 6, 0); border-top-color: rgba(0,0,0,.2); border-width: 23px; margin-left: -23px; }
     18.zone-demo:after, .zone-demo:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
     19.zone-demo:after   { border-color: rgba(238, 238, 238, 0); border-top-color: #eee; border-width: 22px; margin-left: -22px; }
     20.zone-demo:before  { border-color: rgba(187, 6, 6, 0); border-top-color: rgba(0,0,0,.2); border-width: 23px; margin-left: -23px; }
    2121
    2222/* typo et cie */
     
    2525h3,.h3             { font-size: 1.2rem; margin-bottom: 1.2rem; }
    2626h4,.h4             { font-size: 1.1rem; margin-bottom: 1.1rem; }
    27 .code, code        { white-space: pre-wrap; font-size: .8rem; font-family: monospace; color: green; }
    28 .code.multi        { display: block; line-height: normal; margin: .3rem 0; }
    2927p                  { margin-bottom: 1rem; }
    3028* > p:last-child   { margin-bottom: 0; }
    3129.titre             { font-weight: bold; }
    32 .note              { color: green; font-size: .9rem; }
    3330@font-face {
    3431    font-family: 'sourcesans';
     
    5249}
    5350
     51/* code */
     52.coloration_code   { font-family: monospace; font-size: .8rem; margin: 1rem 0; padding: .5rem; background-color: rgba(0,0,0,.05); }
     53.code, code        { white-space: pre-wrap; font-size: 85%; font-family: monospace; color: green; }
     54code.balise        { color: #CA5200; }
     55code.filtre        { color: #E1861A; }
     56code.parametre     { color: #74B900; }
     57code.variable      { color: #00F; }
     58code.boucle        {  }
     59code.table         { color: #527EE0; }
     60code.fichier       { color: #777; }
     61
    5462/* divers */
    55 #annotations       { position: absolute; top: 0; left: 4rem; padding: 0 .66rem; background-color: green;  font-size: .9rem; color: #D0E7D0; text-decoration: none; }
    56 #annotations:hover { color: white; }
    5763img                { vertical-align: middle; }
    5864ul li              { list-style: none; padding: 0; }
    59 .outline:not(.off) { /*padding: 2px;*/ border: 1px dashed #73C273; border-radius: 2px; }
     65.notice            { padding: 1rem 1rem 1rem 3rem; margin: 2rem 0; background-position: 1rem center; background-repeat: no-repeat; background-color: #FEEB20; background-image: url('[(#CHEMIN_IMAGE{warning-24})]'); }
     66.notice.ok         { background-color: #91E472; background-image: url('[(#CHEMIN_IMAGE{ok-24})]'); }
     67.notice.erreur     { background-color: #F65151; background-image: url('[(#CHEMIN_IMAGE{erreur-24})]'); }
     68.bouton_action_post{ display: inline-block; }
     69.img.left          { float: left; margin-right: 1rem; }
     70.img.right         { float: right; margin-left: 1rem; }
     71
     72/* annotations */
     73#menu-annotations  { position: absolute; top: 0; left: 4rem; padding: 0 .66rem; background-color: green;  font-size: .9rem; color: #D0E7D0; text-decoration: none; }
     74#menu-annotations:hover { color: white; }
     75.outline:not(.off) { border: 1px dashed #73C273; border-radius: 2px; }
    6076.outline.large:not(.off) { padding: .5rem; }
     77.note              { color: green; font-size: .9rem; }
    6178.etiquette         { position: relative; display: inline-block; padding: 0 .4rem; background: green; font-size: .7rem; font-family: Monospace; color: white; border-radius: 2px; }
    6279.etiquette:after   { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 128, 0, 0); border-width: 5px; }
     
    6582.etiquette.right:after   { right: 100%; top: 50%; border-right-color: #008000; margin-top: -5px; }
    6683.etiquette.right   { margin-left: 5px; }
    67 .notice            { padding: 1rem 1rem 1rem 3rem; margin: 2rem 0; background-position: 1rem center; background-repeat: no-repeat; background-color: #FEEB20; background-image: url('[(#CHEMIN_IMAGE{warning-24})]'); }
    68 .notice.ok         { background-color: #91E472; background-image: url('[(#CHEMIN_IMAGE{ok-24})]'); }
    69 .notice.erreur     { background-color: #F65151; background-image: url('[(#CHEMIN_IMAGE{erreur-24})]'); }
    70 .surligne          { /*background-color: rgba(255, 225, 0, 0.33); padding: 0 .25rem;*/ }
    71 .bouton_action_post{ display: inline-block; }
    72 .img.left          { float: left; margin-right: 1rem; }
    73 .img.right         { float: right; margin-left: 1rem; }
    7484
    7585/* menu */
     
    92102.liste-produits li { display:inline-block; width: 32%; }
    93103.liste-produits li > div:not(:last-child) { margin-bottom: .5rem; }
     104.produits .bouton_action_post{ display: block; }
    94105
    95106/* 2. panier */
     
    109120.payer_acte .boutons form { display: inline-block; }
    110121.paiement .bouton.annuler  { margin-top: 1rem; }
     122
  • _squelettes_/tutocommerce/trunk/demo/inc-paiement-explications.html

    r87452 r87474  
    55<BOUCLE_commande(COMMANDES){id_auteur=#SESSION{id_auteur}}{0,1}{!par date}{statut=encours}>#SET{id_commande,#ID_COMMANDE}<BOUCLE_transaction(TRANSACTIONS){id_commande}>#SET{id_transaction,#ID_TRANSACTION}</BOUCLE_transaction></BOUCLE_commande>
    66
    7 <h2>Étape 3 : paiement de la commande</h2>
     7<h1>Étape 3 : paiement de la commande</h1>
    88
    9 <p>
    10         Une commande « en cours » [<a href='[(#URL_ECRIRE{commande,id_commande=#GET{id_commande}})]'>n° (#GET{id_commande})</a>] a été créée après validation du panier, il reste à procéder à son règlement.
    11 </p>
     9Une commande « en cours » [<a href='[(#URL_ECRIRE{commande,id_commande=#GET{id_commande}})]'>n° (#GET{id_commande})</a>] a été créée après validation du panier, il reste à procéder à son règlement.
     10La page est encapsulée dans une boucle qui récupère la commande en cours du visiteur. En théorie, il ne peut y avoir qu'une commande en cours par auteur, mais pour être sûr on peut ajouter les critères <code>{0,1}{!par date}</code>.
    1211
    13 <p>
    14         La page est encapsulée dans une boucle qui récupère la commande en cours du visiteur : <code>&lt;BOUCLE_commande(COMMANDES){id_auteur=\#SESSION{id_auteur}}{statut=encours}&gt;</code>. En théorie, il ne peut y avoir qu'une commande en cours par auteur, mais pour être sûr on peut ajouter les critères <code>{0,1}{!par date}</code>.
    15         <br>Pour afficher le contenu de la commande, vous pouvez inclure le squelette <code>inclure/commande.html</code>, ou vous inspirer de <code>prive/squelettes/inclure/commande_contenu.html</code> qui comporte plus d'informations (taxes, etc.).
    16 </p>
     12<cadre class='spip'>\<BOUCLE_commande(COMMANDES){id_auteur=\#SESSION{id_auteur}}{statut=encours}{0,1}{!par date}></cadre>
    1713
    18 <p>
    19         Pour afficher les options de paiement, 2 formulaires sont disponibles en fonction du type de paiement que l'on souhaite : acte &rarr; <code>\#FORMULAIRE_PAYER_ACTE</code>, abonnement &rarr; <code>\#FORMULAIRE_PAYER_ABONNEMENT</code>. Il faut bien sûr qu'au moins un mode paiement soit <a href='[(#URL_ECRIRE{configurer_bank})]'>configuré</a>. Le 1er paramètre est le prix TTC, le 2ème est un tableau d'options contenant à minima le prix HT, l'identifiant de la commande et celui de l'auteur. On peut également préciser les URLs de retour en cas de succès ou d'échec du paiement, par défaut il s'agit de <code>spip.php?page=bank_retour_ok</code> et <code>spip.php?page=bank_retour_echec</code>. La liste complète des options est indiquée dans le code, voir en ligne : <a href='https://github.com/nursit/bank/blob/master/formulaires/payer_acte.php'>payer_acte.php</a>.
    20 </p>
     14{{{Récapitulatif}}}
    2115
    22 <p>
    23 <code class='multi'>\#FORMULAIRE_PAYER_ACTE{
     16Pour afficher le contenu de la commande, vous pouvez inclure le squelette <code class='fichier'>inclure/commande.html</code>, ou vous inspirer de <code class='fichier'>prive/squelettes/inclure/commande_contenu.html</code> qui comporte plus d'informations (taxes, etc.). Des informations complémentaires devront figurer si vous prenez en charge des adresses etc.
     17
     18{{{Des transactions}}}
     19
     20Les paiements donnent lieu à des «transactions», il s'agit d'un objet SPIP que l'on gère dans l'espace privé au même titre que les commandes. <a href="[(#URL_ECRIRE{transactions})]">La page des transactions</a> et <a href='[(#URL_ECRIRE{commandes})]'>la page des commande</a> se trouvent dans le menu «Activité».
     21
     22{{{Paiement}}}
     23
     24Pour afficher les options de paiement, 2 formulaires sont disponibles en fonction du type de paiement que l'on souhaite : acte &rarr; <code class='balise'>\#FORMULAIRE_PAYER_ACTE</code>, abonnement &rarr; <code class='balise'>\#FORMULAIRE_PAYER_ABONNEMENT</code>. Il faut bien sûr qu'au moins un mode paiement soit <a href='[(#URL_ECRIRE{configurer_bank})]'>configuré</a>. Le 1er paramètre est le prix TTC, le 2ème est un tableau d'options contenant à minima le prix HT, l'identifiant de la commande et celui de l'auteur. On peut également préciser les URLs de retour en cas de succès ou d'échec du paiement, par défaut il s'agit de <code class='parametre'>spip.php?page=bank_retour_ok</code> et <code class='parametre'>spip.php?page=bank_retour_echec</code>. La liste complète des options est indiquée dans le code, voir en ligne : [payer_acte.php->https://github.com/nursit/bank/blob/master/formulaires/payer_acte.php]</a>.
     25Dès que le formulaire est affiché, une transaction liée à la commande est créée. Tant que le paiement n'a pas été confirmé, la transaction a le statut «commande», et le champ <code>montant_regle</code> est vide.
     26
     27<cadre class='spip'>\#FORMULAIRE_PAYER_ACTE{
    2428        \#PRIX*,
    2529        \#ARRAY{
     
    2832                id_auteur,\#ID_AUTEUR
    2933        }
    30 }</code>
    31 </p>
     34}</cadre>
    3235
    33 <p>
    34         Dès que le formulaire est affiché, une transaction liée à la commande est créée. Vous pouvez vérifier sa présence dans l'espace privé sur <a href="[(#URL_ECRIRE{transactions})]">la page des transactions</a> ou directement sur <a href='[(#URL_ECRIRE{commande,id_commande=#GET{id_commande}})]'>la fiche de la commande</a> (les commandes et les transactions se trouvent dans le menu «&nbsp;Activité&nbsp;»). Tant que le paiement n'a pas été confirmé, la transaction a le statut «&nbsp;commande&nbsp;», et le champ <code>montant_regle</code> est vide.
    35 </p>
     36Une fois le paiement effectué ou simulé, selon le mode de paiement, il y a 2 possibilités pour la suite :
     37&rarr; Si le mode de paiement permet de connaître l'issue du paiement automatiquement (carte bancaire, etc.), on sera redirigé vers une des 2 pages de succès ou d'échec. La transaction et la commande seront mises à jour automatiquement.
     38&rarr; Dans le cas contraire (paiement par chèque, virement bancaire, etc.), on reste sur la page. Il faudra indiquer manuellement quand le paiement sera reçu.
    3639
    37 <p>
    38         Une fois le paiement effectué ou simulé, selon le mode de paiement, il y a 2 possibilités pour la suite :
    39         <br>&rarr; Si le mode de paiement permet de connaître l'issue du paiement automatiquement (carte bancaire, etc.), on sera redirigé vers une des 2 pages de succès ou d'échec. La transaction et la commande seront mises à jour automatiquement.
    40         <br>&rarr; Dans le cas contraire (paiement par chèque, virement bancaire, etc.), on reste sur la page. Il faudra indiquer manuellement quand le paiement sera reçu.
    41 </p>
    42 
    43 <p>
    44         Lors de vos développements, vous pouvez créer des transactions factices au moyen de <code>\#FORMULAIRE_DEMO_CREER_TRANSACTION</code>.
    45 </p>
     40Lors de vos développements, vous pouvez créer des transactions factices au moyen de <code class='balise'>\#FORMULAIRE_DEMO_CREER_TRANSACTION</code>.
  • _squelettes_/tutocommerce/trunk/demo/inc-panier-explications.html

    r87452 r87474  
    55<h1>Étape 2 : validation du panier et création de la commande.</h1>
    66
    7 <p>
    8         On affiche le contenu du panier au moyen de <code>\#FORMULAIRE_PANIER</code>. Sans paramètre, il s'agit du panier en cours, sinon on peut passer l'identifiant d'un panier donné (voir le code en ligne : <a href="http://zone.spip.org/trac/spip-zone/browser/_plugins_/paniers/trunk/formulaires/panier.php">panier.php</a> et <a href="http://zone.spip.org/trac/spip-zone/browser/_plugins_/paniers/trunk/formulaires/panier.html">panier.html</a>). Le formulaire permet de changer les quantités de chaque objet et de recalculer le total. Pour retirer un objet, passer la quantité à 0 et recalculer. L'identifiant du panier en cours peut être récupéré avec <code>\#SESSION{id_panier}</code>.
    9         <br>Un panier est réparti sur 2 tables : les infos de base sont contenues dans la table <code>spip_paniers</code>, les objets et leurs quantités se trouvent dans la table <code>spip_paniers_liens</code>.
    10 <p>
     7On affiche le contenu du panier au moyen de <code class='balise'>\#FORMULAIRE_PANIER</code>. Sans paramètre, il s'agit du panier en cours, sinon on peut passer l'identifiant d'un panier donné (voir le code en ligne : [panier.php->http://zone.spip.org/trac/spip-zone/browser/_plugins_/paniers/trunk/formulaires/panier.php] et [panier.html->http://zone.spip.org/trac/spip-zone/browser/_plugins_/paniers/trunk/formulaires/panier.html]). Le formulaire permet de changer les quantités de chaque objet et de recalculer le total. Pour retirer un objet, passer la quantité à 0 et recalculer. L'identifiant du panier en cours peut être récupéré avec <code class='balise'>\#SESSION{id_panier}</code>.
     8Un panier est réparti sur 2 tables : les infos de base sont contenues dans la table <code class='table'>spip_paniers</code>, les objets et leurs quantités se trouvent dans la table <code class='table'>spip_paniers_liens</code>.
    119
    12 <p>
    13         On peut supprimer le panier en cours au moyen du bouton d'action <code>supprimer_panier_encours</code>, ou un panier donné avec <code>supprimer_panier</code> (voir le code en ligne : <a href="http://zone.spip.org/trac/spip-zone/browser/_plugins_/paniers/trunk/action/supprimer_panier_encours.php">supprimer_panier_encours.php</a> et <a href="http://zone.spip.org/trac/spip-zone/browser/_plugins_/paniers/trunk/action/supprimer_panier.php">supprimer_panier.php</a>).
    14         <cadre class='code multi'>[(\#BOUTON_ACTION{
    15         'vider le panier',
     10On peut supprimer le panier en cours au moyen du bouton d'action <code class='parametre'>supprimer_panier_encours</code>, ou un panier donné avec <code class='parametre'>supprimer_panier</code> (voir le code en ligne : [supprimer_panier_encours.php->http://zone.spip.org/trac/spip-zone/browser/_plugins_/paniers/trunk/action/supprimer_panier_encours.php] et [supprimer_panier.php->http://zone.spip.org/trac/spip-zone/browser/_plugins_/paniers/trunk/action/supprimer_panier.php]).
     11
     12<cadre class='spip'>[(\#BOUTON_ACTION{
     13        \<:paniers:vider_le_panier:>,
    1614        \#URL_ACTION_AUTEUR{
    1715                supprimer_panier_encours,
     
    1917                \#SELF}
    2018})]</cadre>
    21 </p>
    2219
    23 <p>
    24         On valide le panier au moyen du bouton d'action <code>commandes_paniers</code>, qui va le transformer en commande. Celle-ci aura le statut «&nbsp;en cours&nbsp;», et le panier sera supprimé. A noter qu'il ne peut y avoir qu'une seule commande en cours à la fois par visiteur : toute nouvelle commande en cours créée écrasera une éventuelle ancienne commande avec le même statut. Le 2ème paramètre à passer à <code>\#URL_ACTION_AUTEUR</code> est l'identifiant du panier, s'il n'est pas donné ce sera celui en cours (voir le code en ligne : <a href="http://zone.spip.org/trac/spip-zone/browser/_plugins_/commandes_paniers/action/commandes_paniers.php">commandes_paniers.php</a>).
    25 <cadre class='code multi'>[(\#BOUTON_ACTION{
     20On valide le panier au moyen du bouton d'action <code class='parametre'>commandes_paniers</code>. Le panier va être "transformé" en commande : celle-ci aura le statut «en cours», et le panier sera supprimé. A noter qu'il ne peut y avoir qu'une seule commande en cours à la fois par visiteur : toute nouvelle commande en cours créée écrasera une éventuelle ancienne commande avec le même statut. Le 2ème paramètre à passer à <code class='balise'>\#URL_ACTION_AUTEUR</code> est l'identifiant du panier, s'il n'est pas donné ce sera celui en cours (voir le code en ligne : [commandes_paniers.php->http://zone.spip.org/trac/spip-zone/browser/_plugins_/commandes_paniers/action/commandes_paniers.php]).
     21
     22<cadre class='spip'>[(\#BOUTON_ACTION{
    2623        'passer la commande',
    2724        \#URL_ACTION_AUTEUR{
     
    3027                \#URL_PAGE{paiement}}
    3128})]</cadre>
    32 </p>
    3329
    34 <h3>Remarques complémentaires</h3>
     30{{{Remarques complémentaires}}}
    3531
    36 <p>
    37         Pour gérer des adresses de facturation et de livraison, il nous faudrait le plugin «&nbsp;<a href='http://plugins.spip.net/coordonnees'>Coordonnées</a>&nbsp;». On pourrait afficher une simulation des frais de port à côté du panier. Il faudrait insérer une ou plusieurs étapes supplémentaires avant le paiement afin de choisir ou créer des adresses, choisir un mode de livraison, etc.
    38 </p>
     32Pour gérer des adresses de facturation et de livraison, il nous faudrait le plugin «[Coordonnées->http://plugins.spip.net/coordonnees]». On pourrait afficher une simulation des frais de port à côté du panier. Il faudrait insérer une ou plusieurs étapes supplémentaires avant le paiement afin de choisir ou créer des adresses, choisir un mode de livraison, etc.
  • _squelettes_/tutocommerce/trunk/demo/inc-panier.html

    r87452 r87474  
    2323        <div class='note'>Suppression du panier.</div>
    2424        [(#BOUTON_ACTION{
    25                 'Vider le panier',
     25                <:paniers:vider_le_panier:>,
    2626                #URL_ACTION_AUTEUR{
    2727                        supprimer_panier_encours,
  • _squelettes_/tutocommerce/trunk/demo/inc-preambule-explications.html

    r87452 r87474  
    1818<h1>Tutoriel : les bases pour implémenter le framework ecommerce pour SPIP dans vos squelettes.</h1>
    1919
    20 <p>
    21         Sous SPIP, il existe un framework permettant de faire du ecommerce. Il est complètement fonctionnel, modulaire, extensible, et permet de faire de la vente dans le confort de notre CMS favori. Il répondra aux besoins simples de ecommerce, sans toutefois être comparable aux solutions exclusivement dédiées au sujet, comme <a href="http://www.prestashop.com">Prestashop</a>, <a href="http://www.thelia.fr/">Thelia</a> et cie.
    22 </p>
     20Sous SPIP, il existe un framework permettant de faire du ecommerce. Il est complètement fonctionnel, modulaire, extensible, et permet de faire de la vente dans le confort de notre CMS favori. Il répondra aux besoins simples de ecommerce, sans toutefois être comparable aux solutions exclusivement dédiées au sujet, comme [Prestashop->http://www.prestashop.com], [Thelia->http://www.thelia.fr/] et cie.
    2321
    24 <p>
    25         Ce plugin s'adresse aux gens qui écrivent des squelettes, il a un objectif didactique : montrer par l'exemple <em>les bases</em> de la mise en oeuvre du framework, en expliquant les éléments à placer dans vos squelettes. On va s'en tenir aux 3 étapes <em>minimales</em> du «&nbsp;tunnel de commande&nbsp;»&nbsp;: ajouter des objets au panier &rarr; valider celui-ci &rarr; payer la commande. C'est relativement simple : en 3 squelettes, au moyen de quelques boutons d'actions et formulaires, vous avez déjà le minimum nécessaire pour vendre des choses sur votre site. À partir de là, vous pourrez étoffer selon vos besoins pour gérer les taxes, les coordonnées, les clients, et toutes ces sortes de choses.
    26 </p>
     22Ce plugin s'adresse aux gens qui écrivent des squelettes, il a un objectif didactique : montrer par l'exemple {les bases} de la mise en oeuvre du framework, en expliquant les éléments à placer dans vos squelettes. On va s'en tenir aux 3 étapes {minimales} du «tunnel de commande» : ajouter des objets au panier &rarr; valider celui-ci &rarr; payer la commande. C'est relativement simple : en peu de squelettes, au moyen de quelques boutons d'actions et formulaires, vous avez déjà le minimum nécessaire pour vendre des choses sur votre site. À partir de là, vous pourrez étoffer selon vos besoins pour gérer les taxes, les coordonnées, les clients, et toutes ces sortes de choses.
    2723
    28 <h2>Une suite de plugins</h2>
     24{{{Une suite de plugins}}}
    2925
    30 <p>
    31          Le framework se compose d'une suite de plugins complémentaires, chacun prenant en charge un aspect. Il faut au moins 5 plugins pour avoir quelque chose de fonctionnel, ils ont normalement été installés automatiquement avec l'activation de ce plugin, exception faite de «&nbsp;Banque & paiement&nbsp;» qui doit être installé manuellement, étant développé sur github : <a href="http://github.com/nursit/bank">http://github.com/nursit/bank<a>. Les plugins listés après sont optionnels.
    32 </p>
     26Le framework se compose d'une suite de plugins complémentaires, chacun prenant en charge un aspect. Il faut au moins 5 plugins pour avoir quelque chose de fonctionnel, ils ont normalement été installés automatiquement avec l'activation de ce plugin, exception faite de «Banque & paiement» qui doit être installé manuellement, étant développé sur github : [http://github.com/nursit/bank->http://github.com/nursit/bank]. Les plugins listés après sont optionnels.
    3327
    3428<div class='plugins'>
     
    5448</div>
    5549
    56 <h2>Des choses à vendre</h2>
     50{{{Des choses à vendre}}}
    5751
    58 <p>
    59         On peut vendre ce qu'on veut pourvu qu'il s'agisse d'objets éditoriaux SPIP : ils peuvent correspondre à des objets physiques, des abonnements, des services, etc. Pour cette démo, on va faire semblant de vendre des objets physiques. Une mini table <code>spip_produits_demos</code> a été créée à l'installation de ce plugin, elles contient 3 produits factices. À noter qu'il existe un plugin <a href="http://plugins.spip.net/produits">Produits</a> dédié à la gestion des produits, mais il n'est pas compatible SPIP 3 à l'heure actuelle.
    60 </p>
     52On peut vendre ce qu'on veut pourvu qu'il s'agisse d'objets éditoriaux SPIP : ils peuvent correspondre à des objets physiques, des abonnements, des services, etc. Pour cette démo, on va faire semblant de vendre des objets physiques. Une mini table <code class='table'>spip_produits_demos</code> a été créée à l'installation de ce plugin, elles contient 3 produits factices. À noter qu'il existe un plugin [Produits->http://plugins.spip.net/produits] dédié à la gestion des produits, mais il n'est pas compatible SPIP 3 à l'heure actuelle.
    6153
    62 <h2>Configuration</h2>
     54{{{Configuration}}}
    6355
    64 <p>
    65         [<a href="[(#CHEMIN{demo/images/bank-configuration-1.jpg})]" type='image/jpeg' class='mediabox img right'>(#CHEMIN{demo/images/bank-configuration-1.jpg}|image_reduire{150})</a>]
    66         Il nous faut configurer les systèmes de paiement sur la <a href="[(#URL_ECRIRE{configurer_bank})]">page de configuration</a> du plugin «&nbsp;Banque & paiement&nbsp;». On distingue 2 sortes de paiements : les paiements à l'acte et les paiements des abonnements. Pour cette démo, on ne va tester que la 1ère catégorie : il faut qu'il y ait au moins un mode de paiement à l'acte d'actif. De plus, on ne veut pas faire de paiement réel : pour chaque mode activé, cochez l'option «&nbsp;<code>Utiliser en mode TEST (aucun paiement réel)</code>&nbsp;» si elle est présente. Une autre possibilité est de choisir le mode de paiement «&nbsp;Simulation&nbsp;», qui est accessible en plaçant le code <code>define\('_SIMU_BANK_ALLOWED',true\);</code> dans le fichier <code>config/mes_options.php</code>.
    67 </p>
     56[<a href="[(#CHEMIN{demo/images/bank-configuration-1.jpg})]" type='image/jpeg' class='mediabox img right'>(#CHEMIN{demo/images/bank-configuration-1.jpg}|image_reduire{150}|inserer_attribut{alt,'configuration des systèmes de paiement'})</a>] Il nous faut configurer les systèmes de paiement sur la [page de configuration->[(#URL_ECRIRE{configurer_bank})]] du plugin «Banque & paiement». On distingue 2 sortes de paiements : les paiements à l'acte et les paiements des abonnements. Pour cette démo, on ne va tester que la 1ère catégorie : il faut qu'il y ait au moins un mode de paiement à l'acte d'actif. De plus, on ne veut pas faire de paiement réel : pour chaque mode activé, cochez l'option «<code>Utiliser en mode TEST (aucun paiement réel)</code>» si elle est présente. Une autre possibilité est de choisir le mode de paiement «Simulation», qui est accessible en plaçant le code suivant dans le fichier <code class='fichier'>config/mes_options.php</code> : <code class='php'>define\('_SIMU_BANK_ALLOWED',true\);</code>
    6857
    69 <h2>Commencer</h2>
     58{{{Commencer}}}
    7059
    71 <p>
    72         Quand tout est installé et configuré, rendez-vous à la <a href="[(#SELF|parametre_url{etape,produits})]">1ère étape</a>.
    73 </p>
     60Quand tout est installé et configuré, rendez-vous à la [1ère étape->[(#SELF|parametre_url{etape,produits})]].
     61
  • _squelettes_/tutocommerce/trunk/demo/inc-produits-explications.html

    r87452 r87474  
    11[(#REM)
    22        Tutoriel pour implémenter le framework ecommerce sous SPIP.
    3         Étape 0 : Produits > explications.
     3        Étape 1 : Produits > explications.
    44]
    55<h1>Étape 1 : ajout d'objets au panier.</h1>
    66
    7 <p>
    8         Cette page liste les objets à vendre. Pour cette démo, on imagine vendre des objets physiques : il s'agit de produits factices qui ont été installés automatiquement dans la table <code>spip_produits_demos</code>. Tant qu'il s'agit d'objets éditoriaux SPIP, on peut vendre ce qu'on veut : abonnements, services, objets virtuels etc.
    9 </p>
     7Cette page liste les objets à vendre. Pour cette démo, on imagine vendre des objets physiques : il s'agit de produits factices qui ont été installés automatiquement dans la table <code class='table'>spip_produits_demos</code>. Tant qu'il s'agit d'objets éditoriaux SPIP, on peut vendre ce qu'on veut : abonnements, services, objets virtuels etc.
    108
    11 <p>
    12         Pour ajouter un objet au panier, il suffit de placer un bouton d'action <code>remplir_panier</code> dans le squelette. Le 2ème paramètre à passer à <code>\#URL_ACTION_AUTEUR</code> est de la forme : <code>objet-id_objet-quantite</code> (voir le code en ligne : <a href="http://zone.spip.org/trac/spip-zone/browser/_plugins_/paniers/trunk/action/remplir_panier.php">remplir_panier.php</a>).
    13 <cadre class='code multi'>[(\#BOUTON_ACTION{
    14         'Ajouter au panier',
     9{{{Ajouter au panier}}}
     10Pour ajouter un objet au panier, il suffit de placer un bouton d'action <code class='parametre'>remplir_panier</code> dans le squelette. Le 2ème paramètre à passer à <code class='balise'>\#URL_ACTION_AUTEUR</code> est de la forme : <code class='parametre'>objet-id_objet-quantite</code> (voir le code en ligne : [remplir_panier.php->http://zone.spip.org/trac/spip-zone/browser/_plugins_/paniers/trunk/action/remplir_panier.php]).
     11
     12<cadre class='spip'>[(\#BOUTON_ACTION{
     13        \<:paniers:action_ajouter:>,
    1514        \#URL_ACTION_AUTEUR{
    1615                remplir_panier,
     
    1817                \#SELF}
    1918})]</cadre>
    20 </p>
    2119
    22 <p>
    23         Le bouton d'action créé ou met à jour le panier lié au visiteur en cours, dans les tables <code>spip_paniers</code> et <code>spip_paniers_liens</code>. On peut boucler dessus si besoin, par exemple pour afficher un lien vers le panier quand celui-ci est rempli.
    24 <cadre class='code multi'>&lt;BOUCLE_panier(paniers_liens){id_panier=\#SESSION{id_panier}}{0,1}&gt;
    25 &lt;a href="\#URL_PAGE{panier}"&gt;voir le panier&lt;/a&gt;
    26 &lt;/BOUCLE_panier&gt;</cadre>
    27 </p>
     20Le bouton d'action créé ou met à jour le panier lié au visiteur en cours, dans les tables <code class='table'>spip_paniers</code> et <code class='table'>spip_paniers_liens</code>. On peut boucler dessus si besoin, par exemple pour afficher un lien vers le panier quand celui-ci est rempli.
    2821
    29 <p>
    30         Le plugin <a href="http://plugins.spip.net/prix.html">API Prix</a> permet de gérer les prix des objets. On le définit soit par le biais d'une fonction dans un fichier <code>prix/{objet}.php</code>, soit via un champ normalisé <code>prix</code> et/ou <code>prix_ht</code> (voir le code en ligne : <a href="http://zone.spip.org/trac/spip-zone/browser/_plugins_/prix/inc/prix.php#L24">prix.php</a>). Dans les squelettes, les prix affichés par les balises <code>\#PRIX</code> et <code>\#PRIX_HT</code> sont formatés automatiquement en incluant la devise grâce au filtre <code>|prix_formater</code>. Lorsque vous avez besoin du prix brut, pensez à ajouter un étoile pour empêcher le traitement : <code>\#PRIX*</code>. On peut définir la devise et son écriture au moyen des variables de personnalisation <code>PRIX_DEVISE</code> et <code>DEVISE_DEFAUT</code>, par défaut ce sont des Euros (voir le code en ligne : <a href="http://zone.spip.org/trac/spip-zone/browser/_plugins_/prix/prix_fonctions.php#L47">prix_fonctions.php</a> et aussi l'article : <a href="http://www.spip.net/fr_article1825.html">Les variables de personnalisation</a>).
    31         <br>Les produits factices de cette page possèdent un champ <code>prix</code> correspondant au prix TTC. Leur prix HT est calculé en fonction de ce dernier, selon une TVA de 20%, le tout étant défini dans le fichier <code>prix/produitdemo.php</code>.
    32 </p>
     22<cadre class='spip'>\<BOUCLE_panier(paniers_liens){id_panier=\#SESSION{id_panier}}{0,1}>
     23<a href="\#URL_PAGE{panier}">voir le panier</a>
     24\</BOUCLE_panier></cadre>
    3325
    34 <h3>Remarques complémentaires</h3>
     26{{{Gestion des prix}}}
    3527
    36 <p>
    37         Et si on veut donner la possibilité de choisir une déclinaison, une taille, une couleur etc. ? Pour l'instant, ce n'est pas possible nativement : un panier contient une liste d'objets et leur quantités, mais ne permet pas de stocker des informations supplémentaires. Il faudrait dans ce cas étendre la table <code>spip_paniers_liens</code> et utiliser un formulaire personnalisé à la place du bouton d'action.
    38 </p>
     28Le plugin [API Prix->http://plugins.spip.net/prix.html] permet de gérer les prix des objets. On le définit soit par le biais d'une fonction dans un fichier <code class='fichier'>prix/{objet}.php</code>, soit via un champ normalisé <code>prix</code> et/ou <code>prix_ht</code> (voir le code en ligne : [prix.php->http://zone.spip.org/trac/spip-zone/browser/_plugins_/prix/inc/prix.php\#L24]). Dans les squelettes, les prix affichés par les balises <code class='balise'>\#PRIX</code> et <code class='balise'>\#PRIX_HT</code> sont formatés automatiquement en incluant la devise grâce au filtre <code class='filtre'>|prix_formater</code>. Lorsque vous avez besoin du prix brut, pensez à ajouter un étoile pour empêcher le traitement : <code class='balise'>\#PRIX*</code>. On peut définir la devise et son écriture au moyen des variables de personnalisation <code class='variable'>PRIX_DEVISE</code> et <code class='variable'>DEVISE_DEFAUT</code>, par défaut ce sont des Euros (voir le code en ligne : [prix_fonctions.php->http://zone.spip.org/trac/spip-zone/browser/_plugins_/prix/prix_fonctions.php\#L47] et pour rappel : [Les variables de personnalisation->http://www.spip.net/fr_article1825.html]).
     29Les produits factices de cette page possèdent un champ <code>prix</code> correspondant au prix TTC. Leur prix HT est calculé en fonction de ce dernier, selon une TVA de 20%, le tout étant défini dans le fichier <code class='fichier'>prix/produitdemo.php</code>.
     30
     31{{{Remarques complémentaires}}}
     32
     33Et si on veut donner la possibilité de choisir une déclinaison, une taille, une couleur etc. ? Pour l'instant, ce n'est pas possible nativement : un panier contient une liste d'objets et leur quantités, mais ne permet pas de stocker des informations supplémentaires. Il faudrait dans ce cas étendre la table <code class='table'>spip_paniers_liens</code> et utiliser un formulaire personnalisé à la place du bouton d'action.
     34
  • _squelettes_/tutocommerce/trunk/demo/inc-produits.html

    r87452 r87474  
    1919                <div class='prix ht'>
    2020                        Prix HT : <span class='outline'>[(#PRIX_HT)]</span>
    21                         <div class='etiquette right'>\#PRIX_HT</div>
     21                        <div class='etiquette balise right'>\#PRIX_HT</div>
    2222                </div>
    2323
    2424                <div class='prix ttc'>
    2525                        Prix TTC : <span class='outline'>[(#PRIX)]</span>
    26                         <div class='etiquette right'>\#PRIX</div>
     26                        <div class='etiquette balise right'>\#PRIX</div>
    2727                </div>
    2828
    2929                [(#REM) Bouton pour ajouter l'objet au panier ]
    3030                <div class='bouton remplir-panier'>
    31                         <div class='etiquette top'>\#BOUTON_ACTION &rarr; remplir_panier</div>
    32                         <br>[(#BOUTON_ACTION{
    33                                 'Ajouter au panier',
     31                        <div class='etiquette balise top'>\#BOUTON_ACTION &rarr; remplir_panier</div>
     32                        [(#BOUTON_ACTION{
     33                                <:paniers:action_ajouter:>,
    3434                                #URL_ACTION_AUTEUR{
    3535                                        remplir_panier,
  • _squelettes_/tutocommerce/trunk/demo/inc-retour-explications.html

    r87452 r87474  
    44        Message de succès ou d'erreur.
    55]
    6 <h2>Étape 4 : message de succès ou d'erreur</h2>
     6<h1>Étape 4 : message de succès ou d'erreur</h1>
    77
    8 <p>
    9         Selon le mode choisi pour le paiement, on peut être redirigé sur la page de son choix suite au succès ou à l'échec de celui-ci, par défaut <code>spip.php?page=bank_retour_ok</code> ou <code>spip.php?page=bank_retour_echec</code>.
    10         <br>Dans cette démo on affiche juste un message relatif au paiement : soit celui enregistré avec la transaction, soit un message générique. Il s'agit de chaînes de langues surchargeables du plugin «&nbsp;Banque & paiement&nbsp;».
    11 </p>
     8Selon le mode choisi pour le paiement, on peut être redirigé sur la page de son choix suite au succès ou à l'échec de celui-ci, par défaut <code>spip.php?page=bank_retour_ok</code> ou <code>spip.php?page=bank_retour_echec</code>.
     9Dans cette démo on affiche juste un message relatif au paiement : soit celui enregistré avec la transaction, soit un message générique. Il s'agit de chaînes de langues surchargeables du plugin «Banque & paiement».
    1210
    13 </p>
    14         Dans l'URL de retour sont insérés automatiquement quelques paramètres : l'identifiant, le hash et le type de la transaction. Ça nous permet de faire une boucle <code>&lt;BOUCLE_transaction(TRANSACTIONS){id_transaction}{transaction_hash}&gt;</code>. Parmi les balises disponibles, notons celles qui pourront nous servir ici : <code>\#REGLEE (oui|non)</code> permet de savoir si la transation a été payée, <code>\#FINIE (0|1)</code> indique si la transaction est finie, <code>\#MESSAGE</code> renvoie un message d'info relatif au règlement de la transaction, et <code>\#STATUT (commande|ok|echec)</code> donne le statut.
    15 </p>
     11Dans l'URL de retour sont insérés automatiquement quelques paramètres : l'identifiant, le hash et le type de la transaction, ce qui nous permet de faire une boucle :
    1612
    17 <h3>Remarques complémentaires</h3>
     13<cadre class='spip'>\<BOUCLE_transaction(TRANSACTIONS){id_transaction}{transaction_hash}></cadre>
    1814
    19 <p>
    20         Dans une optique proche, le plugin <a href='http://contrib.spip.net/Z-Commerce'>Zcommerce</a> permet de charger les plugins nécessaires à la création d’une boutique en ligne et offre une démo basique permettant de gérer les différentes étapes d’un achat. Cependant, il gère les paiements différemment et utilise une suite légèrement différente de plugins.
    21 </p>
     15Parmi les balises disponibles, notons celles qui pourront nous servir ici : <code class='balise'>\#REGLEE</code> &rarr; <code>oui|non</code> permet de savoir si la transation a été payée, <code class='balise'>\#FINIE<</code> &rarr; <code>0|1</code> indique si la transaction est finie, <code class='balise'>\#MESSAGE</code> renvoie un message d'info relatif au règlement de la transaction, et <code class='balise'>\#STATUT</code> &rarr; <code>commande|ok|echec</code> donne le statut.
    2216
    23 <p>
    24         Pour découvrir toutes les options d'ecommerce avec SPIP, consultez l'article <a href="http://contrib.spip.net/Inventaire-des-outils-SPIP-pour-du-e-commerce">Inventaire des outils SPIP pour du e-commerce </a>.
    25 </p>
     17{{{Remarques complémentaires}}}
     18
     19Le plugin [Zcommerce->http://contrib.spip.net/Z-Commerce] propose une démo du framework basée sur [Z-Spip version 1->http://contrib.spip.net/Le-Squelette-Zpip] et une suite complète de plugins. Les paiements sont gérés différemment, et il est compatible SPIP 2.
     20
     21Pour découvrir toutes les options d'ecommerce avec SPIP, consultez l'article [Inventaire des outils SPIP pour du e-commerce->http://contrib.spip.net/Inventaire-des-outils-SPIP-pour-du-e-commerce].
  • _squelettes_/tutocommerce/trunk/demo/tutocommerce.html

    r87452 r87474  
    1010<head>
    1111        <meta charset="#CHARSET">
    12         <title>Tuto-commerce SPIP</title>
     12        <title>Tuto-commerce</title>
    1313        [<link rel="stylesheet" href="(#CHEMIN{css/reset.css}|direction_css)" type="text/css" />]
    1414        [<link rel="stylesheet" href="(#CHEMIN{css/typo.css}|direction_css)" type="text/css" />]
     
    1616        #INSERT_HEAD_CSS
    1717        #INSERT_HEAD
    18         <!-- script annotations -->
     18        <!-- script pour afficher ou cacher les annotations -->
    1919        <script>
    2020                $( document ).ready(function() {
    21                         $( "#annotations" ).click(function() {
     21                        $( "#menu-annotations" ).click(function() {
    2222                                $( ".note" ).toggle("fast");
    2323                                $( ".etiquette" ).toggle("fast");
     
    2929<body class='#GET{etape}'>
    3030
    31         <div class='page'>
     31        [(#REM) 1. Démo ]
     32        <div class='zone-demo'>
    3233
    3334                [(#REM) Menu de navigation ]
     
    4041                </B_menu>
    4142
    42                 [(#REM) Contenu de la page ]
     43                [(#REM) Contenu de la démo ]
    4344                [(#INCLURE{fond=demo/inc-#GET{etape}, env})]
    4445
    45                 [(#REM) option pour cacher les annotations ]
    46                 <a id='annotations' href='\#'>Cacher / Afficher les annotations</a>
     46        </div><!-- .zone-demo -->
    4747
    48         </div><!-- .page -->
    4948
    50         [(#REM) Explications relatives à la page ]
    51         [<div class='explications'>
    52                 (#INCLURE{fond=demo/inc-#GET{etape}-explications, env})
    53         </div><!-- explication-->]
     49        [(#REM) 2. Explications relatives à la démo ]
     50        <div class='zone-explications'>
     51
     52                [(#REM) Option pour cacher les annotations ]
     53                <a id='menu-annotations' href='\#'>Afficher / cacher les annotations</a>
     54
     55                [(#REM) texte ]
     56                [(#INCLURE{fond=demo/inc-#GET{etape}-explications, env}|propre)]
     57
     58        </div><!-- .zone-explications -->
    5459
    5560</body>
    5661</html>
    5762
     63
  • _squelettes_/tutocommerce/trunk/paquet.xml

    r87452 r87474  
    11<paquet
    22        prefix="tutocommerce"
    3         categorie="outil"
    4         version="1.0.3"
     3        categorie="divers"
     4        version="1.0.4"
    55        etat="test"
    66        compatibilite="[3.0.17;3.0.*]"
     
    99        schema="1.0.0"
    1010>
    11         <!--
    12                 Paquet genere le 2015-02-10 20:19:28
    13         -->
    1411
    1512        <nom>Tuto-commerce</nom>
     
    1916        <licence>GNU/GPL</licence>
    2017
     18        <!-- framework ecommerce -->
    2119        <necessite nom="commandes" compatibilite="[1.2.6;]" />
    2220        <necessite nom="paniers" compatibilite="[1.0.0;]" />
     
    2422        <necessite nom="prix" compatibilite="[0.1.8;]" />
    2523        <utilise nom="bank" compatibilite="[2.0.0;]" />
     24        <!-- divers -->
     25        <necessite nom="coloration_code" compatibilite="[0.6.0;]" />
    2626
    2727        <pipeline nom="declarer_tables_interfaces" inclure="base/tutocommerce.php" />
Note: See TracChangeset for help on using the changeset viewer.