1.0 Introduzione dell’addetto alle pagine mobili accelerate di Knowband Prestashop (AMP):
Le pagine mobili accelerate o AMP sono una tecnologia che fornisce un comodo accesso alle informazioni su Internet dagli schermi di smartphone e tablet. L’AMP è una tecnologia avanzata di Google che riduce il tempo di caricamento del sito web. L’obiettivo di ogni proprietario del negozio eCommerce dovrebbe essere quello di ridurre il tempo di caricamento del sito web. Modulo Prestashop Accelerated Mobile Pages (AMP).
Il modulo AMP Prestashop consente all’amministratore di convertire la pagina iniziale, le pagine delle categorie, le pagine dei prodotti e le pagine CMS in pagine AMP a caricamento rapido. Con l’aiuto del modulo Pagine mobili di Google Accelerated, l’amministratore può ridurre il tempo di caricamento del sito web. Inoltre, con AMP l’e-merchant ha la possibilità di abilitare / disabilitare le sezioni (Best Sellers, Prodotti in primo piano, Nuovo arrivo), è possibile fornire la straordinaria esperienza utente. una volta che i tuoi clienti sono felici, le vendite avverranno facilmente.
Caratteristiche 1.1 del modulo Prestashop Accelerated Mobile Pages:
1. Il modulo Prestashop Accelerated Mobile (AMP) consente all’amministratore del negozio di convertire la pagina Web in AMP.
2. Con l’aiuto del modulo AMP Prestashop, l’amministratore del negozio può convertire la pagina iniziale, le pagine delle categorie, le pagine dei prodotti e le pagine CMS in AMP.
3. Il componente aggiuntivo Prestashop Accelerated Mobile (AMP) di Knowband fornisce un’opzione al proprietario del negozio per personalizzare la pagina iniziale, le pagine delle categorie, le pagine dei prodotti e le impostazioni delle pagine CMS dal back-office.
4. L’amministratore può caricare il logo aziendale su AMP e può anche correggere la larghezza e l’altezza del sito web.
5. Il modulo AMP Prestashop offre al commerciante del negozio un’opzione per aggiungere il CSS personalizzato per aggiungere la funzionalità aggiuntiva.
6. Il modulo Pagine mobili di Google Accelerated consente all’amministratore del negozio di abilitare / disabilitare la visualizzazione dell’opzione bestseller, delle funzionalità e dei nuovi prodotti sulla home page. Oltre a questo, possono selezionare il no. del prodotto mostrato in una particolare sezione.
7. Il proprietario del negozio Prestashop può cambiare il banner dei migliori venditori, in primo piano e nuovi prodotti sulla home page.
8. Il modulo Prestashop Accelerated Mobile Pages (AMP) ha fornito le opzioni di condivisione dei social media sull’AMP. Anche l’amministratore può aggiungere più icone aggiungendo lo script.
9. L’amministratore può personalizzare le categorie di AMP dal back-end del modulo AMP Prestashop. I clienti per sfogliare le categorie dalla pagina AMP.
10. Utilizzando il modulo Pagine mobili di Google Accelerated, l’amministratore può generare automaticamente la Sitemap AMP con l’aiuto di CRON.
11. L’amministratore può generare la Sitemap AMP facendo clic sul pulsante.
12. Addon delle Pagine mobili accelerate Prestashop di Knowband supporta Google Analytics. L’amministratore eCommerce può inserire l’ID del client Analytics per tracciare il rendimento AMP.
13. Il modulo Pagine mobili di Google Accelerated supporta più lingue.
14. Con l’aiuto del modulo AMP Prestashop, l’amministratore del negozio Prestashop può impostare il colore
15. Il modulo AMP Prestashop è facile da usare e gestire.
Tecnologia per lo sviluppo
Lingua: PHP
Struttura: PrestaShop
2.0 Passi per l’installazione di Prestashop Accelerated Mobile Pages (AMP) Addon:
1.La struttura delle cartelle del modulo AMP Prestashop.
2. Copia l’intera cartella denominata come aggiornamento del prodotto nella cartella dei moduli della directory principale del tuo negozio PrestaShop tramite FTP.
3. Sarai in grado di trovare il plug-in AMP del prodotto pronto per essere installato nei moduli nel tuo negozio PrestaShop come mostrato di seguito.
4. Fare clic sul collegamento Installa per installare il plug-in.
Ora il plug-in Prestashop Accelerated Mobile Pages (AMP) è pronto per l’uso e fai clic su “Configurazione“link per configurare questo modulo Prestashop da Knowband.
3.0 Admin Interface
Dopo aver installato il modulo Google Accelerated Mobile Pages (AMP) nello store, l’addon di Prestashop fornirà le seguenti interfacce:
1. Impostazioni generali 2. Impostazioni iniziali 3. Impostazioni pagina categoria 4. Impostazioni pagina prodotto 5. Impostazioni del menu 6. Guarda e senti le impostazioni 7. Impostazioni dei social media 8. Impostazioni extra per le icone 9. Impostazioni Google 10. Impostazioni Sitemap
Di seguito sono spiegate le interfacce del modulo AMP (Accelerated Mobile Pages) di Knowband per Prestashop.
3.1 Impostazioni generali
La scheda Impostazioni generali di questo add-on AMP Prestashop ha le seguenti opzioni:
Attiva / Disattiva: Inizialmente, questo campo del modulo Prestashop Accelerated Mobile Pages di Knowband sarà disabilitato. L’amministratore può abilitare / disabilitare il plugin attivando / disattivando il pulsante.
Abilitando questa impostazione convertirai le pagine del sito web in AMP.
Forza AMP sul dispositivo mobile: In questa sezione del componente aggiuntivo AMP Knowband Prestashop, l’amministratore può abilitare le impostazioni alle pagine AMP sul dispositivo mobile.
Logo del sito web: Utilizzando questa opzione del modulo AMP (Google Accelerated Mobile Pages), il commerciante del negozio può caricare o modificare il logo dell’AMP.
Larghezza logo: Qui l’amministratore del negozio può impostare la larghezza del logo in Pixel.
Altezza del logo: Qui l’amministratore del negozio può impostare l’altezza del logo in Pixel.
Abilita / disabilita AMP home page: L’amministratore del negozio può abilitare / disabilitare AMP sulla Home Page del sito. Dopo aver abilitato l’opzione, l’amministratore può controllare l’AMP della pagina iniziale facendo clic sul pulsante Anteprima.
Abilita / disabilita AMP pagina di categoria: L’amministratore del negozio può abilitare / disabilitare AMP sulle pagine delle categorie. Dopo aver abilitato l’opzione, l’amministratore può controllare la pagina di categoria AMP facendo clic sul pulsante Anteprima.
Abilita / disabilita AMP pagina prodotto: Utilizzando questa opzione del componente aggiuntivo Prestashop Accelerated Mobile Page (AMP), l’amministratore del negozio può abilitare AMP sulle pagine di prodotto AMP del sito e può visualizzarlo facendo clic sul pulsante PREVIEW.
Abilita / disabilita AMP pagina CMS: Il modulo pagina AMP Prestashop offre un’opzione al rivenditore del negozio per convertire la pagina CMS in AMP. L’aspetto grafico delle pagine può essere visualizzato facendo clic sul pulsante Anteprima.
CSS personalizzato: L’amministratore del negozio Prestashop può aggiungere codice CSS personalizzato secondo i requisiti aziendali in questa sezione.
Impostazioni della pagina iniziale 3.2
In questa scheda del componente aggiuntivo Prestashop Accelerated Mobile Pages (AMP) di Knowband, l’amministratore può abilitare / disabilitare la visualizzazione di nuovi arrivi, best seller e prodotti in primo piano nella pagina Home di AMP di questo modulo Prestashop in varie lingue. Questa scheda avrà le seguenti opzioni:
1. Impostazioni della pagina iniziale 2. Impostazioni del prodotto in vetrina 3. Le migliori impostazioni dei prodotti di vendita 4. Nuove impostazioni del prodotto di arrivo
Impostazioni della pagina iniziale 3.2.1:
Visualizza testo personalizzato: L’amministratore può abilitare / disabilitare l’opzione Testo personalizzato qui.
Testo personalizzato: In questo Addon per le Pagine Mobile di Google Accelerated, l’amministratore del negozio può modificare il testo del blocco della Home page.
Posizione di visualizzazione: L’amministratore può selezionare la posizione di visualizzazione che verrà riflessa nella parte anteriore del sito.
Impostazioni dei prodotti in primo piano 3.2.2:
Abilita prodotti in primo piano: Utilizzando questa opzione dell’estensione AMP Prestashop, l’amministratore del negozio eCommerce può abilitare / disabilitare la sezione dei prodotti in primo piano.
Mostra prodotti in primo piano nel carosello: Qui l’amministratore del negozio può i prodotti presenti nel carosello.
Visualizzazione casuale: L’amministratore del negozio può abilitare / disabilitare l’opzione di visualizzazione del prodotto casuale. Dopo aver abilitato questa funzione, la visualizzazione del prodotto casuale nella particolare sezione in AMP.
Seleziona prodotti: L’Addon delle Pagine mobili accelerate Prestashop di Knowband consente all’amministratore del negozio di selezionare il numero di prodotti che desidera mostrare nella sezione Prodotto.
Banner display: Il commerciante eCommerce può abilitare / disabilitare l’opzione banner display.
Carica banner: In questo campo, l’amministratore del negozio può caricare il banner per il prodotto in primo piano.
Impostazioni dei prodotti più venduti 3.2.2:
In questa scheda, l’amministratore del negozio Prestashop può personalizzare le impostazioni del prodotto più venduto. Fare riferimento allo screenshot allegato di seguito:
Nuove impostazioni dei prodotti di arrivo 3.2.3:
L’amministratore ha il controllo sulla visualizzazione delle posizioni del prodotto di arrivo sulle pagine AMP.
Impostazioni della pagina categoria 3.3
La scheda Impostazioni pagina categoria del componente aggiuntivo Prestashop Accelerated Mobile Pages consente all’amministratore di aggiungere testo e immagini. Oltre a questo, l’amministratore può anche definire la posizione del testo nella pagina della categoria. Questa scheda avrà le seguenti opzioni:
Visualizza testo personalizzato: L’amministratore può abilitare / disabilitare l’opzione di messaggio personalizzato.
Testo personalizzato: Utilizzando questa opzione del modulo AMP Prestashop, l’amministratore del negozio eCommerce può impostare il messaggio della pagina di categoria.
Posizione di visualizzazione: In questa scheda, l’amministratore del negozio può modificare la posizione di visualizzazione in base ai desideri. Queste modifiche si rifletteranno nella parte anteriore del negozio.
Dimensione dell’immagine del prodotto: L’amministratore del negozio Prestashop può impostare qui il tipo di immagine.
Impostazioni della pagina del prodotto 3.4
L’amministratore ha il controllo sulle impostazioni della pagina del prodotto nelle pagine AMP. Questa scheda avrà le seguenti opzioni:
Visualizza testo personalizzato: L’amministratore può abilitare / disabilitare l’opzione di messaggio personalizzato.
Testo personalizzato: Utilizzando questa opzione del modulo AMP Prestashop, l’amministratore del negozio eCommerce può impostare il messaggio della pagina di categoria.
Posizione di visualizzazione: In questa opzione, l’amministratore del negozio può modificare la posizione di visualizzazione in base ai desideri. Queste modifiche si rifletteranno nel front-end del negozio.
Dimensione dell’immagine del prodotto: L’amministratore del negozio Prestashop può selezionare la dimensione dell’immagine da visualizzare qui.
Visualizza breve descrizione: In questa opzione, l’amministratore del negozio può mostrare la breve descrizione del prodotto abilitando questa funzione.
Visualizza descrizione lunga: Il proprietario del negozio ha un’opzione per mostrare la descrizione lunga del prodotto secondo il requisito.
Visualizza la recensione del prodotto: Utilizzando il modulo Prestashop Accelerated Mobile Pages, l’amministratore del negozio può abilitare l’opzione di revisione del prodotto. Dopo aver abilitato questa funzione, la recensione del prodotto verrà visualizzata nel front-end del negozio.
Mostra informazioni aggiuntive: Abilitando questa funzione, l’amministratore può mostrare le informazioni aggiuntive dei prodotti.
Visualizza prodotti correlati: Abilitando questa opzione, l’amministratore del negozio può visualizzare il prodotto correlato. Queste modifiche si rifletteranno nella parte anteriore del negozio.
Impostazioni del menu 3.5
In questa scheda, l’amministratore del negozio Prestashop può configurare i menu su AMP. L’amministratore può persino aggiungere nuove opzioni di menu. Questa scheda avrà le seguenti opzioni:
Attiva / Disattiva: L’amministratore può abilitare l’AMP nei menu commutando il pulsante.
Titolo del menu: L’addon AMP Prestashop di Knowband consente all’amministratore del negozio di aggiungere il menu inserendo il titolo qui.
Elemento menu principale: Qui il commerciante eCommerce può selezionare il menu Genitore secondo il desiderio.
Tipo di menu: L’amministratore può selezionare il tipo di voce del menu.
Seleziona una categoria: L’amministratore del negozio può selezionare la pagina specifica in cui desidera reindirizzare l’utente alla pagina AMP definita.
NOTA: queste modifiche sono mostrate nella sezione Struttura menu.
Impostazioni 3.6 Look and Feel
L’amministratore può controllare le impostazioni del colore, personalizzare i colori del proprio sito Web in base alle proprie esigenze. Possono cambiare i colori della pagina AMP in base al tema e alle preferenze. Questa scheda avrà la seguente sezione:
1. Impostazioni generali 2. Impostazioni dell’elenco prodotti 3. Categoria Impostazioni 4. Impostazioni del prodotto
3.6.1 Impostazioni generali
In questa scheda del componente Prestashop Accelerated Mobile Pages (AMP) di Knowband, l’amministratore può personalizzare le impostazioni di AMP Homepage. Questa scheda avrà le seguenti opzioni:
Colore di sfondo: L’amministratore può cambiare il colore di sfondo della pagina iniziale.
Font Color: L’amministratore può cambiare il colore del carattere da questa sezione.
Colore sfondo intestazione: Questo campo del modulo Prestashop Accelerated Mobile Pages (AMP) consente all’amministratore di impostare il colore di sfondo dell’intestazione.
Colore carattere intestazione: Utilizzando questa opzione del modulo AMP Prestashop, l’amministratore può impostare il colore del carattere del testo visualizzato nella sezione Intestazione.
Colore dell’icona dell’intestazione: The Prestashop store admin can change the icon color of the.
Footer Background Color: This option of the Google Accelerated Mobile Pages(AMP) Module allows the admin to set the background color of the Footer.
Footer Font Color: L’amministratore può cambiare il colore del carattere da questa sezione.
Footer Icon Color: The admin can change the icon color from this section.
Footer Lower Bar Background Color: The Store merchant can change the background color of the Footer Lower Bar.
Left Menu Slider Background Color: The Prestashop Merchant can change the Left menu slider background color in this section of Knowband Accelerated Mobile Pages(AMP) For Prestashop.
Left Menu Header Background Color: The Prestashop store admin can change the left menu header background color as per the requirement.
Left Menu Slider Font Color: L’amministratore può cambiare il colore del carattere da questa sezione.
Left Menu Sidebar Icon Color: The admin can change the icon color from this section.
Header Left Background Color: In this section of Prestashop Accelerated Mobile Pages(AMP) Module allows the admin to set the header left background color.
3.6.2 Product Listing Settings
The admin can customize the settings of the Product listing as per the requirement. Below mentioned the option:
Product Title Color: In this section of Google Accelerated Mobile Pages(AMP) Module allows the admin to change the Product title color.
Product Title Font Size: The Store admin can set the font size of the Product.
Colore pulsante Aggiungi al carrello: Knowband’s Prestashop AMP Pages module allows the admin to change the Add to Cart Button Color as per desires.
Add to Cart Button Font Color: The admin can customize the font color of the Add to Cart button.
Add to Cart Font Size: The Store admin can set the font size of the Add to Cart button.
3.6.3 Category Settings
In this tab, the store admin can customize the settings of the Category pages. These changes will be reflected in the front of the store.
Category Heading Font Color: The Prestashop store admin can change the category heading font color as per the requirement.
Category Heading Font Size: L’amministratore può cambiare il colore del carattere da questa sezione.
3.6.4 Product Settings
In this section, the Admin can customize the Product settings as per the requirement. The configuration option of this section is same as discussed in the Product listing section.
3.7 Social Media Settings
In this section of the Prestashop AMP module, the store admin can enable/disable the social media sharing option on the AMP webpages. All the enabled social media sharing options will be shown on the AMP. This tab will have the following options:
Display Shop Address in Menu Bar: The Admin can show the Store address by enabling this feature.
Display Shop Email Address: The Prestashop store owner can show the email address.
Display Shop Contact Number: In this field, the store admin can display the contact details of the site.
Display Facebook Icon: The store admin has the option to display a Facebook icon in the menu bar. For this admin need to specify the Facebook page URL in the respective field.
Display Twitter Icon: This section the admin can enable/disable the Twitter icon.
Display Google Icon: By using this Option the Prestashop store merchant can display the Google icon in the menu bar. For this admin need to Specify the Google page URL in the respective field.
Display Linkedin Icon: In this section, the store admin can display the Linkedin icon here. The Store admin must need to enter the URL of the profile.
Display Tumblr Icon: The Prestashop store owner can show the Tumblr profile here.
Display Pinterest Icon: The Store admin has the option to display a Pinterest icon in the menu bar. For this admin need to Specify the Pinterest page URL in the respective field.
3.8 Extra Icon Settings
In this section, the admin can add the extra social media icon as per the requirement of the business. This tab will have the following options:
Enable Extra Icon: The Prestashop store admin can enable/disable the extra icon feature. If they want to add more social media icon then they can add here with an ease.
Icon Class: The Admin can enter the Icon class.
Icon URL: In this tab, the store admin can Icon URL as per desires. These changes will be reflected in the front of the store.
3.9 Google Analytics Settings
Admin will need to have the Analytics Client ID in order to configure this feature.
Enable Google Analytics: If you want to track the performance of the accelerated mobile pages of your site, this feature allows the admin to enter Google Analytics client.
Analytics Client Id: The eCommerce merchant can enter your Google analytics client ID to configure.
3.10 Sitemap Settings
In this section, the store admin can generate the AMP Sitemap by clicking the button.
Generating the Sitemap are here.
How to Generate Sitemap for AMP?
The Admin can generate Sitemap by running CRON.
Accelerated Mobile Pages(AMP) module allows the store admin to setup Cron via
URLs to Add to Cron via Control Panel
Cron setup via SSH
CRON?Configuration:
In order to generate the Sitemap automatically, the Prestashop store admin can set up the cron job. There are two options available in the admin panel of the module.
1.? The?Admin?can?run?the?cron?manually.
Add the cron to your store via control panel/putty to generate/update the sitemap. Please find the instructions to setup crons below –
URLs to Add to Cron via Control Panel
Generate Sitemap?-
https://pstest2.knowband.com/ps1617/en/module/kbamppages/cron?action=syncSiteMap&secure_key=05d25b0b5a4a46268677e35c06cc51ef
Configurazione Cron tramite SSH
Generate Sitemap?- 40 * * * * curl -O /dev/null
‘https://pstest2.knowband.com/ps1617/en/module/kbamppages/cron?action=syncSiteMap&secure_key=05d25b0b5a4a46268677e35c06cc51ef’
4.0 Front Interface of the Prestashop Accelerated Mobile Pages Module:
After enabling the Prestashop Accelerated Mobile Pages(AMP) Module by Knowband the store admin can enable the settings for the home page, category pages, product pages and CMS pages. As per the settings enabled by the admin, AMP will look as shown below:
Home Page:
Prestashop AMP Pages allows the admin to show the Best Seller, New Products and Features Product on the Home page. For better user engagement.
categoria Pagina
As per the setting enabled by the admin, the Category AMP Pages on the Mobile device will appear like this screenshot.
Product Page
As per the setting enabled by the admin from the back-office the layout of Product AMP Page on the Mobile device will appear like this screenshot.
CMS Page
The Admin can view the CMS page setting like below settings.
Icona Menu
Prestashop Accelerated Mobile Pages shows the Menu icon like this.