) cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive au besoin.. (impossible de se priver, ça n'en sera que plus facile à relire le code plus tard), on restructure au besoin.. on ajoute des sauts de lignes
- 5/ on va ajouter une classe à la cellule du tableau () cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive au besoin.. (impossible de se priver, ça n'en sera que plus facile à relire le code plus tard), on restructure au besoin.. on ajoute des sauts de lignes
au besoin.. on commente l'image on rajoute un double-point et/ou un espace après le texte - 6/ à cet emplacement, on va juste afficher un icone à l'aide de Material Icons - 7/ à la différence des autres pages, ici, on va restyliser chaque , et on va pas y aller de mains-mortes: on va ajouter une classe à la ligne du tableau (..) cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive on va aussi reformater au cas par cas la structure HTML, car là, c'est pas très lisible pour un développeur qui éditerai le code plus tard - 8/ on va aussi donner une classe à la cellule ici, de manière à forcer son style d'affichage visuel - 9/ on place un ici afin de pouvoir restyliser précisemment CET élément, ce qui nous oblige à lui donner une classe pour l'occasion, ici on affiche l'indicateur d'état comme adresse principale on utiliser ici différentes balises pour symboliser la valeur de l'élément listé avec des classes différentes, car certains doivent afficher des informations "statiques" d'autres dynamiques - 10/ à cet emplacement, on va juste donner une classe à la cellule et y afficher un icone à l'aide de Material Icons à la place de l'initiale image de conteneur-fake de séparateur (commentée pour l'occasion) - 11/ on donne une classe CSS aux liens href et éventuellement on modifie leur texte - 12/ retrait ou modification de l'attribut width de la cellule ici (pouvant être 75% en initial) - 13/ on va ici revoir le style visuel des points-relais OU moyens d'expéditions (quel qu'ils soient) que ce soit leur titres, descriptions, mentions, prix et bouton radio - 14/ ici, il faut savoir que à cause de l'ancien système obsolète et en plus cassé (qui fonctionnait pas avec prototype.. Voir CODETAG [OLD_SYSTEM_FOR_ICIRELAIS_DETAILS_SHOWER]), on n'aura pas les informations de détails des points relais fonctionnels pour le transporteur (méthode d'expédition) ICI RELAIS ainsi, toute cette étape va englober différentes sous-étapes pour donner une alternative d'affichage (se passer de l'ancien système) aux détails de points-relais l'ancien système se servait de : PROTOTYPE + son plugin Window, et sa méthode de fonction Dialog() notre nouveau système se sert de : PHP (afin de créér des variables, et des expressions régulières), JAVASCRIPT PUR, HTML = pas de surcouches! l'idée est très simple: - intercepter et réécrire (tout en masquant) l'ancien système d'affichage de détail du point-relais icirelais - modifier le contenu de l'affichage du code de la méthode à son écriture, ainsi, on ne modifie jamais la variable OSCommerce, mais une autre spécialement créée à cet effet - 15/ on a besoin de créér différentes variables temporaires de support pour faire que notre nouveau système fonctionne, ce que l'on fait, on utilise pas le modèle de références (dans le sens où de toutes façons, l'on rensignera ces variables uniquement pour une portion du code, et on va les détruire juste après leur inutilité $dataArrayRegex1 de type tableau PHP sera utilisée pour stocker via un résultat de preg_match() une expression régulière (regex) très longue et complexe, on en reparlera dans les étapes suivantes $dataStringMethodSearcher de type chaîne PHP sera utilisée pour stocker une chaîne à rechercher (à l'aide d'un str_replace()), là pareil on en reparlera plus tard $dataStringMethodReplacer de type chaîne PHP sera utilisée pour stocker une chaîne de remplacement (à l'aide d'un str_replace()), là pareil on en reparlera plus tard - 16/ la fameuse expression régulière dont on a parlé un peu en [15] très complexe avec parenthèses de captures nommées (afin de proprement pouvoir reconstruire la chaîne voulue) globalement, elle doit trouver une suite précise dans la chaîne suivante (attention, comprendre que la chaîne suivante sera interprétée par PHP au préalable, donc on recherche dans sa version interprétée: - '.TEXT_MORE_DETAILS.' NOTE - $offset est égal à un int, et pour les $point['coord_lat'] (latitude) ou $point['coord_long'] (longitude), on s'en moque chaîne, qui elle, est générée dans le fichier: - voir CODETAG [LOCATION_FILES_FOR_ICIRELAIS_DETAILS_SHOW_TRIGGER] pour la liste des fichiers qui génère de la même façon cette chaîne.. (un seul n'est utilisé soit-dit en passant).. - 17/ debug des résultats de l'expression régulière à garder - 18/ on renseigne une des variables déclarées en [15], ici, il s'agit de la variable de recherche, le but: trouver une chaîne reconstruite précise - 19/ on renseigne une des variables déclarées en [15], ici, il s'agit de la variable de remplacement, le but: là c'est compliqué, on créé surtout TOUT un système JAVASCRIPT (forçant les éléments à porter une classe CSS que l'on a aussi créé pour l'occasion, chaque élément ainsi réécri aura un bouton-texte qui déclenchera LUI le VRAI (et sans crash) affichage des DETAILS du point-relais ICI RELAIS! ah, et l'usage de ` au lieu de \' pour englober certaine chaîne (comme l'icone) est IMPORTANT ici, car on se sert déjà de \' pour l'attribut de uk-icon, donc, ça casserait la chaîne JAVASCRIPT sinon.. - 20/ et c'est ici que nous réécrivons la chaîne contenue dans l'itération actuelle de la variable (elle, créée par OSCommerce): $quotes[$i]['methods'][$j]['title'] oh, un simple str_replace() avec nos deux variables de recherche et de remplacement, valorisées aux étapes respectives [18] et [19] cela a le mérite de ne pas réécrire la variable et donc, on n'altère pas la vraie variable déclarée par OSCommerce et sa valeur récupérée du module d'expédition en cours d'itération - 21/ et on nullifie dans l'itération toutes les variables employées (encore déclarées), dans l'étape [15] - 22/ on va ajouter une petite structure pour faire contenir le total à payer (pas de mentions HT ou TTC ici, car, les frais d'expédition sont calculés en fonction du profil du client) TODO - un jour, choisir d'ajouter une mention TTC ou HT, qui sait? A méditer.. - 23/ on ajoutes des classes UI-Kit à l'élément de formulaire afin de lui donner plus de style, et on le restructure un peu - 24/ on a besoin de traiter différemment l'affichage des moyens d'expéditions, certains comme icirelais ou devisChronopost sont alors traités différemment, voir les étapes respectives pour tout ça et afin de vérifier cela, à travers l'itération, on amorce un switch() pour trouver la valeur du NOM (id) MOYEN D'EXPEDITION, et agir en conséquence - 25/ ici l'on vérifie dans le switch le cas de "Livraison dans un espace ICI relais pour les particuliers", pour lui on lui a réservé un traitement spécial, voir [14] à [21] - 26/ ici l'on vérifie dans le switch le cas de "Demande de devis Chronopost", pour lui on lui va modifier son encodage (de ISO-8859-1 à UTF-8), en effet, il s'affiche très mal pour ce qui est des accents sinon ensuite on utilise un preg_replace directement à l'affichage de sa valeur, afin de corriger l'erreur grossière que le fichier: /includes/modules/shipping/devisChronopost.php cf: $this->title initialise: il ne considère pas l'encodage des entités < et >, ce qui cassait le HTML et créait un tag HTML .. WTF! - 27/ et là, tout les cas restants (par défaut) qui ne nécessitent aucunes interventions d'affichage ou de logique - 28/ ici on revoit UNIQUEMENT l'affichage visuel de la date d'évènement, pas son système, cela implique de modifier 3 fichiers pour son fonctionnement! - le premier: /includes/date_event.php qui en réalité charge et génère tout le formatage HTML du bouton de date et du calendrier on va juste avoir besoin ici de reformater visuellement le bouton de date! (pas le calendrier) - le deuxième: /js_includes/jQueryUI/Modules/datePicker/jquery.ui.datepicker.js qui lui est tout bonnement l'ensemble du code javascript du plugin DatePicker pour jQuery UI (framework visuel pour jQuery) on va seulement intercepter le droit à Google de traduire le calendrier, et l'interdire de traduction automatique - le troisième: ce fichier même où vous lisez ces lignes tout cela est affiché à cet endroit (voir CODETAG [ALTERATION_OF_OLD_DESIGN_BUTTON_DATE_OF_EVENT_WILL_BE_DISPLAYED_HERE]) voici ce qu'on y fait on donne à la cellule une largeur de 20% (sinon le bouton serait coupé en deux), donc on ajoute l'attribut width à la cellule on donne à la cellule un alignement central (sinon c'est pas joli), donc on altère l'attribut align de la cellule on donne à la cellule un alignement en haut (sinon c'est pas joli), donc on ajoute l'attribut valign à la cellule on corrige les accents des commentaires cassés suite à l'encodage ISO8859-1n <=> UTF8 puis l'on fera un dernier truc, qui sera expliqué dans à étapes [29] voir [13][VTAB-TEAM-LINDER-PARTNER-1] - 29/ alors là on revoit UNIQUEMENT l'affichage visuel du bouton continuer (de OSCommerce), qui est bloqué si on n'a pas choisi de date d'évènement, ce qui est ce que l'on veut voici ce qu'on va faire on revoit son design (tout en implémentant le code de bloquage du bouton si aucune date d'évènement n'est saisie) pour l'adapter au design du reste on retravaille son code de manière à l'aérer on reformate aussi de manière à moins utiliser PHP pour écrire le javascript à cet endroit on ajoute un évènement ondblclick (pour effectuer autant l'avertissement sur un double clic, mais si on clique sauvagement à la suite, on pourra quand même passer outre cette 'protection'.. on n'affiche plus la fenêtre d'ALERT en javascript, mais via une superbe fenêtre modale construite en [32] via UI Kit (et quelques classes CSS de mon cru) voir [13][VTAB-TEAM-LINDER-PARTNER-1]- 30/ on commente l'ancien code au besoin de se rebaser dessus?.. Bah, ça peut pas faire de mal, alors oui.. voir [13][VTAB-TEAM-LINDER-PARTNER-1]- 31/ 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 voir [13][VTAB-TEAM-LINDER-PARTNER-1]- 32/ on va maintenant construire une structure Modale ici, c'est pas compliqué, on choisi une fenêtre modale avec la possibilité de bouton et de titre, afin d'afficher l'avertissement initial modifié en [29] on déclenchera l'affichage de la modale en effectuant la simulation d'un clic sur le lien ici de [29] on donne différentes classes CSS à la fenêtre modale, mais en réalité, très peu seront stylisée, il n'y a pas besoin de grand chose là en revanche, on remplace tout les sauts de lignes JAVSCRIPT (\n) par des sauts de lignes HTML (
) (car la chaîne TEXT_DISPLAY_EVENTDATE_DATEISREQUIRED ne contient pas de HTML, vu que c'était censé initialement s'afficher depuis une alert() javascript, ce qui n'était vraiment plus très beau en 2020 NOTE - les \n étaient des SAUTS DE LIGNES au format Javascript pour sauter des lignes dans l'affichage de l'alert() on retire les éventuels derniers slash '/' avec stripslashes() on retire enfin les éventuels espaces AVANT et APRES la chaîne avec trim() - 33/ ici, une incohérence de cette page, et surtout de nativement OSCommerce doit être réglée.. en effet, OSCommerce veut créér un pixel (à l'époque c'était requis pour cette connerie de Internet Explorer), pour correctement positionner le tableau, sauf que.. ben, ça utilise: tep_draw_separator('pixel_silver.gif', ....) au lieu de: tep_draw_separator('pixel_trans.gif', ....) ce qui cause le pixel imagé, à s'afficher (très estompé, mais visible quand même!) donc, on remplace ici: pixel_silver.gif par pixel_trans.gif ça fonctionnait.. mais, on avait un décalage au final avec notre bel icone Material Icons, désormais implémenté en [34] résultat des courses, on va juste... placer un style="display: none !important;" sur chaque cellule contenant un pixel_silver de manière à dissimuler la cellule et réagencer proprement l'icone Material Icons - 34/ ici, on va utiliser un icone material icone à la place de l'ancienne image que l'on va virer, pas commenter, elle n'ira jamais dans le nouveau design de par sa vieillesse visuelle - 35/ on va juste recentrer la cellule, cela centre proprement l'icone Material Icons désormais avec le Texte de l'étape actuelle dans la procédure de commande voir [13][VTAB-TEAM-LINDER-PARTNER-1] - 36/ on ajoute un nom de classe CSS qui nous servira à spécifiquement cibler cet élément soit en responsive, soit sans responsive [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - voir [13][VTAB-TEAM-LINDER-PARTNER-1] 1/ 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 cela remplace l'étape [31] de la tâche [SI-LINDER-PARTNER-2][OSC] - 2/ mise en commentaire (pour ignorer l'affichage) de la première ligne du tableau avec les textes : TEXT_CHOOSE_SHIPPING_METHOD; / TITLE_PLEASE_SELECT - 3/ retrait de la classe "moduleRowSelected" en attendant de pouvoir modifier le fichier de styles CSS associé - 4/ retrait du texte Adresse d'expédition : pas de doublon avec le titre - 5/ on déplace la classe d'un cran au dessus afin de pouvoir englober la première cellule de la première ligne qui elle même contient les infos de l'adresse traduction: structuration d'une nouvelle ligne de tableau qu'on souhaite ici pour cet englobage - 6/ ajout d'une classe css ici pour permettre de cibler la ligne qui encadre (ou non) la cellule qui contient les infos de l'adresse et la 2è cellule qui contient le bouton modifier - 7/ transformation des deux cellules pour pouvoir les aligner les unes en dessous de l'autre - 8/ on invalide l'affichage (on le commente pour l'instant) de tout l'ancien système de fil d'arianne correspondant aux étapes du processus de commande (voir CODETAG[VTAB_1_OLD_BREADCRUMBAR_ORDER_STEPS]) il s'affiche désormais différemment en haut de page, ailleurs (voir CODETAG[VTAB_1_NEW_FRAGMENT_BREADCRUMBAR_ORDER_STEPS]) - 9/ mise en commentaire du séparateur OSCommerce à l'ancienne qui émule l'action: clear: both; de CSS (à l'origine présent ici pour être compatible avec de vieilles versions d'Internet Explorer) - 10/ on commente le bloc entier qui contient le texte statique: " Nouveau : vous pouvez indiquer les coordonnées de votre voisin en cas d'absence. Veuillez choisir dans votre carnet d'adresses l'adresse où vous voudriez que les articles soient livrés. " - voir [13][VTAB-TEAM-LINDER-PARTNER-1] 11/ on retire les textes "informations requises", cette information sera mise en avant lorsque l'utilisateur clique sur le bouton qui passe à la page checkout_payment. à trois endroits : dans adresse d'expédition, méthode d'expédition, continuer la procédure de commande - 12/ on retire l'affichage des commentaires ici - 13/ nouveau concept pour rendre la selection de la date d'événement obligatoire, dorénavant le datepicker de jQuery, soutenu par jQuery UI sera affiché lorsque l'utilisateur cliquera sur le bouton suivant intitulé: "Date de l'événement/livraison souhaitée". L'utilisateur sera contraint techniquement à sélectionner une date, on s'affranchit donc de tous les tests pour vérifier qu'il a bien sélectionné une date. le champ SystemeDeCalendier n'est plus affiché (display: none), mais le sera (suppression du style display none et activation du focus) quand l'utilisateur cliquera sur le bouton "Date de l'événement/livraison souhaitée". Une fois la date sélectionnée, le formulaire sera validé (form.submit() appelé dans "onSelect" du datepicker) Par ailleurs, la vérification de la sélection d'une méthode de paiement s'effectue maintenant en javascript à l'aide de vtab_js_alerte comme technique de notification tout ceci remplace les étapes: - [3], [28], [29], [30], [31], [32], [36] de la tâche [SI-LINDER-PARTNER-2][OSC] et - [1], [11] de la tâche [VTAB-TEAM-LINDER-PARTNER-1] } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>

[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ petits changements sur la structure et sur le texte sert uniquement à restyliser l'élément pour le centrer par exemple et le re-marger - 2/ on modifie l'ancien texte "Information livraison" par "Renseignements pour l'Expédition" [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - 1/ désormais ce bloc de texte statique ne sera plus utilisé, alors on le commente } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?>
[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on va pas se mentir, cette partie de code mixant html et php a une structure de code affreuse pour la relecture développeur, mais, de toutes façons, on restructurera quelques morceaux clefs! au lieu de cela, on va ajouter un tas de petites modifications, des classes, des styles, et peut-être du comportement à différents éléments de ce tableau à noter que cette partie de code du tableau contient le contenu visuel de la page - 2/ on va ajouter une classe au tableau (..) cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive - voir [13][VTAB-TEAM-LINDER-PARTNER-1] 3/ on ajoute une cellule de plus afin de pouvoir afficher l'état d'importance de la section - 4/ on va ajouter une classe à la cellule du tableau (	..	..
en deux lignes

[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> */ ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>