[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 ?> PEF : Product Extra fields $pef_fields = array(); $pef_fields_query = tep_db_query("SELECT products_extra_fields_id, products_extra_fields_name FROM " . TABLE_PRODUCTS_EXTRA_FIELDS . " WHERE (languages_id = 0 OR languages_id = " . (int)$languages_id . ") AND products_extra_fields_status ORDER BY products_extra_fields_order"); while ($field = tep_db_fetch_array($pef_fields_query)) { $pef_fields[] = $field; } $pef_empty = true; foreach ($pef_fields as $field) { $pef_id = 'pef_'.$field['products_extra_fields_id']; if (isset($HTTP_GET_VARS[$pef_id]) && !empty($HTTP_GET_VARS[$pef_id])) $pef_empty = false; } // <- PEF $error = false; // -> PEF : Product Extra fields if ( (isset($HTTP_GET_VARS['keywords']) && empty($HTTP_GET_VARS['keywords'])) && $pef_empty && (isset($HTTP_GET_VARS['dfrom']) && (empty($HTTP_GET_VARS['dfrom']) || ($HTTP_GET_VARS['dfrom'] == DOB_FORMAT_STRING))) && (isset($HTTP_GET_VARS['dto']) && (empty($HTTP_GET_VARS['dto']) || ($HTTP_GET_VARS['dto'] == DOB_FORMAT_STRING))) && (isset($HTTP_GET_VARS['pfrom']) && !is_numeric($HTTP_GET_VARS['pfrom'])) && (isset($HTTP_GET_VARS['pto']) && !is_numeric($HTTP_GET_VARS['pto'])) ) { // <- PEF $error = true; $messageStack->add_session('search', ERROR_AT_LEAST_ONE_INPUT); } else { // -> PEF : Product Extra fields $pef_values = array(); foreach ($pef_fields as $field) { if (isset($HTTP_GET_VARS['pef_'.$field['products_extra_fields_id']]) && !empty($HTTP_GET_VARS['pef_'.$field['products_extra_fields_id']])) $pef_values[$field['products_extra_fields_id']] = $HTTP_GET_VARS['pef_'.$field['products_extra_fields_id']]; } // <- PEF $dfrom = ''; $dto = ''; $pfrom = ''; $pto = ''; $keywords = ''; if (isset($HTTP_GET_VARS['dfrom'])) { $dfrom = (($HTTP_GET_VARS['dfrom'] == DOB_FORMAT_STRING) ? '' : $HTTP_GET_VARS['dfrom']); } if (isset($HTTP_GET_VARS['dto'])) { $dto = (($HTTP_GET_VARS['dto'] == DOB_FORMAT_STRING) ? '' : $HTTP_GET_VARS['dto']); } if (isset($HTTP_GET_VARS['pfrom'])) { $pfrom = $HTTP_GET_VARS['pfrom']; } if (isset($HTTP_GET_VARS['pto'])) { $pto = $HTTP_GET_VARS['pto']; } if (isset($HTTP_GET_VARS['keywords'])) { $keywords = $HTTP_GET_VARS['keywords']; // -> OSC-19 : Traduction 'and' et 'or' de la recherche avancée $keywords = preg_replace('/ or$/', "", $keywords); // <- OSC-19 : Traduction 'and' et 'or' de la recherche avancée } // -> SPRP11 if (isset($HTTP_GET_VARS['find_price'])) { $pfrom = ($price_range_values[$HTTP_GET_VARS['find_price']]['from'] >= 0.01)?$price_range_values[$HTTP_GET_VARS['find_price']]['from']:0 ; $pto = $price_range_values[$HTTP_GET_VARS['find_price']]['to']; $sub_title_search = sprintf(HEADING_TITLE_3, $price_range_array[$HTTP_GET_VARS['find_price']]['text'] ); } // <- SPRP11 $date_check_error = false; if (tep_not_null($dfrom)) { if (!tep_checkdate($dfrom, DOB_FORMAT_STRING, $dfrom_array)) { $error = true; $date_check_error = true; $messageStack->add_session('search', ERROR_INVALID_FROM_DATE); } } if (tep_not_null($dto)) { if (!tep_checkdate($dto, DOB_FORMAT_STRING, $dto_array)) { $error = true; $date_check_error = true; $messageStack->add_session('search', ERROR_INVALID_TO_DATE); } } if (($date_check_error == false) && tep_not_null($dfrom) && tep_not_null($dto)) { if (mktime(0, 0, 0, $dfrom_array[1], $dfrom_array[2], $dfrom_array[0]) > mktime(0, 0, 0, $dto_array[1], $dto_array[2], $dto_array[0])) { $error = true; $messageStack->add_session('search', ERROR_TO_DATE_LESS_THAN_FROM_DATE); } } $price_check_error = false; if (tep_not_null($pfrom)) { if (!settype($pfrom, 'double')) { $error = true; $price_check_error = true; $messageStack->add_session('search', ERROR_PRICE_FROM_MUST_BE_NUM); } } if (tep_not_null($pto)) { if (!settype($pto, 'double')) { $error = true; $price_check_error = true; $messageStack->add_session('search', ERROR_PRICE_TO_MUST_BE_NUM); } } if (($price_check_error == false) && is_float($pfrom) && is_float($pto)) { if ($pfrom >= $pto) { $error = true; $messageStack->add_session('search', ERROR_PRICE_TO_LESS_THAN_PRICE_FROM); } } if (tep_not_null($keywords)) { if (!tep_parse_search_string($keywords, $search_keywords)) { $error = true; $messageStack->add_session('search', ERROR_INVALID_KEYWORDS); } } // -> PEF : Product Extra fields if (tep_not_null($pef_values)) { foreach ($pef_values as $pef_value) { if (!tep_parse_search_string($pef_value, $pef_value_keywords)) { $error = true; $messageStack->add_session('search', ERROR_INVALID_KEYWORDS . $pef_value ); } } } // <- PEF } // -> PEF : Product Extra fields if (empty($dfrom) && empty($dto) && empty($pfrom) && empty($pto) && empty($keywords) && !tep_not_null($pef_values)) { // <- PEF $error = true; $messageStack->add_session('search', ERROR_AT_LEAST_ONE_INPUT); } if ($error == true) { tep_redirect(tep_href_link(FILENAME_ADVANCED_SEARCH, tep_get_all_get_params(), 'NONSSL', true, false)); } $breadcrumb->add(NAVBAR_TITLE_1, tep_href_link(FILENAME_ADVANCED_SEARCH)); $breadcrumb->add(NAVBAR_TITLE_2, tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, tep_get_all_get_params(), 'NONSSL', true, false)); ?> > <?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' => '/advanced_search_result.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--CommunityAdvancedSearchResult 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] "} ?> [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][AddClassDescription(--_moduleProductListingMainTableCell)]:{" Cette classe sert essentiellement à donner au tableau un moyen de le cibler, tableau précis "} ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions]:{ - 1/ on va revoir les éléments de boutons, tout simplement par ici - 2/ 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 [2] de la tâche [SI-LINDER-PARTNER-2][OSC] } */ ?> [SI-LINDER-PARTNER-2][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]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?>
[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 - 2/ à l'origine, ici, il y avait une image, désormais, en attendant d'éventuellement lui trouver une belle image, on va alors la commenter } */ ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::BEGIN ?> BEGIN[SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][SubTaskDescription]::END ?> [SI-LINDER-PARTNER-2][OSC][MultiTaskDescriptions] ************************************************************************ */ ?>
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; } // -> SPRP11 if (isset($HTTP_GET_VARS['find_price']) && !isset($HTTP_GET_VARS['sort'])) { $sort_price_result = array_keys( $column_list, "PRODUCT_LIST_PRICE" ); $HTTP_GET_VARS['sort'] = ($sort_price_result[0] + 1).'a'; } // <- SPRP11 $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_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; } } // -> QPBPP135 + VDOFS $select_str = "select distinct " . $select_column_list . " m.manufacturers_id, p.products_id, pd.products_name, 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 "; // <- QPBPP135 + VDOFS if ( (DISPLAY_PRICE_WITH_TAX == 'true') && (tep_not_null($pfrom) || tep_not_null($pto)) ) { $select_str .= ", SUM(tr.tax_rate) as tax_rate "; } // -> PEF : Product Extra fields $from_str = "from " . TABLE_PRODUCTS . " p left join " . TABLE_MANUFACTURERS . " m using(manufacturers_id) left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id". " left join " . TABLE_PRODUCTS_TO_PRODUCTS_EXTRA_FIELDS . " p2pef on p.products_id=p2pef.products_id "; // <- PEF if ( (DISPLAY_PRICE_WITH_TAX == 'true') && (tep_not_null($pfrom) || tep_not_null($pto)) ) { if (!tep_session_is_registered('customer_country_id')) { $customer_country_id = STORE_COUNTRY; $customer_zone_id = STORE_ZONE; } $from_str .= " left join " . TABLE_TAX_RATES . " tr on p.products_tax_class_id = tr.tax_class_id left join " . TABLE_ZONES_TO_GEO_ZONES . " gz on tr.tax_zone_id = gz.geo_zone_id and (gz.zone_country_id is null or gz.zone_country_id = '0' or gz.zone_country_id = '" . (int)$customer_country_id . "') and (gz.zone_id is null or gz.zone_id = '0' or gz.zone_id = '" . (int)$customer_zone_id . "')"; } $from_str .= ", " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_CATEGORIES . " c, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c"; $where_str = " where p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' and p.products_id = p2c.products_id and p2c.categories_id = c.categories_id "; // -> 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; } // On interdira à OScommerce de lister les catégories PRO si le client n'est pas dans le groupe PRO. // Ceci s'effectue via la fonction (créée à cet effet): ()). $where_str .= find_pro_cat_sql_filter("p2c.", "and", $osc_78_customer_id_container); // <- OSC-78: Gestion de catégories réservées aux professionnels if (isset($HTTP_GET_VARS['categories_id']) && tep_not_null($HTTP_GET_VARS['categories_id'])) { if (isset($HTTP_GET_VARS['inc_subcat']) && ($HTTP_GET_VARS['inc_subcat'] == '1')) { $subcategories_array = array(); tep_get_subcategories($subcategories_array, $HTTP_GET_VARS['categories_id']); $where_str .= " and p2c.products_id = p.products_id and p2c.products_id = pd.products_id and (p2c.categories_id = '" . (int)$HTTP_GET_VARS['categories_id'] . "'"; for ($i=0, $n=sizeof($subcategories_array); $i<$n; $i++ ) { $where_str .= " or p2c.categories_id = '" . (int)$subcategories_array[$i] . "'"; } $where_str .= ")"; } else { $where_str .= " and p2c.products_id = p.products_id and p2c.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' and p2c.categories_id = '" . (int)$HTTP_GET_VARS['categories_id'] . "'"; } } if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) { $where_str .= " and m.manufacturers_id = '" . (int)$HTTP_GET_VARS['manufacturers_id'] . "'"; } if (isset($search_keywords) && (sizeof($search_keywords) > 0)) { $where_str .= " and ("; for ($i=0, $n=sizeof($search_keywords); $i<$n; $i++ ) { switch ($search_keywords[$i]) { case '(': case ')': case 'and': case 'or': $where_str .= " " . $search_keywords[$i] . " "; break; default: $keyword = tep_db_prepare_input($search_keywords[$i]); // -> PEF : Product Extra fields $where_str .= "(pd.products_name like '%" . tep_db_input($keyword) . "%' or p.products_model like '%" . tep_db_input($keyword) . "%' or m.manufacturers_name like '%" . tep_db_input($keyword) . "%' or p2pef.products_extra_fields_value like '%" . tep_db_input($keyword) . "%'"; // <- PEF if (isset($HTTP_GET_VARS['search_in_description']) && ($HTTP_GET_VARS['search_in_description'] == '1')) $where_str .= " or pd.products_description like '%" . tep_db_input($keyword) . "%'"; $where_str .= ')'; break; } } $where_str .= " )"; } // -> PEF : Product Extra fields foreach ($pef_values as $pef_id => $pef_value) { tep_parse_search_string($pef_value, $pef_value_keywords); if (isset($pef_value_keywords) && (sizeof($pef_value_keywords) > 0)) { $where_str .= " and ("; for ($i=0, $n=sizeof($pef_value_keywords); $i<$n; $i++ ) { switch ($pef_value_keywords[$i]) { case '(': case ')': case 'and': case 'or': $where_str .= " " . $pef_value_keywords[$i] . " "; break; default: $keyword = tep_db_prepare_input($pef_value_keywords[$i]); $where_str .= "(p2pef.products_extra_fields_value like '%" . tep_db_input($keyword) . "%'"; $where_str .= " AND p2pef.products_extra_fields_id = ". (int)$pef_id; $where_str .= ')'; break; } } $where_str .= " )"; } } // <- PEF if (tep_not_null($dfrom)) { $where_str .= " and p.products_date_added >= '" . tep_date_raw($dfrom) . "'"; } if (tep_not_null($dto)) { $where_str .= " and p.products_date_added <= '" . tep_date_raw($dto) . "'"; } if (tep_not_null($pfrom)) { if ($currencies->is_set($currency)) { $rate = $currencies->get_value($currency); $pfrom = $pfrom / $rate; } } // -> SPRP11 if (tep_not_null($pto)) { if (isset($rate)) { $rate = $currencies->get_value($currency); $pto = $pto / $rate; } } // <- SPRP11 if (DISPLAY_PRICE_WITH_TAX == 'true') { if ($pfrom > 0) $where_str .= " and (IF(s.status, s.specials_new_products_price, p.products_price) * if(gz.geo_zone_id is null, 1, 1 + (tr.tax_rate / 100) ) >= " . (double)$pfrom . ")"; if ($pto > 0) $where_str .= " and (IF(s.status, s.specials_new_products_price, p.products_price) * if(gz.geo_zone_id is null, 1, 1 + (tr.tax_rate / 100) ) <= " . (double)$pto . ")"; } else { if ($pfrom > 0) $where_str .= " and (IF(s.status, s.specials_new_products_price, p.products_price) >= " . (double)$pfrom . ")"; if ($pto > 0) $where_str .= " and (IF(s.status, s.specials_new_products_price, p.products_price) <= " . (double)$pto . ")"; } if ( (DISPLAY_PRICE_WITH_TAX == 'true') && (tep_not_null($pfrom) || tep_not_null($pto)) ) { $where_str .= " group by p.products_id, tr.tax_priority"; } 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'; $order_str = ' order by pd.products_name'; break; } } } else { $sort_col = substr($HTTP_GET_VARS['sort'], 0 , 1); $sort_order = substr($HTTP_GET_VARS['sort'], 1); $order_str = ' order by '; switch ($column_list[$sort_col-1]) { case 'PRODUCT_LIST_MODEL': $order_str .= "p.products_model " . ($sort_order == 'd' ? "desc" : "") . ", pd.products_name"; break; case 'PRODUCT_LIST_NAME': $order_str .= "pd.products_name " . ($sort_order == 'd' ? "desc" : ""); break; case 'PRODUCT_LIST_MANUFACTURER': $order_str .= "m.manufacturers_name " . ($sort_order == 'd' ? "desc" : "") . ", pd.products_name"; break; case 'PRODUCT_LIST_QUANTITY': $order_str .= "p.products_quantity " . ($sort_order == 'd' ? "desc" : "") . ", pd.products_name"; break; case 'PRODUCT_LIST_IMAGE': $order_str .= "pd.products_name"; break; case 'PRODUCT_LIST_WEIGHT': $order_str .= "p.products_weight " . ($sort_order == 'd' ? "desc" : "") . ", pd.products_name"; break; case 'PRODUCT_LIST_PRICE': $order_str .= "final_price " . ($sort_order == 'd' ? "desc" : "") . ", pd.products_name"; break; } } $listing_sql = $select_str . $from_str . $where_str . $order_str; require(DIR_WS_MODULES . FILENAME_PRODUCT_LISTING); ?>
[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 ! "} ?>