Blogger Store: opzione di pagamento e richiesta ordine con modulo

Di seguito, spiegherò come modificare il comportamento dei pulsanti che compaiono originariamente nel carrello e che trasmettono i dati a PayPal o inviano un ordine via e-mail dopo che l'acquirente ha fornito il proprio indirizzo e-mail. Dopo la modifica, questi pulsanti ci porteranno prima a una pagina intermedia statica che mostrerà un riepilogo degli articoli selezionati e da cui sarà possibile effettuare l'ordine finale.
Modificheremo anche lo script per impostare un modulo aggiuntivo su quella pagina che richiederà ulteriori informazioni, assicurandoci di ricevere immediatamente tutto ciò di cui abbiamo bisogno, evitando di dover contattare nuovamente l'acquirente per chiedere il suo indirizzo, numero di telefono, ecc. Potete vedere un esempio
di tutto questo nella demo del modello .

Anche se potrebbe non essere il più appropriato dal punto di vista didattico, descriverò le modifiche che devi apportare, in un ordine che manterrà il tuo negozio inattivo il meno a lungo possibile, anche se dovessi rimanere bloccato. Bastano un paio di minuti per completare il passaggio finale.

Configurare il contenuto della pagina statica

Il primo passo sarebbe creare una pagina statica con un titolo appropriato : "Controlla il tuo ordine", "Effettua ordine", "Invia carrello" o qualsiasi altra cosa ti venga in mente. Presumo che sappiate tutti come accedere alla dashboard e crearne una, ma per ogni evenienza, ecco uno screenshot autoesplicativo.

Parte HTML

In questa pagina, dovrai includere diverse cose e, poiché alcune di queste saranno codice HTML, è meglio fare tutto dalla scheda HTML dell'editor .
Per comodità e per la futura manutenzione, inizieremo dalla sezione in cui verranno caricati gli articoli attualmente presenti nel carrello. È lo stesso sistema che abbiamo usato nel modello, ma includendo queste caselle con queste classi specifiche nella pagina, le faremo apparire direttamente nel corpo della pagina e non nel carrello in alto.

Nel carrello: <span class="simpleCart_quantity"></span> articolo/i
<br/>
<br/>
Prezzo totale: <span class="simpleCart_total"></span> + <span class="simpleCart_shippingCost"></span> spese di spedizione
<br />
<div class="simpleCart_items"></div>
<div class="clear"></div>
<div align="center">
(<span style="color: #cc0000;">*</span>) Dati obbligatori

Successivamente, ci sarà una tabella con tutti i dati che vogliamo richiedere (form) e alcuni avvisi su quelli obbligatori. È importante rispettare i nomi e gli identificatori utilizzati per gli input perché dovremo usare esattamente gli stessi quando modificheremo il codice JavaScript.

<br />
<br />
<table>
<tbody>
<tr><td>Nome (<span style="color: #cc0000;">*</span>): </td><td><input id="name" name="name" style="width: 400px;" type="text" value="" /></td></tr>
<tr><td><br /></td></tr>
<tr><td>Telefono (<span style="color: #cc0000;">*</span>): </td><td><input id="phone" name="phone" style="width: 120px;" type="text" value="" /></td></tr>
<tr><td><br /></td></tr>
<tr><td>e-Mail (<span style="color: #cc0000;">*</span>): </td><td><input id="remite" name="remite" style="width: 400px;" type="text" value="" /></td></tr>
<tr><td><br /></td></tr>
<tr><td>Indirizzo: </td><td><input id="address" name="address" style="width: 400px;" type="text" value="" /></td></tr> <tr>
<td><br /></td></tr>
<tr><td>Codice postale: </td><td><input id="code" name="code" style="width: 70px;" type="text" value="" /> Città: <input id="city" name="city" style="width: 150px;" type="text" value="" /></td></tr> <tr>
<td><br /></td></tr>
<tr><td>Provincia: </td><td><input id="province" name="province" style="width: 150px;" type="text" value="" /> Paese: <input id="country" name="country" style="width: 150px;" type="text" value="" /></td></tr> <tr>
<td><br /></td></tr>
<tr><td>Osservazioni: </td><td><input id="remarks" name="remarks" style="width: 400px;" type="text" value="" /></td></tr>
</tbody></table>
<br />
<div id="error" style="color:#cc0000;"></div>
<span style="font-size: x-small;"><b><span style="color: red;">* Le informazioni richieste sono necessarie affinché la società di consegna possa contattarti </span></b></span>

Completando la sezione HTML, aggiungiamo i pulsanti che consentiranno l'invio definitivo dell'ordine, indicando anche il metodo di pagamento, e un altro che andrà direttamente a PayPal. Non l'abbiamo ancora salvato perché c'è ancora molto da aggiungere.

<hr />
<h4>
Conferma l'ordine scegliendo il metodo di pagamento</h4>
<br />
<br />
<a class="simpleCart_email" href="javascript:void();" onclick="formapago = 'Transferencia'; simpleCart.emailCheckout();">Trasferimento</a>
<br />
<br />
<a class="simpleCart_email" href="javascript:void();" onclick="formapago = 'Conta-reembolso'; simpleCart.emailCheckout();">Contrassegno<span style="color: red;">*</span></a>
<br />
<br />
<a class="simpleCart_checkout" href="javascript:void();">Paypal</a><br />
<br />
</div>

Chiamate di script

Come ho detto, stiamo ancora modificando la pagina. Ora è il momento di usare l'utility SimpleCart, che visualizza i dati per ogni singolo articolo selezionato dal cliente e aggiunto al carrello. Potete vedere questa utility qui sotto, che richiama la funzione cartHeaders .

Le parole chiave tra parentesi mostrano la miniatura, la quantità ordinata, i pulsanti di aumento/diminuzione della quantità, il nome dell'articolo, la taglia (se utilizzata) e il prezzo parziale corrispondente al prezzo totale di ciascun articolo, rispettivamente in questo ordine.
Ovviamente, in questa sezione puoi modificare, aggiungere o eliminare qualsiasi dato che ritieni necessario dai dati che stai utilizzando nel tuo negozio.

CSS speciale per la pagina

Potremmo inserirlo nel modello, ma poiché funziona solo per questa pagina, lo faremo su di esso, evitandoci di dover usare condizioni. Ci permetterà anche di smontare facilmente tutto se mai volessimo tornare all'originale.
Ciò che fa principalmente è nascondere il carrello originale per evitare problemi, tabulare un po' i dati degli articoli e personalizzare lo stile dei pulsanti, tra le altre cose minori.

Ora possiamo salvare la pagina. Se vogliamo verificare che funzioni correttamente e che tutto sia come desiderato prima di continuare, possiamo simulare un acquisto aggiungendo alcuni prodotti al carrello e poi visitare la pagina appena creata.
Dato che non abbiamo ancora link o pulsanti per accedervi, il modo più rapido per farlo è, dopo aver aggiunto gli elementi di prova, passare il mouse sopra il titolo della pagina dalla stessa sezione "Pagine" del Desktop e cliccare sul link che appare.

Modifica SimpleCart.js

Ora è il momento di accedere al nostro file simplecart.js e modificarlo. Per prima cosa, ci serve l'indirizzo del nostro file .php, quello che abbiamo creato per aggiungere la funzionalità di ordinazione via email con SimpleCart. Lo scriveremo e lo salveremo, proprio come facciamo con le ricette.
Non importa se abbiamo modificato o meno SimpleCart.js in precedenza, perché lo ricostruiremo quasi completamente. Quello che dobbiamo eliminare è tutto ciò che si trova tra le righe che ho evidenziato in grigio:

...
document.body.removeChild( form );
};
me.emailCheckout = function() {
...
me.customCheckout = function() {
return;
};
/********************************************************
archiviazione e recupero dati
******************************************************/
...

In questo modo, avremo eliminato tutte le righe dalla funzione emailCheckout . Ora le sostituiamo con quelle che ho incluso di seguito.

me.emailCheckout = function() {
var sender = document.getElementById("referente").value;
var name = document.getElementById("nombre").value;
var phone = document.getElementById("telefono").value;
var address = document.getElementById("direccion").value;
var address = document.getElementById("direccion").value;
var code = document.getElementById("codigo").value;
var city = document.getElementById("ciudad").value;
var province = document.getElementById("provincia").value;
var country = document.getElementById("pais").value;
var observations = document.getElementById("observaciones").value;
if (indirizzo di ritorno != '' && indirizzo di ritorno != null && nome != '' && nome != null && telefono != '' && telefono != null) {
itemsString = "";
esubtotale = 0;
spese = 0;
totale = 0;
for( var current in this.items ){
var item = this.items[current];
esubtotale = item.quantity * item.price;
itemsString += item.name;
if (item.size) itemsString += " " + item.size + "\n";
itemsString += item.quantity + " x " + item.price + " = " + String(esubtotale) + " " + me.currency + "\n";
etotale += esubtotale;
};
itemsString += "\nSubtotale = " + etotale + " " + me.currency +"\n";
var gastos = me.shippingCost;
if (formapago == "Contacto-reembolso") {
gastos += 8;
etotal += 8;
}
if (gastos){
itemsString += "Spese di spedizione = " + gastos + " " + me.currency +"\n";
etotal += me.shippingCost;
} else {itemsString += "Spese di spedizione = GRATIS\n";}
itemsString +="\nTOTALE: " + String(etotal) + me.currency + "\n\n" + "Mittente: " + sender;
itemsString +="\n\nNOME: " + nome + "\nTelefono:" + telefono;
itemsString +="\nINDIRIZZO: " + indirizzo;
itemsString +="\nCITTÀ/PAESE: " + codice + " " + città + " - " + provincia + " (" + paese + ")";
itemsString +="\n\nOSSERVAZIONI: " + osservazioni;
itemsString +="\n\nMETODO DI PAGAMENTO: " +paymentForm;
var form = document.createElement("form");
form.style.display = "none";
form.method = "POST";
form.action = " http://loquesea.com/email.php ";
form.acceptCharset = "utf-8";
form.appendChild(this.createHiddenElement("jcitems", itemsString));
form.appendChild(this.createHiddenElement("jcremite", return));
document.body.appendChild(form);
me.empty();
form.submit();
document.body.removeChild(form);
if (p == null || p=='');
}
else {
var error = document.getElementById("error");
var message = "<b>Nome, numero di telefono ed email sono essenziali per poterti contattare.</b>";
errore.innerHTML = messaggio;
}
ritorno;
};
me.customCheckout = funzione() {
ritorno;
};

Prima di salvare le modifiche, dovremo sostituire l'indirizzo che ho contrassegnato in verde dopo form.action ( http://whatever.com/email.php ) con il tuo indirizzo, quello che ti ho detto di riservare all'inizio di questa sezione.
Una volta fatto, salveremo le modifiche. Se il tuo provider di hosting cambia il tuo indirizzo (ad esempio, http://yourjavascript.com), dovrai prendere nota di questo nuovo indirizzo SimpleCart e, non appena inizierai il passaggio successivo, sostituire quello attuale con quello nuovo nel template.

Modifiche al modello

A parte la possibile modifica precedente relativa all'indirizzo simplecart.js, non dovremo fare molto altro. Dobbiamo solo modificare le destinazioni dei pulsanti che appaiono ancora nel carrello in modo che, invece di indirizzare a PayPal o effettuare direttamente l'ordine via email, puntino alla pagina che abbiamo creato per tutto questo.
Il codice HTML che dobbiamo modificare è facile da individuare perché ha un commento che dice  . Subito prima c'è ciò che serve per creare il carrello a discesa e i pulsanti sopra menzionati. Ora dovrebbe apparire proprio così:

<div class='menu-cart'>
<a class='mycart' href='#'>Nel carrello: <span class='simpleCart_quantity'></span> Articolo/i</a>
Prezzo totale: <span class='simpleCart_total'></span>
+ Spese: <span class='simpleCart_shippingCost'></span>
<div class='bag'>
<div class='simpleCart_items'></div>
<div class='clear'></div>
<a class='simpleCart_empty' href='javascript:;'>Carrello vuoto</a>

<a class='simpleCart_email' href=' http://mydomain.com/p/enviar-tu-order.html '>Ordine</a>
</div>
</div>

Una volta sostituito il codice precedente con questo, non ti resta che cambiare l'URL che ho evidenziato a colori con l'URL della pagina che hai creato nel primo passaggio. Fatto questo, puoi salvare le modifiche.

Fonte

Archivio Blogger

Cerca nel blog