How do I run another javascript file from within Theme.liquid

Shopify Discussion
1

I added some custom code to my theme.liquid file and it work prefectly.
I have removed this ‘working’ code from theme.liquid and placed it in its own robcustom.js file in the assets folder

In the theme.liquid file I added just before the tag

Robcustom.js is visible in the source code of a product page but the code is NOT running as expected and
there aren’t any errors on the console either. The code from robcustom.js is attached.

Any help appreciated?

{% comment %} This is the code thast hides warranty dorpdown when not warranty is available {% endcomment %}
2

Hi Rob. Can you please share the store url?

3

Hi, https://5upqr2t9jyugtp1r-62159716511.shopifypreview.com

4

Hi. I can see that the code is included correctly. There might be some problem with the logic. What do you want to achieve?

5

the script is working correctly but I want to move it from theme.liquid into its own file. This is where Im having issues

6

OK. Please move it from theme.liquid file and let me know. This will help to diagnose the problem.

7

done that

8

Things are little different in JS file. Remove these two lines from js file and add these to theme liquid file. The script in second line is actually a JQuery library that extends the support of JavaScript. Keep your custom code separate from it. The first one is comment, you can either remove it or keep it.

Note: The jQuery script should be included before the robcustom js file. The below two lines need to be placed in theme.liquid file and before robcustomjs file.

{% comment %} This is the code thast hides warranty dorpdown when not warranty is available {% endcomment %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Secondly, in robcustom js file, there should not be any tags. These are not valid in javascript file. Remove the script tags but keep the inside code contents as it is.

The code in robcustom js file will look like this:

$(document).ready(function(){
  // Select the dropdown menu
  var dropdown = $("#data-variant-option-1");
  // Check if the specific value is present
  if(dropdown.find("option:contains('£0')").length) {
    // If the specific value is present, select the last option in the list
    dropdown.val(dropdown.find("option:last").val());
    // Hide the dropdown menu
    dropdown.hide();
    // Hide the select element for the dropdown menu
    dropdown.closest(".select").hide();
    
    // Hide the label with the text "Warranty Options"
    $(".selector-wrapper > label:contains('Warranty Options')").hide();
  }
});


// Hide Installation Options if "Select Installation Option" is visible
if ($('div:contains("Select Installation Option")').is(':visible')) {
  $('div:contains("Installation Options:")').hide();
}

// Hide Extended Warranty Options if "No Extended Warranty Selected" is visible
if ($('div:contains("No Extended Warranty Selected")').is(':visible')) {
  $('div:contains("Extended Warranty Options:")').hide();
}

$(document).ready(function() {
  $('select.single-option-selector').change(function() {
    var selectedOption1 = $('#data-variant-option-0').val();
    var selectedOption2 = $('#data-variant-option-1').val();
    var installationAdded = false;
    var warrantyAdded = false;

      if (selectedOption1.includes("Added") && selectedOption1.includes("Installation")) {
        installationAdded = true;
      }

      if (selectedOption1.includes("Added") && selectedOption1.includes("Warranty")) {
        warrantyAdded = true;
      }

      if (selectedOption2.includes("Added") && selectedOption2.includes("Installation")) {
        installationAdded = true;
      }

      if (selectedOption2.includes("Added") && selectedOption2.includes("Warranty")) {
        warrantyAdded = true;
      }

      if (installationAdded && warrantyAdded) {
        if (selectedOption1.includes("Installation") && selectedOption1.includes("Recycling")) {
          $('.price-ui').append("<span class='installation-label'> Total Including Installation & Old Product Recycling + Extended Warranty</span>");
        } else if (selectedOption1.includes("Professional") && selectedOption1.includes("Installation")) {
          $('.price-ui').append("<span class='installation-label'> Total Including Professional Installation + Extended Warranty</span>");
        }
      } else if (installationAdded) {
        if (selectedOption1.includes("Installation") && selectedOption1.includes("Recycling")) {
          $('.price-ui').append("<span class='installation-label'> Total Including Installation & Old Product Recycling</span>");
        } else if (selectedOption1.includes("Professional") && selectedOption1.includes("Installation")) {
          $('.price-ui').append("<span class='installation-label'> Total Including Professional Installation</span>");
        }
      } else if (warrantyAdded) {
        $('.price-ui').append("<span class='installation-label'> Total Including Extended Warranty</span>");
      } else {
        $('.installation-label').remove();
      }
    });
  });
9

Have made all the requested ammendments and its not working at all

10 
{% comment %} This is the code thast hides warranty dorpdown when not warranty is available {% endcomment %}

Please remove above line and replace it with the below:

// This is the code thast hides warranty dorpdown when not warranty is available

% is used in liquid file for commenting while // is used in JavaScript. Please try now.

11

Brilliant!!! Its working.. Thanks for your help..

have a great weelend

12

You’re welcome.