Come creare etichette di spedizione stampabili per ordini in Wix utilizzando il codice Corvid / Wix

In questo tutorial imparerai come creare una dashboard personalizzata che ti consentirà di stampare le etichette di spedizione. Questo tutorial ti guiderà passo dopo passo: abilitare gli strumenti per sviluppatori, aggiungere una pagina dashboard, leggere dalla raccolta degli ordini e collegare i dati agli elementi sulla pagina utilizzando il codice Wix.

Il prodotto finale: una pagina che contiene tutti i tuoi ordini in un formato di etichetta di spedizione stampabile

A chi è rivolto questo tutorial?

Questo tutorial è per gli utenti Wix che hanno un negozio di e-commerce sul loro sito web.

Non sono richieste competenze di programmazione

1. Attiva gli strumenti per sviluppatori

Il codice Wix aggiunge a funzionalità avanzate all’Editor Wix,
permettendoti di rendere il tuo sito più interattivo e dinamico.

Attiva lo sviluppatore Strumenti facendo clic su Codice nel menu della barra superiore dell’Editor e quindi su Attiva strumenti per sviluppatori .

2. Visualizza raccolta ordini

Nella barra laterale della struttura del sito, scorri verso il basso fino a Database & gt; Negozi & gt; Ordini
Qui puoi vedere una tabella dei tuoi ordini

3. Crea una pagina dashboard

Le pagine del dashboard sono pagine che crei nell’editor che vengono visualizzate solo nella dashboard del tuo sito.
Userò una pagina del dashboard perché non desideri che i tuoi ordini siano visibili ai visitatori del tuo sito.

2. Se viene visualizzato il pannello “Presentazione delle pagine dashboard”, fai clic su “Aggiungi pagina dashboard”.

3. Nel pannello Pagine dashboard, assegna un nome alla nuova pagina: “Stampa etichette” o qualsiasi altro nome

Dopo aver creato la pagina del dashboard, si aprirà nell’editor come una pagina vuota.
Per modificare successivamente questa pagina:

Nota: per rendere disponibile la tua pagina nel menu della barra laterale della dashboard, assicurati di pubblicare il tuo sito web.

Come accedere alle pagine del dashboard

Accedi alla tua dashboard (https://www.wix.com/dashboard/).
Nel menu della barra laterale, fai clic sulla pagina della dashboard che desideri visualizzare.

Ulteriori informazioni sulle pagine del dashboard: https://support.wix.com/en/article/wix-code-working-with-dashboard-pages

4. Crea interfaccia utente per etichetta di stampa

2. Posiziona il ripetitore al centro della pagina

3. Rimuovi tutti gli elementi dalla prima cella

4. Regola la spaziatura e il bordo (o ciò che funziona meglio per il tuo layout)

La pagina dovrebbe apparire così:

5. Fai clic sulla struttura del ripetitore e imposta il suo ID nel riquadro delle proprietà su “repOrders”
Se non vedi il riquadro delle proprietà :


Nota: assicurati di selezionare l’intero ripetitore e non solo un elemento. Vedi il blu

6. Aggiungi 3 elementi di testo per “A” , “Nome completo” e “Indirizzo” .
Devi solo farlo per prima cella, poiché il ripetitore le ripeterà per le altre.

7. La tua pagina dovrebbe apparire così:

Nota: ignora le altre celle

8. Imposta gli ID degli elementi di testo con il riquadro delle proprietà selezionando gli elementi uno alla volta.
Nome completo deve essere “ txtFullName
Address deve essere” txtAddress

9. Aggiungi 2 pulsanti e imposta i loro ID. Useremo i pulsanti per aprire la pagina in visualizzazione stampa e nascondere gli elementi che non vogliamo stampare.

Pulsante n. 1: “ Apri visualizzazione di stampa ” e ID “ btnPrintView
Pulsante n. 2: “ Nascondi pulsanti ” e ID “ btnHideButtons

10. Imposta ripetitore da nascondere all’inizio, lo mostreremo solo quando i dati avranno terminato il caricamento. Lo facciamo per impedire la visualizzazione di un’interfaccia utente vuota al caricamento della pagina.

Ora abbiamo un’interfaccia utente personalizzata che conterrà le nostre informazioni di spedizione.

5. Collega la raccolta degli ordini all’interfaccia utente utilizzando il codice Wix

Questo pannello contiene il codice Wix Javascript che gira su questa pagina.

2. Incolla il seguente codice nell’editor
Questo codice carica tutti gli ordini non evasi e non annullati dalla raccolta ordini

Informazioni aggiuntive sulla raccolta degli ordini: https://support.wix.com/en/article/wix-code-wix-stores-orders-collection-fields

3. Associare l’evento clic del pulsante “Nascondi pulsanti”:
a. Selezionare il pulsante “Nascondi pulsanti”.
b. Nel pannello delle proprietà fare clic su “ onClick “.
c. Immettere il testo: “ btnHideButtons_click ” (senza virgolette).

4. Fare clic su Anteprima

5. Dovresti vedere i tuoi ordini in questo modo:

Nota. Se non vedi nulla:
1. Hai ordini non evasi ? verranno visualizzati solo gli ordini non evasi
2. Apri la Console per gli sviluppatori per verificare la presenza di errori:

6. Fai clic di nuovo su Editor e pubblica il tuo sito web.

6. Utilizza la dashboard dell’etichetta di stampa

3. Puoi vedere la tua nuova dashboard, fai clic all’interno su “ Apri visualizzazione di stampa
Questo aprirà solo la dashboard senza la parte superiore e le barre laterali di Wix in una nuova scheda.

4. Fare clic su “ Nascondi pulsanti ” per nascondere gli elementi che non verranno stampati

5. Stampa la pagina utilizzando la finestra di dialogo di stampa del browser
File & gt; Stampa

Nota: potrebbero essere necessarie alcune rettifiche del margine

In conclusione

Questo è uno dei modi per utilizzare Wix Code Orders Collection per creare un’interfaccia utente con etichetta di spedizione stampata.

Mi piacerebbe sapere se lo stai utilizzando, feedback e cosa può essere migliorato.