Question 11555 in Shopify Question posted in
The Shopify help center can be found here.

Printing value of custom attributes on multiple divs – Shopify

I am working on a Shopify store where there are multiple divs like below:

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="One"></div>

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Two">

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Three">

<div class="options-selection__option-values" data-variant-option="" data-variant-option-index="0" data-variant-option-chosen-value="Four">

I want to get the value of custom attribute data-variant-option-chosen-valueand print that into <span class="selected-variant"></span>

I tried reading the custom attribute value by following jQuery without any success

$(document).ready(function() {
$('.options-selection__option-values').each(function() {
  console.log($(this).attr('data-variant-option-chosen-value'));
});
Tags:

2

Answers


  1. 0

    It works just fine, you just have syntax error, you are missing "})" at the end and it throws the error Uncaught SyntaxError: Unexpected end of input"

    As of now, you are not closing neither the anonymous callback function, neither the ready function.

    $(document).ready(function() {

$('.options-selection__option-values').each(function() {
  console.log($(this).attr('data-variant-option-chosen-value'));
});
})
    Login or Signup to reply.
  2. 0

    Get the value of attribute using $(this).attr("data-variant-option-chosen-value"), concatenate it, set it to the required target.

    Also your template and script has some errors. divs missing closing tag and the $(document).ready(function () { missing the cloaing tag

    $(document).ready(function () {
  let val = ''
  $(".options-selection__option-values").each(function () {
    val += $(this).attr("data-variant-option-chosen-value");
  });
  $(".selected-variant").text(val)
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span class="selected-variant"></span>
<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="One"
></div>

<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="Two"
></div>

<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="Three"
></div>

<div
  class="options-selection__option-values"
  data-variant-option=""
  data-variant-option-index="0"
  data-variant-option-chosen-value="Four"
></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search