How can I correctly query custom data attributes in product-template.liquid?

Shopify Discussion
1

I have added a custom data attribute to the ‘product-template.liquid’ of the debut theme to store the product thumbnail alt info and expand the functionality. I am declaring it in a list item and calling it ‘data-thumbnail-color’ (line 87). Pls see below;

{% for media in product.media %}

  • Once added I can successfully see the data being passed when I inspect the thumbnail images. The issue I am having is when I try to query the attribute in the console.

    I run the following in the console;

    $(‘[data-thumbnail-color]’)

    And it returns an error;

    TypeError: $ is not a function. (In ‘$(’[data-thumbnail-color]‘)’, ‘$’ is undefined)

    Could someone pls tell me what I am doing wrong and how I need to change the console command so it returns the list elements based on the attribute name I am passing i.e data-thumbnail-color.

    Thanks

    • 2

    I don’t know if you’ve solved your problem, but I recently ran into this and discovered that I had not uploaded the jquery library before running it.

    3

    You need to install the “Jquery” library in your theme.