September 22, 2014

Finding an href with jquery and enqueing the jscript code for WordPress

With WordPress you ordinarily don't have to do much extra coding, there are so many plugins that are helpful for that. But sometimes you just have to roll up your sleeves and bite the bullet. And sometimes you can do it with just CSS but when that fails you absolutely have to use jQuery. This is one of those times.

A client wanted to turn off shipping methods for a particular product. I use shopp for my carts, and the product was a fresh turkey for the holidays. People who order this product should get free shipping, and just this product. If other products show up, they would get a shipping fee for those products.

But the client did not want the shipping methods showing up, to control the shipping themselves.

Even though in the admin section of the cart you can create free shipping using categories and discounts, the shipping options still showed up. So the idea here is to display:none for the shipping methods, when that particular product was on the page.

Using FireBug in FireFox you can see the html/css for that page - when the product is loaded in the cart:

https

 

 

 

 

 

So the idea here is to use jQuery to find on the page that unique https path, and then invoke the css rule for the right identifier. One way is to gather all the hrefs into a collection, and examine each one and find an exact match. Here is the code in its entirety.

jQuery(document).ready(function(){

jQuery('a[href^="https://"]').each(function(){
var extlink = jQuery(this).attr('href');
if ( extlink == "https://williebird.com/shop/fresh-turkey/"){

jQuery('#shipping-methods').css("display", "none");
jQuery('#shipping-methods').after("<p><em><strong>Free Shipping for the Fresh Turkey</strong></em></p>");
return false;
}
})
});

What this code is doing is collecting all the hrefs, and going through each one to look for an exact match, and when it finds it sets the proper id to display none, then exits the loop ( return false).

To get the code into wordpress requires enqueueing the script so  in order to do that the functions.php had to have the script registered and enqueued like so:

function turnoffshippingmethods() {
wp_register_script ('turnoffshippingmethods', get_stylesheet_directory_uri() . '/js/turnoffshippingmethods.js',
array('jquery'));
wp_enqueue_script('turnoffshippingmethods');
}

add_action ( 'wp_enqueue_scripts', 'turnoffshippingmethods');

I had created a subdirectory off the child theme and placed the previous code in that folder. Note the use of jQuery instead of dollar signs - that is the no conflict admonition to jQuery, so previous entries would not conflict. The little piece of code added some text to replace the part that was now gone, to give another message to the shopper.

I hope this little piece helps you in your own jQuery coding problem solving!

 

 

Edward worked at Lawrence Berkeley Laboratory in the hills of Berkeley Ca in the 70's, where the current internet backbone was being developed. He consulted scientists and programmed in fortran, cobol, pascal, C, and Oracle and Informix 4gl's. He worked corporate in the city as a freelancer for 12 years. Higher Source Web Sites started developing web sites in 2001, while in the real estate business. He started blogging and developing sites for his colleagues and his company, then other Real Estate companies. His background in business programming, database administration, & software development made staying within the soft technologies more appealing than other choices. He lives in Santa Rosa Ca with his wife Pam and runs a beagle rescue with Pam, teaches chess, and loves music and cinema.

HSS - specializing  in Law, Art, Author, Professional and Non Profit Websites - We'd love to help you -  Building websites since 2001
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram