Modulo super gancio

L'esempio mostra due blocchi, evidenziati con diversi colori verde e arancione. Ogni blocco, oltre al contenuto interno (Prezzo: 20 rubli e Modulo Super Hook), è incorniciato dai cosiddetti tag. Il primo tag è un blocco di apertura, il secondo con un trattino è uno di chiusura, nel nostro caso lo è

e , che a loro volta hanno un proprio identificatore (id) e una classe (class). Sono destinati alla progettazione visiva (stile) di una pagina web utilizzando la tecnologia CSS, dove sono chiamati selettore id e selettore di classe.

Per distinguerli nei CSS, sono indicati utilizzando simboli. Per id è un hash # e per class è un punto. Ad esempio, nel nostro esempio, id='cena' verrebbe indicato come

E class='nazvanie_tovara' sarà indicato come

Nome_prodotto.

Questi selettori vengono utilizzati anche in JavaScript e jQuery per associare lo script a un blocco specifico.

Inoltre, i CSS utilizzano selettori di tipo. Queste sono parti del tag. Nel nostro caso, si tratta di un selettore di tipo div e di un selettore di tipo span.

Definizione di un selettore utilizzando il browser Mozilla FireFox

Il modo più semplice per definire un selettore è usare Mozilla. Ti mostrerò come è fatto. Apri la pagina con il prodotto e questa volta spostati, che ora si trova sotto il pulsante del carrello, sopra il cartellino del prezzo del prodotto. Cioè, dobbiamo definire il selettore di blocco con il prezzo del prodotto come blocco genitore e il selettore di modulo come blocco figlio. L'apertura di un pannello aggiuntivo in FireFox è la stessa che in Chrome, la combinazione di tasti è Ctrl+Maiusc+I. Quindi, nel menu del campo aggiuntivo a sinistra, trova la freccia (seleziona elemento della pagina) e fai clic su di essa. Ora, spostando il cursore sulla pagina del sito, vediamo la selezione dei blocchi. Spostiamo il cursore sul blocco con il cartellino del prezzo e, quando selezioniamo questo blocco, facciamo clic su di esso. Ora nel campo aggiuntivo evidenzia l'inizio del blocco html

Fai clic destro su di esso e seleziona “copia selettore univoco” nella finestra che appare.

Facciamo lo stesso con il modulo Informazioni aggiuntive

nel campo delle impostazioni del modulo Selettore modulo o codice HTML, inserire il selector.block_wnd figlio

Selezionare la posizione rispetto al blocco “All'interno del blocco sottostante” e salvare il risultato.

Era adesso

Istruzioni video: https://www.youtube.com/watch?v=xTSXTj0QM5E

Definizione dei selettori utilizzando il browser Google Chrome

Nel modulo Super Hook, dobbiamo specificare il selettore di blocco (blocco genitore) a cui vogliamo associare il blocco del modulo (blocco figlio). Questi selettori sono molto facili da definire utilizzando il browser Google Chrome. Per fare ciò, devi aprire lo strumento di sviluppo nel browser utilizzando la combinazione di tasti Ctrl+Shift+I o semplicemente posizionare il cursore del mouse sulla pagina del sito e premere il pulsante destro del mouse. E nel menu a discesa seleziona Visualizza codice elemento. Si aprirà un'ulteriore finestra che mostra il codice html e una piccola finestra sulla destra con il codice CSS. La finestra ha un menu con l'immagine di una lente d'ingrandimento di un cellulare e il nome delle schede che inizia con Elementi.

In fondo al campo selezionato vediamo una nota a piè di pagina con i selettori necessari per configurare il modulo. L'immagine mostra un selettore del tipo div, il selettore id

#breve_descrizione_contenuto

Quelli che seguono sono selettori di classe separati da un punto, ma non ci interessano. Siamo interessati solo al selettore dell'ID principale. Sarà necessario come puntatore al blocco genitore. Nelle impostazioni del modulo, nel campo Selettore blocco, scrivere questo identificatore di blocco

#breve_descrizione_contenuto

Ora alleghiamo il modulo dei loghi di pagamento a questo blocco, che ora si trova sotto il pulsante Aggiungi al carrello. Per fare ciò, dobbiamo definire un selettore di blocco logo.

E mostrerò il secondo metodo di determinazione. Passa dal menu degli strumenti per sviluppatori a Elementi nella finestra inferiore. E sposta il cursore del mouse sul modulo del logo di pagamento. Fare clic con il tasto destro. Nell'elenco a discesa, seleziona la scheda in basso Visualizza codice elemento. Nella finestra dello sviluppatore nel codice HTML, sposta il cursore del mouse finché il blocco del modulo logo non viene evidenziato in blu e vedrai il tag div di apertura con id='product_payment_logos'. Questo è l'identificatore del bambino. Scriviamolo nelle impostazioni del modulo nel campo “Selettore modulo o codice HTML” come selettore

#product_payment_logos

Selezioniamo una posizione relativa al blocco nelle impostazioni con il valore "Sotto il blocco" e salviamo il risultato.

Vai alla pagina del sito e guarda il risultato

Istruzioni video: https://www.youtube.com/watch?v=c5UafCGsr-U

In questo modo possiamo spostare il blocco del modulo, e non solo il modulo, in qualsiasi punto della pagina del sito. Il trasferimento è limitato solo alla pagina stessa. Il trasferimento ad un'altra pagina non è possibile.

Funzionalità aggiuntive del modulo

Come puoi vedere nella pagina delle impostazioni ci sono molti altri campi che non abbiamo compilato. Descriverò a cosa servono utilizzando un esempio. Oltre a spostare i blocchi, il modulo ti consente di integrare la pagina con i tuoi contenuti utilizzando le tecnologie HTML, JS e CSS. Ad esempio, aggiungiamo prima un widget del gruppo VKontakte alla barra laterale del sito.

Quindi, definiamo un selettore genitore. Ad esempio, offro il modulo Categorie nella barra laterale.

Copia il codice HTML

< div id = "vk_groups" > < / div >

e incollalo nel campo “Selettore modulo o blocco HTML”.

Il mio sito blog ha già accumulato molte informazioni sul sempre più popolare motore PrestaShop. Secondo il sito ufficiale, la distribuzione è già stata scaricata da un milione e mezzo di utenti. Su Internet russo cresce anche l'interesse per questo CMS, anche se consideriamo questo blog: il 60% delle transizioni sono in qualche modo legate a PrestaShop.
Pertanto, ho combinato tutti i post che ho scritto, ho finalizzato qualcosa e si è rivelato completo Istruzioni PrestaShop.

Gennaio 2015: istruzioni aggiornate per PrestaShop 1.6

A seconda del livello utente, puoi lavorare con uno dei tre file PDF:

“Nozioni di base su come lavorare con PrestaShop per un responsabile di negozio” – adatto agli utenti che lavorano con un negozio già configurato. I loro compiti includono solo il mantenimento di un database di prodotti aggiornato, quindi tutte le operazioni sono descritte nel linguaggio più comprensibile.

“PrestaShop - istruzioni per gli utenti” – se stai avviando tu stesso un negozio online, queste istruzioni faranno al caso tuo. Descrive le operazioni di base per l'installazione di Prestashop, la configurazione dei componenti principali, l'utilizzo dei moduli e dei modelli di negozio. Dopo aver letto le istruzioni, sarai in grado di lavorare in modo più fruttuoso con Presta, modificare il modello, installare e modificare i moduli.

“PrestaShop - istruzioni per gli sviluppatori” – l’enfasi principale è sulla parte software: come sviluppare il proprio modulo, di quali classi sono responsabili e molto altro. Le istruzioni saranno utili agli sviluppatori di componenti e agli utenti che decidono di espandere le funzionalità di base del presta.

Versioni precedenti.

Giugno 2012: Al momento, le istruzioni per Prestashop hanno 26 pagine, ma ho intenzione di aggiungerne di nuove man mano che compaiono nuovi post sul blog. Nella guida ho cercato di considerare tematiche più complesse rispetto alla banale aggiunta di un prodotto o di una categoria. Ad esempio, le istruzioni riguardano lo spostamento dei moduli da un hook all'altro, la modifica del modello predefinito, ecc. Il manuale non è adatto a sviluppatori avanzati, poiché tratta questioni più superficiali rispetto alla classe o al sistema di controllo.

Settembre 2012: Le istruzioni di base non sono state modificate, ma sono state aggiunte istruzioni aggiuntive per principianti o gestori di negozi. Esiste una categoria di persone che non necessariamente sanno cos'è l'hosting o come spostare un carrello in un'altra colonna, ad esempio questi sono i gestori dei negozi. Devono lavorare con le categorie, aggiungere prodotti e fare cose simili. È per loro che sono state scritte le istruzioni “Nozioni di base per lavorare con PrestaShop per un responsabile di negozio”, che al momento contiene 4 capitoli e 13 pagine. Sto pensando di aumentare il volume nel tempo.

Agosto 2013: Aggiunte istruzioni per gli sviluppatori per PrestaShop 1.5. Esamina le classi base in modo più dettagliato, descrive la procedura per creare un modulo e lavorare con il modello. Aggiunte istruzioni per aggiornare PrestaShop alla 1.5

Ottobre 2013: Tutte le istruzioni per Prestashop sono divise in due cartelle, a seconda della versione del motore. La cartella “prestashop 1_4″ contiene le istruzioni pubblicate nel 2012, tutte le nuove istruzioni si trovano nella cartella “prestashop 1_5″.

Settembre 2014: Aggiunte istruzioni per PrestaShop 1.6.

PrestaShop è una piattaforma di e-commerce popolare e altamente specializzata. Il motore stesso è gratuito e molto facile da usare, ma tutti i temi e i componenti aggiuntivi sono a pagamento, quindi non è la scelta più popolare. Tuttavia, PrestaShop:

• una comunità sviluppata dove puoi trovare le risposte alle tue domande;
• un gran numero di temi e componenti aggiuntivi eccellenti per soddisfare qualsiasi esigenza di un negozio online;
• C'è un supporto a cui puoi anche porre domande.

Come installare PrestaShop

Il primo passo è, ovviamente, installare il CMS stesso sul tuo hosting. Non avrai alcuna difficoltà se guardi il video in cui spieghiamo:

• quali sono i requisiti minimi di sistema per installare questo motore;
• come installare PrestaShop utilizzando cPanel;
• quali impostazioni devono essere effettuate dopo l'installazione.

Configurazione di PrestaShop: amministrazione

Dopo aver installato con successo il motore, è necessario comprenderne le impostazioni e l'amministrazione. Non troverai molte impostazioni, poiché tutte quelle principali funzionano già per impostazione predefinita. Questo è un grande vantaggio di PrestaShop rispetto ad altri CMS, come WordPress o Joomla!, che richiedono l'installazione di componenti aggiuntivi speciali per l'e-commerce. Tuttavia, è ancora necessario eseguire alcune configurazioni. Quindi cosa imparerai dal video:

• come cambiare la lingua dell'interfaccia;
• quali sono i pulsanti principali del pannello di controllo;
• come personalizzare la visualizzazione del menu;
• quali categorie sono nel menu.

Configurazione di PrestaShop: manutenzione, amministratori, modalità di modifica live

Diamo un'occhiata alle impostazioni più importanti per gestire un negozio online su PrestaShop. Dopo aver guardato il nostro video tutorial imparerai:

• abilitare la modalità manutenzione;
• aggiungere nuovi utenti con diritti di lavoro nel pannello di amministrazione;
• modificare il design del sito web;
• lavorare con i demodati.

Moduli PrestaShop: come cambiare, modificare, aggiungere ed eliminare

I moduli sono una componente importante di un CMS. Quasi tutte le impostazioni per l'aspetto del sito verranno effettuate utilizzando i moduli. Vediamo come lavorare con loro:

• dov'è il blocco con i moduli situato nell'area di amministrazione;
• come aggiungere, rimuovere, modificare o cambiare moduli.

Come aggiungere nuovi prodotti al catalogo PrestaShop

PrestaShop offre ampie opportunità di lavorare con i prodotti, oltre ad aggiungerli e modificarli. Nel video vedremo:

• come aggiungere combinazioni e caratteristiche dei prodotti;
• lavorare con i file: personalizzazione e allegati;
• come aggiungere un prodotto passo dopo passo e configurarne la visualizzazione;
• come inserire i prezzi delle merci;
• come lavorare con i campi SEO;
• come caricare nuovi file.

Come lavorare con le categorie di prodotti in PrestaShop

Diamo un'occhiata alle categorie di prodotti e alle loro impostazioni in modo più dettagliato. Utilizzando le categorie, i prodotti sono raggruppati in base a determinate caratteristiche, il che semplifica il lavoro con il negozio online sia per il proprietario che per gli utenti. Abbiamo preparato per te un video sulle seguenti domande:

• cosa sono le sottocategorie e come configurarne la visualizzazione;
• come aggiungere nuove categorie;
• come personalizzare l'aspetto delle categorie per l'utente;
• come compilare tutti i campi obbligatori quando si aggiunge una categoria;
• Come aggiungere un prodotto a una categoria esistente.

In questo post analizzeremo nel dettaglio un CMS specializzato per la creazione di un negozio online PrestaShop. Questo motore è molto popolare nella sua terra natale, in Francia, ma non è ancora molto popolare in Russia. Solo il 5% dei negozi in Russia viene lanciato su questo motore, contro il 37% di OpenCart. Perché, nonostante la sua ricca funzionalità, gratuita e di alto livello, lo script non può diventare un leader, ne parleremo in questo post.

Ecco come si presenta la vetrina: http://demo.prestashop.com/en/?view=front

Vetrina del negozio online PrestaShop

Ecco come appare il pannello di amministrazione: http://demo.prestashop.com/en/?view=back

Parte amministrativa del negozio online su PrestaShop

È perfettamente adatto per il lancio di un negozio online in Russia. La distribuzione scaricata dal sito ufficiale ha sempre il supporto al 100% per la lingua russa. Ciò significa che il lavoro sarà comodo fin dai primi passi: tutte le interfacce della finestra di installazione e del pannello di amministrazione sono completamente in russo! Una demo del negozio in russo può essere visualizzata sul nostro sito di prova http://prestashop-testshop.ru/, che abbiamo implementato sull'hosting Beget in 1 clic grazie al programma di installazione automatica dell'hosting.

Tutti i servizi più popolari per i negozi online, come aggregatori di pagamenti e servizi di chat online, dispongono di un plugin ufficiale per PrestaShop. Puoi scaricare facilmente, ad esempio, gratuitamente il modulo Yandex.Checkout dalla pagina ufficiale dell'aggregatore.

Informazioni su PrestaShop e sviluppatori

Alle origini di Prestashop c'erano due persone, Igor Schlumberger e Bruno Levesque. Ora sono cofondatori e la società è di proprietà di investitori privati.

Come racconta Bruno Levesque in una delle sue interviste, inizialmente il loro ufficio era situato in una stanza molto piccola. Poi nel 2007 a Parigi erano una piccola squadra che si stava sviluppando nel campo del trading online.

Durante il primo mese di lavoro sul motore PrestaShop, è stato scaricato più di 1000 volte. Questo fatto è servito come un potente impulso per un ulteriore sviluppo. Oggi il team PrestaShop conta 70 dipendenti e Bruno Levesque si definisce milionario.

Bruno Levesque

Apparso nel 2007, PrestaShop sta guadagnando costantemente popolarità e nel 2011 è diventato il miglior motore di e-commerce gratuito. Ne abbiamo parlato nell'articolo: .

Team PrestaShop

La gioia del team dopo aver raggiunto i 100.000 download

A proposito, Bruno Levesque, essendo lo sviluppatore e programmatore principale, controlla personalmente tutto il suo nuovo codice di programma e tutti i plugin ufficiali.

PrestaShop è stato recentemente rinominato dal design luminoso e acido con un logo a forma di mano sulla borsa a un design più formale con un animale domestico caratteristico: un pinguino.

Nuovo logo

Oggi l'azienda ha grandi progetti legati all'ingresso nel mercato russo.

Per chi è meglio PrestaShop?

“Se hai bisogno di un CMS estero gratuito pronto all’uso per un negozio online con traduzione ufficiale al 100%, allora PrestaShop è quello che fa per te!”

Questo motore è facile da scaricare, facile da installare e facile da utilizzare. Come abbiamo già detto, tutto è in russo. Inoltre, c'è un assistente integrato che ti aiuterà a iniziare: effettua tutte le impostazioni necessarie e compila il catalogo dei prodotti. Ciò significa che questo è il motore ideale per i principianti!

PrestaShop dispone sempre anche di modelli di alta qualità forniti nella confezione per impostazione predefinita. Aggiornano costantemente il loro modello fuori dagli schemi in base alla moda. Ciò significa che se non hai i soldi per acquistare un modello per il tuo negozio, puoi iniziare a utilizzare il modello gratuito di alta qualità incluso.

Principali pro e contro di PrestaShop

“Non esistono motori ideali. L’eterna ricerca di un equilibrio tra semplicità e funzionalità porta al fatto che si possono sempre evidenziare i pro e i contro del motore!”

Diamo un'occhiata ai pro e ai contro generalmente accettati del CMS PrestaShop per capire cosa ti aspetta quando inizi a lavorarci.

Pro di PrestaShop

1. Funzionalità SEO. Presta ha già tutto pensato per la SEO nel pacchetto base. Bene, dovrai cercare plugin di terze parti. I CNC vengono generati automaticamente, reindirizzamenti 301, compilando meta tag di descrizione e parole chiave per la pagina del prodotto.
2. Catalogo prodotti avanzato. Inizialmente, PrestaShop si rivolge ai negozi di medie dimensioni. Pertanto, la funzionalità per lavorare con il catalogo prodotti è piuttosto ampia fin da subito. Potrai vendere prodotti con molti extra. caratteristiche che i tuoi clienti potranno trovare facilmente utilizzando un filtro avanzato per opzioni aggiuntive. proprietà e poi confrontare.
3. Funzionalità molto ricche per fidelizzare i clienti. Puoi mantenere un database di clienti, inviare loro newsletter via email su promozioni o compleanni. Sarai in grado di lavorare con i clienti attraverso i social media. reti.

Contro di PrestaShop

1. Non abbastanza popolare in Russia. Si dà il caso che sia poco conosciuto in Russia. A differenza di OpenCart, ad esempio, ha molti meno sviluppatori e molti meno forum in cui è possibile porre una domanda.
2. Crea un carico sul server. Se hai molti prodotti, il carico sul server aumenta in modo significativo. Ecco perché l'hosting gratuito non è adatto a te.
3. Non è possibile impostare un testo diverso dalla descrizione per l'annuncio del prodotto. Ciò porta a contenuti duplicati, che possono essere dannosi per l'ottimizzazione.

Iniziare con PrestaShop

Durante il processo di installazione, devi solo fare clic su Avanti alcune volte e la configurazione viene eseguita comodamente utilizzando la procedura guidata di configurazione integrata.

La prima finestra della procedura guidata di configurazione

Iniziare, così come lavorare in PrestraShop stesso, è molto semplice, perché... Gli sviluppatori hanno fatto della facilità d'uso la base del loro prodotto. Secondo loro, PrestaShop dovrebbe essere facile da mantenere e utilizzare perché... Si rivolge principalmente ai piccoli negozi online. Ciò significa che PrestaShop è più adatto alle startup che a chiunque altro: utilizzandolo puoi facilmente avviare un nuovo negozio online.

Come vanno le cose con PrestaShop in Russia?

Come abbiamo già scritto nel post precedente, la quota di PrestaShop in Russia ammonta al 5%. Molti servizi russi per negozi online, come Yandex.Checkout, rilasciano un plugin per una facile integrazione per PrestaShop. Puoi leggere ulteriori informazioni sull'integrazione nell'articolo.

Esiste una community russa di PrestaDev, ci sono diverse aziende specializzate che sviluppano su PrestaShop e producono plugin.

Funzionalità PrestaShop

Già pronto all'uso, PrestaShop ha funzionalità molto ricche. Difficilmente riuscirai a padroneggiare subito tutta la potenza di PrestaShop. Scaricando e installando questo script gratuitamente, ottieni un negozio online di livello mondiale:

• varie categorie e proprietà dei beni
• comodo filtro dei prodotti per proprietà
• tutti i tipi di strumenti di marketing
• Puoi scaricare il plug-in Yandex.Checkout sul sito Web Yandex
• vari report statistici su prodotti e clienti
• tutti i tipi di impostazioni SEO

C'è un negozio sul sito ufficiale dove puoi acquistare uno delle migliaia di plugin se ti mancano alcune funzionalità specifiche.

Confronto di PrestaShop con altri motori gratuiti

Tutti i motori dei negozi online hanno i loro punti di forza. Confrontiamo PrestaShop con altri popolari motori gratuiti e vediamo se perde o, al contrario, vince:

• PrestaShop non è un CMS completo nel senso convenzionale. Questo è un motore di negozio online altamente specializzato. A questo proposito perde notevolmente, ad esempio, contro WooCommerce o VirtueMart, che, essendo plugin per CMS completi, vantano ampie funzionalità dei CMS classici.
• Il motore di modelli Smarty viene utilizzato come strumento di creazione di modelli. Anche se per molti questo sarà un vantaggio.
• Comunità di lingua russa insufficiente. Il supporto in lingua russa sul forum ufficiale non è molto buono. A questo proposito, è molto inferiore, ad esempio, a OpenCart, per il quale è facile trovare un forum con una serie di risposte a una serie di domande sul motore.
• Il sito ufficiale non è stato tradotto in russo. A questo proposito, tutti i motori stranieri sono simili. Ma alcune parti di. i siti sono già stati tradotti (demo, negozio di plugin).
• È ancora più complesso, ad esempio, del suo peggior nemico OpenCart. Anche se è più semplice rispetto, ad esempio, a Magento.

Conclusioni. Vale la pena utilizzare PrestaShop?

Secondo noi ne vale sicuramente la pena se hai subito bisogno di un motore potente e specializzato su misura per l’e-commerce. Lo script è in costante movimento e sviluppo, il che significa che il tuo negozio sarà sempre alla moda e non rimarrà senza supporto.

Nel post puoi familiarizzare con i negozi online su questo motore.