osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> [tuto]Modifier individuellement les boutons de votre boutique., via la fonction tep_draw_button + class css
FoxP2
posté 23 Jan 2011, 14:08
Message #1


Ceinture marron OSC
Icône de groupe

Groupe : Modérateurs
Messages : 1665
Inscrit : 3-June 09
Membre no 25501



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é2



Le 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 arrow.gif
il existe cet outil pour vous aider à choisir la bonne icône : http://jquery-ui.googlecode.com/svn/tags/1...tic/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 ici). 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:
ID "manufacturers_id" and ID "keywords" already defined in includes/modules/boxes/bm_manufacturers.php and includes/modules/boxes/bm_search.php
Invalid 'id' paramater for products_id with options in the select drop down
the same problem with function tep_draw_input_field : Invalid 'id' paramater (test with shopping_cart)
et sa réponse laconique : http://forums.oscommerce.com/index.php?app...dpost&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é.


--------------------


Go to the top of the page
 
ciscokid
posté 15 Mar 2011, 11:16
Message #2


Ceinture jaune+ OSC
Icône de groupe

Groupe : Membres
Messages : 81
Inscrit : 30-January 08
Lieu : Paname 75009
Membre no 20601



Hello,

Merci de cette petite modification grandement utile, je ne m'en serai pas sortis sans ce post.

Du coup, sur la page produit, le bouton "ajouter au panier" pourrait être appelé de la sorte :
Code
<?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'primary', null, 'popupBtPanier'); ?>





Merci d'avoir pris le temps pour ce tuto.

a++


--------------------
MS 2.2
bluffé par ce forum ;-)
ATOS kit v6.0 / Module atos-2.3.0 / QT PRO 4.3 / PDF INVOICE / Featured PRODUCTS / osC_AJAX_Suggest_Package / Ultimate_Seo_Urls_v2.6_(18 Aug 2008) / more_pics_6_v1.3b / loginbox v2.2c / extra_images / enable_disable_categories_1.6.1.1 / ajax-attributemanager
Go to the top of the page
 
brouillard
posté 2 Apr 2011, 11:14
Message #3


Ceinture orange+ OSC
Icône de groupe

Groupe : Membres
Messages : 301
Inscrit : 9-December 09
Membre no 26687



Si javascript est désactivé, plus de boutons huh.gif

<hs> merci pour le bouton REP'FLASH bien pratique </hs>

Ce message a été modifié par brouillard - 2 Apr 2011, 11:15.
Go to the top of the page
 
FoxP2
posté 14 May 2011, 09:07
Message #4


Ceinture marron OSC
Icône de groupe

Groupe : Modérateurs
Messages : 1665
Inscrit : 3-June 09
Membre no 25501



Citation (brouillard @ 2 Apr 2011, 11:14) *
Si javascript est désactivé, plus de boutons huh.gif

faux !

leurs class* sont définies dans le stylesheet :
Code
/* buttons */

.tdbLink a { }

.tdbLink button { }

et reste parfaitement fonctionnel. Ils sont juste affichés en mode dégradé.

*cette class est dynamiquement supprimée du dom avec la dernière ligne du script :
Code
$button .= ').addClass("ui-priority-' . $priority . '").parent().removeClass("tdbLink");</script>';




--------------------


Go to the top of the page
 
kakashi
posté 23 Dec 2011, 18:00
Message #5


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 19
Inscrit : 28-October 10
Membre no 28192



J'ai essayé le script mais il semblerait que dans partie nouveauté (page index / axe centrale), les boutons ne changent pas de couleur, sauf le dernier.

ex:
tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action', 'products_id')) . 'action=buy_now&products_id=' . $products_id), 'primary', null, 'btBuyNow');


Vous avez ce pb

Ce message a été modifié par kakashi - 23 Dec 2011, 18:02.
Go to the top of the page
 
FoxP2
posté 29 Dec 2011, 10:37
Message #6


Ceinture marron OSC
Icône de groupe

Groupe : Modérateurs
Messages : 1665
Inscrit : 3-June 09
Membre no 25501



Citation (kakashi @ 23 Dec 2011, 18:00) *
J'ai essayé le script mais il semblerait que dans partie nouveauté (page index / axe centrale), les boutons ne changent pas de couleur, sauf le dernier.

ex:
tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action', 'products_id')) . 'action=buy_now&products_id=' . $products_id), 'primary', null, 'btBuyNow');


Vous avez ce pb


excl.gif normal, ce bouton n'est pas individuel. un id doit être unique.


--------------------


Go to the top of the page
 
Kawaii77
posté 10 Sep 2012, 08:28
Message #7


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 21
Inscrit : 15-December 08
Membre no 23957



Incontestablement la gestion des boutons aura été la partie la plus compliqué, hasardeuse et perte de temps à regarder et à paramétrer dans OsCommerce !
J'ai suivi les consignes ci-dessus, ça marchait à moitié, je passe à autre chose, je reviens, plus rien ne marche, je me retrouve avec ces foutus boutons bleus, ras la casquette de ce jsquery !


--------------------
version 2.3
Go to the top of the page
 
Kawaii77
posté 10 Sep 2012, 08:38
Message #8


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 21
Inscrit : 15-December 08
Membre no 23957



Et voilà, suffit que je râle pour trouver un autre code à modifier : le ext/jquery/ui/redmond/jquery-ui 1.8-6.css
je vois ligne 404 : .ui-button, je teste, je mets un background, un color et un border-color, super mes boutons ont changé !

Et vlan voilà que des cadres bleus apparaissent autour des blocs !!!!!!
Os-commerce était déjà suffisamment une usine à gaz, quand on veut changer un truc, faut toucher à 4 fichiers, franchement rajouter jsquery par la dessus et on perd franchement l'intérêt d'utiliser Os-commerce.
Je comprends pourquoi je vois de plus en plus de boutique Prestashop !


--------------------
version 2.3
Go to the top of the page
 
Gnidhal
posté 13 Sep 2012, 08:16
Message #9


5eme dan OSC
Icône de groupe

Groupe : Administrateur
Messages : 9206
Inscrit : 4-March 03
Lieu : Auray
Membre no 927



Citation (Kawaii77 @ 10 Sep 2012, 09:38) *
Os-commerce était déjà suffisamment une usine à gaz, quand on veut changer un truc, faut toucher à 4 fichiers, franchement rajouter jsquery par la dessus et on perd franchement l'intérêt d'utiliser Os-commerce.
Je comprends pourquoi je vois de plus en plus de boutique Prestashop !
Une usine à gaz ? Je pense que c'est le script le plus accessible aux débutants ou aux néophytes.
Quant à la présence croissante de Prestashop c'est simplement que c'est un OpenSource avec une licence qui permet de rapporter de l'argent et donc une communication plus importante et des prestataires qui peuvent tirer profit du moindre script. osCommerce est totalement gratuit pour l'utilisateur qui met les mains dans le code avec des tonnes de contributions (plus ou moins bien ficelées) qui donnent à chacun la chance de faire son propre site sans demander à un pro.
D'ailleurs dans le nom de la solution que tu cites il y a presta comme prestataire. Et il y a aussi du jQuerry. Pour l'usine à gaz, je te laisse aller faire des modifs dans le code et tu pourras juger sur pièce.
Bonne chance.


--------------------
Tout d'abord : - Ni Hotline ni Service Après Vente, ces forums sont un lieu d'échange. BIEN POSER SA QUESTION (généralités)
Les "Informations Importantes" que vous devez ABSOLUMENT avoir lues :
Règlement, Bien poser sa question dans ces forums et Bien utiliser les Forums.
Les raccourcis pour gagner du temps : la FAQ, les PDF de la Doc (MS2-fr): PDF-V1 et PDF-V2, le moteur de Recherche sur les forums , la Liste des Contributions de Corbin.

----------------------------- Quelques sites de référence ---------------------------
PHP: Le site du Zéro et PHP Débutant avec la DOC en français -- HTML: Self HTML - WebProgrammation -- CSS: OpenWeb - AlsaCréations - CSS/Edge -- Autres ressources: - XajaX - highslide js
Les bons outils : EasyPHP - WAMP-5 - - Notepad++ - Firefox et son extension WebDeveloper
Le gène idéal c'est le gène original. Le génie des halles est un Génie des Alpages qui tente d'être à la page. (Merci f'murrr pour les cours de philosophie de chien)
Go to the top of the page
 
Bwar
posté 3 Mar 2013, 15:21
Message #10


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 11
Inscrit : 22-October 12
Membre no 31660



Bonjour,

Comment modifier le texte d'un bouton?
Je voudrais par exemple changer le texte des boutons "Acheter maintenant" dans le listing produit. Impossible de trouver.

Merci d'avance pour votre aide.


--------------------
oscommerce version 2.3_177_g1a17f72
EasyPHP 5.3.8.1
Go to the top of the page
 
Bwar
posté 3 Mar 2013, 17:27
Message #11


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 11
Inscrit : 22-October 12
Membre no 31660



Il suffisait de poser la question pour que je trouve. C'est dans french.php que l'on défini les textes à appeler.


--------------------
oscommerce version 2.3_177_g1a17f72
EasyPHP 5.3.8.1
Go to the top of the page
 
Patrick10222
posté 24 Mar 2014, 19:38
Message #12


Ceinture blanche OSC
Icône de groupe

Groupe : Membres
Messages : 5
Inscrit : 22-March 14
Membre no 32590



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 ... biggrin.gif

Ce message a été modifié par Patrick10222 - 24 Mar 2014, 19:47.
Go to the top of the page
 

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 22nd October 2014 - 08:59
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)