javascript - ejemplo - draggable js

Añadiendo CSS y JS personalizados a Shopify

Question

Estoy trabajando para obtener pestañas verticales para una página en Shopify, usando el tema ''Atlántico''. Como este tema no tiene pestañas verticales de forma predeterminada, he usado las "jquery-jvert-tabs" de JS y CSS externas.

Mi pregunta es, si subo los archivos JS y CSS como activos, ¿cómo los vinculo a la página en la que quiero usarlos y cómo los uso en la página después de eso, si tengo ciertos elementos de estilo disponibles? ¿ahí también?

Answer 1

Si entiendo correctamente, el filtro asset_url es lo que está buscando.

Para incluir un archivo JS en un archivo .liquid, utiliza:

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

Y un archivo CSS:

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

Answer 2

Si no desea contaminar el espacio de nombres global, puede restringir el JavaScript o CSS a ciertas áreas.

Shopify usa una declaración if simple junto con el identificador de página para eso (para www.foo.com/abcd/bar - "bar" sería el identificador)

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

Esto es extremadamente útil si desea realizar cambios más pequeños en ciertas páginas.

Answer 3

Simplemente cargue su archivo filename.js en la carpeta de activos .

A continuación, suelte lo siguiente en su sección principal de theme.liquid :

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

por cierto, debes cambiar el nombre de tu archivo y agregar la extensión .liquid

filename.js.liquid

¡Buena suerte!