Carrousel

Messagepar Rwan » Mar 09 Juin 2009, 22:57

Voici un topic en 4 étapes afin d'intégrer à votre template un carrousel d'une selection produits.
Vous trouverez sur le site http://www.flshow.net/ les rendus, différents exemples, explications et réglages.

Installation :
------------
1- Téléchargez le zip ICI, décompactez le et placez le fichier Carrousel.swf sur la racine de votre site.
2- Créez le fichier carrousel.php sur la racine et placez le contenu suivant :

carrousel.php

Code: Tout sélectionner
require('includes/application_top.php');
echo '<?xml version="1.0" encoding="utf-8"?>'."n";
echo '<!-- fhShow Carousel 2.0 configuration file'."n";
echo '    Please visit http://www.flshow.net/ -->'."n";
 echo '<slide_show>'."n";
echo '    <options>'."n";
echo '        <debug>false</debug>                <!-- true, false -->'."n";
echo '        <background>#ececec</background>    <!-- #RRGGBB, transparent -->'."n";
echo '        <friction>5</friction>              <!-- [1,100] -->'."n";
echo '        <fullscreen>false</fullscreen>      <!-- true, false -->'."n";
echo ' '."n";
echo '        <margins>'."n";
echo '            <top>0</top>                                <!-- [-1000,1000] pixels -->'."n";
echo '            <left>0</left>                              <!-- [-1000,1000] pixels -->'."n";
echo '            <bottom>0</bottom>                          <!-- [-1000,1000] pixels -->'."n";
echo '            <right>0</right>                            <!-- [-1000,1000] pixels -->'."n";
echo '            <horizontal_ratio>33%</horizontal_ratio>    <!-- [1,50] a photo may occupy at most horizontalRatio percent of the Carousel width -->'."n";
echo '            <vertical_ratio>50%</vertical_ratio>        <!-- [1,100] a photo may occupy at most verticalRatio percent of the Carousel height -->'."n";
echo '        </margins>'."n";
echo ' '."n";
echo '        <interaction>'."n";
echo '            <rotation>mouse</rotation>            <!-- auto, mouse, keyboard -->'."n";
echo '            <view_point>mouse</view_point>        <!-- none, mouse, keyboard -->'."n";
echo '            <speed>90</speed>                     <!-- [-360,360] degrees per second -->'."n";
echo ' '."n";
echo '            <default_speed>15</default_speed>             <!-- [-360,360] degrees per second -->'."n";
echo '            <default_view_point>20%</default_view_point>  <!-- [0,100] percentage -->'."n";
echo '            <reset_delay>30</reset_delay>                 <!-- [0,600] seconds, 0 means never reset -->'."n";
echo '        </interaction>'."n";
echo ' '."n";
echo '        <far_photos>'."n";
echo '            <size>50%</size>                  <!-- 0,100 percentage -->'."n";
echo '            <amount>50%</amount>              <!-- 0,100 percentage -->'."n";
echo '            <blur>10</blur>                   <!-- 0,100 amount -->'."n";
echo '            <blur_quality>3</blur_quality>    <!-- 1,3 1=low - 3=high -->'."n";
echo '        </far_photos>'."n";
echo ' '."n";
echo '        <reflection>'."n";
echo '            <amount>100</amount>      <!-- [0,1000] pixels -->'."n";
echo '            <blur>2</blur>            <!-- [0,100] blur amount -->'."n";
echo '            <distance>0</distance>    <!-- [-1000,1000] pixels -->'."n";
echo '            <alpha>0%</alpha>        <!-- [0,100] percentage -->'."n";
echo '        </reflection>'."n";
echo "n";
echo '        <titles>'."n";
echo '            <style>font-size: 12px; font-family: Verdana, _serif; color: #ff0000; font-weight:normal;</style>'."n";
echo '            <position>above center</position>           <!-- [above, below] [left,center,right]-->'."n";
echo ' '."n";
echo '            <background>yourimage.png</background>     <!-- image url -->'."n";
echo '            <scale9>10 10 10 10</scale9>               <!-- [0,1000] pixels -->'."n";
echo '            <padding>5 5 5 5</padding>                 <!-- [-1000,1000] pixels -->'."n";
echo '        </titles>'."n";
echo '    </options>'."n";
echo ' '."n";
echo '<!-- Photo list -->'."n";
$featured_products_array = array();
$featured_products_query_raw = "select p.products_id, pd.products_name, p.products_image, p.products_price, p.products_tax_class_id, IF(s.status, s.specials_new_products_price, NULL) as specials_new_products_price, p.products_date_added, m.manufacturers_name from " . TABLE_PRODUCTS . " p left join " . TABLE_MANUFACTURERS . " m on p.manufacturers_id = m.manufacturers_id left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id and pd.language_id = '" . $languages_id . "' left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id left join " . TABLE_FEATURED . " f on p.products_id = f.products_id where p.products_status = '1' and f.status = '1' order by p.products_date_added DESC, pd.products_name"; 
$a=0;
$s_id = tep_session_id();
    $featured_products_query = tep_db_query($featured_products_query_raw);
  while ($featured_products = tep_db_fetch_array($featured_products_query)) {

    $featured_products_array[] = array('id' => $featured_products['products_id'],
    'name' => htmlspecialchars($featured_products['products_name']),
   'image' => $featured_products['products_image'],
   'price' => $featured_products['products_price'],
   'tax_class_id' => $featured_products['products_tax_class_id']);
   $a++;
  }
for ($i=0; $i < $a ;$i++){
echo "<photo>"."n";
echo "<href>product_info.php?products_id=".$featured_products_array[$i]['id']."</href>"."n";
echo "<target>_self</target>"."n";
echo "<title>" . $featured_products_array[$i]['name'] . " ". $currencies->display_price($featured_products_array[$i]['price'],tep_get_tax_rate($featured_products_array[$i]['tax_class_id'])) . " Euros </title>"."n";
echo "<src>" . $HTTP_SERVER . "/images/".$featured_products_array[$i]['image']."</src>"."n";
echo "</photo>"."n";
}
echo "</slide_show>";
?>

Wiki des options : http://www.flshow.net/dokuwiki/doku.php?id=carousel:options
Wiki mise en forme photos : http://www.flshow.net/dokuwiki/doku.php?id=carousel:photos_and_links
Dans cet exemple, j'affiche une seléction produits de la contribution oscommerce. Vous pouvez aussi installer ce plugin featured.
Vous pouvez modifier la requête pour par exemple y afficher vos promos.

3- Editez votre template et insérez le code suivant avant l'affichage du contenu :

templates/Votre_template/template.php

Code: Tout sélectionner
<div id="carrousel"><object width="750" height="150"
  type="application/x-shockwave-flash"
  data="Carousel.swf">
  <param name="movie" value="Carousel.swf" />
  <param name="bgcolor" value="#ffffff" />
  <param name="flashvars" value="xmlfile=carrousel.php&loaderColor=#0000FF" />
</object></div>

4- Insérez le code suivant dans le fichier index.css de votre template :

templates/Votre_template/css/index.css

Code: Tout sélectionner
div#carrousel {text-align:center;}

voili voilà.
OSCSS 1.2.1 - PHP Version 5.2.5-pl1-gentoo - MySQL 5.0.44-log
contribs :
captcha for contact_us.php, visitors v2.3a, featured products v1.1, Easypopulate 2.76g-ms2, quick updates v2.4, define mainpage v1.2, paiement Sips ATOS e-transaction Credit Agricole, paiement mandatorder v1.10, down for maintenance...
Rwan
Contributeurs
 
Messages: 29
Inscription: Mar 17 Juin 2008, 21:38

Messagepar j4k » Mer 10 Juin 2009, 00:31

joli travail :)

il va falloir en faire un plugin !
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar cynic- » Mer 02 Juin 2010, 19:16

Attention (dans cette version comme sur le wiki) il faut utiliser swfobject version 2 et pas l'obsolète version 1. Sinon, message d'erreur du plugin !
Disponible ici :
http://code.google.com/p/swfobject/down ... p&can=2&q=
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar oscim » Jeu 03 Juin 2010, 10:31

merci cynic,

Je ne l'avais pas vu passer celui la.

Pour reprendre remarque j4k, oui, oui, il va falloir faire un plugins...
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 cynic- » Mer 28 Juil 2010, 12:22

Je suis en train de coupler le plugin featured products et ce Carousel en Flash, pour osCss 1.2.2
Pas très difficile, nécessite cependant quelques mises à jour empruntées à specials.php notamment le calendrier pour les dates de début et d'expiration dans l'admin.

Je pense poster cela fin août, eh oui entretemps, il y a les congés :bab:

TO DO :

  • finir traduction française
  • adaptation du fichier admin/select_featured.php
  • màj traduction anglaise
  • voir pourquoi select_featured.php affiche les produits "déjà featured" en résultats de recherche


*contribution oscommerce originale :
http://www.oscommerce.com/community/contributions,651
Dernière édition par cynic- le Mer 28 Juil 2010, 12:33, édité 1 fois.
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar oscim » Mer 28 Juil 2010, 12:25

Salut
Quand tu seras prêt a publier , dit le moi, je te ferais un acces sur spip.

Bientot les vacances ?
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 cynic- » Mer 28 Juil 2010, 12:35

Salut, je te préviendrai, merci.
Oui un peu de repos en août ne me fera pas de mal :)
Et toi ? (ça sent le topic sur le bar ça) :D
Dernière édition par cynic- le Mer 28 Juil 2010, 12:36, édité 1 fois.
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar oscim » Mer 28 Juil 2010, 12:40

oui,....;

bientot effectivement , un petit post sur le bar, mais je pense que tu sera en vacances quand ca arrivera :mafio:

Tu verra ca à la rentrée, pour la 2.1, la encore en travaux :travaux:
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

Re: Carrousel

Messagepar Rwan » Ven 03 Déc 2010, 13:08

Bonjour,
voici une modif pour ceux qui ne disposent pas du plugin des produits "featured" et qui veulent plutôt adapter le carrousel à leur promos "specials".
J'ai aussi remplacé la variable "$featured_products" par "$carrousel_products" pour à terme avoir la main de tous les paramètres dans l'admin et aussi de pouvoir sélectionner soit les promos ou soit les produits présentés.

Le code en entier carroussel.php :

Code: Tout sélectionner
<?php
/**
  @ $Id: carrousel
  @licence GPL 2005-2010  The osCSS developers - osCSS Open Source E-commerce
  @portion code Copyright (c) 2002 osCommerce
  @version original
  @author Rwan <www http://forums.oscss.org>
  @Released under the GNU General Public License
*/
require('includes/application_top.php');

echo '<?xml version="1.0" encoding="utf-8"?>'."\n";
echo '<!-- fhShow Carousel 2.0 configuration file'."\n";
echo '    Please visit http://www.flshow.net/ -->'."\n";
 
echo '<slide_show>'."\n";
echo '    <options>'."\n";
echo '        <debug>false</debug>                <!-- true, false -->'."\n";
echo '        <background>#ececec</background>    <!-- #RRGGBB, transparent -->'."\n";
echo '        <friction>100</friction>              <!-- [1,100] -->'."\n";
echo '        <fullscreen>false</fullscreen>      <!-- true, false -->'."\n";
echo ' ';
echo '        <margins>'."\n";
echo '            <top>0</top>                                <!-- [-1000,1000] pixels -->'."\n";
echo '            <left>0</left>                              <!-- [-1000,1000] pixels -->'."\n";
echo '            <bottom>0</bottom>                          <!-- [-1000,1000] pixels -->'."\n";
echo '            <right>0</right>                            <!-- [-1000,1000] pixels -->'."\n";
echo '            <horizontal_ratio>33%</horizontal_ratio>    <!-- [1,50] a photo may occupy at most horizontalRatio percent of the Carousel width -->'."\n";
echo '            <vertical_ratio>60%</vertical_ratio>        <!-- [1,100] a photo may occupy at most verticalRatio percent of the Carousel height -->'."\n";
echo '        </margins>'."\n";
echo ' ';
echo '        <interaction>'."\n";
echo '            <rotation>mouse</rotation>            <!-- auto, mouse, keyboard -->'."\n";
echo '            <view_point>mouse</view_point>        <!-- none, mouse, keyboard -->'."\n";
echo '            <speed>50</speed>                     <!-- [-360,360] degrees per second -->'."\n";
echo ' ';
echo '            <default_speed>15</default_speed>             <!-- [-360,360] degrees per second -->'."\n";
echo '            <default_view_point>20%</default_view_point>  <!-- [0,100] percentage -->'."\n";
echo '            <reset_delay>30</reset_delay>                 <!-- [0,600] seconds, 0 means never reset -->'."\n";
echo '        </interaction>'."\n";
echo ' ';
echo '        <far_photos>'."\n";
echo '            <size>50%</size>                  <!-- 0,100 percentage -->'."\n";
echo '            <amount>50%</amount>              <!-- 0,100 percentage -->'."\n";
echo '            <blur>25</blur>                   <!-- 0,100 amount -->'."\n";
echo '            <blur_quality>2</blur_quality>    <!-- 1,3 1=low - 3=high -->'."\n";
echo '        </far_photos>'."\n";
echo ' ';
echo '        <reflection>'."\n";
echo '            <amount>0</amount>      <!-- [0,1000] pixels -->'."\n";
echo '            <blur>2</blur>            <!-- [0,100] blur amount -->'."\n";
echo '            <distance>10</distance>    <!-- [-1000,1000] pixels -->'."\n";
echo '            <alpha>50%</alpha>        <!-- [0,100] percentage -->'."\n";
echo '        </reflection>'."\n";
echo "\n";
echo '        <titles>'."\n";
echo '            <style>font-size: 11px; font-family: Verdana, _serif; color: #ff0000; font-weight:bold;</style>'."\n";
echo '            <position>above left</position>           <!-- [above, below] [left,center,right]-->'."\n";
echo ' ';
echo '            <background>yourimage.png</background>     <!-- image url -->'."\n";
echo '            <scale9>10 10 10 10</scale9>               <!-- [0,1000] pixels -->'."\n";
echo '            <padding>5 5 5 5</padding>                 <!-- [-1000,1000] pixels -->'."\n";
echo '        </titles>'."\n";
echo '    </options>'."\n";
echo ' ';
echo '<!-- Photo list -->'."\n";

$carrousel_products_array = array();
$carrousel_products_query_raw = "select p.products_id, pd.products_name, p.products_image, p.products_price, p.products_tax_class_id, IF(s.status, s.specials_new_products_price, NULL) as specials_new_products_price, p.products_date_added, m.manufacturers_name from " . TABLE_PRODUCTS . " p left join " . TABLE_MANUFACTURERS . " m on p.manufacturers_id = m.manufacturers_id left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id and pd.language_id = '" . $languages_id . "' left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id where p.products_status = '1' and s.status = '1' order by p.products_date_added DESC, pd.products_name";
 
   
$a=0;
$s_id = tep_session_id();
    $carrousel_products_query = tep_db_query($carrousel_products_query_raw);
  while ($carrousel_products = tep_db_fetch_array($carrousel_products_query)) {

    $carrousel_products_array[] = array('id' => $carrousel_products['products_id'],
      'name' => htmlspecialchars($carrousel_products['products_name']),
      'image' => $carrousel_products['products_image'],
      'price' => html_entity_decode($carrousel_products['products_price']),
      'tax_class_id' => $carrousel_products['products_tax_class_id']);
      $a++;

  }

 
  for ($i=0; $i < $a ;$i++){
   
echo "<photo>"."\n";
echo "<href>product_info.php?products_id=".$carrousel_products_array[$i]['id']."</href>"."\n";
echo "<target>_self</target>"."\n";
echo "<title>" . $carrousel_products_array[$i]['name'] . " ". $currencies->display_price($carrousel_products_array[$i]['price'],tep_get_tax_rate($carrousel_products_array[$i]['tax_class_id'])) . " Euros </title>"."\n";
echo "<src>" . $HTTP_SERVER . "/images/".$carrousel_products_array[$i]['image']."</src>"."\n";
echo "</photo>"."\n";
 
}
  echo "</slide_show>";
?>


Pour plus de détails, le changement se situe surtout au niveau de la requête.
La requête du code d'origine :

Code: Tout sélectionner
$featured_products_array = array();
$featured_products_query_raw = "select p.products_id, pd.products_name, p.products_image, p.products_price, p.products_tax_class_id, IF(s.status, s.specials_new_products_price, NULL) as specials_new_products_price, p.products_date_added, m.manufacturers_name from " . TABLE_PRODUCTS . " p left join " . TABLE_MANUFACTURERS . " m on p.manufacturers_id = m.manufacturers_id left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id and pd.language_id = '" . $languages_id . "' left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id left join " . TABLE_FEATURED . " f on p.products_id = f.products_id where p.products_status = '1' and f.status = '1' order by p.products_date_added DESC, pd.products_name";


est remplacée par ceci :

Code: Tout sélectionner
$carrousel_products_array = array();
$carrousel_products_query_raw = "select p.products_id, pd.products_name, p.products_image, p.products_price, p.products_tax_class_id, IF(s.status, s.specials_new_products_price, NULL) as specials_new_products_price, p.products_date_added, m.manufacturers_name from " . TABLE_PRODUCTS . " p left join " . TABLE_MANUFACTURERS . " m on p.manufacturers_id = m.manufacturers_id left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id and pd.language_id = '" . $languages_id . "' left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id where p.products_status = '1' and s.status = '1' order by p.products_date_added DESC, pd.products_name";
 


Simple à appliquer et à installer tout en agrémentant votre site commercial en cette fin d'année. ;)

EDIT : un bug pour l'affichage du prix en Euros qui affiche des caractères encodés html...
J'ai corrigé et remplacé :

[quote]
Code: Tout sélectionner
$carrousel_products_array[] = array('id' => $carrousel_products['products_id'],
      'name' => htmlspecialchars($carrousel_products['products_name']),
      'image' => $carrousel_products['products_image'],
      'price' => htmlspecialchars($carrousel_products['products_price']),
      'tax_class_id' => $carrousel_products['products_tax_class_id']);


par

Code: Tout sélectionner
$carrousel_products_array[] = array('id' => $carrousel_products['products_id'],
      'name' => htmlspecialchars($carrousel_products['products_name']),
      'image' => $carrousel_products['products_image'],
      'price' => html_entity_decode($carrousel_products['products_price']),
      'tax_class_id' => $carrousel_products['products_tax_class_id']);

Notez que la fonction "html_entity_decode()" ne fonctionne qu'à partir de PHP 5.0.0
http://www.php.net/manual/fr/function.html-entity-decode.php

voili voilou
Dernière édition par Rwan le Ven 10 Déc 2010, 15:55, édité 2 fois.
OSCSS 1.2.1 - PHP Version 5.2.5-pl1-gentoo - MySQL 5.0.44-log
contribs :
captcha for contact_us.php, visitors v2.3a, featured products v1.1, Easypopulate 2.76g-ms2, quick updates v2.4, define mainpage v1.2, paiement Sips ATOS e-transaction Credit Agricole, paiement mandatorder v1.10, down for maintenance...
Rwan
Contributeurs
 
Messages: 29
Inscription: Mar 17 Juin 2008, 21:38

Re: Carrousel

Messagepar oscim » Ven 03 Déc 2010, 14:27

Cool

Merci de cette contrib.

Tu ne veut pas publier sur le wiki ?

Confirme le moi par MP, avec ton mail, et je te donne un acces sur spip , pour le rediger :)
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


Retourner vers Plugin

Qui est en ligne

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