12dic

Aggiungere Cu3er in Magento

Di , dicembre 12th, 2009 | Magento | 17 Commenti

In un articolo di qualche giorno fa abbiamo presentato il magnifico slide CU3ER, ora vediamo come installare e rendere funzionale questo fantastico slider flash nella home page di un e-commerce costruito con Magento per rendere il sito di sicuro effetto per i nostri potenziali clienti. Prima di tutto come sempre occorre fare backup di tutti i file che andremo a modificare, dopo scarichiamo lo slide Cu3er direttamente dalla home page dell’ideatore.

Tutorial – Magento e Cu3er

Nel pannello di controllo del nostro sito Magento andiamo in CMS>Amministra pagine>Home page ed aggiugiamo il codice seguente nella nostra home page:

<reference name="top_slider">
<block type="cms/block" name="cu3er">
<action method="setBlockId">
<block_id>cu3er</block_id>
</action>
</block
</reference>

Ora è il momento di creare un blocco statico, andiamo sempre in CMS>Blocchi statici e creiamo un nuovo blocco statico, chiamiamolo cu3er e inseriamo all’interno questo codice:

<script type="text/javascript" src="{{skin url=""}}cu3er/js/swfobject/swfobject.js"></script>
 
<script type="text/javascript">
var flashvars = {};
flashvars.xml = "{{skin url=""}}cu3er/config.xml";
flashvars.font = "Arial";
var attributes = {};
attributes.wmode = "transparent";
attributes.id = "slider";
swfobject.embedSWF("{{skin url=""}}cu3er/cu3er.swf", "cu3er-container", "925", "200", "9", "{{skin url=""}}cu3er/js/expressInstall.swf", flashvars, attributes);
</script>
<style type="text/css">
<!--
body { margin: 0% auto; text-align:center;}
#cu3er-container {width:925px; outline:0;}
-->
</style>
<div id="cu3er-container">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>

Ora è arrivato il momento di configurare il file xml che farà funzionare lo slide Cu3er, inserendo quindi i percorsi dei file immagine e le opzioni di slide, il codice xml seguente potrà essere personalizzato a seconda delle vostre esigenze, il file è presente nel pacchetto di Cu3er che scaricherete, questo è solo un esempio di come lo potrete utilizzare:

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
    <settings>
 
    </settings>    
 
    <slides>
 
        <slide>
            <url>http://www.mysite.com/cu3er/images/slider1.jpg</url>
        </slide>
        <!-- changing transition beetween first &#038; second slide -->
<transition num="3" slicing="vertical" direction="down"/>
        <slide>
               <url>http://www.mysite.com/cu3er/images/slider2.jpg</url>
        </slide>
        <!-- changing transition beetween second &#038; third slide -->
<transition num="4" direction="right" shader="flat" />
        <slide>
            <url>http://www.mysite.com/cu3er/images/slider3.jpg</url>
        </slide>
<transition num="10" slicing="vertical" direction="down" duration=".6" delay=".3" shader="none" cube_color="0x333333" z_multiplier="4" />
        <!-- transitions properties defined in transitions template -->
        <slide>
               <url>http://www.mysite.com/cu3er/images/slider4.jpg</url>
        </slide>
<transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" />
        <slide>
               <url>http://www.mysite.com/cu3er/images/slider5.jpg</url>
        </slide>
<transition num="3" slicing="vertical" direction="down"/>
                <slide>
               <url>http://www.mysite.com/cu3er/images/slider6.jpg</url>
        </slide>
<transition num="4" direction="right" shader="flat" />
        <slide>
               <url>http://www.mysite.com/cu3er/images/slider7.jpg</url>
        </slide>
<transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" />
        <slide>
               <url>http://www.mysite.com/cu3er/images/slider8.jpg</url>
        </slide>
        <slide>
               <url>http://www.mysite.com/cu3er/images/slider9.jpg</url>
        </slide>
 
    </slides>
</cu3er>

Ora copiamo copiamo il contenuto della cartella Cu3er che abbiamo scarico in questo percorso: /skin/frontend/default/tuo tema/, il gioco è fatto.

Tutorial – Magento e Cu3er – Compatibilità con tutti i browser

Seguendo la prima parte del nostro tutorial avrete di sicuro notato che con Firefox lo slide non viene visualizzato a causa di alcune incompatibilità con il codice che richiamo lo script flash. Ecco di seguito il modo per richiamare il codice e renderlo compatibile con tutti i browser.
Occhio sempre ai percorsi dei file, bisogna cambiarli altrimenti non funzionerà nulla

<script type="text/javascript" src="{{skin url='images/flash/cu3er/js/swfobject/swfobject.js}}"></script>
 
<object classid="clsid:cu3er.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="897" height="300"><param name=movie value="{{skin url='images/flash/cu3er/cu3er.swf'}}"><param name=quality value=high><param name="wmode" value="transparent"><param name="id" value="slider"><param name="FlashVars " value="xml={{skin url='images/flash/cu3er/config.xml}}"><embed src="{{skin url='images/flash/cu3er/cu3er.swf'}}" quality=high wmode="transparent" id="slider" FlashVars="xml={{skin url='images/flash/cu3er/config.xml}}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="897" height="300"></embed></object> 
 
Notate nello script che bisogna copiare la cartella cuber nella cartella images e flash del vostro tema.
Ideatore e creatore di My-Webmagazine.com, sito attivo dal 2007

17 commenti

  • Pingback: Add cub3r to Wordpress theme | My-WebMagazine.com

  • Dario Says: febbraio 8, 2010 at 1:07 pm

    Ho provato a seguire la guida per installare cu3er su magento, ma purtroppo non funge, nella home page viene visualizzato solo il nome del blocco ma non il blocco.
    Quindi c’è qualcosa che ancora manca.

  • Stew Says: febbraio 8, 2010 at 4:20 pm

    su quali browser hai provato?

  • Dario Says: febbraio 9, 2010 at 8:52 pm

    Ho provato sia su firefox che su explorer ma nulla, niente da fare..
    Forse manca qualcosa?

  • Stew Says: febbraio 10, 2010 at 1:51 pm

    Si manca un pezzo di codice che però rende compatibile il tutto in in Firefox se a te non funge nemmeno in IE significa che hai fatto qualche errore, devo cmq aggiornare l’articolo.

  • Dario Says: febbraio 10, 2010 at 2:53 pm

    Qualcuno mi ha detto che la prima parte di codice, quella che dici di inserire in CMS>Amministra pagine>Home page , in realtà vada inserita nel file xml presente in app/design/frontend/default/mio tema/layout/un file xml
    Giusto secondo te?

  • Stew Says: febbraio 10, 2010 at 3:15 pm

    Non mi risulta, cmq hai riprovato ad eseguire da capo?

  • Stew Says: febbraio 10, 2010 at 3:22 pm

    Io personalmente ho avuto problemi ad inserire il percorso delle immagini, che consiglio di metterlo assoluto.

    Vi è poi un altro modo per inserire lo slider, compatibile con tutti i browser, creo lo aggiungo ora di seguito al tutorial.

  • Dario Says: febbraio 10, 2010 at 3:25 pm

    Stasera da casa riprovo a rifare tutta la procedura da capo, credo possa dipendere anche dal percorso delle img ma alla fine il problema grande è anche dovuto dal fatto che vedo in home solo il nome dell’id del blocco (cu3er) e nulla più

  • Stew Says: febbraio 10, 2010 at 3:35 pm

    Come puoi vedere ho aggiunto un altra parte al tutorial, devi cmq sapere che è molto importante stare attenti al percorso di tutti i file, io ho avuto problemi con quello.

  • Dario Says: febbraio 10, 2010 at 3:39 pm

    Spetta tentiamo di ricapitolare, di modo che possa essere utile anche ad altri.
    Dopo la prima parte, il blocco statico con il nuovo codice, e il file xml con le opportune modifiche, i file di cu3er vanno copiati da soli nei vari percorsi o va messa direttamente la cartella nella cartella del tema in uso?

  • Dario Says: febbraio 10, 2010 at 3:43 pm

    Perchè da quello che vedo nei percorsi che vengono richiamati, viene salvata tutta la cartella e quindi puntata e non solo i file contenuti in essa.

  • Stew Says: febbraio 10, 2010 at 3:45 pm

    esatto devi mettere la cartella cu3er nel nuovo percorso, se leggi il codice è chiaro.

  • Dario Says: febbraio 10, 2010 at 3:50 pm

    Possibile che qui non si inviino i mex privati?

  • Stew Says: febbraio 10, 2010 at 4:30 pm

    Azzo solo quello manca!

  • Dario Says: febbraio 10, 2010 at 6:03 pm

    Provato proprio ora, continua a non funzionare…
    Tu puoi prendere la mia mail dall’iscrizione? se si, scrivimi li che ti mando il contatto msn…perchè davvero pare non uscirne fuori da questa installazione..probabilmente anzi sicuramente sbaglio qualcosa io, ma non riesco a capire cosa.

  • Stew Says: febbraio 11, 2010 at 4:40 pm

    Se non va l’errore c’è, a me alla fine ha funzionato.
    Prova a scaricare, l’ultimo flash player ed aggiornare la cache dei browser che usi.
    Provando si capisce quale sia il problema.

Lascia commento

Assicurati di inserire le informazioni richieste dove indicato * . I commenti sono moderati - e rel = "nofollow" è in uso. Si prega di non cadere link, nessuna parola chiave o domini come nomi, non è spam, e non pubblicizzare!

Back to top

Chi Siamo

My-Webmagazine.com, si occupa da anni di posizionamento, attraverso un network sempre attivo e funzionale. Le migliori idee anche le più geniali hanno bisogno di farsi conoscere in qualche modo, My-Webmagazine.com ti permette di farlo a costo zero.

Ultime da Twitter

Altri siti del network

Webdiv.it

Skype

Add me to Skype - Stefano: Non in linea