[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 va commencer par structurer le nouveau fichier, de manière à facilement le reconnaître dans le code source,
et surtout on respecte le système d'infobox de OSCommerce, afin de préserver la structure ET la philosophie d'affichage d'OSCommerce,
soit usage de
$info_box_contents = array();
$info_box_contents[] = array('text' ..
menuInfoBoxHeading()
et
$info_box_contents = array();
$info_box_contents[] = array('text' ..
menuInfoBox()
on n'oublie pas d'ouvrir et de fermer les lignes du tableau (
et
) ainsi que la cellule contenante (
et
), cela est requis car en réalité, ici, l'on se trouve dans une
)
qui est construite depuis le fichier .php accédé (exemple: index.php).
ce n'en sera que plus simple après en cas de besoin d'adapter à une version future!
et pour pouvoir identifier en responsive cette cellule via un sélecteur CSS, on va ajouter au
une petite classe CSS !
- 4/ il est très important que cette boite-de-boutons dispose d'un titre géré par OSCommerce du-moins, donc, on écrit bel et bien un titre
essentiel à l'éco-système et philosophie de OSCommerce
- 5/ on utilise une variable pour définir le contenu de la boite-de-boutons
aussi, on développe la structure HTML de la boite-de-boutons ici
elle sera stylisée plus tard par du code CSS
et c'est là que certaines variables définies en [2], vont servir, dans le sens où, on va afficher la fameuse image, et en spécifier pour la première fois le chemin d'accès
il y a différents bouton cliquables spéciaux, qu'on a construit en faisant appel au composant Button de UI Kit
les boutons ont un attribut HTML: uk-toggle
chaque attribut uk-toggle informe de l'élément (identifié par son ID HTML) à afficher, en tant que OffCanvas aussi gérée par UI Kit
chaque clic sur un bouton ici servira à afficher une fenêtre de type OffCanvas définie en par un ID (cf: "uk-toggle="target: ... "),
elle aussi sous-gérée par UI Kit
enfin, on se sert de la variable contenant le contenu de la structure HTML de la boite-de-boutons, et on l'affiche à l'aide d'une infoxbox: menuInfoBox()
- 6/ ici on développe la logique de l'élément "Facebook"
à noter que dans le fichier /includes/footer.php on a une balise
qui initialise l'API Facebook, ici, l'on construit l'affichage
(cherchez le CODETAG: [FACEBOOK_API_IS_INITIALIZED_HERE])
il y a une énorme bidouille que j'ai du mettre en place pour le Widget Facebook Like/Page, selon la résolution d'affichage, car Facebook (encore lui..) ne nous laisse pas redimensionner ses fichus Widgets
selon nos envies, même avec du code CSS.. du coup, j'ai entouré de balises (ayant chacune sa classe CSS) chaque Widget "Like et Page", sauf que, pour "Like", j'ai créé deux versions différentes
selon le mode de résolution de l'écran qui affichera la page, et bien, un code CSS se chargera d'afficher ou masquer à notre convenance les Widgets à la racine de leur index dans le DOM HTML!
ce faisant, on évite des décalages et des affichages moisis provoqués par le Widget Facebook Page, et on meuble à côté avec des Widgets Facebook Like
- 7/ ici on développe la logique de l'élément "EMail" basé sur la fonctionnalité "Tell a Friend (Dire à un Ami)"
à noter que dans le fichier /includes/column_right.php on avait toute la logique de la boite "Tell a Friend" qui structurait le formulaire pré-cité, ici, l'on construit l'affichage de sa nouvelle version
en y réutilisant plus ou moins le même code logique
(cherchez le CODETAG: [TELL_A_FRIEND_WAS_LOADED_FROM_THERE])
on stylise les éléments du formulaire à l'aide des composants Formulaires de UI Kit,
cela utilise le même principe que celui utilisé dans le fichier: /includes/boxes/search.php
: /design/ResponsiveOverrides/si_css-ro-_mainStylesheet.css
** partie "si_css-ro-_searchBoxStylesheet" pour cibler les éléments Forms générés par UI Kit
donc cela ne sera pas rééxpliqué ici, car cela serait redondant
IMPORTANT - la page ne sera pas redirigée correctement si le formulaire est envoyé sans id de produits
il est primordial donc de limiter l'affichage de l'élément "EMail" uniquement si l'on visite une page produit
}
*/
?>
[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN
?>