Documentazione Magento 

1. Creare un database

Prima di tutto è necessario preparare un nuovo database per il tuo store Magento. Puoi creare il nuovo database utilizzando lo strumento di gestione database del pannello di controllo del tuo servizio hosting (solitamente PhpMyAdmin).

Nella creazione del database saranno ricevuti i seguenti dati: nome database, nome utente database, password e nome del tuo server. Sarà necessario salvare tutte queste informazione, perché saranno poi necessarie nel prosieguo dell'installazione.

Con lo strumento phpMyAdmin, sarai in grado di creare un nuovo database in 3 semplici passi (vedi le slide di seguito):

1. Clicca sul pulsante Database sul menù di navigazione in alto per accedere alla lista di database.
2. Inserisci il nome del database nel campo "Create new database".
3. Clicca sul pulsante Create sul lato destro.

Adesso dovresti essere in grado di vedere il tuo database nella lista dei database. Clicca sul suo nome per accedervi:

Qui puoi anche vedere una guida video su Come creare un database

2. Importazione Dati Campione

Il pacchetto del template Magento include il file con i dati campione (dump.sql o dump.gz). Questo file si trova nella cartella /sources/sample_data del tuo template. Ti permette di caricare i dati campione, in modo che il tuo sito web appaia esattamente come nel nostro template dimostrativo.

Per installare il file dump, segui questa procedura:

1. Accedi a PhpMyAdmin e seleziona il database che utilizzerai per Magento Commerce (Dovresti già averlo creato seguendo la procedura descritta qui in precedenza).
2. Naviga sulla scheda "Import" e clicca sul pulsante "Browse".
3. Trova la cartella "/sources/sample_data" nel tuo template e seleziona il file dump.sql.gz.
4. Clicca "GO". L'operazione di importazione potrà richiedere alcuni minuti.

3. Scaricare il motore dal sito ufficiale

Per installare Magento, devi scaricarne l'archivio dal sito ufficiale, su www.magentocommerce.com/download.

Seleziona il tipo di archivio dal menù a tendina e clicca su Download. Sarà necessario creare un account sul sito Magento, prima di poter scaricare il motore.

4. Estrarre i file

Una volta finito di scaricare, dovrai estrarre i file dal pacchetto motore Magento.

Lo si può fare con qualunque gestore di archivi, come WinZip(PC), StuffitExpander(MAC), ecc.

Puoi guardare questi video per ulteriori istruzioni su come estrarre i file dall'archivio con WinZip(PC) o StuffitExpander(MAC).

5. Caricare i file del motore Magento

Se hai estratto i file localmente sul tuo computer, dovrai ora caricarli sul server del tuo host.

Lo puoi fare utilizzando il pannello di controllo del servizio di hosting stesso, oppure con un qualsiasi gestore FTP, come FileZilla, TotalCommander, CureFTP, etc.

Per istruzioni più complete, puoi guardare questo video su Come caricare i file sul server utilizzando un gestore FTP e Come caricare i file sul server utilizzando cPanel (WebHost Manager, WHM).

6. Caricare i file del tema

La fase successiva nella procedura di setup, è l'installazione del template. Il template va installato in ogni caso, che si utilizzino o meno i dati campione.

1. Prima di tutto, apri il pacchetto template e vai sulla cartella theme###.
2. Carica i contenuti della cartella theme### sulla directory di installazione Magento (carica "app", "skin" e le altre cartelle). Queste cartelle contengono i file del tema, e non modificheranno i tuoi file pre-esistenti.
3. Se hai importato il file dump.sql.gz e vuoi utilizzare i dati campione del template, dovrai caricare le immagini del prodotto. Carica la cartella "media" dalla directory sources/sample_data sulla directory root di installazione Magento.
4. Se non avevi installato il file dump.sql.gz, non c'è bisogno di caricare la cartella "media".

7. Installazione motore Magento

Una volta terminato il caricamento dei file, potrai iniziare l'installazione del motore Magento. Apri il tuo browser, e nella barra degli indirizzi, digita il tuo 'nome di dominio/percorso verso la tua directory Magento'. A questo punto dovresti vedere la schermata di benvenuto. Per installare Magento, segui queste istruzioni.

Fase 1: Assistente Installazione

Leggi il contratto di licenza e clicca sulla casella "I agree to the above terms and conditions" se sei d'accordo con i termini del contratto.

Fase 2: Assistente Installazione (Localizzazione)

Seleziona località, fuso orario e valuta predefinita. L'opzione località definisce la lingua di backend del tuo negozio Magento. Se vuoi modificare la lingua di frontend, devi scaricare e installare le rispettive località frontend di Magento. Tutte le opzioni potranno comunque essere facilmente modificate in seguito utilizzando il pannello admin di Magento.

Fase 3: Configurazione

In questa fase dovrai inserire i dettagli di database del tuo negozio e definire alcune impostazioni iniziali. Database Connection – inserisci il nome dell'host del database, il nome utente, nome e password. Se non hai tutte le informazioni necessarie, contatta il tuo provider.

Assicurati di avere un database creato per l'installazione di Magento. Assicurati anche che sia vuoto, senza tabelle. Web Access Options e Session Storage Options – se non sei sicuro, lascia queste opzioni invariate. Di solito le impostazioni predefinite funzionano bene.

Se tutto è in ordine, clicca sul pulsante 'Continue'.

Fase 4: Crea Account Admin

In questa fase dovrai inserire alcune informazioni personali del proprietario e dell'amministratore dello store.

Quando hai finito, clicca su 'Continue'.

Fase 5: Tutto pronto

Questa è la fase finale dell'installazione. Copia la chiave di crittaggio generata e tienila al sicuro. Puoi usare i pulsanti all'angolo in basso a destra per vedere il frontend del tuo negozio e per il pannello di amministrazione.

Prima di tutto assicurati che la versione di Magento che stai installando sia compatibile con i requisiti del template. Se stai usando una versione datata di Magento, dovrai aggiornarla. Non dimenticare di fare il back up dei file e del database. Le istruzioni per l'aggiornamento di Magento sono disponibili sul sito Magento Wiki.

Se il tuo motore Magento è compatibile con i requisiti di template, puoi iniziare l'installazione del template.

1. Apri il pacchetto del template e vai sulla cartella theme###.
2. Carica i contenuti della cartella theme### sulla directory di installazione di Magento (carica "app", "skin" e altre cartella). Queste cartelle contengono i file del tema e non modificheranno i tuoi file pre-esistenti.

1. Configurazione del Template

Illustreremo la configurazione del template sulla base di questo esempio. È configurato allo stesso modo del nostro template Live Demo, senza influire sui dati dei prodotti.

Attiva il nuovo template

1. Apri il pannello di amministrazione di Magento e vai su System > Design nel menù in alto.
2. Clicca sul pulsante "Add Design Change".
3. Nel campo "Custom Design", seleziona il nome del tema (ad esempio, theme###).
4. Clicca su "Save" per confermare le modifiche.

Reindicizzazione dati

1. Apri il pannello di amministrazione di Magento e vai su System > Index Management.
2. Seleziona la casella "Select All" all'angolo in alto a sinistra.
3. Nel campo "Actions", seleziona "Reindex Data".
4. Clicca su "Submit".
5. Sii paziente, l'operazione potrebbe richiedere qualche minuto.

Disabilita la cache

Per fare in modo che le modifiche appaiano sul tuo sito web senza ritardi è necessario disabilitare la cache. In questo modo si evitano azioni ulteriori di pulitura della cache dopo ogni singola modifica apportata. Dopo aver concluso la fase di editing dello store, sarà possibile riabilitarla.

1. Apri il pannello di amministrazione di Magento e vai su System > Cache Management nel menù in alto.
2. Nel menù in alto a sinistra, clicca su "Select All".
3. Sul lato destro, nel campo "Actions", seleziona "Disable".
4. Clicca su "Submit".

2. Configurazione Logo.

Segui questa procedura quando vuoi impostare l'immagine del logo inclusa nel pacchetto del tema (puoi vederlo sulla pagina Live Demo).

1. Apri il pannello di amministrazione di Magento e vai su System > Configuration nel menù in alto.
2. Seleziona la scheda "Design".
3. Nella sezione "Header", modifica il valore nel campo "Logo Image Src", cambiandolo da "gif" a "png".
4. Clicca su "Save Config".

Per aggiungere il logo della tua compagnia, è necessario caricare l'immagine del logo sulla cartella /images del tuo tema Magento.

3. Configurazione Pagine

Per fare in modo che il tuo template appaia esattamente come nella nostra Live Demo, sarà necessario impostare le pagine dello store in una maniera specifica. Noi ti forniremo tutti i file con il codice sorgente delle pagine. Dovrai aggiungerli nel pannello di amministrazione di Magento seguendo la procedura descritta qui sotto, utilizzando la tabella delle impostazioni. La tabella delle impostazioni è localizzata nella pagina Technical details sulla pagina di anteprima del template. Il file di documentazione contiene il link a questa pagina:

• documentation
  • documentation.html

La pagina template principale è quella maggiormente interessata. Contiene solitamente i seguenti elementi: banner, slider, galleria, ecc.

Consigliamo di disabilitare l'editor WYSIWYG. Per farlo, dal menù admin in alto, seleziona System > Configuration. Apri la sezione "Content Management" e nelle finestra delle opzioni WYSIWYG Options imposta l'opzione "Enable WYSIWYG Editor" su "Disabled Completely".

1. Dal menù in alto, seleziona CMS > Pages. Qui troverai tutte le pagine dello store. Home page, About Us e Customer Service dovrebbero già essere disponibili per cui non sarà necessario aggiungerle. Devi solo caricare i contenuti HTML e XML delle pagine. Aprile per accedere ai contenuti.
2. Apri la pagina e seleziona la scheda Content. Questa contiene il codice HTML della pagina. Puoi prendere il codice HTML della pagina dal rispettivo file sorgente. Puoi vedere la lista dei codici sorgente inclusi nella sezione "Template Settings" sulla tua pagina di anteprima del template. Copia il codice dal file sorgente e incollalo nell'area content.
3. Una volta finito con il codice HTML, passa alla scheda "Design". Questa contiene il codice XML della pagina. Il codice XML ti permette di aggiungere alla pagina blocchi statici e widget. Il codice XML andrebbe copiato allo stesso modo del codice HTML, dal file sorgente. Copia il codice XML sull'area "Layout Update XML".
4. Non dimenticare di selezionare l'opzione corretta in "Layout".
5. Se devi aggiungere una nuova pagina, clicca su "Add New Page" nell'angolo in alto a destra.

In caso di difficoltà, puoi consultare il tutorial dettagliato su Come configurare le pagine manualmente.

4. Configurazione Blocchi Statici

Una volta terminata la configurazione delle pagine, dovrai configurare i blocchi statici. La procedura è simile: devi semplicemente copiare il codice dal file sorgente e incollarlo nei campi corrispondenti del pannello admin di Magento. Dovrai usare una tabella simile, ma per i blocchi statici.

1. Dal menù in alto, seleziona CMS > Static Blocks.
2. Clicca sul pulsante "Add New Block" nell'angolo a destra per aggiungere un nuovo blocco.
3. Inserisci il nome e l'identificativo del blocco. Puoi trovare i dettagli del blocco dalla tabella nella pagina del Live Demo del template (vedi sulla sezione Pages Configuration).
4. Apri il file sorgente del blocco e copia il codice HTML nell'area contenuti.

Una volta terminata la configurazione di pagine e blocchi, il tuo negozio è pronto a partire.

1. Modulo Valute

1. Apri il pannello di amministrazione Magento.
2. Dal menù in alto, seleziona System > Configuration.
3. Poi clicca su General e seleziona la scheda Currency Setup.
4. In Currency Options, tenendo premuto il pulsante CTRL, seleziona le valute da utilizzare per visualizzare i prezzi nel tuo negozio Magento. Fatto ciò, clicca su Save Config per salvare le modifiche.
5. Vai su System > Manage Currency Rates dal menù in alto.
6. Imposta i valori richiesti di tasso di cambio valute, oppure usa l'Import Service. Clicca su Save Currency Rates per salvare le modifiche.

2. Modulo Sondaggi (Polls)

Dal menù in alto, seleziona CMS > Polls.

1. Google Map

Questo modulo di permette di incorporare le mappe di Google suo tuo sito Magento. Di default, il modulo ti dà due mappe: la mappa sulla pagina dei contatti e la mappa a pié pagina sulle altre pagine.

Entrambe le mappe possono essere configurate attraverso il pannello di amministrazione (Admin Panel) di Magento, andando alla sezione System > Configuration > Templatemonster > Google Map.

Il modulo ha le seguenti opzioni:

2. Casella Facebook Mi Piace

Questo modulo ti permette di inserire una casella Facebook per dare un Mi Piace al tuo negozio Magento.

Puoi configurarlo andando sul pannello di amministrazione Magento (Admin Panel) alla sezione System > Configuration > Templatemonster > Facebook.

Il modulo ha le seguenti opzioni:

Di default, il modulo verrà situato nella colonna a sinistra. Ma è possibile optare per tre possibilità: sinistra, destra e pié pagina.
Per cambiare la posizione del blocco, devi aprire il file tm_facebook.xml che si trova nella cartella app/design/frontend/default/themeXXX/layout della tua installazione.

<reference name="left">
	<block type="core/template" name="tm_facebook_like_left" as="tm_facebook_like_left" template="tm/facebook/facebook_like.phtml"/>
</reference>
<!-- <reference name="right">
	<block type="core/template" name="tm_facebook_like_right" as="tm_facebook_like_right" template="tm/facebook/facebook_like.phtml"/>
</reference> -->
<!-- <reference name="footer">
	<block type="core/template" name="tm_facebook_like_footer" as="tm_facebook_like_footer" template="tm/facebook/facebook_like.phtml"/>
</reference> -->

Due blocchi in questo file sono commentati (Commented out). E solo un blocco con name="left" non è commentato, il quale posiziona il blocco nella colonna di sinistra.
Se vuoi posizionare il modulo a pié pagina, segui queste istruzioni:

• 1. Togli il commento (uncomment) alle stringhe di codice del blocco name="footer" (l'ultimo, nell'esempio di codice qui sopra) e commenta (comment out) il blocco name="left" (il primo, nell'esempio di codice qui sopra).
• 2. Apri il file footer.phtml situato nella cartella app/design/frontend/default/themeXXX/template/page/html.
• 3. Incolla il seguente codice nella corretta posizione:

  <?php echo $this->getChildHtml('tm_facebook_like_footer') ?>

Adesso il blocco Facebook verrà situato a pié pagina.

3. Modulo Instagram

Il modulo Instagram ti permette di inserire una galleria Instagram nel tuo negozio.
Il modulo ti permette di inserire due tipi di galleria: galleria utente e galleria tag.

Tutte le configurazioni sono disponibili nel pannello di amministrazione (Admin Panel), nella sezione System > Configuration > Templatemonster > Instagram.

Il modulo ha le seguenti opzioni:

4. Modulo Twitter

Il modulo Twitter ti permette di inserire dei tweet sul tuo negozio.

Tutte le configurazioni sono disponibili nel pannello di amministrazione (Admin Panel), nella sezione System > Configuration > Templatemonster > Twitter.

Il modulo ha le seguenti opzioni:

Di default, il blocco viene posizionato nella colonna di sinistra. Ma ci sono tre possibilità in tutto: sinistra, destra e a pié pagina.
Per cambiare il posizionamento del blocco, devi aprire il file tm_twitter.xml situato nella cartella app/design/frontend/default/themeXXX/layout all'interno della tua installazione.

<reference name="left">
	<block type="core/template" name="tm_twitter_timeline" as="tm_twitter_timeline" template="tm/twitter/twitter_timeline.phtml"/>
</reference>
<!-- <reference name="footer">
	<block type="core/template" name="tm_twitter_timeline" as="tm_twitter_timeline" template="tm/twitter/twitter_timeline.phtml"/>
</reference>
<reference name="right">
	<block type="core/template" name="tm_twitter_timeline" as="tm_twitter_timeline" template="tm/twitter/twitter_timeline.phtml"/>
</reference> -->

Due blocchi sono commentati (commented out) in questo file. E solo un blocco con name="left" non è commentato, il quale posizione il blocco nella colonna di sinistra.
Se vuoi inserire il modulo a pié pagine, segui queste istruzioni:

• 1. Togli il commento (uncomment) alle stringhe di codice del blocco name="footer" (l'ultimo, nell'esempio di codice qui sopra) e commenta (comment out) il blocco name="left" (il primo, nell'esempio di codice qui sopra).
• 2. Apri il file footer.phtml situato nella cartella app/design/frontend/default/themeXXX/template/page/html.
• 3. Incolla il seguente codice nella corretta posizione::

  <?php echo $this->getChildHtml('tm_twitter_timeline') ?>

Adesso il blocco Twitter verrà situato a pié pagina.

5. Pop-up Newsletter

Il modulo ti permette di inserire un blocco pop-up con il modulo di iscrizione alla newsletter.

È possibile abilitare/disabilitare il modulo dal pannello di amministrazione Magento (Admin Panel), alla sezione System > Configuration > Templatemonster > NewsletterPopup.

Per modificare l'aspetto della finestra, è necessario modificare il file style.css del tema. Se vuoi aggiungere diversi elementi utente al blocco pop-up, dovrai modificare il file newsletterpopup.phtml situato nella cartella app/design/frontend/default/themeXXX/template/tm/newsletterpopup.

6. Conto alla rovescia prezzo speciale

Questo modulo ti permette di inserire un conto alla rovescia per la scadenza di offerte speciali su determinati prodotti.

È possibile abilitare/disabilitare il modulo dal pannello di amministrazione Magento (Admin Panel), alla sezione System > Configuration > Templatemonster > Special Price Countdown.

Se vuoi modificare l'aspetto del conto alla rovescia, devi modificare il file flipclock.css (flipclock.less) situato nella cartella skin/frontend/default/themeXXX/css/tm/specialpricecountdown.

1. Olark Live Chat

Per utilizzare la funzione di chat online integrata al template, devi aprire un account sul sito ufficiale, compilando tutti i campi necessari per poi ricevere il codice Olark Site-ID.

Fatto! Ora puoi visitare il tuo sito e vedere il widget per la chat online.

Puoi anche dare un'occhiata a queste altre istruzioni:

• Inizia a lavorare con Olark
• Manuale Utente Olark

2. Cloud Zoom

Le impostazioni Cloud Image Zoom ti permettono di modificare le dimensioni dell'immagine di pop-up e di impostare le dimensioni originali dell'immagine.

3. Aggiungi

Le impostazioni di Sharing Tool ti permettono di determinare in che modo le icone debbano essere visualizzate. Le impostazioni consigliate sono quelle che vedete nell'immagine.

4. Blog

5. Mega menu

Questo modulo sostituisce il menù standard con un menù che permette di configurare la visualizzazione di sottocategorie a due livelli, aggiungere blocchi statici al menù a discesa, aggiungere etichette, visualizzare prodotti, ecc.

MegaMenu è incluso di default nel template, ed è possibile disabilitarlo o abilitarlo andando su System > Configuration > CMSMART MEGAMENU > Mega Menu.

1. La visualizzazione di ogni menù a discesa può essere configurata sulla pagina delle impostazioni di categoria, che si trova in Catalog > Manage Categories.

2. Per aggiungere un blocco statico a un menù a discesa, lo si deve aggiungere andando su CMS > Static Blocks e, una volta creato, aggiungerlo al menù.

3. Il modulo permette di aggiungere etichette per ciascuna categoria.

È possibile farlo andando sul menù categorie Catalog > Manage Categories.

4. Per modificare il numero di colonne nelle sottocategorie dovrai modificare il valore Count della colonna Level sul menù Catalog > Manage Categories.

6. Parallasse

Per aggiungere l'effetto parallasse in determinati blocchi di contenuti è necessario:

1. aggiungere una classe per il blocco effetto parallasse (ad es., parallasse) e aggiungere l'attributo data-source-url="{{skin url='images/your_images.jpg'}}".

2. aggiungere immagini nella cartella immagini skin\frontend\default\themeXXX\images\.

3. aggiungere stili nel file skin\frontend\default\themeXXX\css\style.css:

.parallax {
	background-image: url(../images/parallax-img.jpg);
	background-position: 50% 0%;
	background-repeat: no-repeat;
	background-size: cover;
	width: 3500px;
	left: 50%;
	margin-left: -1750px;
}
				

4. Aggiungere il seguente codice nel file skin\frontend\default\themeXXX\js\scripts.js :

jQuery(window).load(function(){
	var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEmobile|Windows Phone|WPDesktop/i.test(navigator.userAgent);
	if(!isMobile) {  
	    if(jQuery(".parallax").length){  jQuery(".parallax").cherryFixedParallax({  invert: true, 
	    		offset: 300 
	    }); 
	  }; 		
	};	
});
				

La variable invert: true determina la direzione dell'effetto parallasse, mentre offset: 300 ne determina la densità.

7. Video su sfondo

Il video può essere aggiunto utilizzando il blocco statico, incluso il file di script jquery.mb.YTPlayer.js, e aggiungendo gli attributi corrispondenti per l'elemento che riprodurrà il video.

8. Informativa sui Cookie

I cookie sono dei piccoli file di testo che un sito web crea sul computer di un visitatore. Vengono utilizzati tipicamente per identificare quello specifico visitatore allo scopo di fornirgli un'esperienza di navigazione migliore. I Cookie sono un elemento importantissimo per il corretto funzionamento di tante funzioni dei siti web che tutti ormai diamo per scontate.

Ad esempio, sono solitamente proprio i cookie che permettono ai negozi online di ricordare quali articoli hai messo nel tuo carrello. Sono usati anche per tenere attivo il tuo login sul sito, o per dare ai gestori del sito informazioni statistiche importanti.

Se gestisci un sito web, esso quasi sicuramente usa i cookie. La loro funzione più probabile è quella di monitorare il numero dei visitatori e i loro comportamenti, servendosi di strumenti come Google Analytics. Possono essere usati anche per mostrare agli utenti delle pubblicità il più possibile rilevanti, oppure - per chi vende prodotti - per far funzionare alcuni tra gli elementi più importanti del sistema di compravendita del tuo negozio online.

26 maggio 2012 - La ICO ha pubblicato una modifica all'applicazione della regolamentazione: "il consenso implicito" è ora consentito purché sia ben chiaro dove si trovano le tue informative su cookie e privacy.

Per aderire alle direttive della legge sui Cookie, dovrai aggiungere moduli appropriati sul tuo sito. Il modulo mostrerà un messaggio di avviso riguardo l'utilizzo dei cookie sul tuo sito web. Puoi usare questi:

• Creare EU Cookie Law Banner
• EU Cookie Law Compliance - Implied Consent