lemandarin Posted March 17, 2008 Share Posted March 17, 2008 Salut, bon je suis en ce moment entrain de réaliser ma boutique de PC pour mon activité. Voilà où j'en suis, vos feedback sont les bienvenu! Ici la page d'une des catégories. L'image qui entoure la description est en fait une image de fond ajouté dynamiquement. Pour ce faire, j'appel dans mon style image_fond_category_{$category->id}.jpg. Après il vous suffit de créer les images adéquates avec à la place du code id le numéro de la catégorie. Ici la page d'un produit. Là également j'utilise une méthode similaire pour appeler un image spécifique pour chaque groupe d'attributs en utilisant la technique logo_attribut_{$id_attribute_group}.png et là aussi je crée avec mon logiciel de dessin une image nommé avec l'id du groupe d'attributs, par exemple logo_attribut_3.png. Même principe pour les liens "+Infos" qui ouvre un page en popup. Notez que sur la vrai version la page est centrée et la barre bleue va d'un bout à l'autre. Et c'est un brouillon vite fait, donc il donc encore traîner pas mal de faute : Ce qu'il faut encore que je fasse: Faire tout le design de la colonne de gauche pour uniformiser l'ensemble. Refaire le block Catégorie pour les afficher de manière plus graphique. Refaire le block Accessoires pour qu'il s'intègre graphiquement en dessous de la description du produit pour y présenter les écrans, claviers, souris, etc que je recommande avec l'ordinateur. Refaire la page d'accueil pour qu'elle suive la ligne graphique. Link to comment Share on other sites More sharing options...
lemandarin Posted March 18, 2008 Author Share Posted March 18, 2008 Une nouvelle version du header, ainsi que l'ajout d'un block d'infos importante en bas de page du produit avec également un test du block d'accessoires. La colonne de gauche n'est pas encore reliftée. Link to comment Share on other sites More sharing options...
ologram Posted March 18, 2008 Share Posted March 18, 2008 Ah beh c'est bien sympa... c'est propre et colle bien à la profession! J'attends de voir l'intégration à PS... Si tu as une url de dev, je suis preneur En tout cas pas bête l'image de fond qui change selon le produit... En passant, as-tu connaissance d'une variable qui renverrait le nom de la page en cour? On m'avait indiqué {$page} mais sans succès. Bonne continuation... Link to comment Share on other sites More sharing options...
lemandarin Posted March 18, 2008 Author Share Posted March 18, 2008 Merci. Pour l'instant ça tourne en local sans soucis sous IE7, Opera, Firefox et Safari, par contre par encore eu location de tester sous IE6. Je vais voir si j'ai encore de la place sur un de mes hébergement pour faire un test en ligne, ça me permettra de le soumettre à http://browsershots.org pour voir ce que ça donne sur tous les navigateurs. J'ai mit en place également une condition dans les attributs pour ne pas que le lien dynamique "Plus d'infos" soit généré pour l'attribut "Couleur" car finalement on a pas besoin d'infos sur le choix de la couleur ;D Pour ton histoire de $page, tu veux obtenir le nom de la page en cours? Je pense bien que je sois pas expert en PHP que tu pourrais utiliser {$path} c'est ce qui est utilisé à la fin du fil d'ariane pour donner le nom de la page en cours. Link to comment Share on other sites More sharing options...
lemandarin Posted March 19, 2008 Author Share Posted March 19, 2008 Une petite modif, j'ai viré le caddie de la colonne de gauche pour alléger encore l'ensemble et j'ai ajouté un bouton avec effet de rollover qui éclaircit la boule orange: Et lorsque l'on laisse quelques secondes sa souris sur la boule caddie on obtient ceci: Demain je m'attaquerai à la colonne de gauche et au bas de page, je pense réutiliser le fond bleu du haut et le reporter dans le bas avec un jeu d'ombre pour que la page blanche flotte au dessus de la surface bleu, enfin vous verrez ça demain. Je vais également refaire tout les boutons en utilisant le design de la boule en plus petit et avec un rectangle arrondi qui sort de la boule pour y mettre le texte du bouton. Les boules seront en orange pour le caddie, en bleu pour les autres boutons et en vert pour les boutons "suivant" et "confirmation", etc. Enfin bref le code de couleur facilitera la lecture des boutons. Link to comment Share on other sites More sharing options...
lemandarin Posted March 21, 2008 Author Share Posted March 21, 2008 Une petite mise à jour de l'avancement des travaux... Ici la catégorie principal contenant deux sous-catégories (hyperGamerXtrem et hyperMedia). Et voici la mise en page de la sous-catégorie, ici hyperMedia avec 3 produits dedans. Je vais installer une condition pour utiliser cette affichage comparatif uniquement dans les catégories de vente de PC, dans les accessoires il devra y avoir une photo. Et voici le lot de bouton que j'ai dessiné en gardant le modèle du gros panier. Link to comment Share on other sites More sharing options...
Matthieu Biart Posted March 31, 2008 Share Posted March 31, 2008 Bonjour a tous Tres sympa ce p'tit design, on oublierai presque qu'on est sur un PrestaShop ;D Bravo lemandarin. Reste plus qu'a voir la tete du code : Link to comment Share on other sites More sharing options...
lemandarin Posted April 1, 2008 Author Share Posted April 1, 2008 Salut, Merci Matthieu, mais malheureusement j'ai arrêté le développement, enfin pour l'instant car j'attend d'avoir confirmation du fonctionnement de la gestion des attributs dans la nouvelle version 1.0 de Presta? Est-ce que ça a été changé par rapport à l'ancien système où il fallait faire toutes les combinaisons possibles? Car si c'est toujours ainsi, je devrai a mon grand regret passer sous Ubercart car j'ai un gros besoin des attributs (pour permettre à mes clients de configurer leur ordinateur à la carte) et donc faire des combinaisons d'une dixaine de groupes d'attributs avec chacun facilement 2 ou 3 attributs différents, ça relève du défis sous Presta. C'est dommage car j'aimai vraiment beaucoup Presta et c'est bien plus agréable à coder que Uber, mais ce dernier offre un module d'attribut Ajax, dans l'admin on ajoute chaque attribut sans devoir faire de combinaison et dans la boutique en ligne la partie ajax adapte le prix de chaque attribut en temps réel, par exemple si j'ai un groupe "Mémoire" avec une liste déroulante et 1Go, 2Go +10.00 et 4Go +25.00 et bien si je sélectionne le 4Go, le prix indiqué dans la liste déroulante à côté des deux autres changes et ça devient 1Go -25.00, 2Go -15.00 et 4Go. Vraiment très sympa, je dis ça car si ça peut donner des idées au développement de Prestashop. Link to comment Share on other sites More sharing options...
Thibaud Samson Posted April 1, 2008 Share Posted April 1, 2008 Bonjour, La nouvelle version de PrestaShop (1.0 RC1) inclut un générateur d'attributs qui devrait correspondre à vos attentes, avec la possibilité d'appliquer à un attribut un impact sur le prix/poids et ainsi de créer automatiquement toute les combinaisons possibles. Je vous invite donc à essayer cette release candidate afin de constater par vous même si c'est bien de cette fonctionnalité dont vous avez besoin. De plus, nous sommes ouvert à toutes remarques pour faire évoluer celle ci, il est donc pour nous intéressants d'avoir l'avis d'utilisateurs. Link to comment Share on other sites More sharing options...
lemandarin Posted April 1, 2008 Author Share Posted April 1, 2008 Bonjour Thibaud, Voilà une nouvelle qui ensoleille ma journée! C'était pour moi le seul gros problème sous Prestashop car il faut bien avouer que l'ancien système n'était utilisable qu'avec 1 ou 2 groupes d'attributs. Un grand merci à votre équipe. Par contre je vous suggère d'aller jeter un oeil sur le module d'attribut ajax que j'ai précité sous Ubercart ici: http://www.ubercart.org/contrib/2010 Vous devriez pouvoir le voir en fonction dans cette boutique: http://sundaysenergy.org/be-harmony Essayez donc la site déroulante "Print Size". Je trouve que c'est un petit plus surtout quand on a beaucoup d'attribut, c'est le même système que sur le site de Dell par exemple où le prix des attributs est automatique modifier en fonction de l'attribut sélectionné. Ca facilite le choix du client je trouve. Bonne journée, je testerai cette RC1 ce soir. Link to comment Share on other sites More sharing options...
Thibaud Samson Posted April 1, 2008 Share Posted April 1, 2008 Nous allons étudier tout ça merci. Link to comment Share on other sites More sharing options...
lemandarin Posted April 7, 2008 Author Share Posted April 7, 2008 Bon et bien voici où ça en est. Suite à la sortie de la v1, j'ai décidé de reprendre à zéro la programmation et étant donné que je suis tombé amoureux du nouveau template (qui en plus va particulièrement bien avec mon header) je pense que je garderai le style des blocks d'origines, peut-être quelques petites modifs sur les couleurs pour que ça colle encore plus. Suite à la reprise à zéro, je pense également que finalement je vais garder le système à trois colonne. Je pensais au départ ne pas avoir assez de place au centre de la page, mais finalement avec le système des onglets ça fait gagner pas mal de place. Voici donc en screen ce que ça donne avec mes modifs (assistant étape par étape de configuration du Pc, etc). J'ai fait également quelques modifs dans la homepage avec un changement du block edito qui affiche maintenant plusieurs "images publicitaires" qui font un diorama avec animation en jquery, mais je ne vais pas le montrer ici car c'est mineur. Je n'ai pas encore modifier la page des catégories, mais je pense faire également là une refonte complète avec affichage des caractéristiques du PC, etc. Les screen ici sont ceux de la page du produit et le système est parfaitement fonctionnel: Comme vous le voyez, le prix du produit et les déclinaisons ont disparut et un nouveau bouton vert, nommé Configurer ainsi qu'un onglet du même nom fait son apparition (onglet que je vais d'ailleurs recoloré en vert pour qu'il attire plus l'oeil étant donné que c'est le plus important et que le vert est utilisé pour désigné tout le cheminement du passage de commande). La description du produit est ici celle d'origine. Au final la description de mes PC seront plus développé, avec photos, graphiques vantant la puissance du PC, etc. ---- On clique maintenant sur le bouton vert Configurer et l'écran glisse alors sur l'onglet du même nom qui s'ouvre dévoilant le coeur de la fiche produit, l'Assistant de configuration! ---- On lit alors le message de bienvenue dans l'assistant. Un clique sur le bouton suivant provoque une animation dite en accordéon (jquery) qui déplie l'étape suivante, dans notre cas la déclinaison Processeur. Le texte de description est ici un peu court, mais c'était pour un essai, au final il y aura sans doute plus d'infos voir même des graphiques ou autres. ---- On continue ainsi étape par étape jusqu'à la fin. ---- Le système est évidement dynamique, rien n'est figé. Seule le texte de "Commençons" et le texte de "Terminé" dans l'assistant sont codés en dur dans le thème (notez que dans le texte de fin de l'assistant le délais est celui entré dans la fiche produit). Dans mon cas le fait que ces deux points soit codé en dur n'est pas un problème car dans mon cas la boutique ne vendra que des PC haut de gamme sur mesure. J'aimerai encore améliorer la chose en mettant bien en évidence le prix du produit lorsque l'on change une déclinaison, par exemple en le faisant clignoté quelques secondes au moment où le total change. Je vais probablement déplacer également le bouton Ajouter au panier et le mettre dans la dernière étape de l'assistant (à droite du bouton Précédent). Link to comment Share on other sites More sharing options...
Fistou69 Posted April 7, 2008 Share Posted April 7, 2008 Bonjour lemandarin, Beau travail ! joli et fonctionnel. Bonne continuation. Link to comment Share on other sites More sharing options...
lemandarin Posted April 8, 2008 Author Share Posted April 8, 2008 Merci Fistou. Voici la nouvelle mise en page de l'assistant. Le bouton ajouter au panier n'apparait évidement qu'à la dernière étape. Le prix quand à lui reste afficher en permanence. Link to comment Share on other sites More sharing options...
lemandarin Posted April 9, 2008 Author Share Posted April 9, 2008 Je viens d'avoir ce matin une discution avec plusieurs connaissances à propos de l'assistant à la configuration. Finalement, nous en sommes venu à la conclusion, étant donné le caractère très "Créer le vôtre" de notre boutique, que l'idéal serait de transformer entière la boutique en un grand assistant à la configuration. Après avoir récrit le cahier de charge, nous pensons que dés que le client entrera sur la boutique, il sera invité à choisir entre Ordinateur Fixe et Portable (ce seront deux grandes catégories racines) avec un affichage très simple (pas de colonne, uniquement à deux grandes photos avec un gros bouton en dessous de chacune. Ensuite le client pourra choisir son chassis (boîtier), certains auront des limitations technologiques (surtout dans les portables, impossible en effet de loger deux cartes graphiques en SLI dans un ultra portable 12"). En fait, chaque chassis sera un produit, affiché simplement par sa photo avec un bouton "Choisir" en dessous, bref un affichage très sobre, sans colonne et avec de jolie effet graphique web2.0 (reflet). Une fois entré dans la fiche produit (le choix du boîtier quoi), l'affichage permettra à gauche de choisir étape par étape les déclinaisons (processeurs, disque dur, etc) en reprenant le style de l'assistant vu plus haut. A la droite de l'assistant se trouvera les photos du produit. Cela occupera tout l'espace en largeur. On trouvera normalement une courte description du boîtier et de ses possibilités technologiques. En haut à droite (mais juste en dessous du header bleu de mes pages) on trouvera une fils d'ariane qui sera cependant revu. En effet, au lieu d'afficher les catégories précédentes, celui-ci affichera la position du client dans le fils des étapes de construction du PC (un peu comme dans la partie validation de commande de Presta). Etape 1 : Choix entre fixe et portable, Etape 2: Choix du chassis et Etape 3: Choix des composants. L'étape en court sera en gras. Voilà donc la tournure que prend la chose maintenant. Je vais donc dés aujourd'hui commencer le travail se ce template, relativement simple mais qui devrait donner un bon résultat et être très différent d'un Prestashop classique. Link to comment Share on other sites More sharing options...
lemandarin Posted April 10, 2008 Author Share Posted April 10, 2008 Petite mise à jour avec la création du template "Assistant de configuration étape par étape". Pour l'instant se sont les produits par defaut de Prestashop. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now