[VTAB-TEAM-LINDER-PARTNER-1][OSC] - Revue de la charte Graphique /* ATTENTION - il a été décidé que pour cette page rénovée et réagencée complètement par Saphyra Interactive et à terme maintenue par l'équipe VTAB, que l'on va partiellement conserver la logique de OSCommerce concernant la philosophie des tableaux. ici, nous allons occulter les anciens commentaires et les expatrier ailleurs Du fait du nombre massif des éléments DE CETTE PAGE (et de ce qui en découlerait) qui seront à revoir pour transformer le design en design responsive et lui appliquer une nouvelle charte graphique.. .. il est alors plus judicieux de globaliser un TAG unique pour cette tâche pour ne pas alourdir de commentaires le code déjà suffisemment alourdi comme cela! En gros, ici, pour cette méga-tâche, je vais ré-utiliser le même format maison de commentaires que la tâche [SI-LINDER-PARTNER-2][OSC] pour cette tâche précise: --> pour en comprendre les méandres, voir le fichier /[!] - Saphyra-Interactive-TaskList-Explanations/[SI-LINDER-PARTNER-2][OSC]--semantic.php ---> mais à la place de [SI-LINDER-PARTNER-2][OSC], ici, on abordera le fichier et sa logique comme faisant parties de la tâche [VTAB-TEAM-LINDER-PARTNER-1][OSC] NOTE - cette page inclue des éléments maîtres de la tâche [SI-LINDER-PARTNER-2][OSC] mais il n'y sera pas fait référence de manière explicite ici, juste implicite */ // <- [VTAB-TEAM-LINDER-PARTNER-1][OSC] - Revue de la charte Graphique ?>[VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions]:{ - 1/ le tag de sémantique de base pour la totalité de la page et non plus uniquement une zone en particulier - 2/ provenant d'une tâche implémentée par Accrosys par le passé: fonction propre à cette page qui permet de configurer et retourner l'affichage du poids - 3/ { ici, on va faire quelque chose de particulier ceci dans le but de ne pas altérer la requête PHP au-dessus le but est simple, on va détecter si le produit est dans la catégorie des specials/offres spéciales qui signifie surtout fin de série plus loin dans le code, on va utiliser cette vérification afin de bloquer la quantité du panier à la quantité restante à l'exactitude du stock pour le dit-produit (voir CODETAG [LOCK_TO_STOCK_IF_IT_IS_A_SPECIALS_CATEGORY_PRODUCT]) cela se fera via un bloquage Javascript, rien n'est bloqué à l'achat, mais comme ce système sera aussi présent à un autre endroit crucial: le listing du panier, ça suffira pour bloquer la quantité évidemment, un bloquage au niveau des classes PHP de OSCommerce aurait été plus malin, mais bien entendu, aussi plus difficile à en calculer les effets indésirables à côté, tandis qu'ici, bloquer ce fichier suffira et évitera justement ces désagréments d'indésirabilité l'idée est donc de procéder ainsi au travers des étapes suivantes déjà, on créé une variable temporaire qui contiendra le résultat de la vérification ensuite, on se sert de la vérification du total des produits trouvés, (en effet, si le produit n'existe pas ou n'a pas le bon statut, on va plutôt éviter cette vérification!) on créé une requête SQL, qui nous aidera à définir ici, si le produit a son product_id dans la base de données du site, table specials (définie par la constante PHP TABLE_SPECIALS) finalement, si le product_id est trouvé dans cette table (la requête sql alors, on change le vérificateur et c'est tout, sinon, on ne fait rien et on pourra s'en servir partout plus loin dans le code! } - 4/ provenant d'une tâche implémentée par Accrosys par le passé: préparation du mécanisme pour le référencement afin de gérer les Header Tags (Metatags) - 5/ { implémentation: RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_1 on déclare une petite variable, sous forme de tableau associatif, ce tableau servira à identifier la page (au lieu d'utiliser PHP_SELF etc..) et cette identification servira dans le nouveau fichier d'inclusion de design dynamique c'est tout simple ! inclusion du fichier PHP chargeur du design, ce sera à ce fichier inclu de décider quels assets (scripts, feuilles de styles, autres) charger! } - 6/ { implémentation: RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_2 isPage--ProductInfo isResponsive--Main ATTENTION (ne pas oublier cette ligne!) servira à cibler cette page précise dans un sélecteur css.. } - 7/ provenant d'une tâche implémentée par Accrosys par le passé: usage du mécanisme pour le référencement (initiée en [4]) afin de gérer les Header Tags (Metatags) - 8/ { implémentation: RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_3 on modifie la taille de cette cellule, qui est celle de gauche (avant) gérée via la constante PHP BOX_WIDTH de OSCommerce, (désormais), gérée par une valeur en dur, pourquoi? (1) la valeur initiale est gérée par une constante PHP (2) mais sa valeur... est aussi la modificatrice de la cellule de droite.. (3) Ce qui pose problème quand on veut juste modifier celle de gauche et ne pas intervenir sur celle de droite, (4) donc, ici, on modifie le echo BOX_WIDTH par une valeur fixée plus souple et enfin, on ajoute une classe pour pouvoir cibler cette cellule de tableau afin de la masquer en responsive ou autres ! } - 9/ on ajoute une classe css ici pour styliser la cellule de contenu, et on retire le code d'infoBox initial (on le commente) et on fait juste un echo du texte à la place - 10/ { on va revoir les éléments de boutons, tout simplement par ici remplacement de l'ancien bouton (lien) ou (soumission), pour l'avoir désormais géré par UI Kit, mais aussi, avec une classe précise ajout du nouveau bouton vtab à la place de l'ancien bouton, géré par la fonction vtab_tep_button() qui se trouve dans le fichier vtab_html_output.php } - 11/ provenant d'une tâche implémentée par Accrosys par le passé: usage du mécanisme de la fonction de poids (initiée en [2]) intégration d'une autre tâche implémentée par Accrosys par le passé - 12/ on commente l'ancien système de prix du fait qu'on l'a complètement revu (voir CODETAG [NEW_PRICE_DIPLAYER_HERE]) - 13/ { on va revoir les éléments de grilles tarifaires, et aussi la structure (du code), ainsi que les conditions afin de mieux filtrer les cas d'affichage (tableau ou prix direct) utiliser les nouvelles versions de méthodes de PriceFormatter ici (getPricePartnerVersion2), (getPriceStringVersion2), est très utile, dans le sens où le tableau est très chargé, on a que très peu d'espace, et le peu que l'on a en terme d'espace nécéssite absolument de fonctionner en responsive et pour le reste des cas, gérés par (getPriceString) et (getPricePartner) nous allons uniquement remplacer les termes "EUR" par le symbole € spécialement créé pour la nouvelle version du design gestion du cas professionnel, qui n'était pas géré avant, on avait que le cas partenaire... ATTENTION si cela pose problème, supprimer cette sous-tâche. (ou la commenter, le reste fonctionnera comme avant, sans autres modifications!) usage de (getPricePartnerVersion2) à la place de (getPricePartner) usage de (getPriceStringVersion2) à la place de (getPriceString) revue des conditions (cas) d'affichage, partenaire, professionnel ou client particulier remplacement du symbole monétaire EUR par € (et plus précisemment son entité HTML: € pour un affichage impeccable) différenciation des cas d'affichage des prix (palier/prix direct) revue des prix barrés en EUROS, afin d'éviter les prix barrés barrant le symbole € (ce qui fait pas joli) pour les prix directs, on ajoutera une classe directPriceStringHT ou directPriceStringTTC selon le type de prix, afin de le styliser plus tard ATTENTION - exceptionnellement ici on est forcé d'utiliser une condition if de type intégrée (ternaire), afin de rajouter ou non un texte précis selon le résultat de la condition (ici la vérification de l'existence du tableau de prix) } - 14/ { ici on va restructurer le numéro du modèle du produit, à l'origine il se trouvait juste à côté du nom du produit, ce qui était avant correct, mais dans cette nouvelle version du design, ça ne le fera pas dissociation du nom du produit vis-à-vis du modèle du produit } - 15/ { ici on va réaliser différentes étapes afin de parfaire l'affichage de la page produit, de dissocier certains éléments d'autres, d'ajouter des codes de structures HTML, bref, du lourd on ajoute une classe css ici pour styliser la cellule de contenu, on ajoute aussi une balise section à qui l'on donnera aussi une classe css afin de la cibler plus tard on ajoute un ensemble de code HTML, afin de dissocier le 2ème tableau des extra_fields (informations supplémentaires) (CF CODETAG: [SECOND_TABLE_PRODUCT_EXTRA_FIELDS]) du 1er tableau informant du nom de produit et prix (CF CODETAG: [FIRST_TABLE_PRODUCT_NAME_AND_PRICE]) on donne une classe CSS au tableau afin de le cibler plus tard on créé une simple variable de type tableau à index nommés, on ajoute un index hasExtraFields afin de pouvoir garder une trace de si il en existe ou pas.. cela servira plus tard afin d'afficher l'image du produit à son emplacement original au lieu de son emplacement nouvellement introduit SI les Extra Fields sont inexistants on ajoute un index productImage afin de pouvoir garder en mémoire l'image cela servira plus tard afin d'afficher l'image du produit ou une image placeholder (en cas que l'image est absente du serveur) la variable créée est valorisée dynamiquement ici aussi, et à cet endroit, cela signifie qu'il existe au moins 1 extra fields on ajoute une classe css ici pour styliser la cellule de contenu, on remplace la balise initiale par une balise section à qui l'on donnera aussi une classe css afin de la cibler plus tard, et on ajoute une balise pour la valeur du champ d'information supplémentaire on ajoute une classe css ici pour styliser la cellule de contenu, on remplace la balise initiale par une balise section à qui l'on donnera aussi une classe css afin de la cibler plus tard, et on ajoute une balise pour la valeur du champ d'information supplémentaire tout en modifiant le contenu du champ qui contient le terme 'poids:' qu'on ajoute en brut ici, c'est là où on va ajouter une structure pour afficher l'image (endroit nouvellement introduit) son emplacement initial (concernant l'image) est toujours disponible seulement si hasExtraFields est égal à false, (CF CODETAG: [PRODUCT_IMAGE_CELL_IS_INITIALLY_HERE]) initialement, le code issu de l'emplacement (initial, précisons bien cela!) était bien bordélique, il a donc été fortement retravaillé en structure visuelle de développement on va aussi l'afficher en taille limitée, 50% la largeur de cette cellule est initialement de 50% désormais, elle sera de 100% afin de pouvoir parfaire l'affichage par rapport à l'image ici on va structurer l'affichage du modèle du produit, HORS de son nom de produit (à l'origine, le modèle de produit était inclu dans $products_name .. illogique.. on donne une classe CSS au tableau afin de le cibler plus tard on intègre un code concernant un test d'existence des images des produits, on reseigne un index de la variable déclarée on reformate le code HTML, de manière à rendre un code plus lisible pour le développement ATTENTION - comme c'est écrit en Javascript, on doit s'assurer que la chaîne NE CONTIENT PAS DE SAUTS DE LIGNES ! D'où la nécéssité de la concaténation abusive... on donne une classe CSS aux liens href on utilise un index précis ici de la variable déclarée, cela nous permettra d'avoir la bonne image à afficher on donne une classe CSS à l'image, de cette manière on pourra jouer avec un joli effet au survol de l'image on donne aussi au lien reformaté un petit icone UI Kit on initialise une structure LightBox à l'aide de UI Kit et son composant Lightbox ou on la ferme, uniquement pour la partie qui n'est pas en