[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/ une condition spéciale a été ajoutée en 2019, pour permettre l'ajout de la boîte de recherche au site, mais de deux manière différente (Nested) ou (Tabled). la version (Tabled) a été rajoutée pour permettre l'intégration de la boite de recherche sous forme de TABLEAU HTML, comme avant en fait la version (Nested) a été rajoutée pour permettre plus facilement l'intégration dans le header du site (comme le font la quasi-totalité des sites existants...) comme ça on peut invoquer l'une ou l'autre des versions selon nos besoins, c'est propre et ça ne détruira aucunement la logique OSCommerce lors d'un passage à une version supérieure éventuelle. la façon d'invoquer l'une ou l'autre des versions, c'est très simple: un flag attitré! si la variable $isResponsive__flag__SearchBoxMode est égal à '(Tabled)' alors, on affichera la version (Tabled) -- donc tableau habituel ! si la variable $isResponsive__flag__SearchBoxMode est égal à '(Nested)' alors, on affichera la version (Nested) -- donc imbriquée au header ! à noter que la variable $isResponsive__flag__SearchBoxMode est définie depuis le fichier /includes/header.php - 2/ on renomme l'ancien commentaire pour lui ajouter le terme tabled (suite à nos changements..) - 3/ on code toute la logique du mode (Nested) ! - 4/ on donne une classe CSS différente au conteneur du mode (Tabled) et au conteneur du mode (Nested), de manière à pouvoir les pilotes via du code CSS, et en établir le style d'affichage à n'importe quel moment ! l'idée est d'utiliser les Media Queries de CSS afin de piloter la visualisation selon la taille de l'écran (responsive: (Tabled), non-responsive: (Nested)) ! - 5/ on retire les deux espaces qui étaient ajoutés avant le titre de la boite de recherche par avant (car cela servait à bien repositionner dans la boite), pour le mode (Tabled) - 6/ on ajoute un petit attribut placeholder dans le champ de recherche pour le mode (Nested), cela permet d'afficher un texte qui sera présent si le champ n'a pas encore été rempli ou est revenu à vide! on place aussi le texte qui servira de placeholder en majuscule à l'aide de strtoupper() ! - 7/ on retire l'image de vieille loupe toute moche (enfin, pardon, toute vieille..) on remplace par une loupe toute belle (enfin, pardon, toute jeune), genre, avec un icone généré par du code sous forme d'entité XML. - 8/ pour faire en sorte que le nouvel icone introduit en #7 soit cliquable et surtout soit capable de valider le bon formulaire de recherche HTML, donc on renomme les noms de formulaire de quick_find en quick_find_tabled et quick_find_nested dans les bons modes (ce serait stupide de soumettre le formulaire de recherche qui serait celui en display: none... car pas dans le bon mode d'affichage..) - 9/ on ajoute au champ input (de type text), pour le mode (Tabled) comme pour le mode (Nested) une classe uk-input qui permet instantanément de transformer le visuel représentatif du champ qui le contient dans un style plus compatible envers les différents navigateurs qui existent, et de fait, on annule aussi par toute directives par défaut des-dits navigateurs (Chrome, Firefox, Vivaldi, EDGE, Opera, Brave, Waterfox, Min, ont tous des petites différences qui affectent grandement l'expérience de l'interface utilisateur d'un navigateur à l'autre, utiliser uiKit permet d'uniformiser tout cela!) plus tard on re-stylisera ce champ de texte car il faudra de toutes façons qu'il n'utilise pas non-plus les directives par défaut de uiKit ! - 10/ on utilise ici aussi uiKit pour transformer la liste de sélection ( on ajoute comme expliqué dans ma note à propos des éléments de formulaires d'uiKit dans le fichier /design/ResponsiveOverrides/si_css-ro-_mainStylesheet.css (section: #{uiKit}::Elements De Formulaires) un attribut capable de nous aider à cibler (par exemple, (le nom de l'attribut peut différer selon mes besoins, cet exemple est générique): ATTRIBUT: design-form-element-has-name VALEUR : select::find_price_nested select = car on cible par exemple un élément de formulaire de type par OSCommerce, donc on le conserve, par référence logique, et _nested car c'est dans la condition du mode (Nested) ensuite, on fait suivre le ) le deuxième permet de définir un icone à utiliser parmis la liste des icones proposés par uiKit OU d'en définir un nous-même entre cette balise on n'oublie pas de fermer la balise du bouton.. enfin, on ferme le
ouvert par
et voilà ! ============================================================================================================ ça donne par exemple cela (en HTML mélangé à du code PHP OSCommerce de génération d'élément de formulaire): ============================================================================================================ 'text' => '
' . ' ' . tep_draw_pull_down_menu('find_price', $price_range_array, 0, 'onChange="this.form.submit();" style="width: ' . (BOX_WIDTH-10) . 'px"') . ' ' . '
'); ============================================================================================================ ça donne par exemple cela (en pur HTML): ============================================================================================================
finalement, on pourra alors cibler avec un sélecteur CSS (dans un code CSS) l'élément de formulaire "trafiqué/overlayed" à l'aide de .cheminCssVers div.uk-form-custom[design-form-element-has-name="select::find_price_nested"] tout cela est un exemple, mais, il a par exemple été utilisé ici ! NOTE - c'est la seule fois où j'expliquerai comment utiliser uiKit pour ruser le design des éléments de formulaires HTML afin de les rendre compatibles entres navigateurs! - 11/ on ajoute une meilleure infobulle au survol du bouton de recherche (symbolisé par une icone conçue en [7]), l'infobulle est gérée via uiKit! au passage on remplace le texte dans BOX_HEADING_SEARCH par quelque chose de plus court comme simplement: un simple "Rechercher" on vide aussi l'attribut title du bouton, sinon, ça serait très moche de laisser le navigateur prendre le pas là-dessus et afficher son infobulle toute moche... à noter que l'on ne fait cette modification QUE pour le mode (Nested) car, le mode (Tabled) lui n'en a pas besoin de ce changement.. - 12/ comme cela a été demandé par le client, on va modifier quelque peu la taille des éléments de formulaires: champs de texte et liste de sélection, pour la boite de recherche (en mode (Nested)): il n'aimait pas voir une différence de taille, moi, je trouve que ça nuançait bien, mais bon, c'est vrai, ça n'était pas symétriquement placé, maintenant.. avec les changements suivants, c'est symétrique: champ de formulaire texte: on ajoute du style inline à sa déclaration tep_draw_input_field(), le style n'est pas compliqué, on joue sur la directive width, on la limite à un certain pourcentage. à l'origine, on utilisait : "width: ' . (BOX_WIDTH-30) . 'px"' désormais, nous utliserons : "width: ' . '70' . '%"' après le champ de formulaire texte: on y retire l'espace initialement ajouté (il ne sera plus utilisé..) et décalerait le , cela n'était pas le cas avant, aucuns pré-style ajoutés. et pour finir, on va enfin modifier le style inline que le et faciliter les alignements de ces éléments } */ // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN if ($isResponsive__flag__SearchBoxMode == '(Tabled)') { // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $menu_info_box_contents[] = array('text' => BOX_HEADING_SEARCH); // ([4])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN echo '
'; new menuInfoBoxHeading($menu_info_box_contents, false, false); echo '
'; // ([4])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $menu_info_box_contents = array(); // ([8])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $menu_info_box_contents[] = array('form' => tep_draw_form('quick_find_tabled', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'), 'align' => 'center', // ([7])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([8])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([9])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END 'text' => tep_draw_input_field('keywords', '', 'class="uk-input" size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . ' ' . tep_hide_session_id() . '🔍'); // -> SPRP11 $menu_info_box_contents[] = array('form' => tep_draw_form('price_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'), 'align' => 'center', // ([10])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN 'text' => '
' . ' ' . tep_draw_pull_down_menu('find_price', $price_range_array, 0, 'onChange="this.form.submit();" style="width: ' . (BOX_WIDTH-10) . 'px"') . ' ' . '
'); // ([10])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // <- SPRP11 // ([4])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN echo '
'; new menuInfoBox($menu_info_box_contents); echo '
'; // ([4])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // -> OSC-12 : Arrondissement des angles pour le visuel du site ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN } else if ($isResponsive__flag__SearchBoxMode == '(Nested)') { // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $cellAlignmentFor__searchBoxModeNested__1 = ''; $cellAlignmentFor__searchBoxModeNested__2 = ''; if (tep_session_is_registered('customer_id')) { $cellAlignmentFor__searchBoxModeNested__1 = 'left'; $cellAlignmentFor__searchBoxModeNested__2 = 'left'; } else { $cellAlignmentFor__searchBoxModeNested__1 = 'center'; $cellAlignmentFor__searchBoxModeNested__2 = 'center'; } // ([13])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $menu_info_box_contents = array(); // ([8])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $menu_info_box_contents[] = array('form' => tep_draw_form('quick_find_nested', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get', 'class="form_aligned"'), // ([13])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END 'align' => $cellAlignmentFor__searchBoxModeNested__1, // ([6])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([7])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([8])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([9])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([11])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([12])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([14])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([2])-->BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END // ([19])-->BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END 'text' => '
' . tep_draw_input_field('keywords', '', 'placeholder="' . strtoupper(BOX_HEADING_SEARCH) . '" class="uk-input" size="10" maxlength="30" ') . '' . tep_hide_session_id() . '' . tep_image( DIR_WS_DESIGN . '_berenIconeSearch.svg', '', '', '', 'class="position_img"') . '' . '
'); /*'text' => tep_draw_input_field('keywords', '', 'placeholder="' . strtoupper(BOX_HEADING_SEARCH) . '" class="uk-input" size="10" maxlength="30" style="width: ' . '20' . '%"') . '' . tep_hide_session_id() . '🔍');*/ // -> SPRP11 // ([18])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /*$menu_info_box_contents[] = array('form' => tep_draw_form('price_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'), // ([13])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END 'align' => $cellAlignmentFor__searchBoxModeNested__2, // ([10])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN 'text' => '
' . ' ' . tep_draw_pull_down_menu('find_price', $price_range_array, 0, 'onChange="this.form.submit();" style="width: ' . '100' . '%"') . ' ' . '
');*/ // ([10])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // <- SPRP11 // ([4])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN echo '
'; new menuInfoBox($menu_info_box_contents); echo '
'; // ([4])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN switch (tep_session_is_registered('customer_id')) { case true: echo '
'; echo tep_image( // ([17])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END DIR_WS_DESIGN . 'logoscotch_arrondi.png', 'logo', '', '', 'class="logoscotch_arrondi --nonResponsiveLogoHeaderSearch"' ); echo '
'; break; default: case false: echo '
'; echo tep_image( // ([17])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END DIR_WS_DESIGN . 'logoscotch_arrondi.png', 'logo', '', '', 'class="logoscotch_arrondi --nonResponsiveLogoHeaderSearch"' ); echo '
'; break; } // ([16])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN } // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>