Onglet automatique dans la fiche produit, en fonction d'u tag dans la description du produit Options

[kakashi]

Hello,

J'essaye de développé une nouvelle fonctionnalité qui n'existe pas encore comme module dans osc car toutes sont manuelles
il s'agit tout simplement de créer des onglets , fonction d'un tag <h3> inséré dans la description du produit.
Ainsi il devient très simple de répartir l'information à travers un onglet (onglet description, onglet caractéristique ...).

Cela ne fonctionne pas très bien pour le moment, mais je pense qu'il y a des codeurs plus expérimentés qui pourraient donné un coup de main.

je pense que le pb vient certainement du css, je suis pas un expert dans ce domaine.

Supprimer la ligne 135 : <?php echo stripslashes($product_info['products_description']); ?>

Code

<style>

.rte {

    color: black;

    text-align: left;

}

.clear {

    clear: both;

}

/*couleur onglet*/

#more_info_tabs li a.selected {

    background-color: #B5A432;

    color: #FFFFFF;

}

#more_info_tabs li a {

    border-left: 1px solid #FFFFFF;

    color: #FFFFFF;

    height: auto;

    padding: 7px 20px !important;

}

ul.idTabsShort li a.selected {

    border: medium none;

    color: black;

    padding: 5px 15px 9px 0;

}

ul.idTabs li a.selected {

    height: auto;

    padding-left: 0;

}

ul.idTabsShort li a {

    border: medium none;

    color: #999999;

    font-weight: normal;

    padding: 8px 12px 9px 0 !important;

    width: auto;

}

ul.idTabs li a {

    color: #0066CC;

    display: block !important;

    font-weight: bold;

    height: 10px;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

}

ul.idTabsShort li {

    line-height: 15px !important;

}

ul.idTabsShort {

    border-style: solid none dotted;

}

ul.idTabs {

    list-style-type: none;

}

</style>

<?php

        $products_description = stripslashes($product_info['products_description']);

         $products_description_content .= '<script type="text/javascript">jQuery(document).ready(function () { jQuery(\'#idTab1\').remove(); jQuery(\'#more_info_tab_more_info\').parent().remove(); });</script>' . "\n";

// onglet menu

         $return_tab = "";

   $first = true;

    if (strpos($desc, '<h3>') !== FALSE) {

     $cut = explode('<h3>', trim($desc));

     foreach ($cut as $k => $part) {

      if (trim($part) != "") {

       if (strpos($part, "</h3>") !== FALSE) {

        $t = substr($part, 0, strpos($part, '</h3>'));

        $return_tab .= '<li><a href="#idTab100' . $k . '"' . ($first ? 'class="selected"' : '' ) . '>' . $t . '</a></li>' . "\n";

        $first = false;

       }

      }

     }

    }

// Contenu de l'onglet dans le menu

       $return_content = "";

    $desc = $products_description;

    if (strpos($desc, '<h3>') !== FALSE) {

     $cut = explode('<h3>', trim($desc));

     foreach ($cut as $k => $part) {

      if (trim($part) != "") {

       if (strpos($part, "</h3>") !== FALSE) {

        $r = substr($part, strpos($part, '</h3>') + 5);

        $return_content  .= '<div id="idTab100' . $k . '" class="rte">' . $r . '</div>' . "\n";

       }

      }

     }

                  }

//          $products_description_content .= '<div class="clear" id="more_info_block">' . "\n";

          $products_description_content .= '<div  id="more_info_block">' . "\n";

          $products_description_content .= '<ul class="idTabs idTabsShort" id="more_info_tabs">' . "\n";

          $products_description_content .= ' '.$return_tab . $return_content  . "\n";

          $products_description_content .= '</ul>' . "\n";

          $products_description_content .= '</div>' . "\n";

//          $products_description_content .= '</div>' . "\n";

echo $products_description_content;

?>

Voila ou j'en suis pour le moment

Des idées pour améliorer le système

[did-eye]

a moins d'avoir mal compris je crois que "products_tab" fait déjà ce que tu veux

[kakashi]

Non, pas du tout j'ai regardé. Mais c'est trés manuel. La tu mets un h3 et l onglet se créer automatiquement

[FoxP2]

non, c'est celles ci :
http://www.oscommerce.com/community/contributions,7703
http://www.oscommerce.com/community/contributions,7706

[kakashi]

Cela répond pas à mon besoin, cette contrib oblige a toucher le code à droite et à gauche, c'est pas l'esprit que je veux donner.

Pour ceux qui veulent tester et proposer des soluces voici une piste

changer :
$products_description_content .= '<script type="text/javascript">jQuery(document).ready(function () { jQuery(\'#idTab1\').remove(); jQuery(\'#more_info_tab_more_info\').parent().remove(); });</script>' . "\n";

par

$products_description_content .= '<script type="text/javascript">jQuery(document).ready(function () { jQuery(\'#idTab1\'); jQuery(\'#more_info_tab_more_info\').parent().remove(); });</script>' . "\n";

Ainsi si vous mettez par exemple <h3>test</h3>mon texte <h3>test1</h3>montexte 1, vous verrez automatiquement des onglets apparaitres du côté du catalogue.

Le pb actuelle est que tout le texte apparaît dans le premier onglet.