Uncaught TypeError: $(...).flickity is not a function

[YourGymLabel]

Using the Theme called: Venedor version 2.0.0.

When visiting the product page, for some reason the product image gets blurry and every button withing the red square (see image 1 for reference) becomes unclickable. By inspecting the page inside Google Chrome, i came across the error “Uncaught TypeError: $(…).flickity is not a function” (see image 2 for reference). Im not sure what to do next..

Check the website: www.autoverhuurgill.nl . Everything worked fine but one day the product page aren’t working properly.

image 1

image 2

[tim_1]

It is a racing condition.

What happens:

1. “WhatsApp Chat” app loads, checks whether there is a jQuery, unsuccessfull, proceeds loading its own copy of jQuery (A).
2. In the meantime: theme loads own copy of jQuery(B), then vendor.min.js which contains flickity which extends jQuery(B).
3. Then jQuery(A) is finally loaded and it replaces the jQuery(B).

Most of the code works fine, because it needs only jQuery, but theme code which depends on flickity extension of jQuery – fails because extended jQuery(B) was replaced by vanilla jQuery(A).

You need to make sure that jQuery is loaded before any code which needs it.

In your theme there should be code similar to the following, somewhere at the bottom of the layouts/theme.liquid (I believe):

You need to move it towards the top of this file, somewhere above {{ content_for_header }}

[YourGymLabel]

Hey Tim,

Thanks for the quick response, i kinda get it but i haven’t been able to fix it properly. You were right about the placement of the code but maybe you can help me out, see below the actual code for “theme.liquid”

  

  
  
  
  
  
  
  
  
  
  
  {%- if settings.favicon != blank -%}{%- endif -%}
  {%- capture seo_title -%}
    {%- if request.page_type == 'search' and search.performed == true -%}
      {{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count_html' | t: terms: search.terms, count: search.results_count | strip_html }}
    {%- else -%}
      {{ page_title }}
    {%- endif -%}
    {%- if current_tags -%}
      {%- assign meta_tags = '' -%}
      {%- for tag in current_tags -%}
        {%- unless tag contains 'price=' or tag contains 'page=' or tag contains 'show=' -%}
          {%- assign meta_tags = meta_tags | append: ',' | append: tag -%}
        {%- endunless -%}
      {%- endfor -%}
      {%- assign meta_tags = meta_tags | remove_first: ',' -%}
      {%- if meta_tags != blank -%}
      – {{ 'general.meta.tags' | t: tags: meta_tags -}}
      {%- endif -%}
    {%- endif -%}
    {%- if current_page != 1 -%}
      – {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      – {{ shop.name }}
    {%- endunless -%}
  {%- endcapture -%}
  
  {% if page_description -%}{% endif -%}
  {% render 'social_meta_tags' %}
  {% render 'theme_style_vars' %}
  {% render 'theme_style_tags' %}
  {%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render 'tiny-script-control' %}{%- endif -%}

  {% include 'izyrent' %}

  

  {%- if settings.enable_top_promotion -%}{% section 'text-with-icon' %}{%- endif -%}
  {% section 'top-bar' %}
  {% section 'header' %}
  {% if settings.enable_mb_hd %}
    {% section 'header-mobile' %}
  {% endif %}

  
  {% section 'footer' %}
  {% section 'cookie-notification' %}
  {% render 'popups' %}
  {% render 'theme_script_tags' %}
{{'tiny-img-link-preloader.js' | asset_url | script_tag }}

Thanks in advance!

[tim_1]

The code to move is probably inside the snippets/theme_script_tags.liquid

Should by above the

{%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render 'tiny-script-control' %}{%- endif -%}

[YourGymLabel]

Alright, i am not really sure what to do now, my bad..

[tim_1]

Can’t really help without seeing the codes…

[YourGymLabel]

Hello Tim,

Here is the code of the file: theme_script_tags.liquid

{%- if settings.review_app contains 'ali' -%}
  
{%- else -%}
  
{%- endif -%}

{%- if settings.enable_lazyload -%}

{%- else -%}

{%- endif -%}

{%- if request.page_type == 'search' or request.page_type == 'collection' -%}

{%- endif -%}

{%- if request.page_type contains 'customers/' -%}

{{ "customer_area.js" | shopify_asset_url | script_tag }}
{%- endif -%}

{%- if request.page_type == 'cart' and cart.item_count > 0 -%}
{{ '/services/javascripts/countries.js' | script_tag }}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}

{%- endif -%}

{%- if settings.custom_script != blank -%}

{%- endif -%}

[tim_1]

So I would cut this part from the snippets/theme_script_tags.liquid:

{%- if settings.review_app contains 'ali' -%}
  
{%- else -%}
  
{%- endif -%}

{%- if settings.enable_lazyload -%}

{%- else -%}

{%- endif -%}

and paste it right above this line in layouts/theme.liquid

{%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render 'tiny-script-control' %}{%- endif -%}

I expect this to fix your problem.