Faire defiler les nouveautés [resolu]

Messagepar chever » Jeu 23 Aoû 2007, 18:05

Bonjour

J'ai place les nouveautés dans le menu gauche et je souhaite les faire défiler en continu.

Je tente d'installer la contribe boite_défilante.
En l'installant telle quelle, ça ne joue pas du tout, car je pense qu'elle n'est pas faite pour être gérée avec un template et je n'ai pas les compétences pour modifier cette contrib

Auriez vous une astuce, une contrib adaptée à oscss pour faire défiler des produits dans une box ?

Merci d'avance

Chever
Dernière édition par chever le Ven 17 Juil 2009, 16:04, é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 Hesius » Dim 05 Juil 2009, 21:53

Salut, je viens d'arriver sur le forum en fait je ne m'étais jamais vraiment intéressé à cette version d' Osc.. ça à l'air sympa mis à part les nombreuses erreurs sur les templates fournis.. bref pour répondre à ta question, la seule façon fiable pour tous navigateurs est la suivante.. (system D mais valide Css et Html..)
1 balise <marquee> tu connais.. enfermée dans les balises Js le tout raccordé à la bdd.. 20 lignes et c'est au top. En cliquant ça part sur product_info etc.. en ajoutant à ta requête le MAX tu controles le nombre et avec rand tu chopes la liste en aléatoire.
Voilà
Hesius
Membre inactif
 
Messages: 6
Inscription: Dim 05 Juil 2009, 21:45

Messagepar cynic- » Lun 06 Juil 2009, 17:36

Salut Hesius et bienvenue ! Merci pour ton astuce, je pense avoir déjà vu une contrib utilisant AJAX pour faire défiler les nouveautés, un peu plus long à installer que <marquee> (quoi que) mais surtout plus sexy :D
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar oscim » Lun 06 Juil 2009, 17:54

Bonjour,

Il me semble que la balise marquee est une balise proprio made in MS.

chever, quel contrib essaye tu d'installer ?
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 07 Juil 2009, 21:59

Bonne question mais je ne m'en rappelle plus
De mémoire, j'avais essayé un truc avec la balise marquee mais comme le dit cynic c'était pas du tout sexy et une autre contrib oscommerce avec du java. Mais comme je suis nul pour intégrer du java donc j'ai laissé tomber

Mais je suis toujours preneur :D car je pense que le défilement d'image est plus esthétique et ergonomique (c'est mon avis).
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 07 Juil 2009, 22:46

Pour un petit slideshow

par ex
http://jonraasch.com/blog/a-simple-jquery-slideshow

avec jquery. Ce script et prevu pour ne faire tourner que des images, mais aisément modifiable pour se charger de div.

Vous creez une boxes (une copie de special par exemple), et ensuite vous y intérer le bout de js. le css a sa place, et jquery dans le theme.

PS: ca va plus vite de modifier la page special que la box.
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 » Mer 08 Juil 2009, 10:37

Il est clair qu'il est facile de trouver ce genre de slide show.

Mais comment fait on pour integrer ca dans le code de la boxe nouveauté (par exemple) afin que les images qui défilent soit celles du résultat de la requête ? Connaissez vous un tuto sur le sujet ?
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 » Mer 08 Juil 2009, 11:22

Bonjour,

Creer une nouvelle boite special2.php par ex.

Il placer la requete sql de special
Code: Tout sélectionner
$products_new_query_raw = "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 s.products_id = p.products_id and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' and s.status = '1'  order by s.specials_date_added DESC";

Placer ensuite la boucle visiter chacun des resultat
Code: Tout sélectionner
while($products_new = tep_db_fetch_array($products_new_result)) {
 /* PLACER ICI LA FORME DE SORTIE HTML */
}

Donc en remplacent /* PLACER ICI LA FORME DE SORTIE HTML */
Par par ex:
Code: Tout sélectionner
 print '    <div>' . "n";
 print '      <title>' . htmlentities(tep_get_products_name($products_new['products_id'])) . '</title>'. "n";
print '      <img src="' . HTTP_SERVER.DIR_WS_CATALOG.DIR_WS_IMAGES . $products_new['products_image'] . '" />' . "n";
print '    </div>' . "n";

Pour que le slide prenne en charge il est plus simple d'encader la totalité du code par une div nommé slideshow

Ensuite placé le bout de js apres tout ca:
Code: Tout sélectionner
<script type="text/javascript">
    function slideSwitch() {
      var $active = $('#slideshow div.active');

     if ( $active.length == 0 ) $active = $('#slideshow div:last');
      // use this to pull the images in the order they appear in the markup
     var $next =  $active.next().length ? $active.next()
   : $('#slideshow div:first');
      $active.addClass('last-active');
      $next.css({opacity: 0.0})
   .addClass('active')
   .animate({opacity: 1.0}, 1000, function() {
       $active.removeClass('active last-active');
    });
 }

 $(function() {
      setInterval( "slideSwitch()", 5000 );
 });

</script>

Ne pas oublier le css. Et l'appel dans le header du jquery.

Il est aussi necessaire de placer le necessaire a un code valide dans le js inclus dans la page .

Ca vous aides ?
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 » Mer 08 Juil 2009, 12:14

Merci Oscim

Je vais essayer ca rapidement et vous tient informer
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 » Jeu 09 Juil 2009, 23:19

Oscim,

J 'ai tente plusieurs truc dont ca
Code: Tout sélectionner
<?php


  if ($random_product = tep_random_select("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 class="boxes">
<?php while($random_product = tep_db_fetch_array($tep_random_result)) {
  print '    <div>' . "n";
 print '      <title>' . htmlentities(tep_get_products_name($random_product['products_id'])) . '</title>'. "n";
print '      <img src="' . HTTP_SERVER.DIR_WS_CATALOG.DIR_WS_IMAGES . $random_product['products_image'] . '" />' . "n";
print '    </div>' . "n";
}?>
<script type="text/javascript">
        function slideSwitch() {
        var $active = $('#slideshow div.active');

        if ( $active.length == 0 ) $active = $('#slideshow div:last');
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
        : $('#slideshow div:first');
        $active.addClass('last-active');
        $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });

</script>
</div>

<?php
  }
?>

mais j'ai cette erreur que je comprends pas

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /homepages/9/d181590525/htdocs/XXXX/btq/includes/functions/database.php on line 151

As tu une idée ?
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 » Ven 10 Juil 2009, 10:01

Bonjour,

L'erreur retourné indique que le résultat sql doit certainement être vide.

Il serait souhaitable d'essayer le requete sur phpmyadmin, pour verifier qu'elle est ok.
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 » Ven 10 Juil 2009, 13:28

Bonjour,

Ca ne vient pas de la requête.
De plus il s'agit de celle utilisée dans la boxe specials qui elle marche
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 » Ven 10 Juil 2009, 15:54

Normal!

tu place en arguement de tep_db_fetch_array($tep_random_result), la variable $tep_random_result, que tu n'initailaise pas.

Et tu ecrase le resultat de$random_product = tep_random_select( ... par $random_product = tep_db_fetch_array(.

Donc plutot
Code: Tout sélectionner
$tep_random_result = tep_random_select("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)
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 » Dim 12 Juil 2009, 20:14

Bonjour,

Merci pour les infos, ca m'a permis d'avancer et de comprendre un peu mieux.

J'ai désormais les images et un seul s'affiche mais par contre pas de défilement.
Je pense que c'est logique puis que quand je regarde l'exemple de a-simple-jquery-slideshow, je suis censé avoir une image avec la class active.
Or moi je ne trouve pas cette class lorsque j'affiche le code html

Code: Tout sélectionner
<?php

 $tep_random_result = 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="slideshow">


      <?php while($random_product = tep_db_fetch_array($tep_random_result)) {
           print '    <div>' . "n";
          print '      <title>' . htmlentities(tep_get_products_name($random_product['products_id'])) . '</title>'. "n";
          print '      <img src="' . HTTP_SERVER.DIR_WS_CATALOG.DIR_WS_IMAGES . $random_product['products_image'] . '" />' . "n";
         print '    </div>' . "n";
     }?>


<script type="text/javascript">
        function slideSwitch() {
        var $active = $('#slideshow div.active');

        if ( $active.length == 0 ) $active = $('#slideshow div:last');
        // use this to pull the images in the order they appear in the markup
        var $next =  $active.next().length ? $active.next()
        : $('#slideshow div:first');
        $active.addClass('last-active');
        $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });

</script>
</div>

Faut il mettre un arguemnt dans la fonction slideSwitch() ou autre chose ?
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 » Lun 13 Juil 2009, 15:40

Bonjour,

Place le JS en dehors du div sur lesquel l'appel est produit, donc slideswhow.

A placer juste apres.
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 » Mer 15 Juil 2009, 23:31

Bonjour,

Tout d'abord un grand merci Oscim pour ton aide.

voici le code pour ceux que ca intéresse (attention lire commentaire a la fin du message)
Includes/box/XXX.php
Code: Tout sélectionner
<?php
/*
  $Id: defilspecials.php,v 1.1.1.1 2005/05/03 15:20:36 manmachine Exp $
+-----------------------------------------------------------------------+
|                  osCSS Open Source E-commerce                         |
+-----------------------------------------------------------------------+
| Copyright (c) 2005 The osCSS developers                               |
|                                                                       |
| http://www.oscss.org                                       |
|                                                                       |
| adaptation de simply slideshow_jquery                                   |
|http://jonraasch.com/blog/a-simple-jquery-slideshow                |
| Portions Copyright (c) 2003 osCommerce                                |
+-----------------------------------------------------------------------+
| This source file is subject to version 2.0 of the GPL license,        |
| available at the following url:                                       |
| http://www.oscss.org/license/2_0.txt.                      |
+-----------------------------------------------------------------------+
*/
        $tep_random_result = 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, s.products_id 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);
      $minid_query = tep_db_query("select min(products_id) products_id from " . TABLE_SPECIALS);
      $minid = tep_db_fetch_array($minid_query)

      ?>
     
     
<div class="boxes">
   <h4 class="<?php echo $language ;?>"><?php echo BOX_HEADING_SPECIALS ;?></h4>

<div id="slideshow">
      <?php while($random_product = tep_db_fetch_array($tep_random_result, $minid)) {
       if ($random_product['products_id'] == $minid['products_id']) {
          print '    <div class="active">';
     }
     else {
        print '    <div>';}

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

          print '    </div>';
     
      }?>


</div></div>
<script type="text/javascript">

/***
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/
 
function slideSwitch() {
    var $active = $('#slideshow DIV.active');
 
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
 
    // use this to pull the divs in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');
 
    // uncomment below to pull the divs randomly
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );
 
 
    $active.addClass('last-active');
 
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
 
$(function() {
    setInterval( "slideSwitch()", 5000 );
});
 
</script>

Le css :

Code: Tout sélectionner
#slideshow {
    position:relative;
    height:400px;
}
 
#slideshow div {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 400px;
 

}
 
#slideshow div.active {
    z-index:10;
    opacity:1.0;
}
#slideshow div.active p{
    z-index:10;
    opacity:1.0;
  background-color:#9F0;
}

#slideshow div.active a{
    z-index:10;
    opacity:1.0;
  background-color:#9F0;
}

 
#slideshow div.last-active {
    z-index:9;
  /*visibility:hidden;
  background-color:#600;*/

}
#slideshow div.last-active p {
    z-index:9;
 /*visibility:hidden;*/
 
}

#slideshow div.last-active a {
    z-index:9;
 /*visibility:hidden;*/
 
}

 
#slideshow div img {
    height: 200px;
    display: block;
    border: 0;
    margin-bottom: 10px;
}

Reste plus qu'un problème d'affichage du prix.

Je n'ai pas le sigle euro qui apparait mais "5.85&nbsp;&euro;"
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 j4k » Jeu 16 Juil 2009, 10:38

essaie d'enlever les htmlentity sur les lignes concernant les prix :

Code: Tout sélectionner
print '      <del>' . $currencies->display_price($random_product['products_price'], tep_get_tax_rate($random_product['products_tax_class_id'])) . '</del>';
print '      <span class="productSpecialPrice">' . $currencies->display_price($random_product['specials_new_products_price'], tep_get_tax_rate($random_product['products_tax_class_id'])) . '</span></p>';
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar chever » Jeu 16 Juil 2009, 12:47

Merci pour la solution J4k
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 j4k » Jeu 16 Juil 2009, 22:38

[resolu] ?
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar Hesius » Ven 17 Juil 2009, 21:20

Bjr,
validation 100% ajouter un espace avant " alt"
<img src="' . HTTP_SERVER.DIR_WS_CATALOG.DIR_WS_IMAGES . $random_product['products_image'] . '"alt="'
sinon ça peut générer un truc du style
XML Parsing Error: attributes construct error

Cette petite boxe est vraiment très bien et très adaptable.. bravo à vous deux!!
Hesius
Membre inactif
 
Messages: 6
Inscription: Dim 05 Juil 2009, 21:45

Suivante

Retourner vers Design

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron