administrator  Mar.12.2013 0 Comments

In ziobuddalabs stiamo realizzando una sezione ecommerce, utilizzando Drupal Commerce, per un sito in fase di ultimazione ed una delle ultime richieste del cliente è stata quella di modificare la pagina del checkout per spostare il fieldset dedicato al tipo di pagamento nella pagina dove si inseriscono i dati di fatturazione e spedizione in uno step (o pagina) successivo con una grafica modificata per meglio integrarsi con quella del sito web. Nel caso non mi fossi riuscito a spiegare il cliente voleva passare da questo:


a questo:

 

La soluzione, che ci è costata alcune ore di lavoro tra studio, ricerca della soluzione più veloce (non chè usabile), implementazione e test è stata quella di non creare tutto con un modulo ad-hoc sfruttando i vari hook messi a disposizione da Drupal e da Drupal Commerce, ma utilizzare il modulo Checkout Pages (PATH) per la gestione della nuova pagina ed il solo hook_form_alter per la modifica della visualizzazione del form di scelte del tipo di pagamento. Ed ovviamente un po' di CSS per migliorare la grafica del risultato finale.

L'installazione del modulo Checkout Pages è come al solito semplice: si prende, si copia nella directory dei moduli e lo si attiva dal pannello di amministrazione. Una volta che il modulo è attivo si potrà accedere alla gestione delle pagina del percorso di checkout (admin/commerce/config/checkout/custom-pages)

 

Senza questo modulo possiamo solamente gestire le sezioni del checkout per il loro contenuto, tramite la normale pagina di checkout form (admin/commerce/config/checkout).

Nella nuova pagina di gestione delle pagine di checkout clicchiamo su “Add page” per inserire la nuova pagina (o step) del processo di checkout.

 

Dei quattro campi presenti in questo form quelli che ci interessano sono il titolo della pagina che andremo a chiamare “Modalità di pagamento” ed il check su “Buttons” che ci permetterà di avere i bottoni di “Prosegui – Torna indietro” alla fine della pagina finale.

 

Una volta premuto su “Salva” dobbiamo tornare alla pagina di Checkout form (admin/commerce/config/checkout) e spostare i “Tipi di pagamento” (se avete la versione di default di Drupal Commerce questo campo è “Payment”) sotto la nuova pagina “Modalità di pagamento”.

 

 

Ora che abbiamo la nuova pagina dobbiamo modificare il funzionamento del form, perché vogliamo che la descrizione della modalità di pagamento sia subito sotto la tipologia dello stesso e non in un campo a fine form che si aggiorna tramite Ajax, come di default. Questa è la versione finale del codice PHP utilizzato (attenzione al valore della variabile $form_id perché cambia per ogni sito web quindi dovete modificare il codice qui sotto per gestire il nome del vostro form) :

 
function mymodule_form_alter(&$form,&$fs,$form_id) {
  if ($form_id == 'commerce_checkout_form_tipi_di_pagamento') {
      foreach ($form['commerce_payment']['payment_method']['#options'] as $k => $value) {
            $tmp = explode("|",$k);
            $class = $tmp[0];
            $form['commerce_payment']['payment_method']['#options'][$k] = "
$value

"; if (isset($form['commerce_payment']['payment_methods']['#value'][$k]['settings']['information'])) { $form['commerce_payment']['payment_method']['#options'][$k] .= "

".$form['commerce_payment']['payment_methods']['#value'][$k]['settings']['information']."

"; } elseif (isset($form['commerce_payment']['payment_methods']['#value'][$k]['settings']['policy'])) { $form['commerce_payment']['payment_method']['#options'][$k] .= "

".$form['commerce_payment']['payment_methods']['#value'][$k]['settings']['policy']."

"; } } unset ($form['commerce_payment']['payment_method']['#ajax']); } }

Fatto questo dobbiamo modificare via css la visualizzazione grafica del corpo della nuova pagina di checkout. Per la pagina del cliente si è usato questo codice CSS per avere l'output come da immagine:

 
body.page-checkout-tipi-di-pagamento .commerce_payment.form-wrapper .form-radio { float: left; padding-right: 5px;}
body.page-checkout-tipi-di-pagamento .commerce_payment.form-wrapper .form-item { border-bottom: 1px #ccc solid; margin-bottom: 10px; padding-bottom: 10px;}
body.page-checkout-tipi-di-pagamento .commerce_payment.form-wrapper .form-item .information { margin-top: 10px; }
body.page-checkout-tipi-di-pagamento .commerce_payment.form-wrapper .form-item .label {margin-left: 20px;}
body.page-checkout-tipi-di-pagamento .commerce_payment.form-wrapper #payment-details { display: none;} 

 

Anche in questo caso attenzione all'elemento “body.page-checkout-tipi-di-pagamento”: il suo nome cambia da installazione ad installazione. Guardate i sorgenti HTML della pagina di checkout che abbiamo aggiunto e su cui stiamo lavorando per scoprire il suo corretto valore.

Finito. Semplice, no ? Sembra complicato ma alla fine non lo è. Basta un modulo, un hook, un po' di programmazione e tutto è fatto. Senza dimenticare qualcuno che lo fa prima di noi e spiega come farlo in modo semplice e veloce :D