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

Get text content from nested list item class javascript – Shopify

Screenshot with explanation

My shopify store has currency pop out menu that can be opened via an icon button ($).

It would be ideal to display the currency that is selected to the right hand side of the icon button.

The menu is an unordered list and the selected list item is assigned the class "active". The actual text content is wrapped inside a nested "a href:"

I added a <p> with the id "currName" to the right hand side of the icon button and have attempted to show the selected list item in this spot.

HTML:

<div class="tt-desctop-parent-multi tt-parent-box">
  <div class="tt-multi-obj tt-dropdown-obj">
    <div class="row">
    <button class="tt-dropdown-toggle"
            data-tooltip="{{ 'general.tooltip_texts.header_settings' | t }}"
            data-tposition="bottom">
  
      <i class="icon-e-49"></i><p id="currName"> </p> </button></div>
    <div class="tt-dropdown-menu">
      <div class="tt-mobile-add">
        <button class="tt-close">Close</button>
      </div>

<div class="tt-dropdown-menu" style="display: block;">
      <div class="tt-dropdown-inner">
<ul class="menu_language_holder">
</ul>

<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="currency-selector small--hide MultiFile-intercepted" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/collections/carriers/products/piang-gouer-soft-cat-carrier-plain-print"><input name="currency" hidden="">
<ul class="currency-selector" data-currency-selector=""><li data-currency="AUD">
    <a href="#">
      $  Australian Dollar
    </a>
  </li><li data-currency="USD" class="active">
    <a href="#">
      $ United States Dollar
    </a>
  </li></ul></form></div>
    </div><br><br>

My code:

<script>
    let selectedCurrency = document.querySelectorAll("li, .currency-selector, .active, a[href^='#']").innerHTML;  
    document.getElementById('currName').innerHTML = selectedCurrency;
</script>

The result is undefined no matter which method I try.

Thanks 🙂

Tags:

2

Answers


  1. 0

    You should use the select tag instead of a list.

    Example:

    const currencySelector = document.getElementById("currency-selector");
currencySelector.addEventListener("change", (e) => {
    console.log(e.target.value)
})
    <select name="currency" id="currency-selector">
    <option value="USD">Dollar</option>
    <option value="EUR">Euro</option>
</select>
    Login or Signup to reply.
  2. 0

    You need to simply replace document.querySelectorAll with document.querySelector

    This will give you an output like this:

    enter image description here

    https://jsfiddle.net/hdro85k1/

    The code will look like this then:

        let selectedCurrency = document.querySelector("li, .currency-selector, .active, a[href^='#']").innerHTML;  
    document.getElementById('currName').innerHTML = selectedCurrency;
    
    <div class="tt-desctop-parent-multi tt-parent-box">
  <div class="tt-multi-obj tt-dropdown-obj">
    <div class="row">
    <button class="tt-dropdown-toggle"
            data-tooltip="{{ 'general.tooltip_texts.header_settings' | t }}"
            data-tposition="bottom">
  
      <i class="icon-e-49"></i><p id="currName"> </p> </button></div>
    <div class="tt-dropdown-menu">
      <div class="tt-mobile-add">
        <button class="tt-close">Close</button>
      </div>

<div class="tt-dropdown-menu" style="display: block;">
      <div class="tt-dropdown-inner">
<ul class="menu_language_holder">
</ul>

<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="currency-selector small--hide MultiFile-intercepted" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/collections/carriers/products/piang-gouer-soft-cat-carrier-plain-print"><input name="currency" hidden="">
<ul class="currency-selector" data-currency-selector=""><li data-currency="AUD">
    <a href="#">
      $  Australian Dollar
    </a>
  </li><li data-currency="USD" class="active">
    <a href="#">
      $ United States Dollar
    </a>
  </li></ul></form></div>
    </div><br><br>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search