So I have seen the other questions with this same title, and I don't think I am running into the same problems they had (Specifically because I am not using Drupal and the files do seem to be loading in the page header as shown below). I understand that it cannot find that function, but I don't know why. This is the code inside the theme.liquid head where it sets up the javascript and styles:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="canonical" href="{{ canonical_url }}" />
{% assign maxmeta = 155 %}
{% if template contains 'product' %}
<meta name="description" content="{{ product.description | strip_html | strip_newlines | truncate: maxmeta | escape }}" />
{% elsif template contains 'page' %}
<meta name="description" content="{{ page.content | strip_html | strip_newlines | truncate: maxmeta | escape }}" />
{% elsif template == 'index' and shop.description != '' %}
<meta name="description" content="{{ shop.description }}" />
{% endif %}
{{ 'skinCustom.css' | asset_url | stylesheet_tag }}
{{ 'jquery-1.4.2.min.js' | asset_url | script_tag }}
{{ 'jquery.jcarousel.min.js' | asset_url | script_tag }}
{% if template == 'index' %}
<title>{{ shop.name }}</title>
{% elsif template == '404' %}
<title>Page Not Found | {{ shop.name }}</title>
{% else %}
<title>{{ page_title }} | {{ shop.name }}</title>
{% endif %}
{% include 'fb-open-graph' %}
{% case settings.header_font %}
{% when "Rancho, cursive" %}
<link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'>
{% when "'Amatic SC', cursive" %}
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
{% when "'Sancreek', cursive" %}
<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>
{% when "'Ubuntu Condensed', sans-serif" %}
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
{% endcase %}
{{ 'style.css' | asset_url | stylesheet_tag }}{% if template contains 'product' and settings.main_image_display == 'Lightbox' %}
{{ 'jquery.fancybox-1.3.4.css' | asset_url | stylesheet_tag }}{% endif %}
{{ 'modernizr.js' | asset_url | script_tag }}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{% if template contains 'customers' %}
{{ "shopify_common.js" | shopify_asset_url | script_tag }}
{{ "customer_area.js" | shopify_asset_url | script_tag }}
{% endif %}
<script type="text/javascript">
$(document).ready(function() {
$('#mycarousel').jcarousel({ vertical: true, scroll: 1, start: 3 });
});
</script>
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' | script_tag }}
{{ content_for_header }}
When the page renders I get the following (I edited out the extra stuff not pertaining to this question). I put arrows pointing to the reference of the js and styling page that jcarousel depends on. I had an example of this working in a separate file before I tried to move it into the Shopify project.
<head>
<meta charset="UTF-8">
--> <link href="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/skinCustom.css?241" rel="stylesheet" type="text/css" media="all" />
--> <script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/jquery-1.4.2.min.js?241" type="text/javascript"></script>
--> <script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/jquery.jcarousel.min.js?241" type="text/javascript"></script>
<link href="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/style.css?241" rel="stylesheet" type="text/css" media="all" />
<script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/modernizr.js?241" type="text/javascript"></script>
<script src="http://cdn.shopify.com/s/shopify/option_selection.js?aaf2a68ed9671e345bbc7eef1e63563c51bde6eb" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
ERROR HERE --> $('#mycarousel').jcarousel({ vertical: true, scroll: 1, start: 3 });
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/global/theme-controls.css" type="text/css" />
</head>
The only thing I can imagine might be happening is one of the other script files is messing this up. But I am not really sure how I would debug that besides taking out the other script files. If anyone has run into a similar issue or has some insight on this I would greatly appreciate it. None of the other questions seemed to get an answer beyond just incorrect implementation (like leaving that script out of the head). I might be doing something dumb, but I have researched and looked over this numerous times and I can't see what it is.
Thanks,
Alan
I'm putting my comment from above into response form.
Two issues with this. First, you are loading jQuery twice. Don't do that. Second, jQuery's use of $ can conflict with other javascript libraries so you should either use jQuery or use jQuery's noconflict mode.