Aggiunta di CSS e JS personalizzati a Shopify

Question

Sto lavorando per ottenere le schede verticali per una pagina su Shopify, utilizzando il tema "Atlantico". Poiché questo tema non ha tabulazioni verticali per impostazione predefinita, ho usato il JS e il CSS esterni "jquery-jvert-tabs".

La mia domanda è, se carico i file JS e CSS come risorse, come faccio a collegarli alla pagina in cui voglio usarli e come utilizzarli in seguito, se ho alcuni elementi di stile sono disponibili anche lì?

Answer 1

carica il file filename.js nella cartella dibeni.

poi cadere quanto segue nel theme.liquidtesta sezione:

{{ 'filename.js' | asset_url | script_tag }} 

tra l'altro, si dovrebbe rinominare il file e aggiungere l'estensione .liquid

filename.js.liquid 

Buona fortuna!

Answer 2

Se ho capito bene, lo asset_url filter è quello che stai cercando.

per includere un file JS in un file .liquid, si utilizza:

{{ 'script.js' | asset_url | script_tag }} 

E un file CSS:

{{ 'style.css' | asset_url | stylesheet_tag }} 

Answer 3

Se non si desidera inquinare lo spazio dei nomi globale, è possibile limitare JavaScript o CSS a determinate aree.

Shopify utilizza una semplice istruzione if insieme all'handle di pagina per quello (per www.foo.com/abcd/bar - "bar" sarebbe l'handle).

{% if page.handle == "bar" %} 
    {{ 'your_custom_javascript.js' | asset_url | script_tag }} 
    {{ 'your_custom_css.css' | asset_url | stylesheet_tag }} 
{% endif %} 

Ciò è estremamente utile se si desidera apportare modifiche più piccole a determinate pagine.