0

I have some javascript here that seems to run fine as a snippet, but I am having a hard time trying to get it to work on my website. I've tried many plug-ins to no avail.

My question is; can someone help me upload this javascript to my website? The page I want it to work on is https://cruxstickers.com/zztest .

Thanks for any and all help!

$("#product-details-continue").click(function() {

  var addr = "https://cruxstickers.com/product/" +
      $("input[type=radio][name=variant_id]:checked").val() + "-" +
      $("input[type=radio][name=quantity]:checked").val();

  alert(addr);

  // change the addr to relevant URLs and do this instead...
  // location.href = addr;

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="variant-options" class="options">
<li><input type="radio" id="variant_79" name="variant_id" value="2x2" readonly=""><label for="variant_79"> 2" x 2"</label></li>
<li><input type="radio" id="variant_78" name="variant_id" value="3x3"><label for="variant_78"> 3" x 3"</label></li>
</ul>

<div id="quantities" class="product-option-group">
<legend>Select a quantity</legend>
<ul id="variant-quantities" class=" options radio"><li class="checked quantity-item"><span class="table-cell"><input type="radio" id="quantity_50" readonly="" name="quantity" value="50">
<label for="quantity_50" class="checked quantity"> 50</label></span></li>

<li class=" quantity-item"><span class="table-cell"><input type="radio" id="quantity_100" readonly="" name="quantity" value="100"><label for="quantity_100" class=" quantity"> 100</label></span></li>
<li class=" quantity-item"><span class="table-cell"><input type="radio" id="quantity_200" readonly="" name="quantity" value="200"><label for="quantity_200" class=" quantity"> 200</label></span></li>

</ul>
</div>

<button id="product-details-continue">continue</button>

Below is my final javascript solution. I've added this to my wordpress themes functions.php file.

add_action('wp_footer',function(){
    ?>
    <script>
jQuery(document).ready(function() {
  jQuery("#product-details-continue").click(function(e) {
    e.preventDefault;


    var vrnt = jQuery("input[name=variant_id]:checked").val();
    var qnty = jQuery("input[name=quantity]:checked").val();

    var addr = "https://cruxstickers.com/product/" + vrnt + "-" + qnty;

    window.location.assign(addr);

    return false;
  });
});
    </script>
    <?php
});
1

Firstly, the JS is wrong:

In the browser Developer/Web Inspector > Console on your site, I typed $() and got "undefined". I then did jQuery(), and it shows a value, so it is defined. So you should be using jQuery(, not $( throughout.

Sidenote: I see the continue button is simply a <button> element, not within a <form>, but if it will be, with .click() you'll want to prevent the default button click action. You do this with:

yourButton.click(function(e){
  e.preventDefault;
  // your code
  return false; 
});

--

So I was able to get the button click to fire, through console, with this:

jQuery("#product-details-continue").click(function(e) {
  e.preventDefault;
  alert('👋');
});

Not necessary, but you may also want to consider wrapping your jQuery in ready to ensure your DOM is fully loaded,

jQuery(document).ready(function() {
  jQuery("#product-details-continue").click(function(e) {
    e.preventDefault;

    // your code
    alert('👋');

    return false;
  });
});

Adding in your code, I could get the URL popup with input values via the console with:

jQuery(document).ready(function() {
  jQuery("#product-details-continue").click(function(e) {
    e.preventDefault;


    var vrnt = jQuery("input[name=variant_id]:checked").val();
    var qnty = jQuery("input[name=quantity]:checked").val();

    var addr = "https://cruxstickers.com/product/" + vrnt + "-" + qnty;

    alert(addr);

    return false;
  });
});

enter image description here


Secondly, to get this into your site, in your theme's functions.php file, or in your plugins main .php file - where ever you're developing out of - you can add the following to inject the JS code into the footer of your site:

add_action('wp_footer',function(){
    ?>
    <script>
    jQuery(document).ready(function() {
      jQuery("#product-details-continue").click(function(e) {
        e.preventDefault;

        var vrnt = jQuery("input[name=variant_id]:checked").val();
        var qnty = jQuery("input[name=quantity]:checked").val();

        var addr = "https://cruxstickers.com/product/" + vrnt + "-" + qnty;

        alert(addr);

        return false;
      });
    });
    </script>
    <?php
});

Lastly, you pasted HTML with a script tag for https://ajax.googleapis..../jquery.min.js but you don't need that, and it wasn't working. If you browse your source code, you'll see you have

<script type="text/javascript" src="https://cruxstickers.com/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script> 

already, that's why jQuery no-conflict mode jQuery() was working. If you were to use your external script, you should enque it into your Wordpress theme properly with wp_enqueue_script().

  • Okay - so I've added the add_action() section letter for letter from the bottom of your response into my theme's function.php file and the waving alert is firing! I tried replacing that alert with the var function from my first post, and it becomes unresponsive again. Also, I have no idea what "neque your main jaunty file" means, can you elaborate? – Mason J Jan 30 '18 at 2:31
  • I miss typed, *enque. Did you change $("input[t.. to jQuery("input[t... in your code?. – David Sword Jan 30 '18 at 3:18
  • I did change it to jQuery - also, i do not know how to enque my main jaunty file. what is a jaunty file? – Mason J Jan 30 '18 at 3:23
  • Lol- jQuery*. I should not type on phone. I can sort this all out when I get on computer- unless someone else beats me to it. – David Sword Jan 30 '18 at 3:30
  • Ah, so enque my main jQuery file. I do not have a main jQuery file - or at least don't know how to find it. – Mason J Jan 30 '18 at 3:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.