[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 ?> EPIB46 // -> OSC-78: Gestion de catégories réservées aux professionnels // Si le client n'est pas identifié, cela aménerait une warning ERROR (de fait que la variable $customer_id) n'existerait pas! // Ainsi, on vérifie si la variable est vide/inexistante // Par précaution, on va créé une variable temporaire et l'utiliser pour stocker le customer_id. et on on la déclare valorisée à vide si c'est le cas sinon on créé. // Modifier la variable par défaut créée par oscommerce n'ammènerait que des ennuis (et pas forcément tout de suite mais lors de futurs développements). // Ainsi, on créé une variable vide: $osc_78_customer_id_container = ''; if (empty($customer_id)) { $osc_78_customer_id_container = ''; } else { $osc_78_customer_id_container = $customer_id; } // Si une catégorie précise a demandé à être affichée // Et que le client n'est pas un client dans le groupe pro // Et que la catégorie qu'il essaie d'afficher EST une catégorie pro. if (isset($cPath) && tep_not_null($cPath) && ! is_pro_customer($osc_78_customer_id_container) && is_category_for_pro($current_category_id) ) { // On le redirige verd la page d'informations prévue à cet effet. // extra_info_pages?id=11. get_cat_pro_html_redirect(); } // Sinon on affiche normalement la page demandée: else { // <- OSC-78: Gestion de catégories réservées aux professionnels $page_query = tep_db_query("select p.pages_id, p.sort_order, p.status, s.pages_title, s.pages_html_text from " . TABLE_PAGES . " p LEFT JOIN " .TABLE_PAGES_DESCRIPTION . " s on p.pages_id = s.pages_id where p.status = 1 and s.language_id = '" . (int)$languages_id . "' and p.page_type = 1"); $page_check = tep_db_fetch_array($page_query); $pagetext=stripslashes($page_check[pages_html_text]); /* ************************************************************************ [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ $pagetext contient des données extraites de la base de données, ces données sont alors affichées en brut (après un passage entre la fonction stripslashes() uniquement), sans traitements particuliers.. ce qui pose un énorme problème, c'est que $pagetext, ne contient AUCUNS moyens de le cibler via un sélecteur CSS.., et qu'il contient plusieurs morceaux séparés par du code HTML, et cela un peu n'importe où et n'importe comment (provenant d'un formatage par un éditeur WYSIWYG..). cela inclue en vrac, mots-clefs et texte de bienvenue.. on sait cependant qu'il y a des choses dans ce $pagetext que l'on ne veut strictement plus! ainsi, on va, réaliser différentes actions sur lui le but final sera de le sortir proprement formaté, avec des classes CSS qui seront PILOTABLES via du codes et des règles CSS il est important de bien comprendre que sans cela, ça deviendrait le bordel pour traiter les données - 2/ on va donc déjà encadrer le $pagetext d'une balise
ayant pour classe: pageText--IndexPageWelcomeTextHTML - 3/ puis, on va modifier le tag
(qui est écrit tel quel, donc un str_replace() suffira) qui s'y trouve pour lui ajouter aussi une classe CSS: pageText--IndexPageWelcomeTextHTML_ShopIndex - 4/ heureusement pour nous, on sait que dans $pagetext, se trouve une balise de style CSS de type avec des styles forcés en 'inline' bien précis cela constitue à l'heure actuelle les mots-clefs de la page d'accueil que l'on va utiliser pour créér notre nuage de tags (à l'aide du résultat renvoyé par la recherche par regex) donc, on va cibler cette balise et les styles et en récupérer le contenu à l'aide d'une regex, mais on va immédiatement transformer la chaîne récupérée en tableau PHP pour les options de la regex, on aura besoin de celles-ci: i = on ne se préoccupe pas de la casse d'écriture (majuscules/minuscules) dans la recherche (i = insensitive) m = on vérifie éventuellement chaques lignes (m = multiline) U = on souhaite s'arrêtter au tout premier rencontré, car sinon, la regex s'arrêtterait non pas au premier rencontré mais au tout dernier.. soit, un qui ne nous intérésse pas! (U = Ungreedy) ATTENTION - si le code de la balise entourant ces mots-clefs change, il faudra aussi en répercuter le changement dans le code ici! - 5/ on va réïtérer la même regex que celle utilisée en [4] mais, au lieu de récupérer on va remplacer par une balise HTML à nous et dedans on y inscrira un tag de référence (qui peut être n'importe quoi) l'idée c'est que à la toute-fin de notre procédé, on va remplacer ce tags de référence par la liste correctement formattée en nuage de mots-clefs (nuage de tags) et cela sera propre ATTENTION - si le code de la balise entourant ces mots-clefs change, il faudra aussi en répercuter le changement dans le code ici! - 6/ on va désormais à l'aide de UIKIT entourer chaques mots-clefs (qu'on a dans un tableau) par une balise HTML de manière à styliser chacun des mots-clefs, mais aussi leur donner un lien cliquable qui va directement appeller la page de recherche pour ... effectuer la recherche du mot-clef dans la recherche du site on va utiliser de nombreuses variables, deux d'entres-elles vont contenir les mots-clefs partiaux et les mots-clefs complets la seule différence entre les deux variables c'est que les mots clefs partiaux seront affichés dès l'arrivée sur la page, et en cliquant sur un autre élément (PLUS/MOINS) on va pouvoir afficher/masquer ceux complets ceci évidemment dans le but d'économiser un maximum de place au centre et de ne surtout pas surcharger la page! il y a cependant des mots clefs qui sont uniquement destinés à être lus par les robots... donc, il faut les masquer à l'utilisateur, à noter ces mots-clefs ne seront pas transformés en liens masqués cliquables, et donc autorisés par le référencement Google en terme de SEO cela se fera dans une boucle - 7/ finalement, afin d'inclure notre nouvelle liste de mots-clefs au code HTML initial extrait de la base de données, on va remplacer notre tag de référence employé en [5] par notre liste à nous de mots-clefs on va aussi ajouter un tag de référence, là encore qui ne servira qu'à titre de "positionnement" de recherche/remplacement via PHP, ce tag servira alors en [9] - 8/ en [6] on a défini les mots-clefs comme cliquables, on leur a donné un évènement (onclick) Javascript, qui pointe vers la page de recherche et y recherche le mot-clef cliqué seulement, on a aussi prévu d'avoir un évènement qui peut masquer/afficher la liste partielle/complète des mots-clefs donc ici, on va créér un code Javascript, avec des fonctions, qui se chargera de ce processus - 9/ le texte de bienvenue (celui qui dit.. "Bienvenue".. hahaha..) est constitué d'un véritable enchevêtrement (pour ne pas dire super bordel) de balises HTML en veux-tu en voilà, il faut donc complètement le revoir on va utiliser la recherche par regex afin de cibler précisemment le texte, et on va surtout se baser sur notre tag de référence défini en commentaire en [7] afin de nettoyer le code HTML de toutes ces balises bordéliques, on va utiliser une petite fonction bien pratique de PHP, qui plus est, en plus native, qui s'appelle strip_tags() on en profite aussi pour ajouter à ce nettoyage une nouvelle balise HTML qui englobera le nettoyage afin de pouvoir le cibler plus tard! et enfin, on remplace tout par notre nettoyage pour les options de la regex, on aura besoin de celles-ci: s = on transforme la recherche en ligne unique, sinon on ne trouverait rien, tant elle est blindée d'espaces insécables à des endroits aléatoires - 10/ le texte de SHOWROOM (celui qui dit.. "SHOWROOM"..) est constitué lui aussi d'un véritable enchevêtrement (pour ne pas dire super bordel) de balises HTML en veux-tu en voilà, mais là, pour lui, on va juste le virer, car dans cette nouvelle version du design il est inutile on va utiliser la recherche par regex afin de cibler précisemment le texte, et on va surtout se baser sur la balise fermante
comme position de recherche pour les options de la regex, on aura besoin de celles-ci: s = on transforme la recherche en ligne unique, sinon on ne trouverait rien, tant elle est blindée d'espaces insécables à des endroits aléatoires m = on vérifie éventuellement chaques lignes (m = multiline) - 11/ BUG - FIX - un ';' est mal placé ici, il était ainsi: style="text-align: center";> il devait être comme cela: style="text-align: center;"> - 12/ BUG - FIX - parfois, il peut y avoir de multiples détections de nuage de tags selon la façon dont le texte est lu par le code... il faut donc n'en afficher qu'un, et surtout supprimer l'affichage autant que la génération des autres et cela est facilement faisable en quantifiant à non-gourmand la recherche: .*? au lieu de : .* bien que l'astuce soit très connue, voici pour les curieux une petite explication : https://stackoverflow.com/questions/2503413/regular-expression-to-stop-at-first-match - 13/ GLITCH - FIX - de temps à autres, l'analyse (en fonction de la façon dont cet atrocité d'éditeur WYSIWYG formatte) peut échouer à créér le message d'accueil (formatté).. de fait, on va forcer son affichage... et ce.. dans tout les cas. ainsi, on va: - créér une nouvelle variable à ce titre - la renseigner avec un texte générique que le client voulait - et repérer un encart adéquat pour injecter la phrase au travers de logique sémantique (html + css) juste après le nuage de tags - 14/ GLITCH - FIX - initialement, on avait prévu de décoder les entités (et accents) html, mais finalement, ça semble inutile... ainsi, on va directement écrire nos accents en clairs ainsi que les entités (les: &...; et &#...;) - 15/ GLITCH - FIX - à force de voir des balises non ciblable via CSS... ça m'a beaucoup saoulé... donc, toute cette partie, formatte en quelques regex et un str_replace(), tout ces foutus et en et désormais le code est beaucoup plus propre d'un point de vue HTML ! - 16/ GLITCH - FIX - un petit oubli, rien de bien méchant, mais une chaîne de repérage subsistait dans le code, désormais, elle sera retirée aussi } */ // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // ([2])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $pagetext = '
' . $pagetext . '
'; // ([3])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $pagetext = str_replace('
', '
', $pagetext); // ([4])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN preg_match('/(.*)<\/span>/imU', $pagetext, $SI_LINDER_PARTNER_2_OSC__keywordsIndexMatches); $SI_LINDER_PARTNER_2_OSC__keywordsIndexArray = explode(',', $SI_LINDER_PARTNER_2_OSC__keywordsIndexMatches[1]); // ([4])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([5])-->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 $pagetext = preg_replace('/(.*?)<\/span>/imU', '
{{REFERENCE_NUAGE_DE_TAGS_INDEX}}
', $pagetext); // ([13])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $SI_LINDER_PARTNER_2_OSC__autoIntroduction = 'Linder-Partner divertissements, à votre service depuis 17 ans, avec 12\'000 références en stock, des prix ultra bas, et des livraisons rapides en 24-48h.'; $SI_LINDER_PARTNER_2_OSC__autoIntroduction = "LP-Divertissements, Leader et importateur d'articles de fête. 12'000 références en stock. Créez votre compte afin de découvrir nos prix dégressifs!"; $pagetext = str_replace( '
{{REFERENCE_NUAGE_DE_TAGS_INDEX}}
', '
{{REFERENCE_NUAGE_DE_TAGS_INDEX}}
' . '
' . $SI_LINDER_PARTNER_2_OSC__autoIntroduction . '
' . '
', $pagetext ); // ([13])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([6])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // ([14])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $SI_LINDER_PARTNER_2_OSC__keywordsIndexOnlyForRobots = array( 'grossiste importateur', ' import', ' revendeur', ' achat', ' vente', ' magasin de fête', ' soirées. Articles accessoires de fête Strasbourg bas-Rhin Alsace', ' pas cher', ' événement', ' événementiel', ' Dj camping', ' event', ' scène', ' présentation vitrine', ' costumes déguisements', ' jeux jouets kermesse école mairie', ' pêche à la ligne', ' football supporter foot russie 2018 rugby', ' maquillage trompettes drapeaux', ' accessoires de mode', ' associations', ' collectivités', ); // ([14])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $SI_LINDER_PARTNER_2_OSC__partialKeywordsIndexHTMLized = ''; $SI_LINDER_PARTNER_2_OSC__fullKeywordsIndexHTMLized = ''; $SI_LINDER_PARTNER_2_OSC__keywordsIndexDottingPlus = '
(voir plus de mots-clefs)
'; $SI_LINDER_PARTNER_2_OSC__keywordsIndexDottingLess = '
(voir moins de mots-clefs)
'; $SI_LINDER_PARTNER_2_OSC__keywordsIndexLimiterCounter = 1; foreach ($SI_LINDER_PARTNER_2_OSC__keywordsIndexArray as $keyword) { if ($SI_LINDER_PARTNER_2_OSC__keywordsIndexLimiterCounter < 7 AND !in_array($keyword, $SI_LINDER_PARTNER_2_OSC__keywordsIndexOnlyForRobots) ) { $SI_LINDER_PARTNER_2_OSC__partialKeywordsIndexHTMLized .= ' ' . trim($keyword) . ' '; $SI_LINDER_PARTNER_2_OSC__keywordsIndexLimiterCounter++; } else if ($SI_LINDER_PARTNER_2_OSC__keywordsIndexLimiterCounter >= 7 AND !in_array($keyword, $SI_LINDER_PARTNER_2_OSC__keywordsIndexOnlyForRobots) ) { $SI_LINDER_PARTNER_2_OSC__fullKeywordsIndexHTMLized .= ' ' . trim($keyword) . ' '; $SI_LINDER_PARTNER_2_OSC__keywordsIndexLimiterCounter++; } } // ([6])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([7])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $pagetext = str_replace('{{REFERENCE_NUAGE_DE_TAGS_INDEX}}', '
' . $SI_LINDER_PARTNER_2_OSC__partialKeywordsIndexHTMLized . '
' . $SI_LINDER_PARTNER_2_OSC__keywordsIndexDottingPlus . $SI_LINDER_PARTNER_2_OSC__keywordsIndexDottingLess . '
' . $SI_LINDER_PARTNER_2_OSC__fullKeywordsIndexHTMLized . '
' . '', $pagetext ); // ([7])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([8])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $pagetext .=' '; // ([8])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([9])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN preg_match('/(\{\{REFERENCE_NUAGE_DE_TAGS_INDEX_LOCATION_TEXTE_BIENVENUE\}\}--><\/section><\/font>)(.*)(?:<\/font>)(<\/address>)/si', $pagetext, $SI_LINDER_PARTNER_2_OSC__welcomeTextIndexMatches); $SI_LINDER_PARTNER_2_OSC__welcomeTextIndexSanitizedFromHTML = strip_tags($SI_LINDER_PARTNER_2_OSC__welcomeTextIndexMatches[2]); $pagetext = preg_replace('/(\{\{REFERENCE_NUAGE_DE_TAGS_INDEX_LOCATION_TEXTE_BIENVENUE\}\}--><\/section><\/font>)(.*)(?:<\/font>)(<\/address>)/si', '\1
' . $SI_LINDER_PARTNER_2_OSC__welcomeTextIndexSanitizedFromHTML . '
\3', $pagetext); // ([9])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([10])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $pagetext = preg_replace('/(<\/address>)(\s{0,}

.*<\/p>)/ims', '\1', $pagetext); // ([10])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([15])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN $pagetext = preg_replace('//im', '', $pagetext); $pagetext = preg_replace('/face: (.*?);/im', 'font-family: \'WebFont Noto-Sans Regular\', \'\1\', sans-serif;', $pagetext); $pagetext = preg_replace('/size: (.*?);/im', 'font-size: 1\1px;', $pagetext); $pagetext = preg_replace('/color: (.*?);/im', 'color: \1;', $pagetext); $pagetext = str_replace( array( '', ), array( '', ), $pagetext ); // ([15])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([16])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END $pagetext = str_replace('{{REFERENCE_NUAGE_DE_TAGS_INDEX_LOCATION_TEXTE_BIENVENUE}}', '', $pagetext); // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ // <- EPIB46 // the following cPath references come from application_top.php $category_depth = 'top'; if (isset($cPath) && tep_not_null($cPath)) { $categories_products_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_TO_CATEGORIES . " where categories_id = '" . (int)$current_category_id . "'"); $cateqories_products = tep_db_fetch_array($categories_products_query); if ($cateqories_products['total'] > 0) { $category_depth = 'products'; // display products } else { $category_parent_query = tep_db_query("select count(*) as total from " . TABLE_CATEGORIES . " where parent_id = '" . (int)$current_category_id . "'"); $category_parent = tep_db_fetch_array($category_parent_query); if ($category_parent['total'] > 0) { $category_depth = 'nested'; // navigate through the categories } else { $category_depth = 'products'; // category has no products, but display the 'no products' message } } } require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_DEFAULT); ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" on reste en doctype HTML PUBLIC Transitional 4.01, sinon le site ne sera plus très stable visuellement parlant "} ?> > HTCT262 if ( file_exists(DIR_WS_INCLUDES . 'header_tags.php') ) { require(DIR_WS_INCLUDES . 'header_tags.php'); } else { ?> <?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' => '/index.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--Index 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][AddClassDescription(--siteMainTableIndex --weHaveChosenCategory)]:{" /* ATTENTION // [EXPORT_CATEGORIES_MENU_INTO_AN_EXTERNAL_OVERLAY_WITH_UI_KIT__THE_RESTYLING_OF_GLOBALTABLE_INDEXPAGE] - avant octobre 2020, le client, aimait l'affichage de cet élément - depuis octobre 2020, le client, finalement préfère un autre affichage (plus d'informations dessous) suite à la modification effectuée sur le menu des catégories (encore lui, oui!) (voir CODETAG[EXPORT_CATEGORIES_MENU_INTO_AN_EXTERNAL_OVERLAY_WITH_UI_KIT__THE_OVERLAY]) ici, comme on ne se sert plus des flèches spéciales d'auto-scroll (voir CODETAG[USE_TARGET_ID_FOR_AUTO_SCROLL_MECHANISM] dans /includes/boxes/categories.php) on va juste se servir de la même méthode que la nouvelle variable de vérification ($__phpVar__isChoosenCategoryAlreadyCSSOverride) afin de définir si l'on a déjà choisi une catégorie ou non - si oui, on ajouter à cet élément (cell) une nouvelle classe CSS, laquelle servira en responsive et que si on a une catégorie ouverte et dans ce cas et ce cas uniquement - si non, on ne fera rien de plus toutefois, évidemment, nous avons nullifiée cette variable $__phpVar__isChoosenCategoryAlreadyCSSOverride, donc, on ne se servira pas d'elle, mais d'une conditionnelle PHP "} */ ?> > [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] /* ATTENTION // [EXPORT_CATEGORIES_MENU_INTO_AN_EXTERNAL_OVERLAY_WITH_UI_KIT__THE_RESTYLING_OF_SITECOLUMNLEFT_INDEXPAGE] - avant octobre 2020, le client, aimait l'affichage de cet élément - depuis octobre 2020, le client, finalement préfère un autre affichage (plus d'informations dessous) suite à la modification effectuée sur le menu des catégories (encore lui, oui!) (voir CODETAG[EXPORT_CATEGORIES_MENU_INTO_AN_EXTERNAL_OVERLAY_WITH_UI_KIT__THE_OVERLAY]) ici, comme on ne se sert plus des flèches spéciales d'auto-scroll (voir CODETAG[USE_TARGET_ID_FOR_AUTO_SCROLL_MECHANISM] dans /includes/boxes/categories.php) on va juste se servir de la même méthode que la nouvelle variable de vérification ($__phpVar__isChoosenCategoryAlreadyCSSOverride) afin de définir si l'on a déjà choisi une catégorie ou non - si oui, on ajouter à cet élément (cell) une nouvelle classe CSS, laquelle servira en responsive et que si on a une catégorie ouverte et dans ce cas et ce cas uniquement - si non, on ne fera rien de plus toutefois, évidemment, nous avons nullifiée cette variable $__phpVar__isChoosenCategoryAlreadyCSSOverride, donc, on ne se servira pas d'elle, mais d'une conditionnelle PHP "} */ ?> VD : catalogue pdf // -> 0000019: generation pdf sous-catégories $pdf_f = 'pdf/catalogue_' . $cPath . ".pdf"; $pdf_ff = DIR_FS_CATALOG. $pdf_f; $catalog_pdf = ""; if ( file_exists( $pdf_ff ) ) { // echo ""; $catalog_pdf = "   " . tep_image(DIR_WS_IMAGES . 'image/logo/pdf.gif', 'téléchargez ce catalogue pdf (généré le ' . date ("d/m/Y", filemtime($pdf_ff)). ')', 25, 25) . ""; // echo ""; } // <- 0000019 // <- VD : catalogue pdf // -> HTCT262 if ($category_depth == 'nested') { $category_query = tep_db_query("select cd.categories_name, c.categories_image, cd.categories_htc_title_tag, cd.categories_htc_description from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = '" . (int)$current_category_id . "' and cd.categories_id = '" . (int)$current_category_id . "' and cd.language_id = '" . (int)$languages_id . "'"); // <- HTCT262 $category = tep_db_fetch_array($category_query); ?> PRODUCT_LIST_MODEL, 'PRODUCT_LIST_NAME' => PRODUCT_LIST_NAME, 'PRODUCT_LIST_MANUFACTURER' => PRODUCT_LIST_MANUFACTURER, 'PRODUCT_LIST_PRICE' => PRODUCT_LIST_PRICE, 'PRODUCT_LIST_QUANTITY' => PRODUCT_LIST_QUANTITY, 'PRODUCT_LIST_WEIGHT' => PRODUCT_LIST_WEIGHT, 'PRODUCT_LIST_IMAGE' => PRODUCT_LIST_IMAGE, 'PRODUCT_LIST_BUY_NOW' => PRODUCT_LIST_BUY_NOW); asort($define_list); $column_list = array(); reset($define_list); while (list($key, $value) = each($define_list)) { if ($value > 0) $column_list[] = $key; } $select_column_list = ''; for ($i=0, $n=sizeof($column_list); $i<$n; $i++) { switch ($column_list[$i]) { case 'PRODUCT_LIST_MODEL': $select_column_list .= 'p.products_model, '; break; case 'PRODUCT_LIST_NAME': $select_column_list .= 'pd.products_name, '; break; case 'PRODUCT_LIST_MANUFACTURER': $select_column_list .= 'm.manufacturers_name, '; break; case 'PRODUCT_LIST_QUANTITY': $select_column_list .= 'p.products_quantity, '; break; case 'PRODUCT_LIST_IMAGE': $select_column_list .= 'p.products_image, '; break; case 'PRODUCT_LIST_WEIGHT': $select_column_list .= 'p.products_weight, '; break; } } // show the products of a specified manufacturer // -> QPBPP135+VDOFS if (isset($HTTP_GET_VARS['manufacturers_id'])) { if (isset($HTTP_GET_VARS['filter_id']) && tep_not_null($HTTP_GET_VARS['filter_id'])) { // We are asked to show only a specific category $listing_sql = "select " . $select_column_list . " p.products_id, p.manufacturers_id, p.products_price, p.products_qty_blocks, p.products_tax_class_id, p.products_out_of_stock, IF(s.status, s.specials_new_products_price, NULL) as specials_new_products_price, IF(s.status, s.specials_new_products_price, p.products_price) as final_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_MANUFACTURERS . " m, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c where p.products_status = '1' and p.manufacturers_id = m.manufacturers_id and m.manufacturers_id = '" . (int)$HTTP_GET_VARS['manufacturers_id'] . "' and p.products_id = p2c.products_id and pd.products_id = p2c.products_id and pd.language_id = '" . (int)$languages_id . "' and p2c.categories_id = '" . (int)$HTTP_GET_VARS['filter_id'] . "'"; } else { // We show them all $listing_sql = "select " . $select_column_list . " p.products_id, p.manufacturers_id, p.products_price, p.products_qty_blocks, p.products_tax_class_id, p.products_out_of_stock, IF(s.status, s.specials_new_products_price, NULL) as specials_new_products_price, IF(s.status, s.specials_new_products_price, p.products_price) as final_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_MANUFACTURERS . " m where p.products_status = '1' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "' and p.manufacturers_id = m.manufacturers_id and m.manufacturers_id = '" . (int)$HTTP_GET_VARS['manufacturers_id'] . "'"; } } else { // show the products in a given categorie if (isset($HTTP_GET_VARS['filter_id']) && tep_not_null($HTTP_GET_VARS['filter_id'])) { // We are asked to show only specific catgeory $listing_sql = "select " . $select_column_list . " p.products_id, p.manufacturers_id, p.products_price, p.products_qty_blocks, p.products_tax_class_id, p.products_out_of_stock, IF(s.status, s.specials_new_products_price, NULL) as specials_new_products_price, IF(s.status, s.specials_new_products_price, p.products_price) as final_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_MANUFACTURERS . " m, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c where p.products_status = '1' and p.manufacturers_id = m.manufacturers_id and m.manufacturers_id = '" . (int)$HTTP_GET_VARS['filter_id'] . "' and p.products_id = p2c.products_id and pd.products_id = p2c.products_id and pd.language_id = '" . (int)$languages_id . "' and p2c.categories_id = '" . (int)$current_category_id . "'"; } else { // We show them all $listing_sql = "select " . $select_column_list . " p.products_id, p.manufacturers_id, p.products_price, p.products_qty_blocks, p.products_tax_class_id, p.products_out_of_stock, IF(s.status, s.specials_new_products_price, NULL) as specials_new_products_price, IF(s.status, s.specials_new_products_price, p.products_price) as final_price from " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_PRODUCTS . " p left join " . TABLE_MANUFACTURERS . " m on p.manufacturers_id = m.manufacturers_id left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c where p.products_status = '1' and p.products_id = p2c.products_id and pd.products_id = p2c.products_id and pd.language_id = '" . (int)$languages_id . "' and p2c.categories_id = '" . (int)$current_category_id . "'"; } } // <- QPBPP135+VDOFS if ( (!isset($HTTP_GET_VARS['sort'])) || (!ereg('[1-8][ad]', $HTTP_GET_VARS['sort'])) || (substr($HTTP_GET_VARS['sort'], 0, 1) > sizeof($column_list)) ) { for ($i=0, $n=sizeof($column_list); $i<$n; $i++) { if ($column_list[$i] == 'PRODUCT_LIST_NAME') { $HTTP_GET_VARS['sort'] = $i+1 . 'a'; $listing_sql .= " order by pd.products_name"; break; } } } else { $sort_col = substr($HTTP_GET_VARS['sort'], 0 , 1); $sort_order = substr($HTTP_GET_VARS['sort'], 1); $listing_sql .= ' order by '; switch ($column_list[$sort_col-1]) { case 'PRODUCT_LIST_MODEL': $listing_sql .= "p.products_model " . ($sort_order == 'd' ? 'desc' : '') . ", pd.products_name"; break; case 'PRODUCT_LIST_NAME': $listing_sql .= "pd.products_name " . ($sort_order == 'd' ? 'desc' : ''); break; case 'PRODUCT_LIST_MANUFACTURER': $listing_sql .= "m.manufacturers_name " . ($sort_order == 'd' ? 'desc' : '') . ", pd.products_name"; break; case 'PRODUCT_LIST_QUANTITY': $listing_sql .= "p.products_quantity " . ($sort_order == 'd' ? 'desc' : '') . ", pd.products_name"; break; case 'PRODUCT_LIST_IMAGE': $listing_sql .= "pd.products_name"; break; case 'PRODUCT_LIST_WEIGHT': $listing_sql .= "p.products_weight " . ($sort_order == 'd' ? 'desc' : '') . ", pd.products_name"; break; case 'PRODUCT_LIST_PRICE': $listing_sql .= "final_price " . ($sort_order == 'd' ? 'desc' : '') . ", pd.products_name"; break; } } // -> HTCT262 if (isset($HTTP_GET_VARS['manufacturers_id'])) $db_query = tep_db_query("select manufacturers_htc_title_tag as htc_title, manufacturers_htc_description as htc_description from " . TABLE_MANUFACTURERS_INFO . " where languages_id = '" . (int)$languages_id . "' and manufacturers_id = '" . (int)$HTTP_GET_VARS['manufacturers_id'] . "'"); else $db_query = tep_db_query("select categories_htc_title_tag as htc_title, categories_htc_description as htc_description from " . TABLE_CATEGORIES_DESCRIPTION . " where categories_id = '" . (int)$current_category_id . "' and language_id = '" . (int)$languages_id . "'"); $htc = tep_db_fetch_array($db_query); ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][AddClassDescription(classTest)]:{" on ajoute une classe de test afin de pouvoir la cibler plus tard "} ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ restructuration de cette zone, suite à une mission tardivement redéfinie par le client - 2/ on ajoute une classe pour pouvoir cibler cette cellule de tableau afin de la masquer en responsive ou autres ! - 3/ spécifiquement ici, on détecte si on a ouvert une catégorie, si oui, on ajoute une classe spécialement utilisée en responsive pour des affichages de PC portable... (1500px - 1600px) - 4/ ATTENTION en 2021 le client a tardivement précisé à propos de la cellule d'image des catégories que ça ne lui plaisait pas que son image soit affichée si petite, et c'était voulu: toutefois, en 2021, on a, nous autres développeurs, à notre portée une super fonctionnalité expérimentale pour gérer ces cas difficiles! comme il serait bête de ne pas en profiter (même si c'est expérimental, c'est un peu là que ça peut faire peur..), on va donc utiliser la nouvelle technique expérimentale des navigateurs ici, on va se servir de la cassure de tableau (table breaker), les navigateurs récents, et en vogue l'ont implémenté depuis peu le seul risque possible, ce serait d'avoir une cellule mal affichée en responsive, du coup, on désactivera la cassure en responsive, on ne l'utilisera que en desktop (affichage PC) on va ici préparer le terrain, on ajoute dynamiquement une nouvelle classe CSS qui va nous permettre de piloter la colonne à droite de la page, (voir fichier de styles principal CSS, CODETAG[EXPERIMENTAL_FEATURE_TABLE_BREAKER_CSS_USING_BASE]) (voir fichier de styles principal CSS, CODETAG[EXPERIMENTAL_FEATURE_TABLE_BREAKER_CSS_USING_TARGET]) (voir fichier de styles principal CSS, CODETAG[EXPERIMENTAL_FEATURE_TABLE_BREAKER_CSS_USING_DYNAMICS]) } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // [RESPONSIVE_DESIGN_2020_IMPLEMENTATION_CARDBOARD_2020_SAPHYRA_INTERACTIVE_ETAPE_4] ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // [EXPERIMENTAL_FEATURE_TABLE_BREAKER_CSS_USING_MODIFIER] ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ ?>
[SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ ici, nous allons ajouter une nouvelle condition, et une nouvelle structure, qui ajoutera différentes choses HTML au code de cette page le but est très simple, pour comprendre... il s'agit de mettre en place un système d'accès rapide à la partie de listing des "sous-catégories/catégories" lorsqu'on est en responsive car cela fixera un énorme problème qui se posera à chaque fois que l'utilisateur désirerait changer de catégories via le menu du site (latéral gauche): explication inclue dans le fichier /includes/boxes/categories.php: (voir CODETAG[FINALY_FIXED_SCROLL_FOR_INDEX_WHEN_CHOOSEN_CATEGORY]) ainsi qu'une possibilité justement, à tout moment de retourner dans le menu en-haut du site, la condition du $cPath_array ne sert que pour éviter d'afficher cette nouvelle structure si on n'a pas encore cliqué/tappé dans le menu! NOTE - il est important de préciser que l'élément de l'icone de retour en haut dans le menu ne sera affiché qu'en responsive (voir fichier /design/ResponsiveOverrides/si_css-ro-_mainStylesheet.css CODETAG[VISUAL_STYLE_FOR_FIXED_TO_TOP_SCROLL_WHEN_CHOOSEN_CATEGORY_FROM_INDEX]) - 2/ ici on prépare l'ancre d'accroche quand on cliquera sur l'icone (flèche vers le bas -get_app-) dans le menu, on sera téléscrollé ici - 3/ ici on prépare l'icone de retour quand on cliquera sur l'icone (flèche vers le haut -vertical_align_top-) dans le conteneur, on sera téléscrollé dans le menu à l'emplacement spécifié - 4/ ATTENTION // [EXPORT_CATEGORIES_MENU_INTO_AN_EXTERNAL_OVERLAY_WITH_UI_KIT__ADDICON_SCROLLTOTOP] - avant octobre 2020, le client, aimait l'affichage de cet élément - depuis octobre 2020, le client, finalement préfère un autre affichage (plus d'informations dessous) suite à la modification effectuée sur le menu des catégories (encore lui, oui!) (voir CODETAG[EXPORT_CATEGORIES_MENU_INTO_AN_EXTERNAL_OVERLAY_WITH_UI_KIT__THE_OVERLAY]) ici, comme on ne se sert plus de la flèche spéciale d'auto-scroll vers le menu (voir CODETAG[RESPONSIVE_STRUCTURE_MENU_ANCHOR_FOR_FIXED_SCROLL_WHEN_CHOOSEN_CATEGORY_FROM_INDEX]) on va juste se servir de UI Kit à cet endroit et de son composant Totop - dans le cas où (car c'est dans cette condition) on a une catégorie ouverte, on devra masquer l'ancien bouton vertical_align_top du UIKit.scroll() (même par défaut il le sera) et afficher au contraire celui du uk-totop - si non, on ne fera rien de plus toutefois, évidemment, pour ce faire, nous avons ajouté une nouvelle structure et classes CSS pour la construction de ce bouton de retour en haut! } */ // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN if (!empty($cPath_array)) { ?>BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // [RESPONSIVE_STRUCTURE_MENU_ANCHOR_FOR_FIXED_SCROLL_WHEN_CHOOSEN_CATEGORY_FROM_INDEX] ?> vertical_align_top [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> vertical_align_top [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END // ([3])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END } /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ ?>
[SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" retrait du séparateur image gif en le commentant, il ne sert plus à rien en responsive et posera problème "} ?>
[VTAB-TEAM-LINDER-PARTNER-1][OSC][AddClassDescription(alignement)]:{" on ajoute une classe ici afin de pouvoir la cibler plus tard "} ?> VD : catalogue pdf ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription]:{" Pour les besoins de clarté lors du parcours de l'utilisateur sur le site, on mets en place un bouton indiquant la catégorie précédente, on se sert de notre variable déclarée dans le fichier '/includes/application_top.php' (voir CODETAG[VTAB_PREPARE_VTAB_CATEGORY_BACKVIEW_E] dans le dit-fichier) "} ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription]:{" pour les besoin de la nouvelle charte graphique inclue dans cette tâche, on a besoin de dissimuler cet élément depuis le code "} ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" retrait du séparateur image gif en le commentant, il ne sert plus à rien en responsive et posera problème "} ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(pageTags--HTCDescription)]:{" NOTE suite à une demande explicite du client, il faut masquer les mots clés, en haut de (cette) page, quand on ouvre une catégorie/sous-catégorie, pour cela, on donne simplement un affichage masqué à la cellule
" . vtab_tep_button("STYLIZED_RETURN", $VTAB_CurrentCategoryNameAndLink['lien'], "Retour vers " . $VTAB_CurrentCategoryNameAndLink['nom'] ) . ""; } else { echo ''; } ?>

" . $category['categories_htc_title_tag'] . "" . $catalog_pdf; ?>
, de plus en faisant ça, ça répare aussi le bug de l'image de la catégorie/sous-catégorie écrasée à côté du titre (voir cellule en haut), cette classe servira à ça, un simple display: none !important sera ajouté en styles "} ?>

[SI-LINDER-PARTNER-2][OSC][AddClassDescription(pageTable--SubCategoriesListing)]:{" on ajoute une classe ici afin de pouvoir cibler cet élément plus tard "} ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions]:{ - 1/ on va réviser un peu la structure afin d'intégrer un élément précis ici: une structure destinée au bouton VTAB STYLIZED qui sert à retourner à une catégorie parente - 2/ déjà on supprime le de fermeture ici, on va le commenter en HTML - 3/ et là on construit la structure revisitée } */ // ([1])-->[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" le client, finalement, ne souhaite plus voir les nouveaux produits affichés ici, donc, on commente l'appel à l'inclusion PHP du fichier des nouveaux produits, et, pour le réactiver, il suffira de décommenter la ligne suivante "} ?>
[VTAB-TEAM-LINDER-PARTNER-1][OSC][AddClassDescription(--trResponsivePageCellSubCategoriesListing)]:{" classe qui permettra de cibler cet élément de ligne de tableau HTML "} ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on va bien revoir la structure et la reformater (code), on ajoutera différentes choses pour styliser un peu cet élément... - 2/ on ajoute une classe à la cellule ' . "\n"; // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END /* [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ if ((($rows / MAX_DISPLAY_CATEGORIES_PER_ROW) == floor($rows / MAX_DISPLAY_CATEGORIES_PER_ROW)) && ($rows != $number_of_categories)) { echo ' ' . "\n"; // [VTAB-TEAM-LINDER-PARTNER-1][OSC][AddClassDescription(--trResponsivePageCellSubCategoriesListing)]:{" classe qui permettra de cibler cet élément de ligne de tableau HTML "} echo ' ' . "\n"; } } // needed for the new products module shown below $new_products_category_id = $current_category_id; ?>
ici afin de la cibler plus tard - 3/ on injecte une classe aux éventuels liens - 4/ on injecte une classe aux éventuelles images, pour ajouter un petit effet d'ombrage uiKit } */ // ([1])-->[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN // ([2])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END echo ' ' // ([3])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END . '' . tep_image( DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT, // ([4])-->BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END 'class="uk-box-shadow-small uk-box-shadow-hover-large"' ) . '
' . $categories['categories_name'] . '
[VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription] Pour les besoins de clareté lors du parcours de l'utilisateur sur le site, on mets cette fois-ci en place, en bas de la page, un bouton indiquant la catégorie précédente et le titre de la page ?>
" . vtab_tep_button("STYLIZED_RETURN", $VTAB_CurrentCategoryNameAndLink['lien'], "Retour vers " . $VTAB_CurrentCategoryNameAndLink['nom'] ) . ""; } else { echo ''; } ?>

" . $category['categories_htc_title_tag'] . "" . $catalog_pdf; ?>
[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END /* [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] ************************************************************************ */ ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" retrait du séparateur image gif en le commentant, il ne sert plus à rien en responsive et posera problème "} ?>
[SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" retrait du séparateur image gif en le commentant, il ne sert plus à rien en responsive et posera problème "} ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(--_moduleProductListingMainTableCell)]:{" ATTENTION (ne pas oublier cette classe!) cela fixe l'apparence visuelle du listing éventuel de produits depuis la page de garde (principale, soit; index.php) "} ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription]:{" Pour les besoins de clarté lors du parcours de l'utilisateur sur le site, on mets en place un bouton indiquant la catégorie précédente, on se sert de notre variable déclarée dans le fichier '/includes/application_top.php' (voir CODETAG[VTAB_PREPARE_VTAB_CATEGORY_BACKVIEW_E] dans le dit-fichier) "} ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END /* [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] ************************************************************************ */ ?>
VD : catalogue pdf ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription]:{" Pour les besoins de clarté lors du parcours de l'utilisateur sur le site, on mets en place un bouton indiquant la catégorie précédente, on se sert de notre variable déclarée dans le fichier '/includes/application_top.php' (voir CODETAG[VTAB_PREPARE_VTAB_CATEGORY_BACKVIEW_E] dans le dit-fichier) "} ?> 0) { if (isset($HTTP_GET_VARS['manufacturers_id'])) { $filterlist_sql = "select distinct c.categories_id as id, cd.categories_name as name from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where p.products_status = '1' and p.products_id = p2c.products_id and p2c.categories_id = c.categories_id and p2c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id . "' and p.manufacturers_id = '" . (int)$HTTP_GET_VARS['manufacturers_id'] . "' order by cd.categories_name"; } else { $filterlist_sql= "select distinct m.manufacturers_id as id, m.manufacturers_name as name from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_MANUFACTURERS . " m where p.products_status = '1' and p.manufacturers_id = m.manufacturers_id and p.products_id = p2c.products_id and p2c.categories_id = '" . (int)$current_category_id . "' order by m.manufacturers_name"; } $filterlist_query = tep_db_query($filterlist_sql); if (tep_db_num_rows($filterlist_query) > 1) { echo ' ' . "\n"; } } // Get the right image for the top-right $image = DIR_WS_IMAGES . 'table_background_list.gif'; if (isset($HTTP_GET_VARS['manufacturers_id'])) { $image = tep_db_query("select manufacturers_image from " . TABLE_MANUFACTURERS . " where manufacturers_id = '" . (int)$HTTP_GET_VARS['manufacturers_id'] . "'"); $image = tep_db_fetch_array($image); $image = $image['manufacturers_image']; } elseif ($current_category_id) { $image = tep_db_query("select categories_image from " . TABLE_CATEGORIES . " where categories_id = '" . (int)$current_category_id . "'"); $image = tep_db_fetch_array($image); $image = $image['categories_image']; } ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(pageHeading)]:{" on ajoute une petite classe de repère ici, elle nous servira plus tard "} ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription]:{" pour les besoin de la nouvelle charte graphique inclue dans cette tâche, on a besoin de dissimuler cet élément depuis le code "} ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" retrait du séparateur image gif en le commentant, il ne sert plus à rien en responsive et posera problème "} ?> [SI-LINDER-PARTNER-2][OSC][AddClassDescription(pageTags--HTCDescription)]:{" NOTE suite à une demande explicite du client, il faut masquer les mots clés, en haut de (cette) page, quand on ouvre une catégorie/sous-catégorie, pour cela, on donne simplement un affichage masqué à la cellule
" . vtab_tep_button("STYLIZED_RETURN", $VTAB_CurrentCategoryNameAndLink['lien'], "Retour vers " . $VTAB_CurrentCategoryNameAndLink['nom'] ) . ""; } else { echo ''; } ?>

" . $htc['htc_title'] . "" . $catalog_pdf; ?>

 ' . tep_draw_form('filter', FILENAME_DEFAULT, 'get') . TEXT_SHOW . ' '; if (isset($HTTP_GET_VARS['manufacturers_id'])) { echo tep_draw_hidden_field('manufacturers_id', $HTTP_GET_VARS['manufacturers_id']); $options = array(array('id' => '', 'text' => TEXT_ALL_CATEGORIES)); } else { echo tep_draw_hidden_field('cPath', $cPath); $options = array(array('id' => '', 'text' => TEXT_ALL_MANUFACTURERS)); } echo tep_draw_hidden_field('sort', $HTTP_GET_VARS['sort']); while ($filterlist = tep_db_fetch_array($filterlist_query)) { $options[] = array('id' => $filterlist['id'], 'text' => $filterlist['name']); } echo tep_draw_pull_down_menu('filter_id', $options, (isset($HTTP_GET_VARS['filter_id']) ? $HTTP_GET_VARS['filter_id'] : ''), 'onchange="this.form.submit()"'); echo '
, de plus en faisant ça, ça répare aussi le bug de l'image de la catégorie/sous-catégorie écrasée à côté du titre (voir cellule en haut), cette classe servira à ça, un simple display: none !important sera ajouté en styles "} ?>

[VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions]:{ - 1/ on va réviser un peu la structure afin d'intégrer un élément précis ici: une structure destinée au bouton VTAB STYLIZED qui sert à retourner à une catégorie parente - 2/ et là on construit la structure revisitée } */ // ([1])-->[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::BEGIN ?>
[VTAB-TEAM-LINDER-PARTNER-1][OSC][SimpleTaskDescription] Pour les besoins de clareté lors du parcours de l'utilisateur sur le site, on mets cette fois-ci en place, en bas de la page, un bouton indiquant la catégorie précédente et le titre de la page ?>
" . vtab_tep_button("STYLIZED_RETURN", $VTAB_CurrentCategoryNameAndLink['lien'], "Retour vers " . $VTAB_CurrentCategoryNameAndLink['nom'] ) . ""; } else { echo ''; } ?>

" . $htc['htc_title'] . "" . $catalog_pdf; ?>
[SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" retrait du séparateur image gif en le commentant, il ne sert plus à rien en responsive et posera problème "} ?>
[SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" retrait du séparateur image gif en le commentant, il ne sert plus à rien en responsive et posera problème "} ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ dans le nouveau design, on doit intégrer un diaporama (en Anglais: slideshow). ceci est rapidement intégrable (et en plus de ça responsive) à l'aide du composant Slideshow de uiKit (précédemment intégré à la page). on va donc créér la structure du diaporama, comme expliqué dans la documentation du framework uiKit. comme dossier d'images, on a créé un chemin spécifique où stocker les images dans le dossier '/design' que l'on a nommé, '/Slideshow/Images'. peut importe le nom des images, le code glob() va nous les trouver la boucle PHP for() sert alors à boucler les images trouvées, afin de créér pour chacune la structure HTML attendue par uiKit pour fonctionner. on ne gère que les images .webp, .jpg, .jpeg et .png et pour finir, on supprime les variables PHP instanciées pour lister les images.. ATTENTION - avant octobre 2020, le client, aimait l'emplacement de cet élément en responsive ou en non-responsive - depuis octobre 2020, le client, finalement aimerait que le diaporama (slideshow) en responsive apparaisse au-dessus du menu des catégories dans le nouveau design, fichier: /includes/header.php (voir CODETAG[DUPLICATE_RESPONSIVE_SLIDESHOW_IS_LOCATED_HERE]) donc pour l'explication, si une seule modification est à faire au diaporama dans /index.php, faites la modification ici, et répercutez-la à l'identique dans le fichier /includes/header.php aussi! toutefois, - ATTENTION - n'oubliez pas qu'ici: pour le nom de l'élément qui contient le diaporama on utilise: ET NON:
le diaporama et sa structure
NOTE - C'est la seule différence avec le diaporama du fichier /includes/header.php - 2/ petite précision, il existe deux façons d'afficher un Slideshow avec uiKit, cela peut resservir à l'avenir, qui sait. a) sans les PUCES (en bas du Slideshow) pour cela, procéder avec un seul DIV encadrant le Slideshow donc ainsi: CODE:[
    ] b) avec les PUCES (en bas du Slideshow) pour cela, procéder avec deux DIV encadrant le Slideshow et ajouter un div final "uk-dotnav" avant la fermeture du premier donc ainsi: CODE:[
      ] - 3/ afin de cibler ce Slideshow en particulier via un sélecteur CSS pour reformater l'affichage des puces de navigations des images, on va ajouter une classe à la cellule (td) } */ ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ ?> [SI-LINDER-PARTNER-2][OSC][SimpleTaskDescription]:{" retrait du séparateur image gif en le commentant, il ne sert plus à rien en responsive et posera problème "} ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ restructuration de cette zone, ajout de pour ajouter plusieures lignes au tableau - 2/ restauration l'affichage des catégories principales (racine), même si dans la pré-version du nouveau design il avait fallu les retirer, il s'est avéré que le client aie décidé de rollback, dans cette version du design, cela ne sera plus d'actualité - 3/ EN 2019: retrait de commentaire de l'affichage des nouveaux produits, dans cette version du design, les nouveaux produits sont utilisés en page centrale de l'accueil EN 2020: le client, finalement, ne souhaite plus voir les nouveaux produits affichés ici, donc, on commente l'appel à l'inclusion PHP du fichier des nouveaux produits, et, pour le réactiver, il suffira de décommenter la ligne [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - 1/ on va ajouter un second module, fait-maison, qui ne sera autre que des liens à thèmes. un système de 6 vignettes, qu'on va nommer en Anglais: vtab_sixthemelinks } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::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]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ ?>
      le diaporama et sa structure
      [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
        ' . "\n"; echo '
        ' . "\n"; echo ' ' . "\n"; echo '
        ' . "\n"; echo ' ' . "\n"; } else { continue; } } $all_files = null; $image_name = null; $supported_format = null; $ext = null; ?>
        [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
        		[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
        [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ dans la nouvelle version du design, on va ajouter un petit effet de Parralax pour ce faire, on se servira de UI Kit! et de.. son composant "Parallax" pour le fond d'image du parallax, on doit le spécifier ici car on le charge dynamiquement en PHP, ce qui est impossible dans un fichier de styles CSS } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>

        Qui sommes nous?:

        Nous sommes une société familiale fiable et efficace, basée depuis 18 ans à côté de Strasbourg.
        Nous disposons d'un entrepôt important, et d'un showroom avec des centaines de déguisements, dédié aux magasins, revendeurs, sociétés évènementielles, discothèques, bars et restaurants, les associations et collectivités, etc..
        Pour les particuliers, un comptoir des ventes, permet de retirer les marchandises, choisies à l'avance, ou directement commandées, sur www.linder-partner.com


        (Voir Plus!)

        [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ dans la nouvelle version du design, on va ajouter en bas de page une zone qui proposera différents liens rapides sous formes d'icônes pour ce faire, on se servira de UI Kit! et de.. son composant "Grid" - 2/ ici on établi la structure du lien-rapide "Showroom", il s'agit d'une petite colonne ATTENTION - depuis octobre 2020, j'ai remarqué que l'icone: storefront était incorrectement nommé, il n'existe pas, et du coup, parfois un décalage invisible en responsive peut apparaître.. storefront a donc été renommé en store, et cela fixe défitivement le décalage que j'avais observé avec mon Huawei MATE 30 PRO. - 3/ ici on établi la structure du lien-rapide "Livraison", il s'agit d'une petite colonne - 4/ ici on établi la structure du lien-rapide "Service Client", il s'agit d'une petite colonne - 5/ ici on établi la structure du lien-rapide "Paiement Sécurisé", il s'agit d'une petite colonne NOTE - depuis 2021, suite à une demande du client, on précède l'appel à la fenêtre modale d'une fonction Javascript qui est développée justement (depuis 2021) dans le fichier contenant la structure de la modale la fonction se nomme: quelTexteAfficherPourModale_boxCardboxMethodesPaiement() et ici on lui fourni l'argument 'Voir tous' afin que si par le passé (sans rafraichir la page) on serait passé par le cardbox listant les moyens de paiements (/includes/boxes/si_newdesign2019_methodes_paiement_cardbox.php) situé dans la colonne de gauche (/includes/column_left.php) on aurait peut-être eu que partiellement les moyens de paiements affichés pour comprendre tout cela, allez lire le fichier qui contient le nouveau système d'affichage DE CETTE modale en particulier (VOIR CODETAG[NEW_FEATURE_FOR_CARDBOXMETHODESPAIEMENT_TASKS_FUNCTIONS_MECHANISM]) - 6/ ATTENTION - avant décembre 2020, le client, aimait l'affichage du premier caractère du texte (ce premier caractère était alors écrit dans la typographie d'une majuscule 6 fois plus grande que le reste du texte) cela a été réalisé à l'aide de la fonctionnalité spéciale de UI Kit, DropCap: uk-dropcap - depuis décembre 2020, le client, finalement préfère que le texte soit affiché uniformément, sans différences de tailles ni de majuscules plus grande ainsi, on nullifie la classe 'uk-dropcap' en la renommant en 'NOT_USED--uk-dropcap' [VTAB-TEAM-LINDER-PARTNER-1][OSC][MultiTaskDescriptions] - Revue de la charte Graphique: - 1/ on va juste ajouter une classe CSS à l'élément pour pouvoir le cibler plus tard en CSS - 2/ TODO ISSUE TESTING on va ajouter quelques espaces HTML pour "agrandir" virtuellement le texte, il est plus petit que les autres, donc, parfois, il ne s'écrivait pas sur autant de lignes que ses congénères, or, si ils ne s'écrit pas sur un même nombre de ligne, alors, il réduit son conteneur parent en hauteur, ce qui rendait moche le design final } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
        [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
        store

        Showroom


        BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> À 10Km de Strasbourg, accès rapide.


        En savoir plus

        [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
        local_shipping

        Livraison


        BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> Profitez d'une livraison rapide 24h-48h adapté à votre budget et vos besoins


        En savoir plus

        [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
        bubble_chart

        Service Client


        BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> Nous répondons à toutes vos questions et demandes dans les plus brefs délais      


        En savoir plus

        [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?>
        payment

        Paiement Sécurisé


        BEGIN[VTAB-TEAM-LINDER-PARTNER-1][OSC][SubTaskDescription]::END ?> Nous vous garantissons le plus haut niveau de sécurité pour toutes vos transactions


        En savoir plus

        [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?>
        [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************/ ?>
        OSC-78: Gestion de catégories réservées aux professionnels ?>