Aide - Recherche - Membres - Calendrier
Version complète : FoxP2 explose osCommerce 2.4
Forum osCommerce-fr > Vie du groupe > BlaBlaBla
FoxP2
Préambule :
  • Cette première version est un one-shot.
  • Des modifications supplémentaires seront réalisées sous peu.
  • Certaines modifications sont propres à un futur add-on développé pour osCommerce 2.4 nommé Twig Dynamic Template System, qui intègre un moteur de template et système de template permettant au webmarchant de personnaliser/configurer l'ensemble de sa boutique.
Mes objectifs ont été multiple :
  • redéfinir l'interface utilisateur en utilisant tout ce qu'offrait le framework css *Twitter Bootstrap
* pour rappel, c'est le nouveau framework inclus nativement dans osCommerce 2.4
  • améliorer l'expérience utilisateur en ajoutant :
  1. des changements esthétiques
  2. des fonctionnalités
  • un code 100% WC3 HTML valide.

Voici une vidéo qui vous présente une démo live : YouTube

Le lien vers mon dépôt Github : commit e4ae44ba0c
stats : 12 fichiers modifiés, 1867 ajouts, 643 suppressions

Côté code, le fichier reste en mode procédural, comme à l'origine, puisque aucune publication n'a été encore faite sur le dépôt d'HPDL.
La page sandwich de gestion des attributs/options des produits côté administration de la boutique est une des plus compliquée à modifier, en grosse partie dû à sa programmation procédurale. ( similaire à la page categories )

Le fichier twig_products_attributes.php est accessible ici .

fonctionnalités ajoutées :

La suppression récursive:

Dans le code original, lorsque vous souhaitez supprimer une option ou une valeur d'option, le code vérifie si il n'existe aucun lien avec un produit.
Par contre, lorsque vous supprimez une option (inutilisé par un produit), les valeurs de cette option reste enregistrées dans la base de données, ce qui est totalement illogique ! On se retrouve avec des jeux de données sans aucun lien. J'ai donc codé une suppression récursive pour supprimer ces données dans les tables :
TABLE_PRODUCTS_OPTIONS , TABLE_PRODUCTS_OPTIONS_VALUES , TABLE_PRODUCTS_OPTIONS_VALUES_TO_PRODUCTS_OPTIONS.
Ce type d'incohérence n'existerait pas si osCommerce avait une base de données gérant les clés étrangères et les contraintes d'intégrité correctement programmées.

Une navigation personnalisable :

affection du nombre de lignes à afficher :

3 jeux de données sont mise en cache :
  • compteur d'options
  • compteur des valeurs des options
  • compteur des attributs produits

Ces compteurs permettent d'initialiser le nombre de lignes à afficher avec un pas à pas de 5.
Ils sont réinitialisés à chaque ajout ou suppression d'option / valeur d'option / attribut produit et restent communs aux 3 modules.


nombres-de-lignes-affichées par foxp2projects, sur Flickr

La mise en cache est effectuée avec la nouvelle classe Cache issue d' osCommerce 3.
Celle ci est implémentée côté Boutique dans osCommerce 2.4.

navigation par page

Comme dans le code original, un système de navigation par page est implémenté :
- il se configure automatiquement avec le nombre de lignes à afficher.
- via une nouvelle méthode dans la classe splitPageResults ( lien vers le code ), il est relooké pour être compatible avec le framework Twitter Bootstrap :


pagination par foxp2projects, sur Flickr

Ouverture/Fermeture des modules :

Comme vous avez pu le voir dans la vidéo, un système d'accordéon est ajouté pour chacun des modules.
Il permet d'ouvrir et de fermer ces modules en fonction des besoins de l'utilisateur, gagner de la place sur l'affichage, éviter lors des différentes actions le scroll de la page mais également de se concentrer uniquement sur le module avec lequel on travaille.
Les états d'ouverture et de fermeture de chaque module sont enregistrés au sein d'une base de données dans le navigateur de l'utilisateur, appelée localStorage. Cela permet lors de la navigation dans l'administration de la boutique de retrouver la page products attributes telle qu'on l'avait laissé.

Pourquoi le localStorage ?

- ces données sont persistantes :
  • contrairement aux cookies qui peuvent être perdus lors de la mise à zéro du cache du navigateur.
  • contrairement à la session php qui sera détruite lorsque l'utilisateur ferme son navigateur.
  • ne nécessite pas d'enregistrer dans une base données mysql des préférences par admin couteuses en accès et plus lourdes en terme de programmation.
  • quelques lignes de javascript suffisent pour persister ces données. ( Lien vers les lignes de code )
  • fonctionne sur tous les navigateurs modernes.

Côté look, contrairement à l'original, un jeu de couleur est spécifié pour chaque action.

  1. Le vert pour toute action d'ajout de jeu de données :

ajout-de-données par foxp2projects, sur Flickr

  1. Le Bleu pour toute action de modification de jeu de données :

modifications-de-données par foxp2projects, sur Flickr

  1. Le rouge pour toute action de suppression de jeu de données :

suppression-de-données par foxp2projects, sur Flickr
FoxP2
fonctionnalités ajoutées :

dans le module Attributs produits :

Les menus déroulants classiques ont été remplacés par des listes boxes (modifications basées sur l'excellent plugin jquery BootstrapFormHelpers ) avec un champs de recherches qui filtre la liste en fonction des entrées de l'utilisateur :
à noter :
n'est retourné que la liste des catégories ayant des produits
n'est retourné que la liste des options ayant des valeurs d'options ! inutile de ramener un jeu de résultat incomplet !

mode initialisation (liste des produits avec leurs catégories / catégories parentes n-1):


dropdown-product-with-search-filter-mode-insetion par foxp2projects, sur Flickr

mode initialisation (liste des options):


dropdown-options-with-search-filter-mode-insetion par foxp2projects, sur Flickr

mode initialisation (liste des valeurs d'options classéss par leurs options)


dropdown-options--value-with-search-filter-mode-insetion par foxp2projects, sur Flickr
FoxP2
fonctionnalité ajoutée :

comme dans l'interface d'osCommerce 3, j'ai ajouté une gestion de message lors d'une action effectuée :


ajout de données :


message-stack-insertion par foxp2projects, sur Flickr

modification de données :


message-stack-modification par foxp2projects, sur Flickr

suppression de données :


message-stack-suppression par foxp2projects, sur Flickr


Prochaine étape :

l'ajout de données massive (ajouter une option à 1 ou plusieurs produits / tous les produits en 1 clic pour améliorer la productivité pour le webmarchant sans passer par le module attributs ou l'ajout se fait 1 par 1 --- l'enfer !)


options-produits-ajout-de-masse par foxp2projects, sur Flickr
lorem_ipsum
Sympa cette page d'attributs produits! Beau boulot!
Par contre juste un petit détails au niveau de l'utilisation de la classe alert Bootstrap. A mon avis l'utilisation de la classe alert-info pour notifier d'un succes de modification et de alert-error pour le succes d'une supression... c'est pas gégé!
Si l'ajout, l'edition, la suppression sont effectués avec succès, tu devrais utiliser la classe alert-success. Et l'info pour des message informatifs et l'error pour les .......

Bonne continuation!
FoxP2
@lorem_ipsum

pas d'accord avec toi.
tu restes trop bridé sur l'utilisation classique du framework.
dans mon interface, les règles sont les mêmes partout :
le vert -> on insère les données
le bleu pâle -> on modifie les données
le rouge -> on supprime les données
l'orange sert pour des messages d'alerte sans conséquence (lorsqu'une requête ne renvoie aucun résultat, exemple : champs de recherches ) et le bleu foncé pour la navigation traversante dans les données (pagination, bouton selectif modifiant le nombre de résultat )

les messages surgissant sont donc dans le code couleur défini.

l'homogénéité est respectée et l'administrateur visualise bien mieux chacune de ses actions.( couleur des boutons / texte informatif / message renvoyé par l'application )

J'ai fait testé l'interface par des néophytes, ils ont clairement compris à chaque fois :
- ce qu'ils allaient faire
- ce qu'ils étaient en train de faire
- ce qu'ils avaient fait.
lorem_ipsum
Citation (FoxP2 @ 27 Jun 2013, 21:34) *
tu restes trop bridé sur l'utilisation classique du framework.

Là n'est pas la question...Il existe le symbolisme des couleurs qui depuis le temps à fait ses preuves. Les couleurs évoquent un état, une émotion etc...
Le rouge n'a jamais été une couleur évoquant le succés, la satisfaction... Sur la route le danger est en rouge, à l'école on corrige les erreurs en rouge, je suis rouge de colère... Le feu est vert! Ah je peux y aller...
Après si il s'agit d'une application à usage personnel, le choix des couleurs peut être lui aussi un choix personnel. Mais sur le principe du communautaire, je trouve ça courageux de ta part de vouloir changer ce symbolisme des couleurs.


chti_poupon
@FoxP2
Excellente idée que ce code de couleur.
L'essentiel est qu'il soit constant dans toute l'application.
De toutes façon, il n'y a pas de norme, et celles qui existent dans d'autres domaines changent (voir la couleur des tuyaux, par exemple)
Tu as omis dans ta dernière liste le blanc qu'apparemment tu utilises pour annuler.
Danyx
Bonjour
Je suis ce post depuis le début, maintenant je ne vois plus de progrès, FoxP2 à arrêté ce projet.
De plus, est il possible de le téléchargé, car le lien indiqué ne correspond pas aux résultats vu ici.
Cordialement.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2019 Invision Power Services, Inc.