Écrit par : FoxP2 23 Jan 2011, 14:08
par défaut, les boutons sont affichés par:
- 1 la fonction tep_draw_button dans le fichier fichier catalog/includes/functions/html_output.php
- 2 leur classe css définie au sein du fichier catalog/ext/jquery/ui/redmond/jquery-ui-1.8.6.css [jQuery UI Button 1.8.6]
- 3 leurs icônes situées dans le répertoire catalog/ext/jquery/ui/redmond/images.
Nous allons donc étudier aujourd'hui la modification des boutons situés dans le header, à savoir :
"voir panier | commander | mon compte" en
mode déconnecté1"voir panier | commander | mon compte | se déconnecter" en
mode connecté2Le nouveau système de template d'oscommerce 2.3.x uniformise à la volée tous les boutons de votre boutique.(en schématisant, ils sont tous de la même couleur)
cela donne une homogénéité à l'ensemble, ce n'est pas pour autant que l'on gagne en terme d'expérience utilisateur lors de la visite.
A ce titre, jQuery UI Button instaure 2 priorités dans l'affichage des boutons:
-
primary et
secondary : cela permet de mettre en avant un bouton plus qu'un autre dans une même page. (l'exemple type est la page login, où le bouton 'connexion' a une police de caractère plus soutenu par rapport à son voisin 'continuer'), d'où le code :
Code
<?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL')); ?>
et
Code
<?php echo tep_draw_button(IMAGE_BUTTON_LOGIN, 'key', null, 'primary'); ?>
Dans le deuxième code, on voit passer clairement le paramètre 'primary' passé dans la fonction (permettant sa mise en avant), mais pas le paramètre 'secondary' dans le premier. Pourquoi ? car il est définit par défaut dans la fonction tep_draw_button que nous allons maintenant regarder de plus près :
Code
function tep_draw_button($title = null, $icon = null, $link = null, $priority = null, $params = null) {
5 arguments :
$title : texte du bouton
$icon : icone du bouton (peut être affiché à gauche [par défaut] du texte ou à droite).
$link : paramètre permettant de transformer un lien comme un bouton.
$priority : primary/secondery[par défaut]
$params : tableau de paramètre
$title : classique, via une constante (XXXX_XXXXX) définie dans un fichier langue.
$icon : attend le texte de l'icône.
Exemple : triangle-1-e
il existe cet outil pour vous aider à choisir la bonne icône : http://jquery-ui.googlecode.com/svn/tags/1.6rc5/tests/static/icons.html#
$params : exemple array('iconpos' => 'right') permet de positionner l'icône à droite du texte du bouton.
La fonction tep_draw_button attribue de façon dynamique un identifiant à chacun de vos boutons (via le sélecteur #id). La valeur de cet #id est définie en deux temps :
son nom, statique, débute toujours par "tdb" suivi d'un chiffre.(ce chiffre étant incrémenté autant de fois que la fonction est appelé dans une page).
regardons de plus près le code html des boutons du header en mode déconnecté:
HTML
<div id="headerShortcuts">
<span class="tdbLink">
<a id="tdb1" href="http://localhost:90/bxslider/catalog/shopping_cart.php">Voir panier</a></span><script type="text/javascript">$("#tdb1").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
<span class="tdbLink">
<a id="tdb2" href="http://localhost:90/bxslider/catalog/checkout_shipping.php">Commander</a></span><script type="text/javascript">$("#tdb2").button({icons:{primary:"ui-icon-triangle-1-e"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
<span class="tdbLink">
<a id="tdb3" href="http://localhost:90/bxslider/catalog/account.php">Mon compte</a></span><script type="text/javascript">$("#tdb3").button({icons:{primary:"ui-icon-person"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
</div>
3 #id : id="tdb1" id="tdb2" id="tdb3"
et voici le code html en mode connecté :
HTML
<div id="headerShortcuts">
<span class="tdbLink">
<a id="tdb1" href="http://localhost:90/bxslider/catalog/shopping_cart.php">Voir panier</a></span><script type="text/javascript">$("#tdb1").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
<span class="tdbLink">
<a id="tdb2" href="http://localhost:90/bxslider/catalog/checkout_shipping.php">Commander</a></span><script type="text/javascript">$("#tdb2").button({icons:{primary:"ui-icon-triangle-1-e"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
<span class="tdbLink">
<a id="tdb3" href="http://localhost:90/bxslider/catalog/account.php">Mon compte</a></span><script type="text/javascript">$("#tdb3").button({icons:{primary:"ui-icon-person"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
<span class="tdbLink">
<a id="tdb4" href="http://localhost:90/bxslider/catalog/logoff.php">Déconnexion</a></span><script type="text/javascript">$("#tdb4").button().addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
</div>
on retrouve bien 4 #id : id="tdb1" id="tdb2" id="tdb3" id="tdb4"
Pour personnaliser ces boutons, il serait évident de les définir dans votre fichier stylesheet.css de cette façon :
HTML
#tdb1{
background :red;
}
#tdb2{
background :blue;
}
#tdb3{
background :green;
}
#tdb4{
background :black;
}
ce qui donnerait :
Je vous fait grâce des détails sur les class :hover/:active/a link/ etc.. pour affiner vos définitions css. Il existe de nombreux sites traitant de ces connaissances que vous devez maîtriser un tant soit peu avant de débuter le développement de votre boutique. super, les couleurs ont bien changé. mais une mauvaise surprise vous attend.
passons en mode déconnecté et allons sur la page login :
les trois boutons du header sont restés conforme au code, mais le bouton 'continuer' a hérité du css #tdb4 :
regardons donc le code HTML du bouton 'continuer' :
HTML
<p align="right">
<span class="tdbLink">
<a id="tdb4" href="http://localhost:90/bxslider/catalog/create_account.php">Continuer</a></span><script type="text/javascript">$("#tdb4").button({icons:{primary:"ui-icon-triangle-1-e"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
</p>
pour constater qu'effectivement le bouton a reçu dynamiquement un #id avec la valeur "tdb4". Logique, en mode déconnecté, sur la page login, il y a bien 5 boutons :
3 dans le header, 2 dans la page.
je m'étais aperçu de cette rigidité dans le code lors des tests. je l'avais fait remarquer à harald dans le bug tracker (sujet http://forums.oscommerce.com/tracker/issue-86-suggestion-for-a-better-and-easier-implementation-of-jquerys-plugin/). Il a tenté de backporté une partie du code d'oscom3 sur oscommerce 2.3.x, mais cela a posé de nouveaux conflits lors de la validation W3C:
http://forums.oscommerce.com/index.php?app=tracker&showissue=96&view=findpost&p=230
http://forums.oscommerce.com/index.php?app=tracker&showissue=96&view=findpost&p=226
http://forums.oscommerce.com/index.php?app=tracker&showissue=96&view=findpost&p=232
et sa réponse laconique : http://forums.oscommerce.com/index.php?app=tracker&showissue=96&view=findpost&p=257
Question : existe il une solution ? oui, évidemment. en ajoutant l'argument #id dans la fonction (et c'est là que je ne comprends pas l'entêtement d'harald à vouloir factoriser le code à outrance et finalement se retrouver à faire des pieds et des mains pour modifier la boutique).
donc voici le nouveau code de la fonction tep_draw_button() :
Code
////
// Output a jQuery UI Button
function tep_draw_button($title = null, $icon = null, $link = null, $priority = null, $params = null, $id = null) {
static $button_counter = 1;
$types = array('submit', 'button', 'reset');
if ( !isset($params['type']) ) {
$params['type'] = 'submit';
}
if ( !in_array($params['type'], $types) ) {
$params['type'] = 'submit';
}
if ( ($params['type'] == 'submit') && isset($link)) {
$params['type'] = 'button';
}
if (!isset($priority)) {
$priority = 'secondary';
}
if (!isset($id)){
$idbutton = "tdb" . $button_counter . "";
}else{
$idbutton = $id;
$button_counter -= 1;
}
$button = '<span class="tdbLink">';
if ( ($params['type'] == 'button') && isset($link)) {
$button .= '<a id="' . $idbutton . '" href="' . $link . '"';
if ( isset($params['newwindow']) ) {
$button .= ' target="_blank"';
}
} else {
$button .= '<button id="' . $idbutton . '" type="' . tep_output_string($params['type']) . '"';
if ( isset($params['params']) ) {
$button .= ' ' . $params['params'];
}
}
$button .= '>' . $title;
if ( ($params['type'] == 'button') && isset($link) ) {
$button .= '</a>';
} else {
$button .= '</button>';
}
$button .= '</span><script type="text/javascript">$("#' . $idbutton . '").button(';
$args = array();
if ( isset($icon) ) {
if ( !isset($params['iconpos']) ) {
$params['iconpos'] = 'left';
}
if ( $params['iconpos'] == 'left' ) {
$args[] = 'icons:{primary:"ui-icon-' . $icon . '"}';
} else {
$args[] = 'icons:{secondary:"ui-icon-' . $icon . '"}';
}
}
if (empty($title)) {
$args[] = 'text:false';
}
if (!empty($args)) {
$button .= '{' . implode(',', $args) . '}';
}
$button .= ').addClass("ui-priority-' . $priority . '").parent().removeClass("tdbLink");</script>';
$button_counter++;
return $button;
}
et sa mise en place dans les boutons du header :
Code
<div id="headerShortcuts">
<?php
echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART),null, null, 'btn_shopping_cart') .
tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), null, null, 'btn_checkout') .
tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'), null, null,'btn_my_account');
if (tep_session_is_registered('customer_id')) {
echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'), null, null, 'btn_logoff');
}
?>
</div>
dans le code html, on voit donc que chaque bouton reçoit bien un #id qui est définie dans le 6ème argument de la fonction (mode déconnecté) :
HTML
<div id="headerShortcuts">
<span class="tdbLink">
<a id="btn_shopping_cart" href="http://localhost:90/harald23/catalog/shopping_cart.php">Cart Contents</a></span><script type="text/javascript">$("#btn_shopping_cart").button({icons:{primary:"ui-icon-cart"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
<span class="tdbLink">
<a id="btn_checkout" href="http://localhost:90/harald23/catalog/checkout_shipping.php">Checkout</a></span><script type="text/javascript">$("#btn_checkout").button({icons:{primary:"ui-icon-triangle-1-e"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
<span class="tdbLink">
<a id="btn_my_account" href="http://localhost:90/harald23/catalog/account.php">My Account</a></span><script type="text/javascript">$("#btn_my_account").button({icons:{primary:"ui-icon-person"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");</script>
</div>
il ne reste plus qu'à définir leur classes css dans le fichier stylesheet :
HTML
#btn_shopping_cart{
background :red;
}
#btn_checkout{
background :blue;
}
#btn_my_account{
background :green;
}
#btn_logoff{
background :black;
}
Pour conclure :si vous ne définissez pas un #id, la fonction attribue dynamiquement la valeur.cela permet de garder une certaine factorisation du code quand cela est nécessaire (exemple : le module product_listing).
J'espère que les notions évoquées au sein de ce tuto vous permettra d'aborder plus facilement la modification de vos boutons.
1 - mode déconnecté : le client n'est pas logué.
2 - mode connecté : le client est logué.
Écrit par : Patrick10222 24 Mar 2014, 19:38
Merci mais on fait comment pour les autres boutons?
Par exemple je trouve dans create_account.php
Citation
<div class="buttonSet">
<span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'person', null, 'primary'); ?></span>
</div>
Je transforme en
Citation
<div class="buttonSet">
<span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'person', null, 'primary', 'btn_continue'); ?></span>
</div>
J'ai donc modifié les classes comme plus haut:
Citation
.buttonSet {
background :#1B0B3C;
color:white;
clear: both;
}
.buttonAction {
background :#1B0B3C;
color:white;
float: right;
}
Et rajouté
Citation
#btn_continue{
background :#1B0B3C;
color:white;
}
Mais rien ne change, et je ne parle pas des autres boutons ...