[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 ?>set_snapshot(); tep_redirect(tep_href_link(FILENAME_LOGIN, '', 'SSL')); } require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_ACCOUNT); $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_ACCOUNT, '', 'SSL')); ?> > <?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! [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - 1/ création d'un bouton de déconnexion, géré par la fonction vtab_tep_button() qui se trouve dans le fichier vtab_html_output.php } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_1] $_SI__NewDesign = array( 'pageFilepath' => '/account.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--Account 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] "} ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?>
[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [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] "} ?> 0) { ?>
size('account') > 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 "} ?> OSC-99 - Gestion des agents commerciaux define('COMMISSION_TITLE', 'Commissions'); define('COMMISSION_SHOW_ALL_COMMISSIONS', 'Afficher toutes mes commissions'); define('COMMISSION_PREVIOUS_COMMISSIONS', 'Commissions précédentes'); require(DIR_WS_CLASSES . 'commissions.php'); $commissions = new Commissions(); if ( $commissions->countCommissions((int)$customer_id) )/*comme test remplacer $customer_id par 19367 et vice-versa */ { ?> ) cette classe servira à pouvoir cibler plus efficacement cette partie sensible du design, autant en affichage normal qu'en responsive on commente l'ancienne image (on aurait pu ajouter un icone de manière à facilement pouvoir le styliser et le redimensionner, mais bon, ce serait plutôt inutile dans cette nouvelle version du design) mais on prévoit un emplacement pour cet icone si plus tard le gestionnaire du site fait l'acquisition de belles images au format SVG ou PNG ou WEBFONT.. parce que le GIF de nos jours.. laisse à désirer ! - 5/ ici, l'on ne veut pour l'instant plus afficher l'ancienne image, toutefois, là, pareil, comme en [4], on va prévoir son éventuel retour sous forme de SVG ou PNG ou WEBFONT.. - 6/ ici, l'on ne veut pour l'instant plus afficher l'ancienne image, mais ici, on va ajouter un usage d'icone UIKit et quelques classes CSS afin d'en ajouter quand même un! - 7/ on va ajouter des classes aux cellules en rapport avec ces cellules, on va aussi revoir certaines structures HTML pour en ajouter d'autres ou modifier/ajouter du texte et on va aussi ajouter un usage d'icone UIKit et quelques classes CSS afin de styliser des icones nouvellement introduits ici, cela pour améliorer la lisibilité mais aussi la qualité visuelle ! - 8/ on remplace le texte Aperçu général par Résumé qui a mieux sa place comme titre - 9/ 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 - 10/ on va se charger des liens (simples ..), en fait, on va juste leur associer une nouvelle classe CSS et utiliser UIKit - 11/ le gestionnaire du site ne souhaite plus que les clients puissent créér ou voir des notifications des produits (cela engendre spam et surcharge de la base de données) ainsi, on va faire disparaître le lien du menu de compte client [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - 1/ on modifie le nom de classe CSS de cet élément car désormais l'ancien nom de classe n'est pas un style valide pour cette revue de l'élément - 2/ 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 [9] de la tâche [SI-LINDER-PARTNER-2][OSC] - 3/ on ajoute le nom d'une classe pour permettre l'alignment du bouton "détails" ici - 4/ on retire la classe "moduleRow" faisant apparaître le fond blanc au survol. à revoir --> le code JS associé. } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
[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('account'); ?>
[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 exceptionnellement ici, on veut que les liens secondaires de titres soient re-stylisés dans la nouvelle version du design, donc on ajoute quelques attributs HTML comme, align pour qu'on utilise un alignement horizontal différent de celui prévu à l'initial width pour qu'on utilise la totalité de l'espace disponible en largeur pour l'élément ensuite.. éventuellement, on ajoutes des classes UI-Kit et personnalisée à l'élément de lien HTML href afin de lui donner plus de style, que l'on réadaptera en overrides dans le fichier CSS principal du design 2020 et pour continuer, on remplace le '' initial du lien par un '( ' et pour continuer, on remplace le '' initial du lien par un ' )' histoire de bien mettre en évidence le lien! et si les parenthèses pour le lien sont déjà contenues dans la constante de langage ou que le texte est construit différemment, on va utiliser un str_replace() sous forme de tableau anonyme pour l'adapter en conséquence - 3/ on a remarqué que le nom de la constante utilisée ici est fausse.. (ceci est un bug causé par oubli d'un ancien développeur), en effet, le fichier /commission_history_info.php n'existe pas dans les fichiers du site, et n'a jamais existé, car n'a jamais été développé par son développeur, de plus, même dans le fichier /includes/filenames.php, on voit clairement que la constante FILENAME_COMMISSION_HISTORY_INFO n'existe pas toutefois, comme on ne veut pas perdre le lien menant vers le détail d'une commission particulière car (un jour peut-être) ce fameux fichier /commission_history_info.php sera développé.. pour l'instant on va donc juste réutiliser le seul fichier disponible du module de Commissions, à savoir, on passera: de: FILENAME_COMMISSION_HISTORY_INFO à: FILENAME_COMMISSION_HISTORY - 4/ on va ajouter une classe à la cellule du tableau (
..
( ' . COMMISSION_SHOW_ALL_COMMISSIONS . ' )'; ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
' . COMMISSION_PREVIOUS_COMMISSIONS . '
' /*. tep_image(DIR_WS_IMAGES . 'arrow_south_east.gif'); */ . ''; ?>
BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
 ' . tep_date_short($commission['date_created']) . ''; ?>  ' . 'Id #' . $commission['id'] . ''; ?>  ' . 'Commande #' . $commission['orders_id'] . ''; ?>  ' . tep_output_string_protected($commission['customer_name']) . ''; ?>  ' . $commissions->getCommissionStatusDescription($commission['status']) . ''; ?> ' . $commission['amount'] . " EUR" . '  ' . ''; ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
' . str_replace( array('(' , ')' ), array('( ', ' )'), OVERVIEW_SHOW_ALL_ORDERS) . ''; ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
' . OVERVIEW_PREVIOUS_ORDERS . '
' /*. tep_image(DIR_WS_IMAGES . 'arrow_south_east.gif'); */ . ''; ?>
BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
 ' . tep_date_short($orders['date_purchased']) . ''; ?>  ' . '#' . $order_id . ''; ?>  ' . tep_output_string_protected($order_name) . ''; ?>  ' . tep_output_string_protected($order_country) . ''; ?>  ' . $orders['orders_status_name'] . ''; ?>  ' . ''; ?> [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 ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
BEGIN[VTAB-TEAM-LINDER-PARTNER-1][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 ?>
' // ([10])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([1])-->BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END . ' ' . MY_ACCOUNT_INFORMATION . ''; ?>
' // ([10])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([1])-->BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END . ' ' . MY_ACCOUNT_ADDRESS_BOOK . ''; ?>
' // ([10])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([1])-->BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END . ' ' . MY_ACCOUNT_PASSWORD . ''; ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
BEGIN[VTAB-TEAM-LINDER-PARTNER-1][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 ?>
' // ([10])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([1])-->BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END . ' ' . MY_ORDERS_VIEW . ''; ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
BEGIN[VTAB-TEAM-LINDER-PARTNER-1][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]::BEGIN ?> ' // ([10])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END . ' ' . EMAIL_NOTIFICATIONS_PRODUCTS . ''; ?> */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
' // ([10])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([1])-->BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END . ' ' . EMAIL_NOTIFICATIONS_NEWSLETTERS . ''; ?>
[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 ! "} ?>