PSJDIAPORAMA DEFILEMENT D IMAGES POUR PRESTASHOP EDITÉ PAR ARETMIC S.A.

Transcription

1 PSJDIAPORAMA DEFILEMENT D IMAGES POUR PRESTASHOP EDITÉ PAR ARETMIC S.A. 1

2 PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables aux Produits Virtuels proposés par la société Aretmic S.A. sont disponibles sur le site internet Le client déclare les avoir lues et acceptées, l achat de produits et l utilisation des services proposés par la société ARETMIC S.A. emportant l acceptation et l adhésion expresse et sans réserve du client aux présentes CGU ainsi que, le cas échéant, aux documents contractuels existants complétant ou amendant lesdites CGU. La Société Aretmic S.A. conserve intégralement la propriété intellectuelle de ses Produits. La Société concède à chaque Client qui aura acheté un Produit virtuel une licence d utilisation, et ce à titre non exclusif et pour le monde entier. Cette licence n'est valable qu'une seule fois pour une seule boutique e-commerce. Aucune cession de droits n est accordée par les présentes par la Société au Client. Il est par ailleurs interdit au Client de revendre ou d utiliser sur d autres boutiques les Produits virtuels achetés sur Cette restriction inclut toutes les ressources fournies avec le Produit virtuel. Conditions Générales d Utilisation des modules de la Société ARETMIC S.A. en date du 31 août

3 SOMMAIRE I. APERÇU GENERAL DU MODULE PSJDIAPORAMA... 4 I.1. PRESENTATION DU PSJDIAPORAMA... 4 I.2. SES AVANTAGES ET SES CARACTERISTIQUES :... 4 I.2.1. Avantages du Psjdiaporama :... 4 I.2.2. Caractéristiques du Psjdiaporama :... 4 II. INSTALLATION DU MODULE PSJDIAPORAMA... 5 III. PANNEAU D ADMINISTRATION... 6 III.1. PREFERENCE... 6 III.2. ELEMENTS DU SLIDE... 8 III.3. GESTION DES TEXTES III.4. OPTIONS III.5. AIDE

4 I. APERÇU GENERAL DU MODULE PSJDIAPORAMA I.1. Présentation du Psjdiaporama. PSJDIAPORAMA est une diapositive d images de prestashop, visible dans la page d accueil de votre boutique. I.2. Ses avantages et ses caractéristiques : I.2.1. Avantages du Psjdiaporama : Zone d administration intuitive et facile à gérer. Possibilité de télécharger des images de votre choix (Images de chargement, images d arrière plan, contenu du slide), en nombre illimités. Liens des éléments du slide de votre choix. Nombre d éléments illimité. Choix et style d outils de navigation a affichés. Choix de plusieurs styles de transition. I.2.2. Caractéristiques du Psjdiaporama : Module alternative au module editorial (Editeur de page d accueil) : Gestion et Affichage de textes d introduction en dessous du slide. Modules compatibles Prestashop Version et inférieure. Modules basé PHP 5, XML et sur le plugin jquery. (Version 1.5.2). 4

5 II. INSTALLATION DU MODULE PSJDIAPORAMA 1. Tout d abord, décompressez le fichier d installation de Psjdiaporama, puis copier le répertoire «psjdiaporama» ainsi obtenu dans le dossier /modules de Prestashop. (Ou à l aide de votre logiciel FTP, uploader le répertoire décompressé dans le répertoire /modules de votre site en ligne) 2. Une fois tous les fichiers copiés (uploadés), allez dans la partie administration de votre site et cliquez sur l onglet «modules» depuis le menu du haut. 3. Repérez le nouveau module dans la liste appelé Psjdiaporama slideshow, faites défiler vers le bas si nécessaire. 4. Cliquez sur le bouton Installer. 5. Pour finir, repérez à nouveau le module dans la liste. Un lien «>> configurer» devrait apparaître, et à coté sa description. Cliquez dessus pour accéder aux panneaux de contrôle du module. 5

6 III. PANNEAU D ADMINISTRATION Maintenant que l installation du module Psjdiaporama est terminée, vous pouvez accéder au panneau d administration via le lien «>>configurer», dont la description du module est disponible juste à côté. En cliquant sur ce lien, cinq menus s affichent comme suite : III.1. Préférence «Préférence» est le menu qui permet d accéder aux paramètres d affichage de la nouvelle diapositive sur la page d accueil de votre site Prestashop. Grâce à ce menu, vous pourrez modifier ou personnaliser le Psjdiaporama comme bon vous semble. En cliquant sur «Préférence», vous accédez à la fenêtre suivante : 6

7 1. Image de chargement : en cliquant sur la flèche de «Cliquez ici», vous pouvez choisir une image de chargement parmi celles qui sont proposées ou, vous pouvez en télécharger en appuyant sur «parcourir». 2. Arrière-plan : vous pouvez choisir une image (cochez image) ou juste une couleur de fond (cocher CSS). Pour l image, cliquez sur la flèche déroulant pour sélectionner ou télécharger une image. Pour le CSS, cliquez sur pour choisir une couleur ou tout simplement taper son code dans le champ de saisie. On peut dimensionner l ensemble de la diapositive en réglant les valeurs des deux paramètres Largeur et hauteur. Notons ici que les dimensions des images ne changent pas. Pour y faire, il faut passer dans la page Options et cliquer sur le lien en rouge Redimensionner toutes les images du slide. En plus, il est possible de redimensionner l image d arrière plan grâce au lien Redimensionner l'image de fond en cours. 3. Bordure du Slide : pour personnaliser la bordure de votre slide, vous pouvez régler sa taille, sa couleur, son style ou encore mettre des coins arrondis. 4. Bouton de navigation : ce bouton permet de faire défiler manuellement les images de votre slide. Vous pouvez choisir un modèle de bouton en cliquant sur la flèche de «Cliquez ici». 5. Bouton de lecteur : Ce bouton servant à contrôler le défilement du slide peut être affiché ou non. Pour l emplacement, vous avez deux options : bas à gauche ou haut à droite. 6. Page de navigation : servant à se repérer parmi les nombres de page du slide. Elle peut être affichée ou non. Si vous choisissez de l afficher, elle se placera à droite du slide. 7

8 7. Légende : correspond au titre de l image qui apparaît lors du défilement. Grâce aux réglages, vous pourrez modifier les propriétés de la police, la hauteur du conteneur et en même temps, choisir ou uploader une image de fond. Il y a 4 façons d afficher l image de fond dont vous pouvez choisir depuis une liste déroulante. repeat : L'image d'arrière-plan se répète à la fois horizontalement et verticalement. no-repeat : L'image d'arrière-plan n'est affichée qu'une seule fois. repeat-x : L'image d'arrière-plan ne se répète qu'horizontalement. repeat-y : L'image d'arrière-plan ne se répète que verticalement. L affichage de l image, en tenant compte des quatre types de répétition, est limité selon la hauteur du conteneur. Attention, n oubliez pas de faire «Enregistrer» pour sauvegarder les modifications. III.2. Eléments du slide Le menu «Eléments du slide» permet de gérer les images du module Psjdiaporama. En effet, c est ici que vous pouvez ajouter, éditer ou supprimer un élément. En cliquant sur «Eléments du slide», vous accédez à la fenêtre suivante : 1. Ajouter de nouveaux éléments Le page suivante apparaît en cliquant sur «Ajouter de nouveaux éléments» : 8

9 - Nom : Le titre de l image ; - Lien : Le lien que vous choisissez de mettre sur votre image. - Image : télécharger l image en appuyant sur parcourir ; - Description de l image : comme son l indique, c est là que vous taperez la description de l image. Faites «Enregistrer» pour sauvegarder les modifications. 2. Editer un élément Pour éditer un élément, cliquez sur pour accéder à la fenêtre suivante : Vous pouvez ainsi faire votre modification et faites «Enregistrer» pour terminer. 9

10 3. Supprimer un élément Pour supprimer un élément, il suffit de cliquer sur correspondant à l élément à supprimer. 4. Activer/Désactiver un élément Il est possible de d activer ou désactiver un ou plusieurs éléments du slide sans supprimer ceux-ci. Si la «case à coché» de la même ligne que l élément, est cochée, il est à son état activé, c est-à-dire qu il sera présent dans le slide du FrontOffice. Pour activer un élément, il faut cocher sur la case à coché lui correspondant, puis cliquer sur l image de disquette en haut pour sauvegarder la modification. Inversement, si on veut désactiver un élément, on décoche la case, puis on effectue la sauvegarder. Notons qu il est possible de sélectionner ou désélectionner tous les éléments en même temps en cochant ou décochant la case à cocher en dessous du mot active. 5. Réarranger l ordre des éléments Il est possible de réarranger l ordre des éléments. Pour ce faire, il suffit de mettre le curseur sur l élément à déplacer, ensuite faites le glisser au rang souhaité. Pour finir, appuyer sur enregistrer la modification. pour III.3. Gestion des textes Le menu «Gestion des textes» permet de gérer les textes se trouvant juste en bas dus slide. En cliquant sur «Gestion des textes», la fenêtre suivante s affiche : 10

11 1. Titre principal: Définira le titre de votre texte. 2. Pré-en-tête : Définira le sous-titre de votre texte. 3. Texte d introduction: Définira le texte de votre choix. Cliquer sur le bouton «Mettre à jour» pour sauvegarder. III.4. Options Le menu «Options» vous permet d accéder aux paramètres réservés aux images du slide : - l effet de transition. - Durée de la transition. - temps d apparition des images - le nombre d image affichée simultanément En cliquant sur «Options», la fenêtre suivante s affiche : 11

12 Effet de transition : On peut choisir 5 effets de transitions différents : - Glissement horizontal (Droite vers gauche) - Glissement Horizontal (Gauche vers droite). - Fondu. - Glissement élastique. - Continu. Dans cette partie, on peut définir la façon dont s afficheront les boutons de navigations. Vous avez le choix entre les faire apparaître en permanence ou bien les faire afficher lors du survol de la souris au dessus de ceux-ci. Les deux liens en rouge permettent respectivement de redimensionner les images qui se défilent dans le slide et l image de fond de celui-ci. La dimension suit automatiquement celle du conteneur du slide que vous avez défini auparavant dans le menu préférence. III.5. Aide Ce menu vous propose un manuel d utilisation du module Psjdiaporama que vous pouvez télécharger en format PDF. 12

13 Pour toutes demandes de renseignement, d'aide ou de suggestion, vous pouvez les faire via le forum de Homeslide ci-dessous : Nous souhaitons que les outils que nous avons développés pour vous, vous apportent beaucoup de satisfactions et que votre imagination repousse nos limites... 13