[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 ?>restore_contents(); if (sizeof($navigation->snapshot) > 0) { // [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" ATTENTION depuis février 2021, suite à une demande tardive du client, on veut que lors d'une identification, cela nous redirige à l'accueil et non dans la page du compte "} $origin_href = tep_href_link(str_replace($navigation->snapshot['page'], 'index.php' , $navigation->snapshot['page']), tep_array_to_string($navigation->snapshot['get'], array(tep_session_name())), $navigation->snapshot['mode']); $navigation->clear_snapshot(); tep_redirect($origin_href); } else { tep_redirect(tep_href_link(FILENAME_DEFAULT)); } } } } if ($error == true) { $messageStack->add('login', TEXT_LOGIN_ERROR); } $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_LOGIN, '', 'SSL')); ?> > ' . "\n"; echo '' . "\n"; echo '' . "\n"; /* -> OSC-12 : Arrondissement des angles pour le visuel du site */ ?> <?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' => '/login.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--Login 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('login') > 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 "} ?> count_contents() > 0) { ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" perméttra plus tard de cibler ce bloc précis du site, on va le restyliser, et on va y supprimer le lien vers le fichier popup d'informations'/info_shopping_cart.php' car il n'est plus vraiment utile et semble plutôt à destination d'informer le gestionnaire du site du mode de fonctionnement du panier, cela devrait plutôt être dans le manuel OSCommerce qu'affiché au public.. ce n'est absolument pas professionnel, ce bloc n'apparaît que si on est non-identifié et qu'on a quelque chose dans le panier "} ?> ) 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, on entoure l'élément de formulaire d'un bloc composant Icon de UI-Kit, de cette manière ça créé un icône très joli - 5/ on ajoute une classe de style à cet élément textuel de manière à pouvoir le re-styliser plus tard - 6/ le tableau peut très mal s'afficher en responsive, ce qui peut vite être source de confusion pour l'utilisateur de fait, on prévoit des classes qui seront uniquement modifiées dans certaines circonstances: en responsive principalement - 7/ en association avec l'étape [6] on va juste rajouter une cellule, mais cette cellule ne sera QUE visible en responsive - 8/ ajout de quelques structure HTML pour être en mesure de pouvoir cibler l'élément plus tard via une feuille de style CSS - 9/ ajout d'une classe css pour styliser ce lien html - 10/ 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 [10] de la tâche [SI-LINDER-PARTNER-2][OSC] - 2/ Création d'une classe dans une balise afin de permettre l'alignement entre la cellule "nouveau client" et la cellule "client enregistré" - 3/ Ajout d'une classe afin de centrer le bouton : inscription - 4/ Ajout d'une classe afin de centrer le bouton : identification - 5/ Permet de centrer le titre - 6/ Retrait du texte : TEXT_NEW_CUSTOMER_INTRODUCTION; afin de gagner de la place. } */ ?> [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 } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?>
output('login'); ?>
)/', '', TEXT_VISITORS_CART); ?>
[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 (
..
BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][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 ?>
 ou 
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][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 ?> [VTAB-TEAM-LINDER-PARTNER-1][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 ?> [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 ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?>
' . TEXT_PASSWORD_FORGOTTEN . ''; ?>
[VTAB-TEAM-LINDER-PARTNER-1][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 /* [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 ! "} ?>