Need help organizing my JavaScript into PHP for Woocommerce template

  • Resolved amandathewebdev

    (@amandathewebdev)


    10 years, 2 months ago

    Hi all,

    I have a woocommerce store set up, and the products have variants. These variants display in drop down menu’s. I have JavaScript that will take the options from the drop down menus and put them into check boxes. Users who are not logged in will see check boxes.

    I found the template file, wooajax.php, in my theme’s /includes/ folder. Here is the file: http://pastebin.com/dpjE1vQt

    I need to figure out how to work this bit of JavaScript into this file:

    <div class="check-boxes">
	<?php if (!is_user_logged_in()): ?>
		<script>
			function myFunction() {
					var selects = document.getElementsByTagName('SELECT');
			    var container = document.getElementById('quickview-content');
			    // document.getElementsByTagName("SELECT")[0].setAttribute("type", "checkbox");
			    var i;
			    for (var x = 0; x < selects.length; x++) {
			      var select = selects[x];
			    	for (i = 0; i < select.length; i++) {
			          var checkbox = document.createElement('input');
			          checkbox.type = 'checkbox';
			          checkbox.name = 'option';
			          checkbox.id = 'randomId' + i;
			          checkbox.value = select.options[i].text;
			          var label = document.createElement('label')
			          label.htmlFor = 'randomId' + i;
			          label.appendChild(document.createTextNode(select.options[i].text));
			          container.appendChild(checkbox);
			          container.appendChild(label);
			      }
			    }
			}

			myFunction();
		</script>
	<?php endif ?>
</div>

    I plugged it in on line 84, in the “product-info” div, but this displays the checkboxes at the very bottom of the div and the JavaScript renders in the HTML where the checkboxes should.

    I’m thinking I need to add the script somewhere else, and just call the function here. How do I call a JavaScript function with PHP, and also where else can I put the script? Anywhere else, the var selects returns null because the selects are not rendered yet. It has to be stuck with the AJAX so they render at the same time.

    Any help would be appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Joey

    (@leglesslizard)

    10 years, 2 months ago

    Hey,

    Are you sure your javascript is doing exactly what it should? You appear to be grabbing an element and appending the checkboxes to it. Append naturally adds the content to the end of the supplied element (here id:quickview-content).

    Sorry if I’ve misunderstood, not too hot with JS…

    Regards

    Thread Starter amandathewebdev

    (@amandathewebdev)

    10 years, 2 months ago

    Hi Joey,

    Thanks for the suggestion. You were right. I placed the code lower in the file and appended the checkboxes to my “check-boxes” div.

    But is there a better way to do this? Is it OK that it’s all in one file?

    Joey

    (@leglesslizard)

    10 years, 2 months ago

    I’m not familiar with that particular template files but usually template files follow a hierarchy when deciding which to load. First, the child theme is checked, then the parent theme, then woocommerce itself (for woocommerce that is, general theme templates will still check child themes first though).

    This allows you to override a template without modifying any code in your theme or plugins directly. The reason for this is that when you then update your themes/plugins you do not lose any customisations as they are stored elsewhere 🙂

    So I would look at adding a child theme and then modifying the template there. I also like to keep my different code in different files (php, html, js) and so I would look at adding an action to the template and then hooking onto that action to pull in my js file.

    That said, as I understand it javascript is only outputted by php and then run client side. So really you should be able to avoid the template files altogether and simply enqueue the javascript the wordpress way and just load it into the footer. You may have to provide a conditional argument if you only want it loading on certain pages; I don’t know your exact setup 🙂

    Helpful codex entries: child themes, hooks, enqueue.

    I hope if you are interested that they will make for some good reading. Apologies if that is a bit beyond what you are after!

    All the best

    Thread Starter amandathewebdev

    (@amandathewebdev)

    10 years, 2 months ago

    Hi Joey,

    I appreciate all the info! I do have a child theme set up however. Sorry for not being clear with my question, I realize now it was very general. What I mean to ask, more specifically:

    1. is it OK to have a <script> tag in this file or should I create a function in functions.php for this?
    2. Should I even be using JavaScript or should it be PHP?
    3. If it’s better to have this chunk of js somewhere else, what is the best way to include it in PHP without having to render the JavaScript within the HTML?

    I hope that makes sense.

    Joey

    (@leglesslizard)

    10 years, 2 months ago

    Apologies 🙂

    As I said I’m not overly familiar with JS but I’m unclear why the code you pasted above needs to be in that particular <div>. In my projects I add my JS using “wp_enqueue_script”. Here you could put this in your functions.php, wrap the enqueue in the conditional ( if (!is_user_logged_in()): ) and let wordpress handle the rest. This separates your different code into its own files.

    Depending on how this template functions that may not be possible, however. If the above doesn’t work then including it as you have may be the simple solution. As long as it is in a child theme overriding the main template 🙂 Seeing as this is PHP you could always use “include” to pull in the script if you wanted to separate the code.

    Regards

    Thread Starter amandathewebdev

    (@amandathewebdev)

    10 years, 2 months ago

    Great, thanks for your help 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Need help organizing my JavaScript into PHP for Woocommerce template’ is closed to new replies.

Tags