Share
Magento è una piattaforma di e-commerce incredibilmente potente. In questa miniserie impareremo come iniziare con la piattaforma, conoscere i termini, impostare un negozio e tutti gli aspetti correlati e infine imparare come personalizzarlo per renderlo nostro.
In questa sesta parte, costruiremo una delle funzionalità più richieste dai lettori: ottenere un dispositivo di scorrimento del prodotto in primo piano nella home page. Eccitato? Iniziamo!
Nell'ultima parte, abbiamo creato la pagina delle informazioni sul prodotto e abbiamo analizzato il modo in cui i dati vengono estratti e visualizzati in un tipico tema Magento.
Abbiamo anche dato uno sguardo ai vari metodi fondamentali che il nostro tema utilizza per ottenere vari media e dati sul nostro prodotto. Spero che tu ricordi almeno una scheggia di quelle informazioni perché la useremo ancora oggi.
Oggi costruiremo la home page più importante. Come sempre, lo terrò il più semplice possibile e tralasciamo qualsiasi funzione estranea. Negozi diversi hanno contenuti diversi nelle loro home page. Una delle più popolari e sicuramente una delle funzionalità più richieste è la visualizzazione di un dispositivo di scorrimento dei contenuti basato su JavaScript con prodotti speciali. So che sembra interessante e hai voglia di iniziare. Iniziamo!
Come con le altre nostre pagine, i nostri obiettivi per questa pagina specifica sono relativamente semplici. Vogliamo un dispositivo di scorrimento semplice che visualizza prodotti specifici in un cursore pulito. Pertanto, ho stilato una breve lista di elementi che ritengo abbia bisogno:
Questo è tutto. Voglio mantenerlo il più semplice possibile e quindi ho deciso di non farlo. Ovviamente dovremo lavorare sia con il front end che con il back end per raggiungere tutti i nostri obiettivi.
La pagina deve fondamentalmente apparire così:
Per prima cosa considereremo l'HTML solo per la parte del contenuto. Suppongo che tu sia abbastanza fluente in HTML e CSS, quindi salterò alle parti abbastanza importanti.
Zonda F
700.000,00La Pagani Zonda è una vettura sportiva a motore centrale prodotta da Pagani in Italia.
A questo punto, questo è tutto piuttosto semplice. casa-presentazione è il contenitore con cui stiamo avvolgendo l'intera presentazione e verrà passato al JavaScript responsabile del dispositivo di scorrimento.
Ogni diapositiva è avvolta da un div chiamato diapositiva. All'interno abbiamo due contenitori flottati: uno per l'immagine e il secondo per le informazioni sul prodotto stesso.
Questo è tutto quello che c'è da fare. Ora possiamo passare alla parte styling.
/ * Home page * / .slide clear: both; overflow: auto; imbottitura: 10px; larghezza: 898 px; border: 1px solid # E1E1E1; sfondo: # F6F6F6; .product-image float: left; larghezza: 650 px; imbottitura: 10px; border: 1px solid # E1E1E1; sfondo: #FAFAFA; .product-details float: left; larghezza: 190 px; margine: 0 0 0 20 px; .product-details .price margin: -15px 0 0 0; colore: # 7db000; .product-details p margin: 10px 0 0 0; #nav position: absolute; superiore: 255 px; a destra: 250 px; z-index: 2000; #nav a margin-right: 10px; altezza: 5px; larghezza: 5px; z-index: 1000; fluttuare: a sinistra; text-indent: -9999px; cursore: puntatore; border: 1px solid #fff; sfondo: #eee; #nav a: hover border: 1px solid #fff; sfondo: n. 999; #nav a.activeSlide border: 1px solid # 444; sfondo: # 333;
Niente di eccezionale qui. CSS di base per posizionare gli elementi in posizione.
L'unico punto da notare è la dichiarazione per la classe ActiveSlide. Questa classe è assegnata al relativo ancoraggio di navigazione della diapositiva corrente.
La prima cosa che dobbiamo fare è impostare una categoria separata a cui possiamo assegnare tutti i prodotti che dobbiamo visualizzare sul nostro cursore. Clicca sul Catalogare menu e poi via categorie. Scegliere aggiungi una nuova categoria radice.
Digitare un nome a scelta e quindi scegliere no per il è attivo cadere in picchiata. Non vogliamo che venga visualizzato in altre parti del sito.
Una volta che la nuova categoria è stata salvata, è possibile trovare l'ID a cui è stato assegnato. Annoti questo. Ne avremo bisogno per dopo.
Utilizzeremo un singolo file di modello per estrarre le informazioni pertinenti, formattarle secondo necessità e visualizzare tutto. Hai piena libertà riguardo al nome e alla posizione di questo file ma, nell'interesse di mantenerlo semplice, l'ho chiamato featured.phtml e lo ha inserito Catalogo / prodotto / featured.phtml. Ricorda, questo va nella cartella dei modelli, non nella cartella di layout.
Il contenuto del file sembra così. Non preoccuparti della lunghezza, vedremo ogni parte funziona dopo il codice.
Accentsconagua
addAttributeToSelect (array ('name', 'price', 'small_image', 'short_description'), 'inner') -> addCategoryFilter (Mage :: getModel ('catalog / category') -> load ($ cat_id)); if (! $ _ productCollection-> count ()): echo $ this -> __ ('Non ci sono prodotti corrispondenti alla selezione.'); altro:?> getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ product, 'small_image'))?> ">  -> init ($ _ product, 'small_image') -> ridimensiona (650, 250); ?> "<?php echo $this->htmlEscape ($ this-> getImageLabel ($ _ product, 'small_image'))?>")
getName (); ?>
getFinalPrice (), 2);?> getShortDescription (); ?>
Ecco il primo pezzo:
$ cat_id = "2";
Innanzitutto, dovremo specificare l'ID della categoria da cui vogliamo inserire i nostri prodotti. Nel nostro caso, questo sarà 2, l'ID della categoria che abbiamo appena creato.
 -> init ($ _ product, 'small_image') -> ridimensiona (650, 250); ?> "<?php echo $this->htmlEscape ($ this-> getImageLabel ($ _ product, 'small_image'))?>")
$ _productCollection = Mage :: getResourceModel ('catalog / product_collection') -> addAttributeToSelect (array ('name', 'price', 'small_image', 'short_description'), 'inner') -> addCategoryFilter (Mage :: getModel ( 'catalogo / categoria') -> carico ($ cat_id)); Mi sembra un po 'complicato ma ti assicuro che è molto semplice. Per dirla in parole povere, essenzialmente passiamo nell'ID della categoria di cui abbiamo bisogno attraverso la variabile cat_id e chiedi a Magento di recuperare nome, prezzo, immagine e breve descrizione dei prodotti che corrispondono. In questo momento, ti consiglierei di non disturbare il resto a meno che tu non sia esperto in MVC e in altri aspetti dell'architettura di Magento.
if (! $ _ productCollection-> count ()): echo $ this -> __ ('Sorry, nessun elemento corrisponde ai criteri di selezione'); altro:?> Dovremo controllare se abbiamo articoli corrispondenti, no? Questo è quello che stiamo facendo qui. Solo assicurandoci di avere gli articoli corrispondenti. In caso contrario, viene visualizzato un errore.
Cominciamo a scorrere la nostra collezione di prodotti!
getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ product, 'small_image'))?> ">
getName (); ?>
getFinalPrice (), 2);?>getShortDescription (); ?>
Se hai letto la parte precedente di questa serie, questo codice deve essere abbastanza familiare per te. Usiamo i metodi di Magento per recuperare i supporti relativi al nostro prodotto.
Il secondo frammento potrebbe sembrare un po 'diverso perché invece di usare metodi leggermente più astratti, ho usato metodi più ravvicinati per acquisire direttamente i dati di cui abbiamo bisogno.
Se ti senti un po 'confuso qui, leggi ancora il codice sopra. Il nome dei metodi è piuttosto esplicativo. L'unico ostacolo dovrebbe essere il modo in cui acquisiamo l'immagine stessa: chiediamo ad uno dei nostri aiutanti di acquisire l'immagine e ridimensionarla alla dimensione di cui abbiamo bisogno. Niente di più.
Nota che apriamo e chiudiamo a diapositiva div ogni volta che il nostro ciclo viene eseguito. Questo per incapsulare le informazioni di ogni prodotto con un elemento contenitore per semplificare la creazione di un dispositivo di scorrimento successivo.
E con questo, il nostro codice PHP di base è completo.
Non ha senso reinventare completamente la ruota qui poiché il fulcro di questa serie è su Magento. Quindi, useremo un ottimo plugin per creare il nostro slider oggi: il plugin jQuery Cycle.
Ma prima, vai root / js e creare una cartella denominata cirro. Diverse persone hanno diversi metodi di organizzazione qui. Preferisco che il JS di un tema sia separato invece di organizzarlo per fonte. Avremo bisogno di una copia di jQuery [1.4 speriamo], l'ultimo ciclo di plugin e un file di script personalizzato, che sto nominando moca.
Ecco il contenuto del nostro file JS.
(function ($) $ (document) .ready (function () $ ('# home-slideshow') .before ('') .cycle (fx:' fade ', velocità: 1500, timeout: 5000, pausa: 1, ritardo: 5000, cercapersone:' #nav '); ); ) (JQuery) Per prima cosa, notiamo che stiamo avvolgendo tutto dentro a (function ($) // Code) (jQuery) bloccare. Questo garantisce che jQuery non sia in conflitto con altre librerie incluse.
Il blocco del documento pronto, come sempre, è quello di assicurarsi che il nostro codice venga eseguito solo dopo che tutte le risorse della pagina sono state caricate da quando a Magento piace mettere i nostri file JavaScript nella parte superiore.
L'inizializzazione del plugin è piuttosto semplice. Basta digitare l'ID del contenitore principale, casa-presentazione nel nostro caso, e via andiamo. Ho appena messo a punto alcune delle opzioni per farlo fare la nostra offerta.
Qualcosa di cui tenere conto è che stiamo creando e posizionando dinamicamente il nostro contenitore per gli elementi di navigazione all'interno del DOM con JavaScriptS. Questo elemento è necessario solo se JavaScript è abilitato. Se non lo è, non vogliamo codice vuoto, inutile nella nostra pagina.
Passiamo anche nel selettore il contenitore di navigazione al plugin di scorrimento.
Questo è tutto. La parte JavaScript del nostro codice è stata completata.
Step 6 - Impostazione della nostra Home Page
Ora che tutte le nostre basi sono state completate, possiamo finalmente configurare la nostra home page ora.
Fare clic sul menu CMS e selezionare il pagine opzione. Clicca sulla home page nella pagina risultante.
La prima scheda dovrebbe essere abbastanza auto-esplicativa. Assicurati che la nostra pagina sia abilitata.
Nella scheda contenuto, assicurati di inserire quanto segue dopo aver disabilitato l'editor:
block type = "catalog / product_list" block_id = "featured.products" template = "catalog / product / featured.phtml"
Questo è il metodo di Magento per includere i blocchi richiesti. Diamo solo un ID per segnalarlo e indicarlo al nostro modello personalizzato.
Nella scheda di progettazione, modifica il modello di layout in 1 colonna poiché lo utilizziamo per tutto e quindi inserisci quanto segue in aggiornamento layout xml campo.
css / home.css
Ricorda come durante la creazione della pagina del prodotto, abbiamo incluso CSS personalizzati nel file di layout della pagina per assicurarci che l'intera base di codici non venga caricata per ogni pagina? Stiamo essenzialmente lo stesso qui. Invece di creare un file XML solo per questo, Magento ci consente di inserirlo direttamente attraverso l'interfaccia.
Carichiamo semplicemente il nostro CSS personalizzato, le nostre librerie JS e il file di script che contiene tutto il nostro codice.
Clicca su "salva" per salvare tutti i nostri progressi, svuota la cache di Magento e guarda il bellissimo cursore della tua home page scorrere nella sua gloriosa bellezza!
Cosa costruiremo nella prossima parte
... dipende completamente da te. Ho già coperto quasi tutte le informazioni rilevanti per personalizzare qualsiasi vista e passare attraverso ogni singola vista è completamente contro-intuitivo. Quindi, ho concluso che tutto ciò che resta è come creare un modulo personalizzato e penso che a quel punto questa serie avrà fatto il suo corso. Potrei scrivere un rapido tweund di Magento e ottimizzare l'how-to se un numero sufficiente di persone mostra interesse per questo articolo.
Se senti che qualcos'altro deve essere coperto prima che questa serie si concluda, non esitare a lasciare un commento qui sotto per farmi sapere!
L'ultima parola
E abbiamo finito! Oggi abbiamo imparato a creare una home page personalizzata completa di un dispositivo di scorrimento che mostra i prodotti in primo piano. Abbiamo anche imparato a fare tutto questo senza fare affidamento su un'estensione di terze parti e invece di scrivere tutto questo da soli. Spero che questo ti sia stato utile e l'hai trovato interessante. Dato che questo è un argomento piuttosto nuovo per molti lettori, osserverò attentamente la sezione dei commenti in modo da sentirci dentro se hai dei dubbi.
Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un messaggio. Buona programmazione!
