Come chiudere la finestra popup del modulo Magento ask for details dopo tot secondi con javaScript, jQuery e modificando i file phtml

Questo tutorial è sul modulo Magento “Ask for Details” di Aurora ed in piccola parte anche su JavaScript e jQuery.

Apriamo la rubrica che ho battezzato come “Doctor Magento, help me!” auto affibbiandomi il titolo di dottore in Magento con una richiesta di un utente del gruppo Facebook codeRevolution, che attualmente ha il modulo installato in uno dei suoi siti Magento.

In questo articolo andremo a:

  • “allineare” la situazione a quella dell’utente facendo aprire in un pop-up il form invece che in pagina come da standard del modulo
  • inserire un controllo JavaScript per determinare se il form è stato inviato oppure no
  • nascondere/mostrare il form all’occorrenza
  • chiudere la nuove finestra popup dopo un tot di secondi

Cominciamo!

Far aprire la richiesta informazioni come finestra popup

Di default, il modulo inserisce in pagina prodotto un nuovo pulsante che permette di richiedere informazioni riguardanti il prodotto che l’utente sta visitando, come vedi nell’immagine seguente.

Al click sul bottone, l’utente viene rimandato alla pagina del form.

Tuttavia il nostro amico che ha chiesto aiuto ha una versione modificata, ovvero il link si apre in un popup (cosa che io sconsiglio vivamente, perché potrebbe essere bloccato da sistemi come adblock e simili) e non nella stessa finestra.

Quindi replichiamo anche noi il comportamento, nel seguente modo.

Apriamo il nostro file:

app/design/frontend/ultimo/default/template/askfordetailspro/askfordetailspro.phtml

e modifico il link in questo modo:

 

Controllare se il form è stato inviato

Tutto dipenderà da questo controllo: il form è stato inviato oppure no?

Per questo tutorial useremo JavaScript per determinare se il form è stato inviato. La logica è molto semplice, quando il modulo presenta il form da compilare, nella URL della route del modulo compare la scritta “index”, mentre invece quando il form è stato inviato la route cambia e la parola index scompare. Il controllo quindi verrà fatto su questo principio.

Apriamo il nostro file che contiene il form, che nel mio caso si trova qui:

app/design/frontend/ultimo/default/template/askfordetailspro/popup.phtml

e dopo l’ultimo div, prima della chiusura del tag body, andiamo a scrivere questo codice:

Un tocco di CSS per mostrare e nascondere il form

Praticamente ci siamo quasi! mancano pochissimi dettagli.

Vogliamo che il form compaia solo quando è ancora da compilare, ma che scompaia quando è stato compilato.

Inizialmente avevo pensato di nasconderlo con jQuery, dopo il controllo della URL, tuttavia questa soluzione implica un piccolo difetto, cioè il form viene visualizzato per un istante e poi scompare. Non proprio bello da vedere.

Dunque ho deciso di procedere al contrario, far partire il form come non visibile da subito attraverso l’uso di una classe CSS e una riga di codice e poi farlo comparire con jQuery, così il fastidioso effetto scompare.

Prima di tutto andiamo nel nostro file che contiene il form:

app/design/frontend/ultimo/default/template/askfordetailspro/askfordetailsproform.phtml

ed aggiungiamo una classe al tag form che lo nasconderà. Nel mio caso ho aggiunto la classe “display_none”.

Poi, nel nostro file

app/design/frontend/ultimo/default/template/askfordetailspro/popup.phtml

dentro il tag head, aggiungiamo questo pezzetto di codice CSS (se vuoi, puoi inserire questo codice in un file CSS esterno e non inline nel file PHTML per ottimizzare ulteriormente il caricamento):

Aggiornamento articolo: pulsante per chiudere la finestra

Serafino ha seguito il tutorial, ma si è accorto che potrebbe servire un pulsante aggiuntivo che permetta di chiudere il popup con un click, questa la sua richiesta:

Procediamo in molto molto semplice: inseriamo un nuovo bottone nel file phtml che contiene il form ed applichiamo un piccolo JavaScript. Proseguiamo!

Inserire il codice nel file phtml

Come prima cosa, nel nostro file, inseriamo:

app/design/frontend/ultimo/default/template/askfordetailspro/askfordetailsproform.phtml

il codice è un semplice tag <a>, un link, con una funzione JavaScript sull’attributo “onclick” che chiude la finestra. Assegno a questo link anche un id così da poterlo stilizzare tramite CSS come preferisci. Ed il lavoro è fatto!

Conclusioni

Questo semplice tutorial, anche se specifico per il modulo ask for details, in realtà è applicabile a qualsiasi popup e abbiamo visto anche un po’ di JavaScript e jQuery che non fa mai male.

Domande o dubbi?

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