Utilizzo della conversione di valuta su Shopify
Platforms:
La conversione di valuta integrata in Shopify consente di leggere facilmente il simbolo della valuta e il tasso di cambio dal negozio web.
Come standard, Clerk.js per Shopify viene fornito con un formatter che funzionerà fino a quando la vostra applicazione di terze parti utilizzerà l’oggetto valuta incorporato di Shopify.
Inclusione di un formattatore nel progetto
È necessario utilizzare un formattatore nei progetti per convertire i prezzi. Questo è un esempio del nostro linguaggio standard per i modelli [qui] (https://docs.clerk.io/docs/clerkjs-template-language). Tuttavia, quando si utilizzano conversioni di valuta e simboli, Clerk.js rileva le impostazioni di lingua, valuta e codice paese. Gli esempi che seguono forniscono una panoramica del funzionamento dei diversi componenti.
| Formattatore | Descrizione | Esempio di output |
|---|---|---|
| Simbolo_di_valuta | Simbolo di valuta per il paese o la regione indicati. Questo può variare in base a quanto impostato nella configurazione del negozio | € , £ e kr. |
| Currency_converter | Un formattatore di conversazione basato sull’impostazione della valuta e sul tasso di cambio della configurazione del negozio | Supponiamo di avere 10 euro su un prodotto. Se un utente passa a un’altra valuta, come le corone danesi (a seconda dell’impostazione), la conversione sarà quella corrispondente. |
In Design Editor
- Creare un componente Text dove si vuole che il prezzo venga visualizzato
2. Aggiungere il seguente codice liquido per mostrare il prezzo in base al convertitore di valuta all’interno del componente di testo:
{{ currency_symbol }}{{ item.price | currency_converter }}
In modalità codice
1. In my.clerk.io andate su Ricerca/Raccomandazioni -> Progetti e fate clic su Modifica progetto per il vostro progetto.
2. Sostituire il formattatore money o money_eu esistente per i prezzi con currency_converter.
3. Fare clic su Aggiorna progetto.
4. Ora è possibile visualizzare i prezzi convertiti e il simbolo della valuta nel progetto:
In progettazione HTML/CSS (modalità codice)
1. In my.clerk.io andare su Ricerca/Raccomandazioni -> Designs e fare clic su Modifica design per il proprio design.
2. Sostituire il formattatore money o money_eu esistente per i prezzi con currency_converter.
3. Fare clic su Aggiorna progetto.
4. Ora è possibile visualizzare i prezzi convertiti e il simbolo della valuta nel progetto:
Soluzioni Shopify-frontend-api
> Questa è una soluzione molto personalizzata per ottenere conversioni di prezzo se non ci sono dati dall’API di Shopify. Utilizzare questa soluzione solo se si utilizza una configurazione specifica e personalizzata per le conversioni di prezzo basate sulle modifiche dell’indirizzo geo-ip.
Questa è la documentazione della soluzione frontend in Github.
Raccolta di dati contestuali JIT
Questa sezione descrive come ottenere in tempo reale i dati contestuali da mostrare all’interno dei contenuti restituiti dall’API di Clerk.io.
Il design pattern è composto dalle seguenti parti:
- Una raccolta contenente tutti i prodotti.
- Un layout alternativo per rendere le informazioni della raccolta come JSON.
- Una classe Javascript che raccoglie i dati resi disponibili nella raccolta.
- Uno snippet Javascript che consuma i dati per gli id dei prodotti rilevanti in un determinato risultato e li colloca all’interno di un div nel template.
1. La raccolta
Per assicurarsi di avere una collezione con tutti i prodotti possibili, si consiglia di creare una collezione con una condizione soddisfatta da tutti i prodotti. L’insieme dovrebbe essere chiamato Clerk api, perché in questo modo riceverà la rotta /collection/clerk-api del frontend.
La condizione per la collezione dovrebbe essere qualcosa come price > -1000000.
2. Il layout alternativo per le collezioni
In secondo luogo, dobbiamo creare un layout alternativo per mostrare i nostri dati utilizzando la collezione.
Per farlo, occorre innanzitutto modificare il codice del tema che si desidera utilizzare. Nella sezione dei modelli a sinistra, premere Aggiungi un nuovo modello.
Nel popup selezionare collection per il tipo di risorsa.
Selezionare liquido per il tipo di file.
Scrivere json nel campo più in basso, in modo che il nome del modello creato sia collection.json.liquid.
Il contenuto di questo file deve essere il file collection.json.liquid che si trova nella cartella liquid di questo progetto.
È possibile aggiungere campi al prodotto in questo modello, se necessario.
3. **La classe JS che gestisce i dati dal nostro endpoint appena creato.
Per prendere i dati dalla nostra collezione e prepararli in modo che possano essere usati, dobbiamo inserire l’intero contenuto di index.js nella nostra cartella class di questo progetto, all’interno del tag script contenente Clerk.js che abbiamo inserito in theme.liquid.
Dovrebbe avere un aspetto simile a questo:
Questa classe invaliderà i dati in base ai timestamp e alle valute, senza che sia necessario modificare il codice.
Il tempo prima dell’invalidazione è di 12 ore dall’ultimo dato di costruzione.
Anche qualsiasi modifica del contesto valutario invalida i dati.
4. **La funzione JS che carica i dati rilevanti nel modello.
Infine, è necessario includere il template.js nel modello di design utilizzato. La funzione prende i dati quando sono disponibili e li colloca in elementi figli specifici all’interno di ogni piastrella di prodotto.
L’esempio include i campi list_price e price.
**Se è necessario utilizzare campi diversi da price e list_price, occorre aggiungerli in collection.json.liquid e quindi modificare template.html e template.js per consumare anche questi campi. Non dovrebbe essere necessario modificare la classe descritta nel passaggio 3.