| Gianluca Porta | WEB DEVELOPER FREELANCE MILANO | magento | wordpress

Variabili personalizzabili in Magento2

Le variabili personalizzate (Custom Variables) in Magento 2 sono uno strumento versatile che ti consente di inserire contenuti dinamici in email, pagine CMS e blocchi statici. In questo post, esploreremo cosa sono le variabili personalizzate, come crearle e utilizzarle efficacemente.

Che Cosa Sono le Variabili Personalizzate?

Le variabili personalizzate in Magento 2 ti permettono di definire valori dinamici che possono essere richiamati ovunque all’interno del tuo store. Questo è particolarmente utile per gestire informazioni che cambiano frequentemente o che devono essere riutilizzate in più punti del sito, come indirizzi, numeri di telefono, termini e condizioni, ecc.

Come Creare una Variabile Personalizzata

Passaggi per la Creazione

Accesso al Pannello di Amministrazione: Accedi al pannello di amministrazione di Magento 2.
Navigazione nella Sezione delle Variabili Personalizzate: Vai su Stores > Settings > Configuration.
Aggiungere una Nuova Variabile: Vai su System > Custom Variables, quindi clicca su Add New Variable.
Definizione della Variabile:
- Nome della Variabile: Inserisci un nome identificativo.
- Codice della Variabile: Questo codice sarà utilizzato per richiamare la variabile nei template.
- Valore della Variabile: Inserisci il contenuto che vuoi venga richiamato.

Esempio di Creazione

Supponiamo di voler creare una variabile personalizzata per il numero di telefono del servizio clienti.

Nome della Variabile: Customer Service Phone
Codice della Variabile: customer_service_phone
Valore della Variabile: +39 123 456 7890

Utilizzo delle Variabili Personalizzate

Le variabili personalizzate possono essere utilizzate in vari contesti, tra cui email, pagine CMS e blocchi statici.

Includere Variabili in Email

Per includere una variabile personalizzata in un template email, utilizza la seguente sintassi:

{{customVar code="customer_service_phone"}}

Includere Variabili in Pagine CMS o Blocchi Statici

Per utilizzare una variabile personalizzata in una pagina CMS o in un blocco statico, utilizza la stessa sintassi:

{{customVar code="customer_service_phone"}}

Modifica delle Variabili Personalizzate

Se hai bisogno di aggiornare il valore di una variabile personalizzata, torna nella sezione Custom Variables e modifica il valore direttamente. Questo aggiornamento sarà automaticamente riflesso ovunque la variabile è utilizzata.

Best Practices

Nomi Descrittivi: Usa nomi descrittivi per le tue variabili, in modo da ricordare facilmente il loro scopo.
Manutenzione: Rivedi e aggiorna periodicamente le tue variabili per assicurarti che contengano informazioni corrette e aggiornate.
Organizzazione: Mantieni un elenco organizzato delle variabili utilizzate per evitare duplicazioni e confusioni.

Conclusione

Le variabili personalizzate in Magento 2 sono uno strumento potente che ti consente di gestire e inserire contenuti dinamici con facilità. Seguendo i passaggi descritti in questa guida, potrai creare, gestire e utilizzare le variabili personalizzate per migliorare l’efficienza e la coerenza del tuo store.

Sono un web developer Freelance (programmatore web) in grado di offrire servizi di consulenza su diverse tipologie di progetti.
Dopo 6 anni di lavoro come dipendente in diverse agenzie di comunicazione, dal 2016 ho deciso di investire soldi e tempo nel mio sogno di diventare libero professionista.

Come creare mail transazionali in magento 2

Le mail transazionali sono un componente cruciale per qualsiasi e-commerce, e Magento 2 offre una potente infrastruttura per gestirle. In questo post, vedremo come funzionano le mail transazionali in Magento 2, come configurarle e personalizzarle.

Che Cosa Sono le Mail Transazionali?

Le mail transazionali sono email automatizzate inviate dal tuo sistema di e-commerce in risposta a specifiche azioni dell’utente, come conferme d’ordine, notifiche di spedizione, reset della password, e così via. A differenza delle campagne di marketing, queste email sono strettamente legate alle interazioni dell’utente con il tuo sito.

Come Funzionano in Magento 2?

Magento 2 utilizza un sistema di template per gestire le mail transazionali. Questi template possono essere personalizzati per adattarsi al branding del tuo negozio e alle tue specifiche esigenze di comunicazione.

Configurazione di Base

Accesso alla Pannello di Amministrazione: Accedi al tuo pannello di amministrazione di Magento 2.
Navigazione nelle Impostazioni: Vai su Stores > Configuration.
Sezione delle Mail: Nella sezione Sales (Vendite), troverai vari sottomenù per le email, come Sales Emails, New Order, Shipment, ecc.
Configurazione dei Template: Puoi selezionare e configurare template differenti per ogni tipo di email transazionale.

Creazione e Modifica dei Template

Accedere alla Gestione dei Template: Vai su Marketing > Communications > Email Templates.
Aggiungi un Nuovo Template: Clicca su Add New Template.
Scegli un Template di Base: Puoi scegliere un template di base dalla lista predefinita di Magento.
Personalizzazione del Template: Dopo aver selezionato un template, puoi modificarne il contenuto HTML per adattarlo al tuo stile. Puoi anche utilizzare variabili dinamiche per personalizzare ulteriormente il messaggio.

Esempio di Personalizzazione

<!DOCTYPE html>
<html>
<head>
    <title>{{trans "Order Confirmation"}}</title>
</head>
<body>
    <h1>{{trans "Thank you for your order!"}}</h1>
    <p>{{trans "Order Number:"}} {{var order.increment_id}}</p>
    <p>{{trans "You can view your order details at:"}} <a href="{{var order.view_url}}">{{var order.view_url}}</a></p>
    <p>{{trans "Best regards,"}}<br>{{trans "Your Store Team"}}</p>
</body>
</html>

Integrazione con Servizi Email Esterni

Magento 2 permette anche l’integrazione con servizi email esterni come SendGrid, Mailchimp, e altri. Questo può migliorare l’affidabilità e la consegna delle tue mail transazionali.

Passaggi per l’Integrazione

Installazione del Modulo: Installa il modulo del servizio email scelto (ad esempio, SendGrid).
Configurazione delle Credenziali: Configura le credenziali API del servizio email nelle impostazioni di Magento.
Test delle Email: Invia email di test per assicurarti che tutto funzioni correttamente.

Best Practices

Personalizzazione: Personalizza le email per riflettere il tuo brand.
Chiarezza: Mantieni il contenuto chiaro e conciso.
Test: Testa sempre le tue email su diversi client email per assicurarti che appaiano correttamente.

Conclusione

Le mail transazionali sono essenziali per mantenere una comunicazione efficace con i tuoi clienti. Magento 2 offre una vasta gamma di opzioni per configurarle e personalizzarle, permettendoti di fornire un’esperienza utente fluida e professionale. Seguendo i passaggi e i consigli di questa guida, potrai sfruttare al meglio questa potente funzionalità.

Il Progetto Horbity: Un Successo Realizzato in Collaborazione con Twintips

Nel mondo dell’e-commerce, la tecnologia e l’innovazione giocano un ruolo cruciale per garantire efficienza e soddisfazione del cliente. Oggi voglio condividere con voi un progetto di cui sono particolarmente orgoglioso: il progetto Horbity, realizzato in collaborazione con Twintips.

Una Piattaforma Potente: Magento 2

Per la realizzazione di questo progetto, abbiamo scelto Magento 2, una delle piattaforme e-commerce più potenti e flessibili sul mercato. Magento 2 ci ha permesso di creare una soluzione su misura per le esigenze specifiche di Horbity, garantendo una gestione ottimale dei prodotti e degli ordini.

Il Mio Contributo: Front-End e Gestione Back-End

In questo progetto, il mio ruolo è stato centrale nella costruzione del front-end e nella gestione del back-end. Ecco come ho contribuito:

Montaggio del Front-End:
Ho curato il montaggio del front-end secondo le esigenze del cliente. Questo ha comportato la creazione di un’interfaccia utente intuitiva e reattiva, capace di offrire una user experience eccellente e un design accattivante. Ogni dettaglio è stato studiato per garantire una navigazione fluida e piacevole.

Gestione del Back-End:
Oltre al front-end, mi sono occupato di gestire tutta la parte di configurazione del back-end. In particolare, abbiamo implementato una serie di personalizzazioni che hanno automatizzato tutti i processi di gestione. Questo include:

Flussi di Importazione Prodotti/Quantità/Prezzi:
Abbiamo sviluppato un sistema automatizzato per la gestione dei flussi di importazione dei prodotti, delle quantità e dei prezzi. Questo ha permesso a Horbity di mantenere il proprio catalogo sempre aggiornato, riducendo al minimo l’intervento manuale e il rischio di errori.
Gestione degli Ordini:
La gestione degli ordini è stata un’altra area chiave. Abbiamo implementato un’integrazione tra Magento 2 e AS400, garantendo che tutti gli ordini venissero processati in modo efficiente e accurato. Questo ha migliorato significativamente la velocità e l’affidabilità del processo di gestione degli ordini.

Collaborazione con Twintips

La collaborazione con Twintips è stata fondamentale per il successo del progetto. Twintips ha portato la sua esperienza e le sue competenze nel settore, contribuendo in modo significativo alla realizzazione di una soluzione completa e integrata. Lavorare insieme ci ha permesso di superare le sfide e di raggiungere gli obiettivi prefissati.

Conclusione

Il progetto Horbity è un esempio di come la tecnologia e la collaborazione possano trasformare un’idea in una realtà di successo. Sono fiero di aver contribuito a questo progetto e di aver lavorato con un team così talentuoso e dedito. Non vedo l’ora di affrontare nuove sfide e di continuare a innovare nel campo dell’e-commerce.

Grazie per aver letto e spero che questo articolo vi abbia fornito una panoramica interessante sul progetto Horbity. Se avete domande o volete saperne di più, non esitate a contattarmi.

Personalizzazione della Maintenance Mode, Plugin per Magento 2

Se hai mai gestito un sito e-commerce su Magento 2, sai quanto è importante poter mettere il sito in modalità manutenzione senza compromettere l’esperienza utente. Magento 2 offre una modalità di manutenzione di base, ma presenta alcune limitazioni, specialmente quando il sito è in modalità sviluppatore (developer mode). In questa modalità, è impossibile personalizzare la pagina 503 che informa i clienti che il sito è offline per manutenzione. Ecco dove entra in gioco il mio ultimo plugin per Magento 2.

Problemi della Maintenance Mode su Magento 2

Di base, Magento 2 consente di attivare e disattivare la modalità manutenzione, ma non offre una soluzione flessibile per personalizzare la pagina di servizio in tutte le modalità operative del sito. Questo rappresenta un problema per chi vuole mantenere una comunicazione chiara e professionale con i propri clienti, informandoli delle attività di manutenzione in corso.

La Soluzione: Il mio Plugin

Il plugin che ho sviluppato risolve questo problema in modo efficace. Ecco alcune delle principali caratteristiche:

Personalizzazione del front-end: Ora puoi creare una pagina di manutenzione personalizzata tramite la sezione CMS Page dell’admin di Magento. Questo ti permette di mantenere una comunicazione coerente con il tuo brand, anche durante i periodi di manutenzione.
Compatibilità con Tutte le Modalità: Il plugin permette di attivare la pagina di manutenzione personalizzata in tutte le modalità operative del sito, inclusa la modalità sviluppatore. Non dovrai più preoccuparti delle limitazioni imposte dalla modalità in cui il tuo sito si trova.
Accesso per IP Specifici: È possibile specificare determinati indirizzi IP a cui permettere l’accesso al front-end del sito. Questo è particolarmente utile per sviluppatori o membri del team che devono verificare che tutto funzioni correttamente durante il periodo di manutenzione.

Come Funziona

Il plugin è facile da installare e configurare. Una volta installato, troverai una nuova pagina nella sezione CMS Page dell’admin di Magento. Qui puoi creare e personalizzare la tua pagina di manutenzione secondo le tue esigenze. Successivamente, potrai attivare la modalità manutenzione tramite il plugin, e la tua pagina personalizzata verrà visualizzata agli utenti. Inoltre, puoi specificare gli indirizzi IP che avranno accesso al sito durante la manutenzione, permettendo ai membri del team di lavoro di continuare le verifiche necessarie.

Installalo tramite composer:

composer config --global --auth github-oauth.github.com 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

composer config repositories.threecommerce_base vcs https://github.com/Threecommerce/m2-base.git

composer config repositories.threecommerce_maintenance vcs https://github.com/Threecommerce/m2-maintenance.git

composer require threecommerce/m2-base:dev-main

composer require threecommerce/m2-maintenance:dev-main

Benefici per il Tuo E-commerce

L’adozione di questo plugin porta numerosi vantaggi:

Migliore Esperienza Utente: I tuoi clienti saranno sempre informati in modo chiaro e professionale.
Flessibilità Operativa: Puoi effettuare la manutenzione del sito senza limitazioni, mantenendo la possibilità di verificare le modifiche in tempo reale.
Semplicità di Utilizzo: L’interfaccia di amministrazione intuitiva di Magento rende la personalizzazione della pagina di manutenzione un gioco da ragazzi.

Conclusioni

Il nostro nuovo plugin per Magento 2 è uno strumento essenziale per chiunque gestisca un e-commerce su questa piattaforma. Offre la flessibilità necessaria per personalizzare la comunicazione con i clienti durante i periodi di manutenzione e garantisce un’esperienza utente ottimale in tutte le modalità operative del sito. Non lasciarti limitare dalle impostazioni predefinite di Magento 2: con il mio plugin, puoi gestire la manutenzione del tuo sito in modo professionale ed efficace.

Scopri di più e prova il plugin oggi stesso per vedere come può migliorare la gestione del tuo sito e-commerce!

Progetto: Fabio Orioli

Il progetto Fabio Orioli è nato dalla fruttuosa collaborazione con TwinTips. Un’azienda dinamica e innovativa che mi ha affidato l’intero sviluppo dell’e-commerce, un incarico che ho accettato con entusiasmo e determinazione.

La prima fase del progetto ha riguardato il supporto nella realizzazione della parte grafica, che è stata affidata a terzi. Partendo da un tema già pronto come base, per velocizzare gli sviluppi, ho poi provveduto ad integrarlo sul CMS Magento 2. Questo CMS, noto per la sua flessibilità e robustezza, si è rivelato la scelta ideale per soddisfare le esigenze del cliente.

Uno degli aspetti più stimolanti del progetto è stato lo sviluppo di un plugin personalizzato. Questo plugin, creato su misura per le specifiche necessità dell’e-commerce, permette la comunicazione tramite il sistema Hoplix utilizzando le API. Hoplix è una piattaforma che facilita la gestione dei prodotti e delle stampe on-demand, rendendo il flusso di lavoro più efficiente e ottimizzando l’integrazione con il negozio online.

Il risultato finale è un e-commerce funzionale, esteticamente gradevole e perfettamente integrato con i sistemi di gestione delle stampe on-demand. Questo progetto non solo ha rafforzato la mia competenza nell’uso di Magento 2 e nella creazione di plugin personalizzati, ma ha anche dimostrato come una collaborazione efficace possa portare a risultati eccezionali.

Sono estremamente grato a TwinTips per la fiducia riposta in me e per l’opportunità di lavorare su un progetto così stimolante.

Progetto AbsService: Innovazione nel Commerce con Twintips

Il progetto AbsService, realizzato in collaborazione con Twintips, ha richiesto un’attenzione particolare a diverse componenti chiave del commercio elettronico, soprattutto nella gestione delle personalizzazioni di prezzo e delle interazioni con il cliente.

Il Ruolo dei Plugin Back-End

Uno degli aspetti più cruciali del progetto è stato lo sviluppo di plugin back-end che gestissero tutte le personalizzazioni di prezzo. Questi plugin permettevano di importare configurazioni di prezzo tramite file CSV direttamente dall’admin, facilitando così la gestione delle varie opzioni disponibili per i clienti. Inoltre, sono state fatte delle personalizzazioni lato prodotto e ordini nel pannello di amministrazione, consentendo ai clienti di forzare la sincronizzazione degli ordini e dei prodotti ogni volta che venivano apportate delle modifiche. Questa funzionalità ha semplificato notevolmente il processo di aggiornamento dei prezzi e dei dati, rendendo il sistema più flessibile e adattabile alle esigenze di mercato.

Flusso di Acquisto Personalizzato

Il flusso di acquisto è stato progettato per offrire un’esperienza utente fluida e personalizzata. Ecco come si articolava:

Login del Cliente: I clienti accedevano al sistema tramite login.
Scelta del Prodotto: Dopo aver effettuato l’accesso, i clienti potevano scegliere la tipologia di barra desiderata.
Configurazione Parametri: I clienti configuravano una serie di parametri che influenzavano il prezzo finale del prodotto.
Modifiche nel Carrello: Ulteriori modifiche e personalizzazioni erano possibili anche nella fase del carrello.
Calendarizzazione: Una funzione di calendarizzazione permetteva di selezionare la disponibilità per il ritiro dei prodotti.
Checkout Standard: Infine, il processo si concludeva con il checkout standard di Magento 2.

Integrazione Front-End e Back-End

Tutte le personalizzazioni visibili nel front-end erano state replicate anche nel back-end. Questo approccio garantiva che il customer care potesse vedere esattamente le scelte effettuate dal cliente, migliorando la qualità del servizio e la capacità di rispondere efficacemente a eventuali richieste o problemi.

Implementazione delle API

Per concludere il tutto, abbiamo implementato delle API che collegavano il sistema di Magento 2 con il gestionale del cliente. Queste API permettevano di trasmettere tutte le informazioni dell’ordine e aggiornare automaticamente eventuali dati relativi agli ordini su Magento. Questa integrazione ha migliorato la sincronizzazione dei dati e ridotto il rischio di errori manuali, rendendo il processo più efficiente e affidabile.

Conclusioni

Il progetto ABSService ha rappresentato una sfida entusiasmante e un’opportunità per dimostrare come una collaborazione ben strutturata possa portare a soluzioni innovative nel campo del commerce. Grazie alla collaborazione con Twintips, siamo riusciti a creare un sistema che non solo risponde alle esigenze dei clienti, ma che è anche facilmente gestibile e scalabile per future esigenze di business.

La mia esperienza con i metodi di pagamento sugli e-commerce

Sabato al WMF (se non sai di cosa parlo, guarda qua), mi sono incontrato con il team di MultiSafePay, per parlare di una possibile partnership e per capire meglio come funziona il loro sistema di pagamento che fino ad ora non mi è mai capitato di usare, ma che presto proverò.

In questo articolo voglio quindi raccontarvi un pò la mia esperienza con i vari metodi di pagamento che ho installato e configurato negli anni sugli e-commerce che ho creato e quali sono i pro e contro che ho riscontrato.

PayPal:

Mi è capitato di installato e configurarlo su quasi tutti gli e-commerce che ho realizzato. Ha una sandbox, la gestione della configurazione diciamo che non è per principianti, ma una volta configurato risulta stabile.
Mi è capitato di avere problemi con versioni di magento non recenti sulla parte dei pagamenti express, dove in alcuni casi non riusciva ad istanziare il carrello.
Ho provato anche il loro sistema di pagamento con il button su una landing page, con il quale non ho avuto problemi.
Sinonimo di sicurezza in fase di acquisto su un sito sconosciuto, penso sia il metodo di pagamento più usato sia per vendere che per acquistare.

Axepta:

Sistema di pagamento del gruppo BNL, non mi è capitato spesso di installarlo, semplice da configurare, presenta l’ambiente di sandbox per i test e non ho avuto particolari problematiche.

HIPAY:

Un sistema omnichannel di pagamento, menzione d’onore va fatta al team di assistenza sempre presente per il supporto nel caso in cui si verifichino dei problemi, cosa che purtroppo capita per via di una configurazione non proprio banale se non si conosce il loro sistema.
Anche qua abbiamo la possibilità di effettuare i test con la sandbox, al fine di arrivare live con l’ambiente ok.
Una cosa fastidiosa può essere la frequente presenza di aggiornamenti, ma d’altro canto è anche sinonimo di un sistema sempre sul pezzo.

Axerve:

Sistema di pagamento di Banca Sella, nonostante io sia cliente Banca Sella e nonostante sia una delle banche più informatizzate e innovative, è uno dei sistemi con cui ho riscontrato più problemi in assoluto.
Hanno una guida molto esplicativa e un supporto sempre gentile e sul pezzo, ma in alcuni casi mi è capitato di dover operare anche lato server/certificati e domini per adattare tutto al metodo di pagamento.

Satispay:

Poche volte mi è capitato di doverlo configurare, abbastanza semplice da fare, non ho feedback in merito da parte dei clienti, non mi è mai però capitato di avere dei problemi causati da questo plugin.

Apple Pay e Google Pay:

Su pochi siti ho trovato la possibilità di usarlo, le volte che mi è capitato di installarlo e configurarlo si contano nelle dita di una mano, diciamo che non hanno dei plugin dedicati ma richiedono l’installazione di metodi di pagamento alternativi. La configurazione è molto semplice e rapida.

Klarna:

Su Magento 2 è installato di base, nonostante i mei anni di esperienza e i numerosi progetti su cui ho messo mano, non mi è capitato di doverlo installare e configurare, ma sono stato solo un fruitore su siti dove ho acquistato e devo dire che l’esperienza di acquisto non è male.

Pagolight:

Sistema di pagamento a rate di proprietà di Compass, installato circa 3 volte, configurazione facile e possibilità di sandbox. Mi è capitato solo ultimamente che per un’errore js del modulo su magento 2 non funzionasse il checkout, problema rientrato con la disabilitazione del modulo. Il problema potrebbe però essere dovuto però a delle configurazioni da modificare dopo aver trasferito il sito.

Findomestic:

I pagamenti dilazionati ultimamente stanno spopolando e in e-commerce che trattano magari di grandi elettrodomestici o che fanno ordini importanti sono i più usati. In questo caso l’integrazione non faceva altro che rimandare sul sito di findomestic per procedere con la pratica di prestito. C’è la possibilità di sandbox.

Tra i sistemi offline, abbiamo il pagamento in negozio, per gli store con negozio fisico, il pagamento alla consegna che sempre più commerce cerano di rimuovere per le rogne con i corrieri ed il bonifico bancario (che ha come impedimento al momento la lentezza).

Progetto: Acqua Di Parma (e-commerce Magento1)

Nel mondo dell’e-commerce, realizzare un sito che rispecchi l’eleganza e la raffinatezza di un brand di lusso è una sfida avvincente. Ho avuto l’opportunità di collaborare con Christian Greco per creare l’e-commerce di Acqua di Parma, un marchio iconico di profumi e cosmetici di alta gamma, utilizzando la piattaforma Magento 1. Questo progetto ha richiesto interventi sia sul front-end che sul back-end, per garantire un’esperienza utente impeccabile e una gestione dei prodotti efficiente.

La Sfida

Acqua di Parma è sinonimo di lusso, tradizione e qualità. Tradurre questi valori in un sito e-commerce richiedeva una cura meticolosa sia per l’aspetto visivo che per le funzionalità tecniche. Il nostro obiettivo era creare una piattaforma che non solo offrisse un’interfaccia utente elegante e intuitiva, ma anche un sistema backend robusto per la gestione dei prodotti e degli ordini.

La Collaborazione

Lavorare con Christian Greco è stata un’esperienza straordinaria. La sua esperienza e la sua visione hanno giocato un ruolo cruciale nel plasmare il progetto. Insieme, abbiamo affrontato ogni sfida con un approccio collaborativo, combinando le nostre competenze per raggiungere un risultato eccezionale.

Le Soluzioni Implementate

Front-End

Design Elegante e Intuitivo Abbiamo progettato un’interfaccia utente che rispecchiasse l’estetica sofisticata di Acqua di Parma. Utilizzando immagini ad alta risoluzione, colori raffinati e una tipografia elegante, abbiamo creato un’esperienza visiva che riflette il prestigio del marchio.
Navigazione Intuitiva La navigazione del sito è stata studiata per essere semplice e intuitiva, permettendo agli utenti di trovare facilmente i prodotti desiderati. Menu a tendina, filtri di ricerca avanzati e una struttura ben organizzata facilitano l’esplorazione del catalogo.
Responsive Design Il sito è stato ottimizzato per essere accessibile da qualsiasi dispositivo, garantendo un’esperienza fluida sia su desktop che su dispositivi mobili.

Back-End

Gestione Avanzata dei Prodotti Abbiamo sviluppato un sistema di gestione dei prodotti che consente di aggiungere, modificare e organizzare facilmente il vasto catalogo di Acqua di Parma. Questo includeva la creazione di categorie personalizzate, l’aggiunta di descrizioni dettagliate e la gestione delle scorte.
Integrazione dei Pagamenti Il sistema di pagamento è stato integrato con diverse opzioni, permettendo agli utenti di completare gli acquisti in modo sicuro e conveniente. Abbiamo implementato metodi di pagamento popolari, come carte di credito e PayPal.
Ottimizzazione delle Prestazioni Per garantire che il sito fosse veloce e reattivo, abbiamo ottimizzato il codice e configurato server potenti. Questo ha permesso di ridurre i tempi di caricamento delle pagine e migliorare l’esperienza utente.
Sicurezza Abbiamo implementato misure di sicurezza avanzate per proteggere i dati degli utenti e prevenire eventuali minacce. Questo includeva l’uso di certificati SSL, firewall e altre tecnologie di protezione.

Conclusione

Creare l’e-commerce di Acqua di Parma su Magento 1 è stata un’esperienza gratificante che ha richiesto competenze tecniche avanzate e un’attenzione meticolosa ai dettagli. La collaborazione con Christian Greco è stata fondamentale per il successo del progetto, permettendoci di combinare le nostre competenze per realizzare un sito che rispecchiasse perfettamente l’eleganza e la qualità del marchio.

Questo progetto ha dimostrato come, con la giusta collaborazione e una visione chiara, sia possibile creare un’esperienza e-commerce che non solo soddisfi le aspettative degli utenti, ma che elevi anche l’immagine del brand.

ReferenceError: cookieMessagesObservable is not defined

In questi giorni mi è capitato di aggiornare un magento da una versione 2.3.x all’ultima versione, 2.4.7 ed ho riscontrato questo errore in console.
Debugando il codice ho scoperto che nel tema era stato sovrascritto questo file: Magento_Theme/web/js/view/messages.js che non includeva ovviamente cookieMessagesObservable.

Ho risolto semplicemente cancellando il file nel tema, in quanto non riportava modifiche.

Come Risolvere il Content Security Policy (CSP) su Magento

Il Content Security Policy (CSP) è una funzionalità di sicurezza web che aiuta a rilevare e mitigare determinati tipi di attacchi, incluso il Cross Site Scripting (XSS) e l’iniezione di dati, che potrebbero essere utilizzati per tutto, dal furto di dati agli attacchi di malware. CSP è supportato in Magento 2.3.5 e versioni successive.

Configurazione CSP in Magento 2

Quando aggiorni a Magento 2.3.5, potresti riscontrare problemi di caricamento di risorse a causa del CSP. Per risolvere questo problema, devi configurare correttamente il CSP. Ecco i passaggi per farlo:

Step 1: Creare un Modulo Personalizzato

Prima di tutto, crea un modulo personalizzato per configurare il CSP. Supponiamo di creare un modulo chiamato Custom_Csp.

1 – Crea il file registration.php nel percorso app/code/Custom/Csp/

<?php
    \Magento\Framework\Component\ComponentRegistrar::register(
        \Magento\Framework\Component\ComponentRegistrar::MODULE,
        'Dolphin_Cspallow',
        __DIR__
    );

2 – Crea il file module.xml nel percorso app/code/Custom/Csp/etc/

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Dolphin_Cspallow" setup_version="1.0.0" />
</config>

3 – Crea il file csp_whitelist.xml nel percorso app/code/Custom/Csp/etc/

<?xml version="1.0"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp/etc/csp_whitelist.xsd">
    <policies>
        <policy id="script-src">
            <values>
               <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="google-analytics" type="host">*.google-analytics.com</value>
                <value id="twimg" type="host">*.twimg.com</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="trustedshops" type="host">*.trustedshops.com</value>
                <value id="usercentrics" type="host">*.usercentrics.eu</value>
                <value id="fontawesome" type="host">*.fontawesome.com</value>
                <value id="bing" type="host">*.bing.com</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zdassets" type="host">*.zdassets.com</value>
                <value id="google" type="host">*.google.com</value>
            </values>
        </policy>
        <policy id="style-src">
            <values>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="googleapis" type="host">*.googleapis.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="twimg" type="host">*.twimg.com</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="typekit" type="host">*.typekit.net</value>
                <value id="trustedshops" type="host">*.trustedshops.com</value>
                <value id="fontawesome" type="host">*.fontawesome.com</value>
                <value id="bing" type="host">*.bing.com</value>
            </values>
        </policy>
        <policy id="img-src">
            <values>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="klarna-base" type="host">*.klarna.com</value>
                <value id="googleadservices" type="host">*.googleadservices.com</value>
                <value id="google-analytics" type="host">*.google-analytics.com</value>
                <value id="paypal" type="host">*.paypal.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="twimg" type="host">*.twimg.com</value>
                <value id="vimeocdn" type="host">*.vimeocdn.com</value>
                <value id="youtube-img" type="host">*.ytimg.com</value>
                <value id="data" type="host">'self' data:</value>
                <value id="fontawesome" type="host">*.bing.com</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>
                <value id="doubleclick" type="host">*.doubleclick.net</value>
                <value id="google" type="host">*.google.com</value>
                <value id="googlein" type="host">*.google.co.in</value>
                <value id="mastercard" type="host">*.mastercard.com</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="google-analytics" type="host">www.google-analytics.com</value>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="paypal" type="host">*.paypal.com</value>
                <value id="twimg" type="host">*.twimg.com</value>
                <value id="zdassets" type="host">*.zdassets.com</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>
                <value id="mediator" type="host">wss://widget-mediator.zopim.com</value>
                <value id="googleanalytics" type="host">*.google-analytics.com</value>
                <value id="doubleclick" type="host">https://stats.g.doubleclick.net</value>
            </values>
        </policy>
        <policy id="font-src">
            <values>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="typekit" type="host">*.typekit.net</value>
                <value id="twimg" type="host">*.twimg.com</value>
                <value id="trustedshops" type="host">*.trustedshops.com</value>
                <value id="googleapis" type="host">*.googleapis.com</value>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>
            </values>
        </policy>

        <policy id="frame-src">
            <values>
                <value id="youtube.com" type="host">https://www.youtube.com</value>
                <value id="sandbox.paypal.com" type="host">http://www.sandbox.paypal.com</value>
                <value id="paypal.com" type="host">www.paypal.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
            </values>
        </policy>
        
        <policy id="media-src">
            <values>
                <value id="zopim" type="host">*.zopim.com</value>
                <value id="zopimio" type="host">*.zopim.io</value>
            </values>
        </policy>

        <policy id="form-action">
            <values>
                <value id="twitter.com" type="host">*.twitter.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Step 2: Abilitare e Configurare il Modulo

Abilita il modulo eseguendo i seguenti comandi:shCopia codicebin/magento module:enable Custom_Csp bin/magento setup:upgrade bin/magento cache:clean bin/magento cache:flush
Controlla la Console del BrowserApri il tuo sito web e verifica che non ci siano errori CSP nella console del browser. Se ci sono, aggiorna csp_whitelist.xml per consentire le risorse bloccate.

Step 3: Aggiornamenti Futuri

Con CSP abilitato e configurato, assicurati di mantenere il file csp_whitelist.xml aggiornato man mano che aggiungi nuove risorse al tuo sito.