Aller au contenu
Support de Zwii

Messages recommandés

Module Album

Voir le fichier

À propos de ce fichier

Module Album

 

Initialement écrit en septembre 2019 et publié sous le nom de Gallery 2.0 pour remplacer les lourdes images en pleine résolution, réduites visuellement et cropées, des premières versions de la galerie d'origine, par des vignettes légères de haute qualité, créées à la volée et mises en cache, le module Album propose une interface différente, affichant des miniatures en haute résolution respectant les proportions et l’orientation des photos, et des fonctions supplémentaires par rapport aux versions actuelles du module gallery livré avec le CMS

 

Au premier affichage de l'Album, le script corrige éventuellement le nom, l'orientation et la dimension des images puis créé les vignettes et les affiche, le traitement des photos peut être assez long, le temps d’exécution du script dépend du nombre de photo à traiter, de leur poids et du nombre d'opération à effectuer, durant ce temps l'affichage est interrompu et la page se recharge plusieurs fois, patientez, le script fait son boulot jusqu'au bout.


Dès le second affichage les vignettes sont simplement affichées depuis le cache

 

Les photos qui intègrent la balise GPS sont géo-localisables sur une carte Open Topo Map :

 

gps.thumb.jpg.08ce32d2bf23da4fd30e832224aa755e.jpg

 

osm1.jpg.8eb8d509aec2cd3f586d7b7bc59a08da.jpg

 

osm2.jpg.7bd6b71aee9c1061679ad2c0490ceb70.jpg

 

l'Album s’intègre dans la charte graphique de ZwiiCMS, l'affichage par défaut est sobre, il est facile de le modifier pour l’harmoniser avec votre site, en s'inspirant des données CSS du fichier "modification des couleurs" présent dans l'archive, à ajouter au fichier "custom.css" depuis l'interface de ZwiiCMS, après les avoir modifiées selon votre besoin

 

Index de la galerie :

accueil-1.1.thumb.jpg.7be8bb77697a2c1e7fe493d3e25c3bd5.jpg

 

Page interne de la galerie :

interne-1.thumb.jpg.5bbcb69cc200be76495d61c874242627.jpg

 

interne.thumb.jpg.139ddbe42f8d618d5aa46791affeaa2a.jpg

 

Le fonctionnement global du module Album est identique à celui de la galerie d'origine, écrite par @Rémi, améliorée et augmentée par @Fred, sur laquelle il est basé

 

Fonctionnalités supplémentaires :

    Renomme Réoriente Redimensionne

 

- Les caractères non alphanumériques et les espaces sont supprimés des noms des photos.

- Si besoin, la photo est réorientée.

- Les photos trop grandes, donc trop lourdes, mettent beaucoup de temps à s’afficher, ou ne s’affichent pas du tout dans certains cas. Pour un affichage fluide et rapide de la galerie, les trop grandes photos sont dimensionnées à la taille maximum correspondant à l’affichage courant des écrans en haute résolution, soit 1920 × 1280 pixels, les photos d’origine sont conservées et sont accessibles par un lien présent sous la vignette correspondante, pour distinguer ces photos de celles non redimensionnées, leurs noms s’affichent dans une couleur différente, notez que si la légende n’existe pas, elle est remplacée par le nom de la photo.

 

Ce traitement des images se fait au premier affichage de la galerie.

 

    Géo-Localisation

 

Cette fonction permet de géo-localiser sur une carte Open Street Map les photos qui intègrent la balise EXIF GPS, et de donner leurs altitudes

 

Les photos d’origine sont conservées et sont accessibles par un lien présent sous la vignette correspondante :

original-size.thumb.jpg.f0edf79209d4572f2db7769c0a6933bd.jpg

 

Les couleurs de fond et de texte peuvent s'harmoniser avec votre site en modifiant et en ajoutant le css ci-dessous dans votre custom.css :

/* !important
Le style de la galerie est prioritaire sur le custom.css, 
pour que vos changements de style soit appliqués vous devez ajouter l'attribut !important à vos éléments 
*/

/* Cases contenant les vignettes */
.galleryPicture, .galleryGalleryPicture {
/*exemple*/
background-color: gray !important;

}
.galleryPicture:hover, .galleryGalleryPicture:hover {
/*exemple*/
background-color: silver !important;

}
/* Nom ou légende de l'image */
.galleryName, .galleryGalleryName {
/*exemple*/
color: white !important;

}
.galleryName:hover, .galleryGalleryName:hover {
/*exemple*/
color: black !important;

}
/* Nom ou légende des images redimensionnées */
.picResized {
/*exemple*/
color: yellow !important;

}
.picResized:hover{
/*exemple*/
color: purple !important;

}

Exemple avec couleur sombre et effet hover sur les vignettes :

custom.thumb.jpg.97dabcf2a233369b2376b02a6cd30281.jpg

 

Exemple avec couleurs et effet hover sur les vignettes :

couleur.thumb.jpg.d9bf57d6c8217280ee3514dd049c3f6a.jpg

 

Installation du module Album sur votre site ZwiiCMS :
Décompressez l’archive module-album.zip, elle contient un dossier module contenant un sous-dossier album, puis envoyez par FTP le dossier module à la racine de votre site sous ZwiiCMS

 

Remplacement de votre galerie existante par l'album :

En utilisant le module Album, vous souhaiterez sans doutes conserver votre galerie existante, c’est très simple à faire : dans l’archive que vous aurez téléchargé se trouvent 2 fichiers, en plus du dossier d’installation du module album et de 3 autres fichiers informatifs :

 

  1. album-install-10.php
  2. remplacement.txt

 

Utilisation de ce fichier :

Par sécurité, faites une copie de votre fichier page.json
Cette action remplacera "moduleId":"gallery" par "moduleId":"album" dans le fichier /site/data/fr/page.json de la version 10.x

Copiez le nom de fichier ci-dessous, et copiez-le en fin d'adresse de votre site ZwiiCMS en ligne, comme ceci :
http://www.mon-site-en-ligne.com/album-install-10.php
NB : si la réécriture d'url n'est pas activée sur votre site, n'ajoutez pas le point d'interrogation ?

Puis ouvrez cette page en appuyant sur la touche "entrée" de votre clavier.
Une page vide avec un lien retour s'affiche alors

Par ce moyen, vous avez transféré l'ensemble de votre galerie vers le module album, que votre galerie soit celle livrée par défaut avec ZwiiCMS, ou celle que je proposais sous le nom de module gallery 2.0

 

Nom de fichier à copier/coller et à utiliser pour une version 10.x de votre ZwiiCMS :
album-install-10.php

 

Attention : en utilisant le fichier album-install-10.php il y a le risque de renommer aussi la page si vous utilisez le mot gallery dans le titre tel que : My Gallery, la page s'appelant alors my-gallery, si votre page comporte le mot gallery, renommez-la avant d'utiliser le fichier album-install-x.php

 


Modifié par Gilux
actualisation
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 27 minutes, mulanee a dit :

Sur un de mes sites, j'ai laissé l'accès à une autre galerie permettant la géolocalisation des photos (si évidemment l'exif est présent)

Ca serait un must d'avoir ça aussi dans ce module

 

Je ne sais pas si ça peut-être d'une grande utilité sur la galerie de ZwiiCMS ? Et comme tu le précises (si évidemment l'exif est présent), ce qui est loin d'être toujours le cas, sauf pour les photos brutes de décoffrage d'un APN si la géolocalisation des photos est effective, ce qui, la aussi, est loin d'être toujours le cas

Si il y a d'autres demandes dans ce sens, ça ne devrait pas être trop difficile à implémenter, mais ajouterait du code supplémentaire sur des pages déjà bien alourdies

Merci pour ce retour @mulanee

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a une heure, Gilux a dit :

 

Je ne sais pas si ça peut-être d'une grande utilité sur la galerie de ZwiiCMS ? Et comme tu le précises (si évidemment l'exif est présent), ce qui est loin d'être toujours le cas, sauf pour les photos brutes de décoffrage d'un APN si la géolocalisation des photos est effective, ce qui, la aussi, est loin d'être toujours le cas

Si il y a d'autres demandes dans ce sens, ça ne devrait pas être trop difficile à implémenter, mais ajouterait du code supplémentaire sur des pages déjà bien alourdies

Merci pour ce retour @mulanee

Je trouve ça assez utile sur un blog, les gens peuvent visualiser précisément où la photo a été prise.

Pas des photos d'art bien sûr, mais des photos de voyage prises avec son téléphone par exemple.

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 23 heures, mulanee a dit :

J'aimerais bien avoir l'aspect des vignettes comme l'exemple plus haut, plus petites et coins arrondis.

Comment trouver les instructions css?

 

Pour arrondir les angles, ajoute border-radius et une taille en pixels ou en pourcentage aux classes CSS .galleryPicture et .galleryGalleryPicture dans ton custom.css

Pas mal la couleur bleue :)

/* couleur des cases contenant les vignettes */
.galleryPicture, .galleryGalleryPicture {
	background-color: #213b52 !important;
	border-radius: 5px;
}

Par contre les vignettes visibles sur les captures d'écran ci-dessus ne sont pas plus petites, elles sont en format 16/9, les tiennes sont en 4/3

Partager ce message


Lien à poster
Partager sur d’autres sites

Super 🙂

 

Comment trouver d'autres instructions css?

Par exemple changer les forme/dimension des étiquettes?

 

Quand on arrive directement à la galerie les vignettes sont beaucoup plus grandes que celle des photos de la galerie, est-ce qu'on peut diminuer cette taille?

Et aussi comment faire pour que le fond "entoure" la photo? Pour le cadrage vertical on voit le fond sur les côtés, pour l'horizontal on voit le fond en haut et en bas, comment voir le fond partout autour?

257142167_Capturedcran_2019-09-22_10-09-45.png.63a8f616d4ad664c12de0ab33f156180.png

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 20/09/2019 à 19:22, mulanee a dit :

Ca serait un must d'avoir ça aussi dans ce module

 

J'ai regardé comment ils s'y prennent sur la galerie que tu cites, il s'agit d'une API Google avec 1 tonne de scripts et de CSS, je n'utiliserais pas cet API, je suis en train d'écrire et de tester quelque chose de beaucoup plus léger et affichant le résultat dans Open Street Map, présentant le gros avantage d'être dépourvu de tout traqueur. Car, évidemment, l'API Google fonctionne bien, et sans doutes mieux que ce que je pourrais écrire, mais au prix d'un pistage que tout le monde n'accepte pas

Je te tiendrais au courant de l'avancée des travaux sur la géolocalisation des photos dans la galerie

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 5 minutes, mulanee a dit :

Super 🙂

 

Comment trouver d'autres instructions css?

Par exemple changer les forme/dimension des étiquettes?

 

Quand on arrive directement à la galerie les vignettes sont beaucoup plus grandes que celle des photos de la galerie, est-ce qu'on peut diminuer cette taille?

Et aussi comment faire pour que le fond "entoure" la photo? Pour le cadrage vertical on voit le fond sur les côtés, pour l'horizontal on voit le fond en haut et en bas, comment voir le fond partout autour?

257142167_Capturedcran_2019-09-22_10-09-45.png.63a8f616d4ad664c12de0ab33f156180.png

 

On peut tout modifier, il suffit de reprendre les 2 fichiers CSS et les scripts de la galerie, il s'agit d'un travail de fond pour l'affichage de la galerie, pour lequel je demande d'autres avis mais aussi de l'aide, il y a des graphistes sur ce forum qui pourraient contribuer à faire avancer ce travail qui a pour ambition de proposer une galerie en remplacement de l'actuelle

 

En attendant, tu peux t'amuser à modifier les dimensions, ou tout autre chose, tu ne risque rien, et si ça plante il te suffit de remplacer le module par un tout neuf :)

 

il y a 14 minutes, mulanee a dit :

Pour le cadrage vertical on voit le fond sur les côtés, pour l'horizontal on voit le fond en haut et en bas, comment voir le fond partout autour?

 

Avec certaines tailles de photos et avec une certaine taille d'écran on ne voit pas de fond du tout, car ce sont les cellules responsives de ZwiiCMS qui sont utilisées pour l'affichage des vignettes, leurs dimensions étant donc plus ou moins grandes selon la taille d'écran, laissant apparaître plus ou moins de fond

Partager ce message


Lien à poster
Partager sur d’autres sites

De mieux en mieux!

 

J'ai noté que les coins des vignettes était arrondi en haut et pas en bas

J'ai noté qu'il n'y avait pas d'effet hover sur les photos elles-mêmes

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonsoir @mulanee

il y a 25 minutes, mulanee a dit :

J'ai noté que les coins des vignettes était arrondi en haut et pas en bas

 

C'est à cause de la couleur de :
.galleryGalleryName {
    background-color: #091754 !important;
    Capture1.jpg.eeda5b092aaff7055426c1e3968918de.jpg
Ce champ n'est plus coloré dans cette nouvelle présentation

 

il y a 26 minutes, mulanee a dit :

J'ai noté qu'il n'y avait pas d'effet hover sur les photos elles-mêmes

 

Si si, y'en a même 2 différents, page d'accueil il est évident, page interne il est plus discret, tu le remarques quand le nom de l'image déborde sur celle-ci

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 18 heures, Gilux a dit :

Bonsoir @mulanee

 

C'est à cause de la couleur de :
.galleryGalleryName {
    background-color: #091754 !important;
    Capture1.jpg.eeda5b092aaff7055426c1e3968918de.jpg
Ce champ n'est plus coloré dans cette nouvelle présentation

 

 

Si si, y'en a même 2 différents, page d'accueil il est évident, page interne il est plus discret, tu le remarques quand le nom de l'image déborde sur celle-ci

Il faut que je fasse quoi pour les coins, que je supprime ?

Citation

.galleryGalleryName {
    background-color: #091754 !important;

 

 

Je ne vois toujours pas l'effet hover sauf sur les vignettes avec géolocalisation où l'image passe par dessus le marker.

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 08/10/2019 à 18:17, mulanee a dit :

Il faut que je fasse quoi pour les coins, que je supprime ?

 

Oui, ou que tu arrondisses les angles 😉

 

Le 08/10/2019 à 18:17, mulanee a dit :

Je ne vois toujours pas l'effet hover sauf sur les vignettes avec géolocalisation où l'image passe par dessus le marker

 

L'image prend le focus au survol, recouvrant ainsi l'éventuel texte qui la recouvre, et aussi, en partie, le marker, c'est le seul effet que je trouve utile, car j'étais parti pour ne pas mettre d'effet sur les vignettes de la galerie

 

En prenant la capture d'écran ci-dessus, je me suis dit que vu l'affichage de tes vignettes sur ton site en 960px de large, il y avait du boulot à faire...

C'est fait, tu peux le voir avec la dernière version 3.4.0, ça devrait bien améliorer le rendu de ton site @mulanee

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour,

 

Le nom de mes vignettes est devenu noir comment faire pour que ça redevienne blanc 😩?

C'est dans custom.css j'imagine ..

 

Merci

Modifié par mulanee

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @mulanee

 

Il y a 4 heures, mulanee a dit :

Le nom de mes vignettes est devenu noir comment faire pour que ça redevienne blanc 😩?

C'est dans custom.css j'imagine ..

 

Oui, comme tu l'as déjà fait, c'est bien le custom.css qu'il faut modifier 😉

Ajoutes-y ces lignes depuis l'interface de ZwiiCMS, en modifiant les couleurs si besoin :

 

/* Nom ou légende de l'image */
.galleryName, .galleryGalleryName {
color: white !important;
}
/* Nom ou légende des images redimensionnées */
.picResized {
color: yellow !important;
}
.picResized:hover{
color: red !important;
}

 

Partager ce message


Lien à poster
Partager sur d’autres sites

PS : ton custom.css contient déjà ceci :

/* couleur des cases contenant les vignettes */
.galleryPicture, .galleryGalleryPicture {
	background-color: #213b52 !important;
	border-radius: 8px;

}

.picResized {
	color: #ff0000 !important;
}

Supprime la dernière instruction (.picResized...) avant d'y ajouter les nouvelles

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Depuis les modifications apportées hier, concernant principalement l'amélioration de l'affichage responsive, prenant en compte les différentes largeurs du site (750px, 960px, 1170px, 100%), je m'aperçois que la taille du texte sous les vignettes des pages intérieures n'est plus adaptée à ton site en 960px de large, elle est un peu trop grande, je vais donc modifier ce paramètre prochainement, en attendant tu peux diminuer cette taille en ajoutant ceci, après les instructions déjà ajoutées :

.galleryGalleryName {
	font-size: 0.8em;
}

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Super, j'ai retrouvé la bonne config, merci.

 

Je reste quand même perplexe sur le comportement des photos au passage de la souris où rien n'est visible sauf le marker caché quand il y en a un.

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 16 heures, mulanee a dit :

Je reste quand même perplexe sur le comportement des photos au passage de la souris où rien n'est visible sauf le marker caché quand il y en a un.

@mulanee

Tu peux modifier ce comportement en utilisant le fichier css et en ajoutant un effet de ton choix, l'exemple donné te montre l'utilisation de l'effet hover en changeant la couleur de fond

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 14 heures, mulanee a dit :

Désolé mais je ne vois aucun effet

 

Ben ? C'est normal @mulanee, vu que tu n'en as mis aucun...

 

01-accueil_crop.thumb.png.b89a9f3f7cb268b8d66ec3b0f61da273.png

 

02-interne.png.8e03d486815dd0bf91a1213594b85da9.png

 

Tout d'abord, je te conseille de télécharger et d'installer la dernière version 3.4.1 qui améliore l'affichage des sites comme le tiens en 960px de large

Ensuite, ton custom.css contient ceci :

/* couleur des cases contenant les vignettes */
.galleryPicture, .galleryGalleryPicture {
	background-color: #213b52 !important;
	border-radius: 8px;
}



/* Nom ou légende de l'image */
.galleryName, .galleryGalleryName {
color: white !important;
}

/* Nom ou légende des images redimensionnées */
.picResized {
color: yellow !important;
}

.picResized:hover{
color: red !important;
}

.galleryGalleryName {
	font-size: 0.8em;
}

Supprime tout et remplace le par ceci :

/* Cases contenant les vignettes */
.galleryPicture, .galleryGalleryPicture {
	background-color: #213b52 !important;
	border-radius: 8px;
}
.galleryPicture:hover, .galleryGalleryPicture:hover {
/* effet sur les vignettes changeant la couleur du fond, laisse ou remplace white par la couleur claire de ton choix */
	background-color: white !important;
}
/* Nom ou légende de l'image */
.galleryName, .galleryGalleryName {
	color: white !important;
}
.galleryName:hover, .galleryGalleryName:hover {
/* puisque le fond devient clair au survol, le texte blanc n'est plus visible, il faut donc une couleur sombre pour lire le texte au survol */
	color: black !important;
}
/* Nom ou légende des images redimensionnées */
.picResized {
	color: yellow !important;
}
.picResized:hover{
	color: red !important;
}

Le fond de couleur bleu deviendra blanc (white) au survol des vignettes pour la page d'accueil de la galerie (.galleryPicture:hover) et pour les pages internes (.galleryGalleryPicture:hover)

Si tu ne veux l'effet que sur les pages internes, supprime .galleryPicture:hover, sans oublier d'aussi supprimer la virgule

Les lignes de commentaires de /* à */ peuvent aussi être supprimées

Les couleurs indiquées sont des exemples, sauf la première qui est le bleu que tu as choisi, pour que l'affichage corresponde à tes goûts et s'harmonise avec ton site, tu peux les remplacer par des couleurs mieux adaptées 

 

 

 

 

 

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
/* puisque le fond devient clair au survol, le texte blanc n'est plus visible, il faut donc une couleur sombre pour lire le texte au survol */
	color: black !important;

 

Marche pas chez moi

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


  • Contenu similaire

    • Par sylvainlelievre
      Voir le fichier Snipcart pour ZwiiCMS
      Module Snipcart pour ZwiiCMS testé jusqu'à Zwii 10.4.04
       
      Voir le module sur le site de présentation
      C'est quoi ?
      Snipcart est une plateforme de panier d'achat qui permet d'ajouter très rapidement la fonction boutique en ligne à votre site web. Snipcart prend en charge la validation du panier, le paiement, les envois de courriels aux clients et bien d'autres choses. L’inscription et la phase de test sont gratuites, quand votre site sera prêt une commission de 2% sera retenue sur chaque vente. C’est une solution intéressante pour créer rapidement un site d'e-commerce et cerise sur le gâteau Snipcart est basée à Quebec, Canada.    https://snipcart.com/fr
       
      Le module Snipcart pour ZwiiCMS, proposé ici, crée une interface entre votre site Zwii et Snipcart en :
      - automatisant l'intégration de Snipcart à votre site,
      - facilitant la création des boutons d'ajout au panier ou de l'ensemble bouton et produit.
      Ce mode d'emploi présuppose que vous avez créé un compte Snipcart.
       
      RGPD : Le module Snipcart pour ZwiiCMS ne dépose pas de cookie, l'application tierce Snipcart dépose un cookie dénommée snipcart-cart nécessaire à la gestion du panier (consentement de l'internaute non nécessaire et il serait du ressort de Snipcart).
       
       
      Une boutique
       

       
       
       
      Le panier qui apparaît après un clic sur un bouton d'ajout au panier
       

       
       
      Installation ou mise à jour
      Décompressez l'archive snipcart_vxx.zip, elle contient 3 dossiers : core, module et site. Transférer par FTP ces 3 dossiers à la racine de votre site. Après une mise à jour 1.2 => 1.3 vous pouvez supprimer sur le serveur le dossier site/file/snipcart.
       
      Exemple dans le site www/10500/
       

       
      Création d'une page et configuration du module Snipcart
      Créez une nouvelle page et associez lui un module Snipcart
       

       
      Il est préférable de disposer le module en haut, un bouton d'accès au panier sera disposé en haut et à droite sur la page de vente en ligne (sinon ce sera en bas à droite).
      Enregistrez et en configuration du module activez Snipcart et renseignez votre API KEY Snipcart (disponible dans Dashboard / Configure your domain / API KEYS ).
       

      Enregistrez la configuration.
       
      C'est tout, votre module Snipcart a placé automatiquement les choses qu'il faut où il faut !
       
       
      Vous pouvez choisir en configuration 2 modes de création

       
      Voir la vidéo : https://youtu.be/qaHrO-kcwLM
       
      En résumé, à propos de ces  2 modes de création :
       
             vous ne créez que le bouton d'ajout au panier et vous êtes totalement libre pour éditer votre produit,        vous créez simultanément le bouton et le produit et vous éditez rapidement vos pages 'boutique'.  
       
             on peut modifier la configuration du module pour mixer les 2 modes sur une même page,        en mode bouton et produit vous disposez de 3 mises en page : en ligne et, avec gabarits, sur 2 colonnes ou 3 colonnes.  
       
      En configuration vous pouvez également régler quelques paramètres par défaut, pour simplifier la saisie des boutons d'ajout au panier ou de l'ensemble bouton et produit.
      Tous ces paramètres seront valables dans LA PAGE à laquelle vous avez associé le module Snipcart.
      Vous pouvez créer autant de pages d'e-commerce que vous le souhaitez avec des configurations de module indépendantes.
       

       
      En documentation vous disposez d'un lien vers la page de connexion Snipcart et un lien vers cette documentation.
       
      Edition d'une page d'e-commerce
      Editez la page à laquelle vous avez associé un module Snipcart. Dans la barre de menu Tinymce doit apparaître, à côté de l'émoticône, une icône Snipcart :
       

       
      L'icône Snipcart est également disponible dans le menu 'Insérer' et dans le menu contextuel.
       

       

       
      Dans l'éditeur Tinymce positionnez le curseur où vous voulez insérer un bouton et cliquez sur l'icône Snipcart, une fenêtre de création d'un bouton d'ajout au panier, ou de création bouton et produit, apparaît avec les valeurs par défaut définies en configuration pour poids en grammes, taxe et transport :
       

       
      Nom du produit
       
      A renseigner obligatoirement
      Id du produit
       
      Attention !  il doit absolument être unique et renseigné
       
      Description
       
      Facultatif
      Illustration
       
      Facultatif
      Vous avez préalablement transféré par FTP une image illustrant le produit
      Tarif TTC
       
      Prix TTC du produit en €,  hors éventuels frais de livraison
      Poids en grammes
       
      A renseigner si vous avez défini une règle de transport faisant intervenir le poids (voir Frais de transport) et si vous cochez la case 'Frais de transport', sinon laissez la valeur par défaut.
      Saisir un poids en grammes sans décimale
      Taxe
       
      A renseigner si vous avez défini une ou plusieurs taxes dans Snipcart (voir Taxes), sinon laissez vide.
      Le prix du produit étant TTC  cette valeur ne sert qu'à informer le client sur le montant des taxes
      Transport
       
      Pour que Snipcart ajoute des frais de transport, cochez la case. Dans ce cas une ou plusieurs règles de transport devront être créées dans Snipcart (voir Frais de transport)
      Pour des biens immatériels ou pour une collecte en magasin décochez la case, dans ce cas aucune règle de transport n'est obligatoire
      Attention !  si dans votre page se trouve au moins un produit avec frais de transport, ils seront calculés sur l'ensemble des produits.
       
       
      Dans l'onglet Bouton toutes les valeurs peuvent être réglées par défaut :
       

       
       
      L'onglet Options permet d'associer jusqu'à 2 options que le client pourra choisir sur la page panier :
       

       
      Par exemple si le client doit choisir la contenance d'une bouteille, saisissez dans data-item-custom1-name la phrase de votre choix par exemple Contenance et dans data-item-custom1-options les options possibles séparées par une barre verticale (Alt Gr 6) , par exemple : 37,5cl|75cl|1,5l
       

       
      C'est la première option (ici 35,5cl) qui s'affichera par défaut dans le panier.
       
      Si le choix a une incidence sur le prix ajoutez la entre crochets, par exemple : 37,5cl|75cl[+5]|1,5l[+10]
      Le choix 75cl entrainera une augmentation du prix de 5€.
       

       
       
      L'onglet Textes permet d'afficher une zone de saisie de texte pour le client et un message.
       

       
      Résultat obtenu avec pour la zone d'édition client data-item-custom3-name à Votre message et pour le message data-item-custom4-value à Merci pour votre commande (data-item-custom4-name laissée vide) :
       

       
       
      L'onglet Avancé permet d'ajouter au bouton des paramètres non prévus dans les onglets précédents, il nécessite une lecture approfondie du guide produits Snipcart dont un lien se trouve sur les onglets Options, Textes, et Avancé.
       
      Ne jamais modifier le code du bouton manuellement ( avec l'édition en code source de Tinymce) !
       

       
      Par exemple pour ajouter une case à cocher Cadeau vous saisissez data-item-custom5-name="Cadeau" data-item-custom5-type="checkbox" , vous obtenez :
       

       
      Panier obtenu avec 2 options Contenance et Bouchon, une zone de texte client, un message et une case à cocher Cadeau.
       
      Modification ou suppression du bouton d'ajout au panier
      Sélectionnez le bouton par un clic droit sur son texte :
       

       
      Et dans le menu contextuel choisir Snipcart.
       
      La fenêtre s'ouvre en mode modification suppression :
       

       
       
       
      Le mode d'emploi est identique, un bouton Supprimer apparaît en bas à droite pour faciliter la suppression d'un bouton d'ajout au panier ou de l'ensemble bouton et produit.
       
       
      Taxes
      Création de taxes dans Snipcart

       
      Les prix sur le site d'e-commerce sont TTC, vous devez cocher la case 'Included in price'.
       
       Si vous voulez que cette taxe soit calculée également sur les frais de transport cochez la case ' Applies on shippings'.
       
      Vous devez créer plusieurs taxes si dans votre boutique différentes taxes peuvent s'appliquer sur vos produits, exemple avec pour la France une TVA à 20%, 10%, 5.5%, 2.1%,...
       

       
      Dans Zwii quand vous créez votre bouton Snipcart d'ajout au panier, vous devez saisir le nom exact de la taxe, exemple ici avec 'TVA 20%'.
       

       
      Si vous voulez que plusieurs taxes s'appliquent au produit vous devez saisir le nom des taxes séparé par une barre verticale (AltGr touche 6), exemple avec les taxes TPS et TVQ saisir exactement TPS|TVQ.
       
      Quand, sur la page de votre site d'e-commerce, vous cliquez sur le bouton 'Ajouter au panier', vous obtenez pour un produit avec 'TAXE 20%' cet écran :
       

       
      Frais de transport
      Création d'une règle de transport dans Snipcart

       
      Vous pouvez ajouter Dans 'Handling' des frais et des délais de préparation.
       
      Placez Custom Shipping sur ON et cliquer sur CONFIGURE
       

       
       
      Puis sur CREATE SHIPPING METHOD.
       
       
       
      Donnez un nom à cette règle de transport et notez 0 dans FOR ORDER'S TOTAL ABOVE pour que cette règle s'applique dés le premier €.
       

       
      Si vous placez sur ON le choix LOCATION, vous devrez choisir le ou les pays pour lesquels cette règle de transport s'applique.
      Puis indiquez la tarification en €  par tranche de poids.
       

       
      Dans la boîte de dialogue Snipcart Tinymce, onglet Général, vous devez cocher la case 'Frais de transport' et renseigner le poids en grammes du produit.
      Astuce : si vous voulez une tarification par unité plutôt que par poids, rentrez 1 à chaque article dans la zone de texte poids en grammes (c'est la valeur par défaut à l'installation) et dans l'écran précédent créer une règle par grammes articles : de 1 à 6 grammes articles 10€, de 7 à 12 grammes articles 15€, etc...
       
       
       
       
       

      Contributeur sylvainlelievre Soumis 26/11/2020 Catégorie Les modules  
    • Par sylvainlelievre
      Voir le fichier Module de mailing automatisé
       
      Ce module Mailing vous permettra d'envoyer automatiquement des courriels à une date programmée.
       
      Voir ce module sur le site de présentation
       
      Module version 2.0 à utiliser à partir de Zwii 10.3.01, testé jusqu'à 10.4.04 : Mise à jour spéciale
       
      Module version 1.92 testé avec ZWii 9.2.28 et Zwii 10.2
       
      (ne supporte pas l'activation d'un SMTP différent de celui de l'hébergeur)
       
      De nombreuses solutions existent pour réaliser ce type d'envoi mais avec ce module vous aurez la possibilité de le faire en restant dans votre CMS préféré !
       
      Aperçu d'une page Zwii contenant ce module :
       

       
       
      # Installation
       
      Installez par FTP les dossiers module et site contenus dans l'archive à la racine de votre site.
       

       
      Exemple d'installation pour un site nommé  9212, vous observez l'apparition d'un nouveau module nommé mailing qui contient les scripts et dans site/file/ d'un nouveau dossier mailing.
      site/file/mailing contient un dossier adresses dans lequel vous rangerez vos fichiers d'adresses courriels au format csv (avec une virgule pour séparateur) ou format txt (séparateur virgule).
      site/file/mailing contient également un dossier log dans lequel seront rangés les historiques de vos mailings.
       
      # Mise à jour depuis les versions < = 1.94
      1 - sauvegarder site/file/mailing/log/log_xxx.txt avec xxx = nom de la page mailing
      2 - effacer le dossier site/file/mailing
      3 - Transférer les dossiers module et site de l'archive à la racine de votre site
      4 - transférer le fichier log_xxx.txt dans site/data/mailing/log/
       
      # Utilisation
      1 - Créez une nouvelle page
       

       
      2 - Modifiez la page
       

       
      Sélectionnez un module Mailing, nommez votre page (ici Mailing), conservez dans Emplacement "Ne pas afficher", conservez dans Référencement / Groupe requis pour accéder à la page "Visiteurs".
       

       
      Enregistrez (on verra plus tard les options de configuration). C'est prêt !
       

       
      3 - Remplissez complètement le formulaire d'enregistrement de mailing.
      Pour les destinataires vous pouvez saisir plusieurs adresses courriels séparées par des virgules ou (facultatif) renseignez automatiquement la partie destinataires en sélectionnant un fichier d'adresses au format csv (séparateur virgule) ou au format txt (séparateur virgule). 
      Nouveau : Les 4 premiers fichiers sont générés automatiquement à partir des utilisateurs inscrits.
       

       
       
      Exemple avec choix te testmailing.csv :
       

       
      Quand tous les champs sont renseignés cliquez sur Envoyer.
       
      Un message " Demande de Mailing enregistrée " doit apparaître, et en bas de page s'affiche l'opération que vous venez d'effectuer.
       

       
       
       
      # Emission du mailing
       
      Pour cela vous allez avoir besoin de créer une tâche qui se déclenchera automatiquement à une date programmée, vous allez utiliser un service de CRON.
      Vous pouvez utiliser ce service chez votre hébergeur ou utiliser le service de CRON gratuit chez Hiwit.
       
      Commencez par vous inscrire sur le site : https://cron.hiwit.org
       

       
      Une fois inscrit vous pourrez vous connecter au service en renseignant votre Pseudo et votre Pass.
       
      Ajoutez une tâche

       
      Puis cliquez sur "Gérer"

       
      Programmez votre tâche CRON :
      Etat : Activer Url du script : l'url complète de la page Zwii où vous avez installé le module Mailing (ici le nom de la page était "courrielleur"). Régler les paramètres d'exécution à votre convenance  

       
      N'oubliez pas de cliquer sur "Mettre à jour" !
      Avec ce réglage tous les jours à 12h Hiwit lancera une requête sur votre page de mailing. Si une émission a été programmée pour ce jour le mailing sera émis.
       
      # Retour sur l'utilisation après un déclenchement de mailing par tâche CRON
       
      En ouvrant votre page Zwii de mailing vous observez l'émission 
       

       
      Note importante : évitez d'envoyer des mails à des adresses fantaisistes comme le suggère cet exemple car votre hébergeur pourrait suspendre votre service de mails (oui, c'est du vécu ! ).
       
      # Configuration
       
      En configuration vous allez pouvoir :
      Choisir d'utiliser le capcha ou pas Régler la visibilité des destinataires avec adresses visibles par tous les destinataires ou cachées. Effacer le fichier historique log Accéder aux demandes enregistrées et en attente pour éventuellement les supprimer.  
      Pour accéder à la configuration entrez dans le mode modification de page et cliquez sur la roue dentée
       

       
       


       
       
      Contributeur sylvainlelievre Soumis 10/01/2020 Catégorie Les modules  
    • Par sylvainlelievre
      Voir le fichier Diaporama Slider
       
      Ce module va vous permettre d'insérer un diaporama responsif dans une page Zwii.
       
      Voir ce module en situation
       
      Version 3.5 testée  avec Zwii 10.4.04
       
      Attention les versions < 3.4  de ce module ne sont pas compatibles avec Zwii 10.4.03 et supérieur, la mise à jour est obligatoire.
       
       
      Par configuration vous pourrez obtenir cet aspect :

      La navigation se fait en cliquant sur la zone droite ou gauche de l'image.
      Le texte apparaît de façon progressive au survol de l'image.
      Arrêt du défilement automatique au survol de l'image.
       
       
      Celui là :

      Navigation par boutons discrets.
      Le texte et les boutons apparaissent de façon progressive au survol de l'image.
      Arrêt du défilement automatique au survol de l'image.
       
      Ou encore cette version avec légende en haut et boutons de navigation rectangulaires :

       
      Une version sans les puces de navigations :

      Le module Slider peut être utilisé dans une page avec gabarit
       

       
       
      Le diaporama est basé sur responsiveslides.com, le module Zwii slider est basé sur le module Zwii gallery de @Rémi. Merci à @Gilux et à @roger pour leurs contributions dans le CSS et à @Fred pour ses conseils et la mise à jour du fichier edit.js.php.
       
      #Installation
       
      1- Dézipper l'archive slider_vxx.zip
      Elle contient le dossier module incluant le dossier slider.
       
      2 - Nouvelle installation ou mise à jour
      Avec votre logiciel FTP transférer le dossier module à la racine de votre site.
       

       
       
      Résultat obtenu pour le site dev9test
       
      slider/vendor/js/ contient le fichier javascript nécessaire au fonctionnement du module.
       
      slider/view/index/ contient 4 fichiers : index.php responsable de l'affichage du diaporama, index.css qui regroupe tous le CSS du diaporama et themes.gif,  themes.svg pour les 2 boutons proposés.
       
      slider/view/config/ et slider/view/edit/ proviennent du module gallery et sont utilisés pour le paramétrage du diaporama. Ils sont légèrement modifiés.
       
       
      #mode d'emploi
       
      1 - Créer une nouvelle page, modifier cette page

       
      2 - Sélectionner le module Slider et choisir la position du module dans la page
       
      A partir de la version 9.2.07 de Zwii l'option "Position du module dans la page" apparaît. Elle vous permet de choisir où le diaporama va s'afficher dans la page.
      La position "libre" vous permet d'insérer du contenu avant et après le diaporama en saisissant [MODULE] à l'endroit voulu dans votre page.
       

       
      Cliquez sur l'icone "roue dentée", positionnée à côté du choix de module, pour passer à l'étape 3.
       
      3 - Choisir le dossier contenant les images
       
      Vous aurez au préalable chargé les images du diaporama dans un dossier à l'intérieur de site/file/source/ (par FTP ou par le gestionnaire de fichiers intégré à Zwii).
      A ce propos 3 remarques :
      * Le diaporama va s'adapter automatiquement au format (16/9, 4/3,...) ou à l'orientation des images mais je trouve que le meilleur résultat visuel sera obtenu avec des images de même format et de même orientation. Mais ce n'est qu'une opinion personnelle, vous êtes libre de mixer différentes images.
      * Le diaporama va afficher l'image dans le même conteneur quelque soit sa taille, une image trop petite va être dilatée, une image trop grande va augmenter le temps de chargement du diaporama. Je vous conseille des images de largeur minimum 800px si votre paramétrage de la " Largeur maxi du diaporama " est à 800px.
      * L'ordre de passage est maintenant paramétrable.
       

       
       
      Saisissez un nom, sélectionnez un dossier cible puis cliquez sur l’icône dossier. Vous devez obtenir ceci :
       

       
       
      Pour passer à l'étape suivante cliquez sur l'icône "crayon" située sous "Paramétrage du diaporama".
       
      4 - Paramétrage du diaporama.
       

       
       
      Sur cette page de paramétrage, après un rappel du nom et du dossier cible des images, vous avez accès aux réglages suivants :
      Choix du type de navigation manuelle par boutons ou par zones droite ou gauche de l'image, Choix du type de boutons, flèche dans un rectangle noir ou dans un cercle blanc. Visibilité des puces de navigation ou pager, Largeur maxi du diaporama en pixels, le réglage "100%" correspond à la largeur du site définie en configuration - 40 pixels, La durée de la transition, en secondes ou en millisecondes, entre diapositives (fading) , La durée totale d'affichage, en secondes ou en millisecondes, d'une image (fading compris, au minimum durée de la transition + 100ms), La visibilité de la légende uniquement au survol de l'image, toujours visible ou jamais visible, La position de la légende en bas ou en haut de l'image, Le temps d'apparition de la légende et des boutons, Le choix du type de tri des images, La saisie des légendes.  
      N'oubliez pas d'enregistrer.
       
      # C'est possible
       
      Dans un même site Zwii vous pouvez insérer plusieurs diaporamas avec pour chacun des paramétrages différents.
       
      # C'est pas possible
       
      Dans une page Zwii vous ne pouvez insérer qu'un seul diaporama.
       
      Avec Zwii ce n'est pas possible d'insérer plus d'un module par page, vous ne pourrez donc pas insérer un diaporama (module slider) dans une page de blog (module blog) ou dans un formulaire (module form).
       
       
       
      Contributeur sylvainlelievre Soumis 25/09/2019 Catégorie Galeries  
×
×
  • Créer...