Création plugin cycle (defilement boxes, img, banniere, ...)

Messagepar chever » Mar 25 Aoû 2009, 13:30

Suite à plusieurs essais, j'ai enfin trouvé un plugin facile à installer pour le défilement de boxes, bannière, ...

Il s'agit du plugin Cycle qui offre beaucoup de souplesse notamment au niveau css.

Ci dessous, vous trouverez l'adaptation que j'en ai faite sous forme de plugin pour osCSS.
NB : il n'était nécessaire de faire à un plugin mais comme vous le constaterez dans le code on pourra avoir le choix entre des boxes classiques ou defilantes.

Pour cela je me suis basé sur le template osCSS.
Pré requis
- jQuery version 1.2.3 ou >
- jquery.cycle.all.js à telecharger :
+ site en francais http://yoja-web.com/fr/jquery-plugin-cycle/plugin-cycle-installation
+ site du créateur http://malsup.com/jquery/cycle/download.html

Structure :
Dans le dossier templates/oscss/plugins ==> créer un dossier boxDefil puis créer dans ce dernier, un dossier inc

Dans boxDefil, il y aura includes_header.php, specials_defil.php, whats_new.defil.php, ...
Dans Inc, il faut jQuery version 1.2.3 ou >, jquery.cycle.all.js et cycle.css.

Fichier à créer
includes_header.php
Code: Tout sélectionner
<?php
      tep_include_file ("templates/".$template."/includes/plugins/boxDefil/inc/cycle.css");
      tep_include_file ("templates/".$template."/includes/plugins/boxDefil/inc/jquery-1.3.2.min.js");
      tep_include_file ("templates/".$template."/includes/plugins/boxDefil/inc/jquery.cycle.all.min.js");

?>


<script type="text/javascript">
  $(function(){
     $("#specials_defil").cycle(
      {fx: 'scrollLeft',
        speed: 1000,
        timeout: 7000 }   
    );
     $("#whats_new_defil").cycle(
     {fx: 'scrollDown',
        speed: 1000,
        timeout: 7000 }   
    );
   
     
  });
   </script>

specials_defil
Code: Tout sélectionner
 
            <?php
     
      $random_select = tep_db_query("select p.products_id, pd.products_name, p.products_price, p.products_tax_class_id, p.products_image, s.specials_new_products_price from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_SPECIALS . " s where p.products_status = '1' and p.products_id = s.products_id and pd.products_id = s.products_id and pd.language_id = '" . (int)$languages_id . "' and s.status = '1' order by s.specials_date_added desc limit ". MAX_RANDOM_SELECT_SPECIALS);
     
     
?>
     
<div id="specials_defil">
 
      <?php
     
     
      while($random_product_result = tep_db_fetch_array($random_select)) {
     
       
        print '    <div>';

          print '      <p><a href="' . htmlentities (tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $random_product_result['products_id'])) . '">' . htmlentities(tep_get_products_name($random_product_result['products_id'])) . '</a>';
          print '      <a href="' . htmlentities (tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $random_product_result['products_id'])) . '"><img src="' . HTTP_SERVER.DIR_WS_CATALOG.DIR_WS_IMAGES . $random_product_result['products_image'] . '" alt="'. htmlentities(tep_get_products_name($random_product_result['products_id'])) . '"/></a>';
           print '      <del>' . ($currencies->display_price($random_product_result['products_price'], tep_get_tax_rate($random_product_result['products_tax_class_id']))) . '</del>';
           print '      <span class="productSpecialPrice">' . ($currencies->display_price($random_product_result['specials_new_products_price'], tep_get_tax_rate($random_product_result['products_tax_class_id']))) . '</span></p>';

          print '    </div>';
     
      }?>
</div>

whats_new_defil.php
Code: Tout sélectionner
 
            <?php
     
$random_select = tep_db_query("select products_id, products_image, products_tax_class_id, products_price from " . TABLE_PRODUCTS . " where products_status = '1' order by products_date_added desc limit " . MAX_RANDOM_SELECT_NEW);
     
?>
     
<div id="whats_new_defil">
 
      <?php
     
     
      while($random_product_result = tep_db_fetch_array($random_select)) {
       
       
        print '    <div>';

          print '      <p><a href="' . htmlentities (tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $random_product_result['products_id'])) . '">' . htmlentities(tep_get_products_name($random_product_result['products_id'])) . '</a>';
          print '      <a href="' . htmlentities (tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $random_product_result['products_id'])) . '"><img src="' . HTTP_SERVER.DIR_WS_CATALOG.DIR_WS_IMAGES . $random_product_result['products_image'] . '" alt="'. htmlentities(tep_get_products_name($random_product_result['products_id'])) . '"/></a>';
           print '      ' . ($currencies->display_price($random_product_result['products_price'], tep_get_tax_rate($random_product_result['products_tax_class_id'])));
             if (tep_not_null($random_product['specials_new_products_price'])) {
           print '      <span class="productSpecialPrice">' . ($currencies->display_price($random_product_result['specials_new_products_price'], tep_get_tax_rate($random_product_result['products_tax_class_id']))) . '</span></p>';
            }
         print '    </div>';
     
      }?>
</div>

cycle.css (à créer dans le dossier inc)
Code: Tout sélectionner
#specials_defil { 
    background-color:#F0F;
    width:   195px; 
    padding: 0; 
    margin:  0; 
}
 
#specials_defil img { 
    width:  120px;
    height: 120px;
    top:  0;
    left: 0
}

#whats_new_defil { 
    background-color:#0F0;
    width:   195px; 
    padding: 0; 
    margin:  0; 
}
 
#whats_new_defil img { 
    width:  120px;
    height: 120px;
    top:  0;
    left: 0
}
oscss 1.2/seo/point and rewards/featured et beaucoup de sueur
chever
Membre gold
 
Messages: 529
Inscription: Jeu 26 Juil 2007, 21:06
Localisation: Macon

Messagepar chever » Mar 25 Aoû 2009, 13:41

Pour utiliser le plugin, il faut ensuite insérer un appel du plugin.

Ex pour la boxe spécials.php

trouver
Code: Tout sélectionner
   <h4 class="<?php echo $language ;?>"><?php echo BOX_HEADING_SPECIALS ;?></h4>

ajouter en dessous :
Code: Tout sélectionner
 <?php
 $filename = 'templates/' . $template . '/includes/plugins/boxDefil/specials_defil.php';
 
  if (file_exists($filename)) {
  require('templates/' . $template . '/includes/plugins/boxDefil/specials_defil.php');
 } else {
    ?>

Trouver :
Code: Tout sélectionner
</p>
</div>

remplacer par :
Code: Tout sélectionner
</p>
    <?php 
   }
   ?>
</div>

appliquer la même procédure pour les autres boxes.

Dans l'absolu, il serait bien de pouvoir gérer si oui ou non on veut des boxes défilantes a partir de l'admin et un if dans la boxes mais je n'en suis pas capable.

Pour plus d'infos sur les effets possibles, je vous conseille de regarder les deux sites mentionnés dans le premier post
Dernière édition par chever le Mar 25 Aoû 2009, 13:43, édité 1 fois.
oscss 1.2/seo/point and rewards/featured et beaucoup de sueur
chever
Membre gold
 
Messages: 529
Inscription: Jeu 26 Juil 2007, 21:06
Localisation: Macon

Messagepar oscim » Mar 25 Aoû 2009, 17:53

Salut,

En fait dans l'idée, tu chechere a pouvoir activer la prise en charge de l'emelement inclus dans le théme, ou celui inclus dans le noyau ?

Pour moi, c'est le cas, puisque les élément sont placée dans le théme, donc accessible facilement.

au delas, il faut ajouter une variable dans la table configuration, et ensuite de tester sa valeur .

si elle précise theme, alors include du theme sinon include du noyau.

Ou alors, une var qui prend le nom de boite en defilant, seéparé par des virgules, et ensuite ne s'active que les boite concernées

Un petit zip de ton plugin ??

je veut bien jetter un oeuil..
Dernière édition par oscim le Mar 25 Aoû 2009, 17:56, édité 1 fois.
Pour un web au normes du W3C, pour un web plus propre !

- Download osCSS Toutes versions
- stable osCSS 2.1.0 (help|info|new dev) Official help|wiki|Tuto for osCSS 2 | doc doxygen
- Utiliser le tracker pour suivre les évolutions et développements
- Inscrivez vos sites sur oscss pour présenter vos réalisations
Avatar de l’utilisateur
oscim
Site Admin
 
Messages: 1643
Inscription: Mar 25 Sep 2007, 11:33

Messagepar chever » Mar 25 Aoû 2009, 20:16

pour Zip voir MP
oscss 1.2/seo/point and rewards/featured et beaucoup de sueur
chever
Membre gold
 
Messages: 529
Inscription: Jeu 26 Juil 2007, 21:06
Localisation: Macon

Messagepar cynic- » Mer 26 Aoû 2009, 11:26

Super, merci pour ce plugin, j'espère pouvoir trouver le temps de tester.
La fonction "Pagination personnalisée" me semble idéale pour une fiche-produit : au rollover sur la vignette, la grande image se met à jour quasi en temps réel.

L'effet d'effeuillage (cycle-2) est bien !
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04


Retourner vers Plugin

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 6 invités

cron