Dodawanie niestandardowych stylów CSS i JS do Shopify

Pracuję nad uzyskiwaniem pionowych zakładek strony w Shopify, używając motywu "Atlantic". Ponieważ ten motyw nie ma domyślnie tabulatorów pionowych, użyłem zewnętrznych "JQuery-jitter-tabs" zewnętrznych JS i CSS.Dodawanie niestandardowych stylów CSS i JS do Shopify

Moje pytanie brzmi, jeśli prześlij pliki JS i CSS jako zasoby, w jaki sposób mogę je połączyć z tą stroną, na której chcę ich użyć i jak z nich korzystać na stronie po tym, jeśli mam niektóre elementy stylu dostępne również tam?

Źródło

2013-12-09 gagneet

Wystarczy przesłać plik filename.js w folderze aktywów .

następnie upuść następujące w theme.liquidgłowy odcinku:

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

nawiasem mówiąc, należy zmień nazwę pliku i dodać .liquid przedłużenie

filename.js.liquid

Powodzenia!

Źródło

2014-01-05 02:36:32 JCharette

jaka jest korzyść z dodania rozszerzenia '.liquid'? – Ronnie

@ r3wt oh, ok perfect. Cały system operacyjny musi być rozszerzeniami ".liquid", jeśli tak jest w przypadku. – Ronnie

@Ronnie rozszerzenie .liquid pozwala na użycie cieczy w plikach js i css. – JCharette

Jeśli dobrze rozumiem, szukam asset_url filter.

Aby dołączyć plik JS w .liquid pliku, możesz użyć:

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

i plik CSS:

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

Źródło

2013-12-09 11:50:44

Dzięki za aktualizację tego @ Steph-Sharp, starałem się uwzględnić te pliki na "Stronie", a nie w motywie. Próbowałem użyć asset_url, ale nie działa tam ... – gagneet

@gagneet Możesz użyć filtru 'asset_url' w dowolnym pliku .liquid, więc powinno działać poprawnie w page.liquid. Być może możesz opublikować część kodu, jeśli nadal masz z tym problemy. –

Jeśli nie chcesz zanieczyszczać globalnej przestrzeni nazw, możesz ograniczyć JavaScript lub CSS do określonych obszarów.

Shopify używa prostej instrukcji if wraz z uchwytem strony do tego (dla www.foo.com/abcd/bar - "bar" będzie uchwytem).

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

Jest to bardzo przydatne, jeśli chcesz wprowadzić mniejsze zmiany na niektórych stronach.

Źródło

2016-11-21 11:38:35

Dodawanie niestandardowych stylów CSS i JS do Shopify

Odpowiedz

Powiązane problemy