Modification d'une boxe YEESSSSSSSS !!!!!!!, Ou comment personnaliser les boxes séparément. Options

[guinnessboy]

Bonjour, Il ne me semble pas avoir vu de topics ou de tutos sur ce point.

Voici j'aimerai pouvoir personnaliser des boxes individuellement, quelle est la marche a suivre ?
j'ai déja commencé à plancher sur le sujet mais je suis pas un fana de l'objet...

Voici ou j'en suis.

1 - Duplication des propriétés dans la CSS. Là pas de soucis.

2 - Duplication du fichier 'includes/class/boxes.php

3 - Dans mon nouveau ficher (boxes2 par exemple) je modifie le nom de la classe et des extends et j'obtiens ma nouvelle classe. Juste ?

4 - C'est dans les constructeurs que je modifie les nom de classe de la CSS pour appliquer ceux que j'ai modifié à mon étape 1. Juste ?

5 - Je modifie le code de la box concernée en instanciant des objets de la nouvelle classe à la place de la l'ancienne ? Juste ? Mais là j'ai un doute sur la manoeuvre. Je modifie derrière chaque new mais est ce suffisant.

Sur le code suivant quel sont les modifs à apporter :

CODE

<?php
  $info_box_contents = array();
  $info_box_contents[] = array('text' => BOX_HEADING_SEARCH);

  new infoBoxHeading($info_box_contents, false, false);

  $info_box_contents = array();
  $info_box_contents[] = array('form' => tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'),
                               'align' => 'center',
                               'text' => tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-30) . 'px"') . ' ' . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT . '<br><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><b>' . BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');

  new infoBox($info_box_contents);
?>

Merci d'avance à ceux qui auront un peu de temps à me consacrer.

Et puis promis si je m'en sors j'écris un tuto step by step qui je pense sera bien utilie à ceux qui débutent avec OSC ou qui ne sont pas familiers de la manipulation des objets.

Ce message a été modifié par guinnessboy - 20 Nov 2006, 12:30.

[cvia]

Salut,

Je ne crois pas que tu vas t'en sortir de cette façon, je te conseille de voir la contrib - BoxImageThemaMS2fr_V2.7 pour voir comment on traite le design des boxes.
Même sans l'installer tu vas comprendre le fonctionnement des boxes.
C'est ce que j'ai fait et ça ne marche pas si mal malgré mon inexpérience en php.

a+

[guinnessboy]

Bonjour,

Ca fait un moment que ça me travaillait. Modifier une boxe sans devoir se fader l'installe de box image thema (que je n'ai jamais réussi à faire fonctionner).
Voici donc une méthode pour modifier une box ou même plusieurs. C'est très certainement perfectible. Surtout an niveau de l'optimisation du code (qui n'est pas mon truc), mais cela fonctionne.

1 - Dans le fichier classes/boxes.php avant la fin copier ceci. C'est en fait le code du fichier modié avec l'ajout d'un 2 dans le nom des constructeurs et des méthodes. CQFD si on veut une troisième box, recopier avec un 3

CODE

// Boxe de type 2 (peut être recopié autant de fois que nécessaire)
  class table2Box {
    var $table2_border = '2';
    var $table2_width = '90%';
    var $table2_cellspacing = '0';
    var $table2_cellpadding = '2';
    var $table2_parameters = '';
    var $table2_row_parameters = '';
    var $table2_data_parameters = '';

// class constructor
    function table2Box($contents, $direct_output = false) {
      $table2Box_string = '<table border="' . tep_output_string($this->table2_border) . '" width="' . tep_output_string($this->table2_width) . '" cellspacing="' . tep_output_string($this->table2_cellspacing) . '" cellpadding="' . tep_output_string($this->table2_cellpadding) . '"';
      if (tep_not_null($this->table2_parameters)) $table2Box_string .= ' ' . $this->table2_parameters;
      $table2Box_string .= '>' . "\n";

      for ($i=0, $n=sizeof($contents); $i<$n; $i++) {
        if (isset($contents[$i]['form']) && tep_not_null($contents[$i]['form'])) $table2Box_string .= $contents[$i]['form'] . "\n";
        $table2Box_string .= '  <tr';
        if (tep_not_null($this->table2_row_parameters)) $table2Box_string .= ' ' . $this->table2_row_parameters;
        if (isset($contents[$i]['params']) && tep_not_null($contents[$i]['params'])) $table2Box_string .= ' ' . $contents[$i]['params'];
        $table2Box_string .= '>' . "\n";

        if (isset($contents[$i][0]) && is_array($contents[$i][0])) {
          for ($x=0, $n2=sizeof($contents[$i]); $x<$n2; $x++) {
            if (isset($contents[$i][$x]['text']) && tep_not_null($contents[$i][$x]['text'])) {
              $table2Box_string .= '    <td';
              if (isset($contents[$i][$x]['align']) && tep_not_null($contents[$i][$x]['align'])) $table2Box_string .= ' align="' . tep_output_string($contents[$i][$x]['align']) . '"';
              if (isset($contents[$i][$x]['params']) && tep_not_null($contents[$i][$x]['params'])) {
                $table2Box_string .= ' ' . $contents[$i][$x]['params'];
              } elseif (tep_not_null($this->table2_data_parameters)) {
                $table2Box_string .= ' ' . $this->table2_data_parameters;
              }
              $table2Box_string .= '>';
              if (isset($contents[$i][$x]['form']) && tep_not_null($contents[$i][$x]['form'])) $table2Box_string .= $contents[$i][$x]['form'];
              $table2Box_string .= $contents[$i][$x]['text'];
              if (isset($contents[$i][$x]['form']) && tep_not_null($contents[$i][$x]['form'])) $table2Box_string .= '</form>';
              $table2Box_string .= '</td>' . "\n";
            }
          }
        } else {
          $table2Box_string .= '    <td';
          if (isset($contents[$i]['align']) && tep_not_null($contents[$i]['align'])) $table2Box_string .= ' align="' . tep_output_string($contents[$i]['align']) . '"';
          if (isset($contents[$i]['params']) && tep_not_null($contents[$i]['params'])) {
            $table2Box_string .= ' ' . $contents[$i]['params'];
          } elseif (tep_not_null($this->table2_data_parameters)) {
            $table2Box_string .= ' ' . $this->table2_data_parameters;
          }
          $table2Box_string .= '>' . $contents[$i]['text'] . '</td>' . "\n";
        }

        $table2Box_string .= '  </tr>' . "\n";
        if (isset($contents[$i]['form']) && tep_not_null($contents[$i]['form'])) $table2Box_string .= '</form>' . "\n";
      }

      $table2Box_string .= '</table>' . "\n";

      if ($direct_output == true) echo $table2Box_string;

      return $table2Box_string;
    }
  }

  class info2Box extends table2Box {
    function info2Box($contents) {
      $info2_box_contents = array();
      $info2_box_contents[] = array('text' => $this->info2BoxContents($contents));
      $this->table2_cellpadding = '1';
      $this->table2_parameters = 'class="info2Box"';
      $this->table2Box($info2_box_contents, true);
    }

    function info2BoxContents($contents) {
      $this->table2_cellpadding = '3';
      $this->table2_parameters = 'class="info2BoxContents"';
      $info2_box_contents = array();
      $info2_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));
      for ($i=0, $n=sizeof($contents); $i<$n; $i++) {
        $info2_box_contents[] = array(array('align' => (isset($contents[$i]['align']) ? $contents[$i]['align'] : ''),
                                           'form' => (isset($contents[$i]['form']) ? $contents[$i]['form'] : ''),
                                           'params' => 'class="box2Text"',
                                           'text' => (isset($contents[$i]['text']) ? $contents[$i]['text'] : '')));
      }
      $info2_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));
      return $this->table2Box($info2_box_contents);
    }
  }
// ici vous pouvez modifier les images des coins des boxes et de la flèche dans l'entête
  class info2BoxHeading extends table2Box {
    function info2BoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
      $this->table_cellpadding = '0';

      if ($left_corner == true) {
        $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');
      } else {
        $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');
      }
      if ($right_arrow == true) {
        $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
      } else {
        $right_arrow = '';
      }
      if ($right_corner == true) {
        $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
      } else {
        $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
      }

      $info2_box_contents = array();
      $info2_box_contents[] = array(array('params' => 'height="16" class="info2BoxHeading"',
                                         'text' => $left_corner),
                                   array('params' => 'width="90%" height="14" class="info2BoxHeading"',
                                         'text' => $contents[0]['text']),
                                   array('params' => 'height="16" class="info2BoxHeading" nowrap',
                                         'text' => $right_corner));

      $this->table2Box($info2_box_contents, true);
    }
  }

  class content2Box extends table2Box {
    function content2Box($contents) {
      $info2_box_contents = array();
      $info2_box_contents[] = array('text' => $this->content2BoxContents($contents));
      $this->table2_cellpadding = '1';
      $this->table2_parameters = 'class="info2Box"';
      $this->table2Box($info2_box_contents, true);
    }

    function content2BoxContents($contents) {
      $this->table2_cellpadding = '4';
      $this->table2_parameters = 'class="info2BoxContents"';
      return $this->table2Box($contents);
    }
  }

  class content2BoxHeading extends table2Box {
    function content2BoxHeading($contents) {
      $this->table2_width = '100%';
      $this->table2_cellpadding = '0';

      $info2_box_contents = array();
      $info2_box_contents[] = array(array('params' => 'height="14" class="info2BoxHeading"',
                                         'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif')),
                                   array('params' => 'height="14" class="info2BoxHeading" width="100%"',
                                         'text' => $contents[0]['text']),
                                   array('params' => 'height="14" class="info2BoxHeading"',
                                         'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif')));

      $this->table2Box($info2_box_contents, true);
    }
  }

  class error2Box extends table2Box {
    function errorBox($contents) {
      $this->table_data_parameters = 'class="error2Box"';
      $this->tableBox($contents, true);
    }
  }

  class product2ListingBox extends table2Box {
    function product2ListingBox($contents) {
      $this->table2_parameters = 'class="product2Listing"';
      $this->table2Box($contents, true);
    }
  }

Vous noterez que c'est dans ce fichier que vous pouvez modifier l'apparence des 'coins' et de la flèche des entêtes de box. Il suffit de créer de nouveaux fichiers et de les renommer style : corner2_right_left.gif. Ensuite faire référence aux fichiers choisis.


Même type de manoeuvre dans le fichier CSS. Le programme boxes.php fait appel aux classes suivantes :

infobox, boxtext, infoboxheading, infoboxcontents, errorbox et productlisting
Donc copier et renommer comme suit les classes dont vous avez besoin. A l'intérieur bien entendu c'est là que vous donnez libre court à votre créativité artistique
Un exemple avec infoBoxContents

CODE

.info2BoxContents {
  background: #666;
  font-family:  Arial, Verdana,sans-serif;
  font-size: 9px;
  border: 3px outset #00F;
}

Donc bien penser dans le code de boxex.php à bien donner les bons noms de classes CSS.

Enfin dans dans le fichier de la box juste modifier le nom d'appel des constructeurs.

CODE

          <tr>
            <td>
<?php
  $info_box_contents = array();
  $info_box_contents[] = array('text' => BOX_HEADING_INFORMATION);

  new info2BoxHeading($info_box_contents, false, false); [color=#FF0000]ICI[/color]

  $info_box_contents = array();
  $info_box_contents[] = array('text' => '<a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . BOX_INFORMATION_SHIPPING . '</a><br>' .
                                         '<a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a><br>' .
                                         '<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a><br>' .
                                         '<a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a>');

  new info2Box($info_box_contents); [color=#FF0000]ET LA[/color]
?>
            </td>
          </tr>

Exemple pour la box information.php

Mon exemple était très laid je n'ai donc pas mis le code de la CSS . Mais à partir de cela vous pouvez pour une boxe mettre une image en fonds, modifier une entête et tous les paramètres.
C'est grossier mais ça le fait !

Je suis preneur de toutes les améliorations

Ce message a été modifié par guinnessboy - 20 Nov 2006, 12:40.

[fissiaux]

Bien

Tu aurais pu t'appuyer sur le fil de stepibou avec la solution donnée le 12 juin 2005.


http://www.oscommerce-fr.info/forum/index....amp;hl=infoBox2

[val]

Super guinnessboy pour les box, je me suis pris un peu la tete avec les complications de Thema_box
Là au moins c'est simple et ça fonctionne !!!!!

Un grand merci
Val

[taiko]

salut

pas vu la date mdr !!!!! désolé lol !!!!

Ce message a été modifié par taiko - 2 Mar 2008, 17:52.

[vfero]

Bonjour,


Personnaliser les box séparément fonctionne très bien, sans passer par une contrib,

Je suis par contre entrain de ramer sur une seule, ou ca ne fonctionne pas.

La box ( module ) "Nouveaux articles:

Dès que j'y touche, le layout se modifie bien, mais je perds l'affichage des articles...

Si quelqu'un comprend, je l'en remercie d'avance!

[val]

Bonjour,


Personnaliser les box séparément fonctionne très bien, sans passer par une contrib,

Je suis par contre entrain de ramer sur une seule, ou ca ne fonctionne pas.

La box ( module ) "Nouveaux articles:

Dès que j'y touche, le layout se modifie bien, mais je perds l'affichage des articles...

Si quelqu'un comprend, je l'en remercie d'avance!

Bonjour
Je pense que tu as du faire "betement" la même erreur que moi au debut

fait attention à l'appel de ton tableau:
L'ex que guinnessboy a donné pour la BOX_INFORMATION est bonne, mais pas attribuée à toutes les boxes...
Pour new_product tu remplace :

new contentBoxHeading($info_box_contents);

par

new content2BoxHeading($info_box_contents, false, false);

et en bas de page :

new contentBox($info_box_contents);

par

new content2Box($info_box_contents);

Ensuite dans ton stylesheet tu dupliques toutes les info_box dont tu as besoin pour changer l'affichage (n'oublies pas de les renomer) ex : TD.infoBoxHeadings devient TD.info2BoxHeadings

voilà
Val

[vfero]

Sur le principe, ca fonctionne très bien,
le soucis est que je perds l'affichage de mes nouveaux articles...


Bon, je vais chercher un mur pour m'y fracasser la tête

[mchinfa]

C'est génial merci beaucoup ca marche d'enfer :!!!!