[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 ?>add(NAVBAR_TITLE_1, tep_href_link(FILENAME_ADVANCED_SEARCH)); ?> > [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' => '/advanced_search.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] ************************************************************************/ ?> PEF : Product Extra fields ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(isPage--AdvancedSearch 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 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] "} ?>

size('search') > 0) { ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(--messageStackCell)]:{" perméttra plus tard de cibler le bloc de messages d'avertissement/erreur/succès du site "} ?> ) cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive - 4/ on ajoutes des classes UI-Kit à l'élément de formulaire afin de lui donner plus de style, que l'on réadaptera peut-être en overrides dans le fichier CSS principal du design 2020 - 5/ l'ancienne tâche OSC-19, implémentée par un développeur tier est là pour gérer le non-affichage du système d'option des fabricants, or, on n'en veut pas! ça doit être masqué.. problème: c'était masqué avec des commentaires HTML à l'époque.. donc les robots pouvaient lire les noms des fabricants dans le code source HTML de la page, dans le-dit commentaire solution: il faut le masquer en PHP ! } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [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/ à l'origine, ici, il y avait une image, désormais, en attendant d'éventuellement lui trouver une belle image, on va alors la commenter } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?> output('search'); ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ 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 ce tableau contient le contenu visuel d'une partie supérieure de la page. - 2/ on ajoute quelques structures HTML à cet en-tête généré en PHP à l'aide de balises , , avec une classe pour la balise cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive puis on modifie le texte HEADING_SEARCH_CRITERIA en quelque chose de plus 'clarificateur' - 3/ on ajoutes des classes UI-Kit à l'élément de formulaire afin de lui donner plus de style, que l'on réadaptera peut-être en overrides dans le fichier CSS principal du design 2020 et aussi on ajoute du false pour éviter de pré-cocher la case et éventuellement un placeholder } */ // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $info_box_contents = array(); // ([2])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $info_box_contents[] = array('text' => '' . ' ' . ' ' . str_replace(HEADING_SEARCH_CRITERIA, 'Formulaire de recherche avancée', HEADING_SEARCH_CRITERIA) . '' . ' ' ); // ([2])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END new infoBoxHeading($info_box_contents, true, true); $info_box_contents = array(); // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $info_box_contents[] = array('text' => ' ' . ' ' . tep_draw_input_field('keywords', '', 'placeholder="TAPEZ ICI CE QUE VOUS SOUHAITEZ RECHERCHER" class="uk-input uk-form-small uk-form-width-full --inputTextBox__type1"' ) ); // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $info_box_contents[] = array('align' => 'right', 'text' => tep_draw_checkbox_field( 'search_in_description', '1', false, 'class="uk-checkbox --inputCheckbox__type1"' ) . ' ' . '' . ' ' . TEXT_SEARCH_IN_DESCRIPTION . '' . '' ); // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END new infoBox($info_box_contents); // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ 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 ce 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 - 3/ on ajoutes des classes UI-Kit à l'élément de lien afin de lui donner plus de style, que l'on réadaptera peut-être en overrides dans le fichier CSS principal du design 2020 afin de se passer du popup initial: href = javascript:popupWindow(\'' . tep_href_link(FILENAME_POPUP_SEARCH_HELP) . '\') on va modifier la cible href afin de cibler une fonction : function__pageAdvancedSearchMainTableCategorySectionHeadingHelpText() (fonction définie ici (VOIR CODETAG [HELP_SEARCH_TEXT_SHOW_HIDE_FUNCTION]) dans le but d'afficher justement (ou masquer si affiché) la cellule nouvellement introduite en [5] - 4/ 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 - 5/ l'ancien système d'informations est très mauvais en 2020 (via un Popup externe...), de fait, nous allons faire différentes choses ici déjà structurer une nouvelle sous-cellule (tr->td) ayant chacuns une classe CSS (afin de la styliser plus tard) (le TR comme le TD) à qui l'on donne un ID javascript afin de lui aussi le cibler plus tard mais uniquement seulement le TR ensuite on reprend le contenu (partiel) du fichier défini par la constante PHP FILENAME_POPUP_SEARCH_HELP (soit: /popup_search_help.php) en guise de contenu textuel de la cellule les styles visuels d'affichage ou dissimulation sont gérés via des classes CSS tout simplement [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 [4] de la tâche [SI-LINDER-PARTNER-2][OSC] } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END [HELP_SEARCH_TEXT_SHOW_HIDE_FUNCTION_USED_HERE] ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> ' . TEXT_SEARCH_HELP_LINK . ''; ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> ' ' . TEXT_SEARCH_HELP . ' '); new infoBox($info_box_contents); ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ 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 ce 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 - 3/ on va ajouter une classe à la cellule du tableau ( .. [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::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]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // -> OSC-19: suppression des fournisseurs dans la recherche avancée /* */ // <- OSC-19 // ([5])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> PEF : Product Extra fields ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::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 ?> [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 ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> * > span:first-child" design-form-element-has-name="select::categories_id" class="--inputSelectField__type1">'; echo tep_draw_pull_down_menu('categories_id', tep_get_categories(array(array('id' => '', 'text' => TEXT_ALL_CATEGORIES)))); echo ''; echo ''; echo ''; echo ''; echo ''; ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> '', 'text' => TEXT_ALL_CATEGORIES)))); ?>   [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> ' . ' ' . ENTRY_INCLUDE_SUBCATEGORIES . '' . ''; ?> '', 'text' => TEXT_ALL_MANUFACTURERS)))); ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::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 ?> [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 ?> [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][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 ! "} ?>