[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 ?>[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ dans l'ancien design, cela servait, mais.. désormais dans le nouveau design responsive c'est totalement inutile, car l'espace avant les sous-catégories est désormais réalisé sous contrôle de directives de styles CSS, et non en dur comme avant, donc, on commente ce mini-bloc } */ // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN /* [BECOME_USELESS_NOW_IN_NEW_DESIGN] for ($i=0; $i<$tree[$counter]['level']; $i++) { $categories_string .= "  "; } // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ /************************************************************************ [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on déplace le code: $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">'; dans la condition 'if-else', une fois pour: $cPath_new = 'cPath=' . $counter; une autre pour: $cPath_new = 'cPath=' . $tree[$counter]['path']; - 2/ dans chaque tep_href_link() on va ajouter un paramètre "class", ce paramètre sera valorisé à quelque chose de différent selon le $tree[$counter]['parent'] ! de cette manière, on va pouvoir différencier, plus tard, avec des sélecteurs CSS les liens entres catégories principales ET sous-catégories. - 3/ on ajoute aussi avant le lien, un bloc
, qui aura un sélecteur CSS dynamique selon la valeur de $tree[$counter]['parent'] par contre, pour rajouter ce bloc div, avant le contenu dans la variable $number_categories_string afin de facilement cibler cet élément dynamiquement plus tard via Javascript comme valeur d'id, on la construit sur la logique suivante: un terme suivi de deux _ et le cPath (category Path détecté par osCommerce) contenu dans $tree[$counter]['path'] ! localisation du code ici: cherchez le tag [PRODUCTS_COUNTER_IN_CATEGORY_COPY_FROM] et collé vers l'élément taggué à: [PRODUCTS_COUNTER_IN_CATEGORY_TRIGGERED_BY] le tout affiché dans un autre élément taggué à: [PRODUCTS_COUNTER_IN_CATEGORY_DISPLAY_OUTSIDE] - 6/ pour ne pas laisser dans le code source final le commentaire générique HTML nommé , on n'oublies pas de le supprimer en fin de procédure au cas où il subsiterait! - 7/ on on ouvre une balise '
', $categories_string); // ([5])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $categories_string = str_replace('', $number_categories_string, $categories_string); $cPath_new = 'cPath=' . $counter; // ([1])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([2])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([3])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="categoryHasZeroParent --isProductLinkTargetForCategory">'; } else { // ([5])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $categories_string = str_replace('', $number_categories_string, $categories_string); // ([3])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription] $cPath_new = 'cPath=' . $tree[$counter]['path']; // ([1])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([2])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([3])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="categoryHasSomeParent --isProductLinkTargetForCategory">'; } // ([4])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $categories_string = str_replace('', '', $categories_string); // ([6])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $categories_string = str_replace('', '', $categories_string); // ([1])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // {moved}: $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">'; /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ // -> VD: mise en gras des catégories principales if ($tree[$counter]['parent'] == 0) { $categories_string .= ''; } // <- VD if (isset($cPath_array) && in_array($counter, $cPath_array)) { $categories_string .= ''; } // display category name /************************************************************************ [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on entoure la catégorie d'un bloc html, selon la valeur de $tree[$counter]['parent'] si la catégorie contient des sous-catégories ET EST une catégorie maître (pas une sous-catégorie maître) on ajoute un div! sinon, on écrit juste le texte tel quel (pour l'instant). } */ // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN if ($tree[$counter]['parent'] == 0) { /* try class for: categoryHasZeroParent_separator float: left; font-size: 24px; position: relative; margin-top: -21px; opacity: 0.3; display: inline-block; margin-left: 55px; */ $categories_string .= '
' . $tree[$counter]['name'] . '
'; } else { $categories_string .= $tree[$counter]['name']; } // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ if (isset($cPath_array) && in_array($counter, $cPath_array)) { $categories_string .= ''; } // -> VD: mise en gras des catégories principales if ($tree[$counter]['parent'] == 0) { $categories_string .= ''; } // <- VD $categories_string .= ''; /************************************************************************ [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on doit à tout prix différencier catégories PRINCIPALES de SOUS-CATEGORIES. déjà, pour les catégories principales "" $tree[$counter]['parent'] == 0"" : on ajoute une balise html afin d'encadrer (et cibler par un sélecteur CSS) le symbole d'information visuelle que la catégorie contient une/plusieurs sous-catégorie(s) (mais grâce à un sélecteur CSS, on pourra agréér un effet de survol du symbole SANS que ce dernier ne soit survolé, cela sera provoqué par le survol simple du lien du nom de la catégorie!) si c'est une catégorie principale (aussi appellée catégories racines), alors, on va ajouter un symbole de sous-catégories, on va lui donner une classe pour définir son affichage ou non via CSS sinon, c'est une sous-catégorie, donc, (avant) ancien design on ajoutait un simple texte -> désormais, on ajoutera plutôt un icone Material Design Icons que l'on restylisera plus tard - 2/ on déplace le code de vérification de SHOW_COUNTS ailleurs (cherchez le CODETAG: [SHOW_COUNT_IS_NOW_HERE]) (à savoir: SHOW_COUNTS est une constante PHP qui contient le nombre de produits dans la catégorie actuellement en analyse dans la boucle PHP de listing des catégories) (avant, ce code était après la nouvelle place de $categories_string .= '';) - 3/ ajout du bloc qui est déclenché par le code situé au tag [INFORM_ME_WHEN_SUB_CATEGORIES_EXISTS_IN_CURRENT_HOVERED_CATEGORY] sert simplement à informer au survo du code situé au tag [INFORM_ME_WHEN_SUB_CATEGORIES_EXISTS_IN_CURRENT_HOVERED_CATEGORY] un texte pour prévenir qu'une sous-catégorie au moins existe dans la catégorie survolée ! [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - 1/ on va juste modifier le nom de l'icone utilisé: chevron_right à la place de more_horiz et nous allons supprimer le code, car nous ne voulons plus ce texte qui indique une sous-catégorie présente dans la catégorie: (contient au moins une sous-catégorie) // [VTAB_1_TARGET_DYNAMIC_JAVASCRIPT_THROUGH_PHP_DISPLAY_MODE] après le de fermeture du portant le nom de classe CSS "--iconMoreForSubcategoriesThatHasSomeCategoriesInside" de la même manière que comme cet élément ne doit plus s'afficher du tout, on va revoir aussi son code dynamique Javascript de modifications du style d'affichage (écrit dans une condition PHP)) afin de l'annuler à l'écriture (voir CODETAG[VTAB_1_CANCEL_DYNAMIC_JAVASCRIPT_THROUGH_PHP_DISPLAY_MODE]) } */ // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN if (tep_has_category_subcategories($counter)) { if ($tree[$counter]['parent'] == 0) { $categories_string .= '
⌲
'; } else { // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // [INFORM_ME_WHEN_SUB_CATEGORIES_EXISTS_IN_CURRENT_HOVERED_CATEGORY] // ([1])-->[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN // [VTAB_1_TARGET_DYNAMIC_JAVASCRIPT_THROUGH_PHP_DISPLAY_MODE] $categories_string .= 'chevron_right'; // ([1])-->[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END } } // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([2])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN /* {moved} - [SHOW_COUNT_WAS_HERE] if (SHOW_COUNTS == 'true') { ... } // ([2])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END */ /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ //[SI-LINDER-PARTNER-2][OSC][AddClassDescription(--categoryAfter)]:{" un petit fix de précision, à l'origine, l'ancien design utilisait une balise
(SANS classe ciblable!) qui succédaient les noms de catégories (et sous-catégories et ce qui se trouvait après) de fait, dans cette nouvelle version du design, on va procéder différemment, on va donner à ce
une classe CSS, il aura aussi une classe CSS afin de piloter son affichage ou non, ce qui peux aider au mode d'affichage responsive, via des Media Queries. "} $categories_string .= '
'; //[SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" on ferme la balise '