Inserire un’icona al metodo di pagamento di Magento bonifico bancario

In questo tutorial Magento 1.9x, andremo ad aggiungere un’icona al metodo di pagamento bonifico bancario, utilizzando il checkout standard di Magento, ovvero One Page Checkout.

Il file che dovremo modificare potrebbe trovarsi nei file core del frontend, ovvero in:

app/design/frontend/base/

Ricordiamoci che non dobbiamo mai modificare il tema base, ma dobbiamo fare un override nella cartella del nostro tema.

Il tutorial sarà molto breve e semplice, cominciamo!

Trovare il file da modificare in Magento e creare l’override

Il nostro file si trova a questo indirizzo:

/app/design/frontend/base/default/template/checkout/onepage/payment/methods.phtml

A questo punto, dobbiamo fare l’override del file. Ma cosa significa? Significa che io non devo modificare il file nel suo path originario, ma devo copiare tutta la struttura di cartelle nel nostro tema in uso. In questo esempio io utilizzo il tema di default di Magento 1, ovvero RWD.

Clonare il file

Nel mio caso quindi, in questo path:

/app/design/frontend/rwd/default/template/checkout/onepage

andrò a creare la cartella “payment” e copio-incollo il file “methods.phtml”

Il codice per inserire l’icona nel metodo bonifico bancario

Capire il codice PHP dei metodi del checkout

Il numero dei metodi di pagamento in Magento è variabile, a seconda delle impostazioni selezionato dal pannello amministrativo, nella sezione Vendite e Metodi di Pagamento.

La sezione metodi di pagamento nel frontend, quando siamo nel checkout, è sviluppato in modo da ciclare tutti i metodi che il sistema trova attivi inserendoli in una lista.

Nel nostro file methods.phtml, alla riga 44, troviamo infatti un ciclo foreach che itera l’oggetto $methods, in questo modo:

foreach ($methods as $_method):

Per ognuno dei metodi di pagamento vengono mostrati in pagina vari pezzi di HTML.

La logica per mostrare l’icona nel metodo bonifico bancario

Siccome è bene scrivere codice pulito quando possibile, la logica sarà la seguente:

  1. Magento controlla, per ogni metodo, se esiste un’immagine o icona correlata
  2. se esiste, il sistema mostrerà in pagina l’icona

Il codice da inserire

Per scrivere un codice funzionante, dobbiamo fare due assumption, ovvero mettere due paletti.

Assumption 1: il path dove risiede l’immagine

Supponiamo di caricare l’immagine dell’icona nella sezione skin del nostro tema, nel nostro caso di esempio caricheremo l’immagine qui dentro:

/skin/frontend/rwd/default/images

Assumption 2: il nome dell’immagine

Questa è una convenzione necessaria perché siamo all’interno di un ciclo foreach e quindi i parametri dei vari metodi di pagamento devono essere differenziati in modo dinamico. Fortunatamente viene in nostro soccorso la variabile $_code, un codice identificativo diverso per ogni metodo di pagamento, usato già nell’attributo “for” del tag label, come nell’esempio:

$oneMethod = $_code

Quindi a questo punto, andiamo ad inserire il seguente codice:

 

Che cosa fa questo codice?

Prima setto delle variabili in modo tale da memorizzarle in PHP e poterle riutilizzare a piacimento (ed evitare possibilità di errori), successivamente controllo se esiste il file nel path locale, quindi, se esiste, inserisco l’immagine ed assegno a questa un ID per poterla gestire via CSS ed inserisco l’attributo alt.

A questo punto, il lavoro è concluso e questo è il risultato che io visualizzo:

Conclusioni

Questa tecnica, piuttosto semplice perché non fa utilizzo di moduli backend, ma puramente di codice frontend, è utilizzabile per tutti i metodi di pagamento ed è flessibile, perché già dinamica e predisposta per inserire immagini negli altri metodi.

Non rimane quindi che rendere graficamente l’icona, attraverso i CSS, come desideri.

Domande o dubbi?

Se hai domande e/o dubbi, puoi ricevere assistenza nel gruppo pubblico Facebook.