web-dev-qa-db-fra.com

Ajout de CSS et JS personnalisés à Shopify

Je travaille à obtenir des onglets verticaux pour une page sur Shopify, en utilisant le thème "Atlantique". Comme ce thème n'a pas d'onglets verticaux par défaut, j'ai utilisé les JS et CSS externes "jquery-jvert-tabs".

Ma question est, si je télécharge les fichiers JS et CSS en tant qu'actifs, comment les lier à la page sur laquelle je veux les utiliser et comment les utiliser sur la page après cela, si j'ai certains éléments de style disponibles ici aussi?

javascriptjqueryhtmlcssshopify
24
gagneet

Téléchargez simplement votre filename.js fichier dans le dossier assets.

puis déposez ce qui suit dans votre theme.liquidtête section:

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

au fait, vous devriez renommer votre fichier et ajouter l'extension .liquid

filename.js.liquid

Bonne chance!

31
JCharette

Si je comprends bien, le asset_url filter est ce que vous recherchez.

Pour inclure un fichier JS dans un fichier .liquid, vous utilisez:

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

Et un fichier CSS:

{{ 'style.css' | asset_url | stylesheet_tag }}
31
Steph Sharp

Si vous ne voulez pas polluer l'espace de noms global, vous pouvez restreindre JavaScript ou CSS à certaines zones.

Shopify utilise une simple instruction if avec le descripteur de page pour cela (pour www.foo.com/abcd/bar - "bar" serait le descripteur).

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

Ceci est extrêmement utile si vous souhaitez apporter de petites modifications à certaines pages.

4
Peter Piper