{"id":18387,"date":"2015-02-11T00:00:00","date_gmt":"2015-02-11T00:00:00","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=1382"},"modified":"2026-08-10T09:28:16","modified_gmt":"2026-08-10T09:28:16","slug":"prestashop-custom-js-and-css-module-manuale-dellutente","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/it\/manuale-utente-it\/prestashop-custom-js-and-css-module-manuale-dellutente\/","title":{"rendered":"Prestashop Custom JS And CSS Module – Manuale dell'utente"},"content":{"rendered":"

Introduzione:<\/h2>\n

Il modulo CSS e JS personalizzato di Prestashop \u00e8 un modulo semplice che consente di personalizzare le pagine singolarmente. Il modulo consente ai proprietari del sito di aggiungere ulteriori funzionalit\u00e0 a CSS e JS del sito web. Non \u00e8 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<\/a> 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.<\/p>\n

Passi per l'installazione di Prestashop Custom JS e CSS<\/a> Aggiungi su:<\/h2>\n

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\u00e0 l'addon di Prestashop nella pagina del modulo sotto la categoria di funzioni di front office come indicato di seguito:<\/p>\n

\"Installazione\"<\/a><\/p>\n

3. Fai clic su Installa per installare il plug-in personalizzato JS And CSS di Prestashop.<\/p>\n

Interfaccia di amministrazione<\/h2>\n

Le seguenti funzionalit\u00e0 saranno fornite per l'amministrazione in questo modulo CSS Prestashop personalizzato: 1. Impostazioni generali 2. Impostazioni avanzate<\/p>\n

Impostazioni generali del modulo JS Prestashop personalizzato:<\/h3>\n

Dopo aver fatto clic sul collegamento di configurazione di Custom JS e CSS addon nella pagina di elenco dei moduli, il sistema aprir\u00e0 le schede delle impostazioni generali per impostazione predefinita come mostrato nella schermata seguente:<\/p>\n

\"Impostazioni<\/a><\/p>\n

I campi elencati saranno riempiti con alcuni valori predefiniti<\/p>\n

DETTAGLI DELLA SCHEDA IMPOSTAZIONI GENERALI:<\/strong><\/p>\n

1. Attiva \/ Disattiva:<\/strong> Inizialmente, questo campo del modulo CSS Prestashop personalizzato sar\u00e0 DISATTIVATO. L'amministratore pu\u00f2 abilitare \/ disabilitare la funzionalit\u00e0 addon attivando \/ disattivando questo.
\n2. CSS personalizzato:<\/strong> 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.
\n3. JS personalizzato:<\/strong> 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.<\/p>\n

Impostazioni avanzate del plugin personalizzato CSS e JS Prestashop:<\/h3>\n

Dopo aver fatto clic sulla scheda delle impostazioni avanzate del plugin personalizzato CSS e JS Prestashop, viene visualizzata la schermata seguente.<\/p>\n

\"Impostazioni<\/a><\/p>\n

DETTAGLI DELLA SCHEDA DELLE IMPOSTAZIONI ANTICIPATE:<\/strong><\/p>\n

    \n
  • Aggiungi una nuova voce:<\/strong> Inizialmente, non vi sar\u00e0 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.<\/li>\n
  • Tabella:<\/strong> Quando la voce \u00e8 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.<\/li>\n
  • Pulsante Abilita o Disabilita:<\/strong> Quando la voce viene eseguita nel modulo CSS Prestashop personalizzato, l'utente pu\u00f2 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\u00f2 disabilitare la voce facendo clic sul pulsante Disabilita che appare nella tabella e succede il contrario.<\/li>\n
  • Edit:<\/strong> Nella colonna azione della tabella, c'\u00e8 un pulsante di modifica quando si fa clic su di esso appare un pop-up che \u00e8 uguale a quello che appare dopo aver fatto clic sul pulsante Aggiungi nuova voce. Ma la differenza \u00e8 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\u00f2 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.<\/li>\n
  • Elimina :<\/strong> Nella colonna di azione della tabella, c'\u00e8 un pulsante di eliminazione quando si clicca su questo pulsante del modulo Prestashop Custom JS, possiamo cancellare la voce che \u00e8 stata creata in quella riga.<\/li>\n
  • Scatola di interfaccia:<\/strong> Questa \u00e8 la casella che apparir\u00e0 dopo aver fatto clic sul pulsante Aggiungi nuovo se dobbiamo aggiungere una nuova voce alla tabella delle impostazioni avanzate. Comparir\u00e0 anche se faremo clic sul pulsante di modifica dopo che la voce \u00e8 stata completata, ma la differenza \u00e8 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:<\/li>\n<\/ul>\n

    A. Seleziona il menu a discesa della pagina:<\/strong> Il primo campo del campo "Aggiungi nuovo" \u00e8 un menu a discesa con tutti i nomi delle pagine attualmente disponibili in Prestashop. \u00c8 possibile selezionare la pagina in cui deve essere eseguita la voce.
    \nB. Scegli il tipo di dispositivo:<\/strong> Questo campo di CSS personalizzati Prestashop contiene tre pulsanti di opzione Mobile, Desktop e entrambi. \u00c8 possibile selezionare il tipo di dispositivo per il quale si intende aggiungere css e js.
    \nC. Configurazione CSS:<\/strong> 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.
    \nD. Configurazione JS:<\/strong> 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.<\/p>\n

    INTERFACCIA DOPO CLICCARE SU AGGIUNTA NUOVA ENTRATA<\/strong><\/p>\n

    \"POP<\/a><\/p>\n

    DOPO AGGIUNGERE L'ENTRATA<\/strong><\/p>\n

    \"DOPO<\/a><\/p>\n

    INTERFACCIA DOPO CLIC SU PULSANTE DI MODIFICA<\/strong><\/p>\n

    \"POP<\/a><\/p>\n

    Modulo Front End<\/h2>\n

    Dopo aver abilitato il plug-in Prestashop Custom JS da Knowband, l'utente front-end vedr\u00e0 i CSS e JS che vengono aggiunti globalmente al sito Web e l'utente vedr\u00e0 anche CSS e JS che vengono aggiunti a quella particolare pagina solo nelle impostazioni avanzate scheda.<\/p>\n

    CSS e JS CUSTOM sul front-end appaiono come segue:<\/p>\n

    \"Modulo<\/a><\/p>\n

    raccomandazioni<\/strong><\/p>\n

    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.<\/p>\n

    Speriamo di aver coperto tutte le preoccupazioni relative all'installazione e alla guida del prodotto Addon di Prestashop<\/a>. Dovresti anche controllare il nostro blog per dare pi\u00f9 motivi ai tuoi clienti per aver completato il loro processo di pagamento online – Qui<\/strong><\/a><\/p>\n

    Guarda il video tutorial qui:<\/strong><\/p>\n