[SI-LINDER-PARTNER-2][OSC] - Refonte du site Internet pour supporter le Responsive Design /* ATTENTION - le design du site ne peut pas être passé en doctype html (html 5) dans la révision 1 du design. bien qu'une révision 2 sera instanciée plus tard (l'année prochaine), il faudra se contenter de nombreux workaround en restant en HTML TRANSITIONAL 4.01 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.. .. 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 utiliser un format maison de commentaires 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 */ // <- [SI-LINDER-PARTNER-2][OSC] - Refonte du site Internet pour supporter le Responsive Design ?> 0) $notify_string = substr($notify_string, 0, -1); tep_redirect(tep_href_link(FILENAME_DEFAULT, $notify_string)); } require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CHECKOUT_SUCCESS); $breadcrumb->add(NAVBAR_TITLE_1); $breadcrumb->add(NAVBAR_TITLE_2); $global_query = tep_db_query("select global_product_notifications from " . TABLE_CUSTOMERS_INFO . " where customers_info_id = '" . (int)$customer_id . "'"); $global = tep_db_fetch_array($global_query); // -> 0000012: désactivation de la notification $global['global_product_notifications'] = '1'; // <- 0000012 if ($global['global_product_notifications'] != '1') { $orders_query = tep_db_query("select orders_id from " . TABLE_ORDERS . " where customers_id = '" . (int)$customer_id . "' order by date_purchased desc limit 1"); $orders = tep_db_fetch_array($orders_query); $products_array = array(); $products_query = tep_db_query("select products_id, products_name from " . TABLE_ORDERS_PRODUCTS . " where orders_id = '" . (int)$orders['orders_id'] . "' order by products_name"); while ($products = tep_db_fetch_array($products_query)) { $products_array[] = array('id' => $products['products_id'], 'text' => $products['products_name']); } } ?> > <?php echo TITLE; ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 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 inclu en [2] c'est tout simple ! - 2/ inclusion du fichier PHP chargeur du design, ce sera à ce fichier inclu de décider quels assets (scripts, feuilles de styles, autres) charger! } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_1] $_SI__NewDesign = array( 'pageFilepath' => '/checkout_success.php' ); // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([2])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END require_once('--SI--2020DesignInitializer.php'); /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(isPage--CheckoutSuccess isResponsive--Main)]:{" ATTENTION (ne pas oublier cette ligne!) servira à cibler cette page précise dans un sélecteur css.. // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_2] "} ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" on requière l'inclusion unique du tout nouveau fragment contenant le tout nouveau fil d'ariane correspondant aux étapes du processus de commande, et cela invalide l'entièreté de l'ancien fil d'arianne des étapes du processus de commande (voir CODETAG[VTAB_1_OLD_BREADCRUMBAR_ORDER_STEPS]) "} ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" 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, mais sa valeur... est aussi la modificatrice de la cellule de droite.. Ce qui pose problème quand on veut juste modifier celle de gauche et ne pas intervenir sur celle de droite, 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 ! // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_3] "} ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on déplace un module d'affichage des téléchargements (produits en dématérialisés) achetés, initialement c'était ailleurs (voir CODETAG [MODULE_DOWNLOAD_WAS_DISPLAYED_HERE]) - 2/ on reformule un peu la condition, de manière à pouvoir englober une prêt structure HTML - 3/ on ajoute une classe afin de pouvoir cibler la cellule () plus tard et une structure de tableau } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN if (DOWNLOAD_ENABLED == 'true') { // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END } // ([2])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on va revoir les éléments de boutons, tout simplement par ici - 2/ 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 [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - 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 [2] de la tâche [SI-LINDER-PARTNER-2][OSC] } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][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 - 2/ on va ajouter une classe au tableau (
[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ cette page est construite bizzaremment très différement des autres pages en ce qui concerne son titre, en soit, elle n'est pas mal construite, juste, que, cela m'oblige à revoir l'organisation de sa structure afin de ré-agencer certains éléments ailleurs - 2/ on revoir le titre, à l'origine titre se trouvait pas ici (voir CODETAG [TITLE_WAS_HERE]) ainsi, on va le mettre là, à noter que la structure [VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription]:{" on va ici juste ajouter un
qui englobera le tableau, et on donnera à ce
une classe CSS pour être en mesure de le cibler plus tard "} ?>
a subit des classes et a été dupliquée - 3/ cette structure a été ajoutée au tableau pour ré-agencer les celluls/tableaux, lignes, non plus dans le titre comme c'est maintenant à l'étape [2] mais surtout cela nous donne plus de marge d'affichage pour le style visuel - 4/ cette image est certe bien placée, mais, affreusement vieille, du coup, ça fait tâche dans le design, donc, on va la remplacer par non pas une image, mais un icone Material Icons on commente l'ancienne image, car bon, elle.. le mérite par nostalgie des surfeurs, lol... - 5/ on rajoute quelques classes à cette cellule - 6/ on donne une classe spéciale à cette cellule, cela alignera le div dans cette cellule à gauche plutôt qu'initialement au centre, et cela via CSS - 7/ on ferme le div... par celui du [6] n'était pas fermé.. - 8/ on réagence le code PHP - 9/ on ajoute une classe à cette balise de titre

- 10/ on reformate les liens, et le texte ici, on intercepte chaque lien et on ajoute une classe UI Kit pour lui donner du style cela a pour effet de transformer des liens href simples de OSCommerce en liens href UI Kit stylisé - 11/ on revoit l'affichage de ces cases à cocher, un encart qui désormais sera mixé entre usage de UI Kit et CSS on conserve toutefois pour retrocompatibilité l'ancienne version, que l'on commentera } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>

[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // ([5])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([6])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription]:{" on va ici juste ajouter un qui pour refermer le div> ouvert après la fermeture
receipt'; ?>


[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>

'; $products_displayed = array(); for ($i=0, $n=sizeof($products_array); $i<$n; $i++) { if (!in_array($products_array[$i]['id'], $products_displayed)) { // ([11])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN //echo tep_draw_checkbox_field('notify[]', $products_array[$i]['id']) . ' ' . $products_array[$i]['text'] . '
'; echo tep_draw_checkbox_field( 'notify[]', $products_array[$i]['id'], false, 'class="uk-checkbox --inputCheckbox__type2"' ) . '' . $products_array[$i]['text'] . '' . '
'; $products_displayed[] = $products_array[$i]['id']; // ([11])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END } } echo '

'; } else { // ([10])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN echo str_replace('
'; echo str_replace('[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END } ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>

du tableau "} ?>
..
..
) cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive - 3/ on va ajouter une classe à cette cellule (..) cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive - 4/ 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 [5] 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 - 5/ 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 - 6/ 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 [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - 1/ 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]) } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> check
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> check
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> check
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> person_pin_circle
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> */ ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" on commente le module d'affichage des téléchargements (produits en dématérialisés) achetés, vers ailleurs (voir CODETAG [MODULE_DOWNLOAD_IS_NOW_DISPLAYED_HERE]) // [MODULE_DOWNLOAD_WAS_DISPLAYED_HERE] "} ?> [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][SimpleTaskDescription]:{" on ajoute une classe pour pouvoir cibler cette cellule de tableau afin de la masquer en responsive ou autres ! // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_4] "} ?>
[SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" on ajoute un élément HTML et une classe pour pouvoir cibler cette zone afin de la styliser en responsive ou autres ! "} ?>