Come esperti Shopify, siamo sempre alla ricerca di modi per migliorare la funzionalità e la semplicità di gestione dei negozi dei nostri clienti. Per uno dei nostri progetti, che seguiamo dal 2021, abbiamo sviluppato del codice custom che, direttamente dal tema, gestisse l'automazione della gestione dei codici delle istruzioni di lavaggio presenti in pagina prodotto.
La Sfida
Inizialmente, abbiamo gestito la logica relativa alle istruzioni di lavaggio direttamente dal codice del tema. Ciascun prodotto ha un metafield istruzioni_lavaggio, che corrisponde a una combinazione di 5 icone e le relative istruzioni.
All'interno di uno snippet Liquid, avevamo creato un case statement che si occupasse dell'output delle icone in base al valore del metafield. Qui una parte semplificata di questo snippet.
{%- case codice -%}
{%- when 'L01' -%}
{% assign icone = 'LAV2.svg, CAN1.svg, STI3.svg, SEC2.svg, ASC1.svg' | split:',' %}
{% assign icon_description = "Lavaggio: lavare a mano, Non candeggiare, Stiratura: medie temperature, A secco: tutti meno tricloroetilene, Asciugatura: non asciugare in macchina" | split:',' %}
{%- when 'L02' -%}
{% assign icone = 'LAV2.svg, CAN1.svg, STI2.svg, SEC2.svg, ASC1.svg' | split:',' %}
{% assign icon_description = "Lavaggio: lavare a mano, Non candeggiare, Stiratura: basse temperature, A secco: tutti meno tricloroetilene, Asciugatura: non asciugare in macchina" | split:',' %}
{%- endcase -%}
{%- render 'tabs_icons', icone: icone, icon_description: icon_description -%}
Col tempo, il numero di codici di lavaggio è aumentato, e l'introduzione del supporto multilingue ha aggiunto complessità. Mantenere questo sistema è diventato sempre più difficile, poiché dovevamo aggiornare il codice del tema ogni volta che veniva aggiunto un nuovo codice di lavaggio.
La Soluzione: Metaoggetti
Con l'introduzione dei metaoggetti in Shopify, abbiamo individuato un'opportunità per semplificare questo sistema. I metaoggetti consentono una memorizzazione efficiente delle informazioni strutturate, migliorando il nostro flusso di lavoro.
Ecco come abbiamo affrontato la migrazione:
-
Definizioni di Metaoggetti: Abbiamo creato metaoggetti per ogni icona di lavaggio, inclusi l'immagine, il testo alternativo e le traduzioni in più lingue utilizzando l'app Translate & Adapt.
-
Metaoggetto del Codice di Lavaggio: Abbiamo definito un altro metaoggetto per racchiudere il codice di lavaggio, comprendente il suo nome e la corrispondente combinazione di icone. Questa struttura consente aggiornamenti facili senza modificare il codice del tema.
-
Refactoring del Codice del Tema: Infine, abbiamo fatto un refactoring del codice del tema per identificare il metaoggetto del codice di lavaggio corretto e visualizzare le icone associate direttamente in pagina prodotto. Questo cambiamento riduce la necessità di aggiornamenti costanti e minimizza il rischio di errori.
Qui un esempio del nuovo codice utilizzato nel tema per mostrare il valore dei metaoggetti in pagina prodotto. Il valore del codice lavaggio usato per recuperare il metaoggetto corretto viene passato allo snippet dalla pagina prodotto.
{% assign metaobject_lavaggio = shop.metaobjects.codice_lavaggio[codice] %}
ion: icon_description -%}
{% for icon in metaobject_lavaggio.icone.value %}
<li {% if forloop.first %}class="current"{% endif %}>
<a href="#" data-link="tab{{forloop.index}}">
{{
icon.image.value | image_url: width: 200 | image_tag: widths: '256, 480', sizes: sizes, class: 'Icon Icona_Lavaggio', loading: 'lazy', alt: icona_alt_tag
}} </a>
</li>
{% endfor %}
Conclusione
Passare ai metaoggetti per gestire le istruzioni di lavaggio ha portato a una soluzione più efficiente, scalabile e user-friendly per il nostro cliente. Siamo curiosi di sapere come altri esperti Shopify hanno utilizzato i metaoggetti nei loro negozi Shopify. Quali sfide avete affrontato e quali soluzioni innovative avete trovato? Condividete le vostre esperienze e idee, ci piacerebbe discuterne!
