Traccia l'ordine
< div class = " Container " >
< header class = " Intestazione pagina " >
< div class = " SezioneIntestazione SezioneIntestazione--centro " >
< h1 class = " SectionHeader__Heading Heading u-h1 " > Traccia il tuo ordine </ h1 >
</ div >
</ intestazione >
< div class = " PageContent PageContent--rte stretta " >
< div class = " input-ordine-spedizione " >
< p class = " policy-alert Form__Alert Alert Alert--error " > Oops, non riesco a tracciare il tuo ordine. </ p >
< p class = " benull-alert Form__Alert Alert Alert--error " > Il numero dell'ordine e l'e-mail non possono essere vuoti. </ p >
< input id = " orderNum " class = " Form__Input " aria-label = " Numero ordine di input " placeholder = " Numero ordine " required = " " style = " margin-bottom:20px " >
< input id = " orderEmail " class = " Form__Input " aria-label = " Email di input " placeholder = " Email " required = " " >
< pulsante id = " order_tracking_submit " classe = " Pulsante Form__Submit Pulsante--primario " > traccia </ pulsante >
</ div >
</ div >
< div class = " PageContent PageContent--narrow LogisticsContent " >
< div class = " pacchettoTabCon " > </ div >
</ div >
</ div >
< script src = " https://d13rbkk534zmfy.cloudfront.net/js/jquery/jquery-1.11.3.min.js " > </ script >
< tipo di script = " testo/javascript " >
var nomesito = ' {{ shop.name }} ';
var AjaxHandler = function(url,metodo,dati,callBack,errorBack){
$.ajax({
indirizzo : indirizzo,
tipo di dati: "jsonp",
metodo:metodo,
asincrono: vero,
successo: funzione(datar) {
if(datar && datar.code == '200'){
richiamata(datar);
}altro{
se(erroreIndietro){
erroreBack(datar);
}
}
},
errore: funzione (richiesta, textStatus, errorThrown) {
$('.policy-alert').show();
se(erroreIndietro){
erroreIndietro();
}
}
});
};
$(funzione(){
funzione displayTime(l){
var data = nuova data(l)
restituisci data.toString()
}
funzione getTimeStr(pasticcio){
var timeStr='';
var self=questo;
timeStr=displayTime(mess.checkpointTime);
timeStr=timeStr.substr(4,20);
se(timeStr.substr(4,2)=='01'||timeStr.substr(4,2)=='21'||timeStr.substr(4,2)=='31'){
timeStr=timeStr.split('');
timeStr.splice(6,0,'st');
timeStr=timeStr.join('');
}altrimenti se(timeStr.substr(4,2)=='02'||timeStr.substr(4,2)=='22'){
timeStr=timeStr.split('');
timeStr.splice(6,0,'nd');
timeStr=timeStr.join('');
}altro{
timeStr=timeStr.split('');
timeStr.splice(6,0,'th');
timeStr=timeStr.join('');
}
tempo di ritornoStr;
}
funzione statusHtml(indice,len,mess){
var self=questo;
var nomeclasse = "bgball";
se(indice==len-1){
nomeclasse="activebgball"
}
var nascondi = "";
se(indice==0){
nascondi="nascondi";
}
variabile html = [
' <ul> ' ,
' < li > ',
' < span class = " ' +nomeclasse+' " > </ span > ',
' < span class = " tempo " > '+getTimeStr(mess)+' </ span > ',
' < span > '+mess.messaggio+' </ span > ',
' </ li > ',
' < li class = " ' +nascondi+' " > ',
' < span class = " linea di base " > </ span > ',
' </ li > ',
' </ ul > ',
];
restituisci html.join('');
}
funzione createTracking(contenitore,array){
var self=questo;
se(array&&array.lunghezza){
per(var i=array.length-1;i >= 0;i--){
contenitore.append(statoHtml(i,array.lunghezza,array[i]));
}
}
}
funzione createWebsiteURL(contenitore,weburl){
variabile html = [
' < div > ',
' < span > Informazioni dettagliate sul monitoraggio: </ span > < a href = " ' +weburl+' " > '+weburl+' </ a > ',
' </ div > '
]
contenitore.append(html.join(''));
}
funzione createPackageContent(i,tracciamento){
var attivo = "";
se(io==0){
attivo="attivo";
}
$('.packageTabCon').append(' < div class = " packageTab packageTab'+i+' '+active+' " data-div = " packagecontent'+i+' " > package'+(i+1)+' </ div > ');
var packHtml = [
' < div class = " Rte packageContent '+active+' " id = " packagecontent'+i+' " style = " border-top:1px solid #ddd; " > ',
' < h4 > Informazioni logistiche </ h4 > ',
' < div classe = " info " > ',
' < p > < span class = " t-company-tit'+i+' " > </ span > < font class = " t-company-text'+i+' " > </ font > </ p > ',
' < p > < span class = " t-num-tit'+i+' " > </ span > < font class = " t-num-text'+i+' " > </ font > </ p > ',
' </ div > ',
' < div class = " infologistica infologistica'+i+' " > ',
' < p class = " monitoraggio-stato-attuale'+i+' " > </ p > ',
' </ div > ',
' </ div > ',
];
$('.LogisticsContent').append(packHtml.join(''));
se(monitoraggio.slug){
$('.t-company-tit'+i).text("Azienda di logistica: ");
$('.t-company-text'+i).text(tracking.slug);
}
se(monitoraggio.statomonitoraggio){
se(monitoraggio.statotracciamento==10){
$('.tracking-current-status'+i).text('Stato attuale: in transito');
}altrimenti se(tracking.trackingStatus==20){
$('.tracking-current-status'+i).text('Stato attuale: trasporto troppo lungo');
}altrimenti se(tracking.trackingStatus==30){
$('.tracking-current-status'+i).text('Stato attuale: da prendere');
}altrimenti se(tracking.trackingStatus==35){
$('.tracking-current-status'+i).text('Stato attuale: errore nell'invio');
}altrimenti se(tracking.trackingStatus==39){
$('.tracking-current-status'+i).text('Stato attuale: Tracciamento riuscito');
}altrimenti se(tracking.trackingStatus==40){
$('.tracking-current-status'+i).text('Stato attuale: registrati per avere successo');
}altrimenti se(tracking.trackingStatus==50){
$('.tracking-current-status'+i).text('Stato attuale: eccezione di tracciamento');
}
}
se(tracciamento.destinPoints){
createTracking($('.logisticsinfo'+i),tracking.destinPoints)
}
se(tracciamento.puntiorigine){
createTracking($('.logisticsinfo'+i),tracking.originPoints);
}
se(monitoraggio.logisticaURLSitoWebFornitore){
createWebsiteURL($('.logisticsinfo'+i),tracking.logisticsSupplierWebsiteURL);
}
$('.LogisticsContent').show();
}
funzione searchTracking(orderNum,orderEmail){
ordineNum = ordineNum.replace('#', '%23');
$.ajax({
tipo:'ottieni',
tipo di dati: 'json',
url:'https://shopify.geeko.online/tracking/get-by-order-number-and-email?orderNumber='+orderNum+'&email='+orderEmail+'&web='+sitename,
successo:funzione (dati) {
se(dati.risultato && dati.risultato.pacchetti.lunghezza>0){
var pacchetti=dati.risultato.pacchetti;
per(var i=0;i<pacchetti.lunghezza;i++){
createPackageContent(i, pacchetti[i]);
}
}altro{
$('.policy-alert').show();
}
},
errore:funzione(){
$('.policy-alert').show();
}
})
}
$("#invio_tracciamento_ordine").click(funzione(){
$(".packageTabCon").vuoto();
$(".packageContent").vuoto();
se($('.ordine-spedizione-input input').val()){
var orderNum = $('#orderNum').val();
var orderEmail = $('#orderEmail').val();
searchTracking(numeroordine,emailordine);
}altro{
$('.benull-alert').show();
}
})
$('.ordine-spedizione-input input').change(function(){
$('.policy-alert').hide();
})
$(document).on('clic', '.packageTab', funzione (evento) {
evento.preventDefault();
var packageDiv = $(this).attr('data-div');
$('#'+packageDiv+'').addClass('attivo').siblings().removeClass('attivo');
$(this).addClass('attivo').siblings().removeClass('attivo');
});
})
</ copione >
< stile tipo = " testo/css " >
.nascondere{
visualizza:nessuno;
}
.Modulo__Invia{
margine: 20px auto 0;
}
.Rte ul{
margine sinistro: 0;
}
.Rte ul:not(:last-child){
margine inferiore:0;
}
.avviso-politico
visualizzazione: nessuno;
}
.benull-avviso{
visualizzazione: nessuno;
}
.logisticsinfo ul li{
altezza della riga: 25px;
stile elenco: nessuno;
}
.logisticsinfo ul li span{
colore: #999;
}
.logisticsinfo ul li .time{
margine destro: 25px;
}
.logisticsinfo ul .bgball{
visualizzazione: blocco in linea;
larghezza: 8px;
altezza: 8px;
raggio del bordo: 50%;
colore di sfondo: #cacaca;
margine destro: 10px;
}
.logisticsinfo ul .activebgball{
visualizzazione: blocco in linea;
larghezza: 12px;
altezza: 12px;
raggio del bordo: 50%;
colore di sfondo: #57b936;
margine destro: 7px;
posizione: relativa;
sinistra: -2px;
}
.logisticsinfo ul .bgline{
larghezza: 2px;
altezza: 50px;
bordo: 1px tratteggiato #cacaca;
margine sinistro: 3px;
}
.intervallo btxt{
colore: #222 !importante;
}
.pannello-titolo{
larghezza: 1150px;
margine: 0 automatico;
imbottitura: 35px 0 0 0;
}
.ContenutoLogistico{
visualizza:nessuno;
}
.packageTabCon::dopo{
visualizza:blocco;
contenuto:'';
chiaro:entrambi;
}
.pacchettoTab{
galleggiante: sinistra;
margine destro: 20px;
text-transform: capitalizzare;
imbottitura: 10px 20px;
cursore:puntatore;
}
.packageTab.attivo{
bordo inferiore: 2px solido #222;
}
.contenutodelpacchetto{
visualizza:nessuno;
}
.packageContent.attivo{
visualizza:blocco;
}
</ stile >
