[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/ on place aussi la box search.php à cet endroit, qui servira en mode responsive dans le nouveau design: la colonne en haut de la page à gauche) à noter, dans le fichier: /includes/header.php (cherchez le CODETAG: [SEARCH_BOX_IS_ALSO_HERE]), car la boite de recherche s'y trouve aussi! désormais on a un nouveau système de détection de comment afficher la boîte de recherche, via une variable de détection $isResponsive__flag__SearchBoxMode vérifiée dans /includes/boxes/search.php) on l'initialise ici. mais en mode (Tabled) ainsi, on pourra aisément piloter via la nouvelle classe CSS son affichage ou pas (display: none ou block) ! l'idée, c'est d'afficher la version (Nested) uniquement sur grand écran (genre en mode non-responsive). l'idée, c'est d'afficher la version (Tabled) uniquement sur petit écran (genre en mode responsive). } */ // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN /* [SEARCH_BOX_IS_ALSO_HERE] */ $isResponsive__flag__SearchBoxMode = '(Tabled)'; require(DIR_WS_BOXES . 'search.php'); // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ echo tep_draw_separator('pixel_trans.gif', '100%', '10'); if ((USE_CACHE == 'true') && empty($SID)) { echo tep_cache_categories_box(); } else { include(DIR_WS_BOXES . 'categories.php'); } /* if ((USE_CACHE == 'true') && empty($SID)) { echo tep_cache_manufacturers_box(); } else { include(DIR_WS_BOXES . 'manufacturers.php'); } */ // -> HTCT262 // if (basename($PHP_SELF) == FILENAME_PRODUCT_INFO) // include(DIR_WS_BOXES . 'header_tags.php'); // <- HTCT262 // 5/6/2013: vd: suppression lien moma // include(DIR_WS_BOXES . 'links.php'); // <- 0000017 // [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" désormais, pour rajouter une boite normale (box) ou une petite boite (cardbox) (ou autres) il faut procéder ainsi: // (1) selon le type de boite s'inspirer des fichiers de boites // normale : [s'inspirer de] si_newdesign2019_livraison_rapide.php (ou encore) si_newdesign2019_marquage_publicitaire.php ... // cardbox : [s'inspirer de] si_newdesign2019_methodes_livraison_cardbox.php (ou encore) si_newdesign2019_methodes_paiement_cardbox.php // navigationbox : [s'inspirer de] si_newdesign2019_liens_produits_navigationbox.php (ou encore) - // offerbox : [s'inspirer de] si_newdesign2019_offres_speciales_offerbox.php (ou encore) - // buttonbox : [s'inspirer de] si_newdesign2019_socialisation_buttonbox.php (ou encore) - // (2) ajouter son include ici, // (3) songer à lui ajouter ses styles CSS: // classes CSS UNIVERSELLES : /design/ResponsiveOverrides/si-css-ro-_mainStyleSheet.css (et consors: éventuels autres fichiers .css, inspirez-vous de celles existantes du même type de boite choisi) // classes CSS RESPONSIVES : /design/ResponsiveOverrides/si-css-ro-_mainMediaQueriesForScreens.css (et consors: éventuels autres fichiers .css, inspirez-vous de celles existantes du même type de boite choisi) // (4) dans les fichiers ainsi créés (développés), scrupuleusement respecter la structure des boites comme contruites dans les nouvelles autres, afin de garder une cohérence dans le design ainsi que dans OSCommerce // (5) n'oubliez pas de créér dans le dossier '/images/infobox/' un dossier du nom de la boite, (sans écrire le type de la boite dans le nom), // s'inspirer des dossiers déjà en place, // ne pas oublier de placer un fichier index.html vide dedans pour éviter (1) le listing du dossier (2) les soucis de chmod. // "} /* ************************************************************************ [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ la nouvelle boite si_newdesign2019_livraison_rapide.php son emplacement est au même endroit que les boites habituelles de OSCommerce, ici: /includes/boxes est là pour afficher à l'utilisateur le listing des moyens de livraisons, à titre préventif seulement (note) cette nouvelle boite n'est pas native à OSCommerce non plus, elle est toute nouvelle, responsive, et se sert d'UI Kit pour afficher un texte dans une fenêtre modale en plein-écran ! format choisi pour cette boite: normale - 2/ l'ancienne boite marquage.php ne sert plus à rien, du coup, on la commente (note) l'ancienne boite n'est pas native à OSCommerce, elle avait été rajouté par un développeur tiers à l'époque, (peut-être Monsieur Vincent Detzel) - 3/ le séparateur de boites OSCommerce ne servira pas à cet endroit dans le nouveau design, on ne le retire pas du code, on le commente juste lui aussi - 4/ la nouvelle boite si_newdesign2019_marquage_publicitaire.php son emplacement est au même endroit que les boites habituelles de OSCommerce, ici: /includes/boxes est alors celle qui remplacera l'ancienne boite 'marquage.php' est là pour afficher à l'utilisateur que le site peut personnaliser des produits à sa convenance (moyennant un devis par email), à titre préventif seulement (note) cette nouvelle boite n'est pas native à OSCommerce non plus, elle est toute nouvelle, responsive, et se sert d'UI Kit pour afficher un texte dans une fenêtre modale en plein-écran ! format choisi pour cette boite: normale - 5/ l'ancienne boite importation.php ne sert plus à rien, du coup, on la commente (note) l'ancienne boite n'est pas native à OSCommerce, elle avait été rajouté par un développeur tiers à l'époque, (peut-être Monsieur Vincent Detzel) - 6/ la nouvelle boite si_newdesign2019_importation_grande_quantite.php son emplacement est au même endroit que les boites habituelles de OSCommerce, ici: /includes/boxes est alors celle qui remplacera l'ancienne boite 'importation.php' est là pour afficher à l'utilisateur que le site peut effectuer des importations de grande quantité, à titre préventif seulement (note) cette nouvelle boite n'est pas native à OSCommerce non plus, elle est toute nouvelle, responsive, et se sert d'UI Kit pour afficher un texte dans une fenêtre modale en plein-écran ! format choisi pour cette boite: normale - 7/ l'ancienne boite partners.php ne sert plus à rien (pour l'instant, et ce jusqu'à nouvel ordre), du coup, on la commente (note) l'ancienne boite n'est peut-être pas native à OSCommerce - 8/ la nouvelle boite si_newdesign2019_methodes_livraison_cardbox.php son emplacement est au même endroit que les boites habituelles de OSCommerce, ici: /includes/boxes est alors celle qui remplacera l'ancienne boite 'partners.php' (partiellement) est là pour afficher à l'utilisateur que le site propose différentes méthodes de livraison, à titre préventif seulement (note) cette nouvelle boite n'est pas native à OSCommerce non plus, elle est toute nouvelle, responsive, et se sert d'UI Kit pour afficher un texte dans une fenêtre modale en plein-écran ! format choisi pour cette boite: cardbox - 9/ la nouvelle boite si_newdesign2019_methodes_paiement_cardbox.php son emplacement est au même endroit que les boites habituelles de OSCommerce, ici: /includes/boxes est alors celle qui remplacera l'ancienne boite 'partners.php' (partiellement) est là pour afficher à l'utilisateur que le site propose différentes méthodes de paiement, à titre préventif seulement (note) cette nouvelle boite n'est pas native à OSCommerce non plus, elle est toute nouvelle, responsive, et se sert d'UI Kit pour afficher un texte dans une fenêtre modale en plein-écran ! format choisi pour cette boite: cardbox - 10/ la nouvelle boite si_newdesign2019_liens_produits_navigationbox.php son emplacement est au même endroit que les boites habituelles de OSCommerce, ici: /includes/boxes est là pour afficher à l'utilisateur divers liens en rapport avec les produits, à titre préventif seulement (note) cette nouvelle boite n'est pas native à OSCommerce non plus, elle a été déplacée au-dessus de toute les autres boites (sauf le menu des catégories), plus tard, décision logique format choisi pour cette boite: navigationbox EDIT: en 2020, le client ne la voulait plus, car on a augmenté la taille du menu des catégories dans la colonne de gauche aussi (ce fichier).. donc on commente cette ligne.. } */ // ([10])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // include(DIR_WS_BOXES . 'si_newdesign2019_liens_produits_navigationbox.php'); // ([1])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END include(DIR_WS_BOXES . 'si_newdesign2019_livraison_rapide.php'); // ([2])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // include(DIR_WS_BOXES . 'marquage.php'); // ([3])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // echo tep_draw_separator('pixel_trans.gif', '100%', '10'); // ([4])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END include(DIR_WS_BOXES . 'si_newdesign2019_marquage_publicitaire.php'); // ([3])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // echo tep_draw_separator('pixel_trans.gif', '100%', '10'); // ([5])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // include(DIR_WS_BOXES . 'importation.php'); // ([3])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END //echo tep_draw_separator('pixel_trans.gif', '100%', '10'); // ([6])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END include(DIR_WS_BOXES . 'si_newdesign2019_importation_grande_quantite.php'); // ([3])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // echo tep_draw_separator('pixel_trans.gif', '100%', '10'); // ([7])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // include(DIR_WS_BOXES . 'partners.php'); // ([8])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END include(DIR_WS_BOXES . 'si_newdesign2019_methodes_livraison_cardbox.php'); // ([9])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END include(DIR_WS_BOXES . 'si_newdesign2019_methodes_paiement_cardbox.php'); /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?>