skip to Main Content

I inherited this code on a Shopify site. Moving it and some related code into a new theme based on Dawn. Don’t think the theme is the issue at all but rather this code which is now triggering a "$" is not a function error. Here’s an example of that code:

$('.section__choose-texture').on('click', '.content', function ( ){
  var current = $(this);

  $('.content').removeClass('active');
  current.addClass('active');

  $('#prodTextureItem').val(current.data('texture'));
  $('#productTexture').text(current.find('h3').text());
  $('.section__choose-coffee').show();

  var header_height = $('.site-header').height(),
      offset_top = $('.section__choose-coffee').offset().top,
      res = offset_top - header_height;

  $('html, body').animate({ scrollTop: res }, 'slow');
});

I added a "function stepOne() {" to the top and then closed it with a } followed by a call to the function but Shopify’s editor says it is bad code. I think that’s because function is listed on line one of my example.

So how can I make this function work properly? Does the code need to be completely rewritten? Or was I on the correct path on my idea?

2

Answers


  1. The $ function is not a JavaScript built-in.

    It comes from the jQuery library.

    Add this script tag before your script to import it:

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    
    Login or Signup to reply.
  2. To use $ statement you have to add jquery files or reference to the project.

    <script src="jquery.js"></script>
    

    or from jquery.com

    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search