Introduzione:
Il modulo CSS e JS personalizzato di Prestashop è un modulo semplice che consente di personalizzare le pagine singolarmente. Il modulo consente ai proprietari del sito di aggiungere ulteriori funzionalità a CSS e JS del sito web. Non è necessario alcun accesso FTP per modificare i file di codice esistenti. L'addon ti aiuta ad aggiungere il codice CSS e JS dal pannello di amministrazione. Il modulo aiuta ad eliminare la dipendenza dallo sviluppatore per apportare piccole modifiche personalizzate e puoi semplicemente farlo da solo utilizzando il pannello back-end del modulo. Il Prestashop Custom CSS & JS module consente all'amministratore del negozio Prestashop di modificare l'interfaccia utente di qualsiasi pagina del sito Web Prestashop. Il plug-in Prestashop offre all'amministratore di fare lo stesso per dispositivi mobili o desktop o entrambi.
Passi per l'installazione di Prestashop Custom JS e CSS Aggiungi su:
Per installare questo addon personalizzato di plugin CSS e JS Prestashop, segui i seguenti passi: 1. Aggiungi la cartella addon nella cartella modules del tuo sistema. 2. Dopo aver aggiunto questa cartella di addon, il sistema elencherà l'addon di Prestashop nella pagina del modulo sotto la categoria di funzioni di front office come indicato di seguito:
3. Fai clic su Installa per installare il plug-in personalizzato JS And CSS di Prestashop.
Interfaccia di amministrazione
Le seguenti funzionalità saranno fornite per l'amministrazione in questo modulo CSS Prestashop personalizzato: 1. Impostazioni generali 2. Impostazioni avanzate
Impostazioni generali del modulo JS Prestashop personalizzato:
Dopo aver fatto clic sul collegamento di configurazione di Custom JS e CSS addon nella pagina di elenco dei moduli, il sistema aprirà le schede delle impostazioni generali per impostazione predefinita come mostrato nella schermata seguente:
I campi elencati saranno riempiti con alcuni valori predefiniti
DETTAGLI DELLA SCHEDA IMPOSTAZIONI GENERALI:
1. Attiva / Disattiva: Inizialmente, questo campo del modulo CSS Prestashop personalizzato sarà DISATTIVATO. L'amministratore può abilitare / disabilitare la funzionalità addon attivando / disattivando questo.
2. CSS personalizzato: Il contenuto CSS che deve essere visualizzato su ogni pagina del sito web deve essere inserito nell'area di testo dei plugin personalizzati CSS e JS Prestashop forniti con il campo Custom CSS.
3. JS personalizzato: Il contenuto JS che deve essere visualizzato su ogni pagina del sito web deve essere inserito nell'area di testo del modulo personalizzato JS Prestashop dato con il campo denominato Custom JS.
Impostazioni avanzate del plugin personalizzato CSS e JS Prestashop:
Dopo aver fatto clic sulla scheda delle impostazioni avanzate del plugin personalizzato CSS e JS Prestashop, viene visualizzata la schermata seguente.
DETTAGLI DELLA SCHEDA DELLE IMPOSTAZIONI ANTICIPATE:
- Aggiungi una nuova voce: Inizialmente, non vi sarà alcuna voce nella tabella delle schede avanzate del modulo Prestashop Custom JS, quindi fare clic sul nuovo pulsante di immissione per aggiungere i dettagli del file CSS e JS con il nome della pagina e il tipo di dispositivo su di esso.
- Tabella: Quando la voce è terminata, la riga viene aggiunta alla tabella del modulo CSS personalizzato Prestashop con i dettagli della voce, come il nome della pagina, il pulsante di attivazione o disattivazione del tipo di dispositivo e il pulsante modifica ed elimina.
- Pulsante Abilita o Disabilita: Quando la voce viene eseguita nel modulo CSS Prestashop personalizzato, l'utente può abilitare il file aggiunto facendo clic sul pulsante di attivazione una volta che cambia al pulsante di disabilitazione dopo che l'utente fa clic sul pulsante di abilitazione ora l'utente può disabilitare la voce facendo clic sul pulsante Disabilita che appare nella tabella e succede il contrario.
- Edit: Nella colonna azione della tabella, c'è un pulsante di modifica quando si fa clic su di esso appare un pop-up che è uguale a quello che appare dopo aver fatto clic sul pulsante Aggiungi nuova voce. Ma la differenza è che ora i campi del modulo personalizzato JS Prestashop sono riempiti con tutti i dettagli che sono stati inseriti in precedenza dall'utente in quella riga. Ora l'utente può modificare le voci del plugin personalizzato CSS e JS Prestashop che sono state fatte nei file o possono cambiare il tipo di dispositivo o aggiungere la voce al nome della pagina.
- Elimina : Nella colonna di azione della tabella, c'è un pulsante di eliminazione quando si clicca su questo pulsante del modulo Prestashop Custom JS, possiamo cancellare la voce che è stata creata in quella riga.
- Scatola di interfaccia: Questa è la casella che apparirà dopo aver fatto clic sul pulsante Aggiungi nuovo se dobbiamo aggiungere una nuova voce alla tabella delle impostazioni avanzate. Comparirà anche se faremo clic sul pulsante di modifica dopo che la voce è stata completata, ma la differenza è che ora i campi nella casella superiore saranno i campi con i dettagli di quella particolare riga a cui appartiene il pulsante di modifica. I campi nella casella Pop-up sono:
A. Seleziona il menu a discesa della pagina: Il primo campo del campo "Aggiungi nuovo" è un menu a discesa con tutti i nomi delle pagine attualmente disponibili in Prestashop. È possibile selezionare la pagina in cui deve essere eseguita la voce.
B. Scegli il tipo di dispositivo: Questo campo di CSS personalizzati Prestashop contiene tre pulsanti di opzione Mobile, Desktop e entrambi. È possibile selezionare il tipo di dispositivo per il quale si intende aggiungere css e js.
C. Configurazione CSS: In questa area di testo del plugin Prestashop di Knowband, devi aggiungere il codice css che deve essere aggiunto alla pagina che hai selezionato in precedenza.
D. Configurazione JS: In questa area di testo del modulo CSS Prestashop personalizzato, devi aggiungere il codice js che deve essere aggiunto alla pagina che hai selezionato in precedenza.
INTERFACCIA DOPO CLICCARE SU AGGIUNTA NUOVA ENTRATA
DOPO AGGIUNGERE L'ENTRATA
INTERFACCIA DOPO CLIC SU PULSANTE DI MODIFICA
Modulo Front End
Dopo aver abilitato il plug-in Prestashop Custom JS da Knowband, l'utente front-end vedrà i CSS e JS che vengono aggiunti globalmente al sito Web e l'utente vedrà anche CSS e JS che vengono aggiunti a quella particolare pagina solo nelle impostazioni avanzate scheda.
CSS e JS CUSTOM sul front-end appaiono come segue:
raccomandazioni
Aggiorna la pagina iniziale del tuo negozio ogni volta che attivi / disattiva il plug-in. Se il plug-in non funziona dopo l'installazione, controllare le autorizzazioni sulla cartella dei moduli. La cartella dovrebbe essere scrivibile. Si prega di rendere l'autorizzazione della cartella a 755.
Speriamo di aver coperto tutte le preoccupazioni relative all'installazione e alla guida del prodotto Addon di Prestashop. Dovresti anche controllare il nostro blog per dare più motivi ai tuoi clienti per aver completato il loro processo di pagamento online – Qui
Guarda il video tutorial qui:
Link al modulo: https://www.knowband.com/prestashop-custom-css-and-js
Manuale utente: https://www.knowband.com/blog/user-manual/prestashop-custom-js-and-css/
Demo Admin: https://ps.knowband.com/demo1/16/admin1/index.php?controller=AdminLogin&token=aea1bb3fb1bab860c86c4db00ce5949e&redirect=AdminModules&demo_lang=en
Demo frontale: https://ps.knowband.com/demo1/16/en/
Acquista questo addon ora >> Knowband – CSS personalizzati e JS – Addon PrestaShop