CODEWITHSUNDEEP
javascriptphpjquerywordpresscookies
Imnotapotato
Imnotapotato

Reputation: 5808

How do I set a cookie on a Wordpress theme template using Javascript/jQuery and then display the cookie value in a different template (if isset)

I have a Wordpress website which I set a cookie using the jQuery cookie plugin.

This is my JS code in the end of one of my wordpress landing pages which sets a cookie using Javascript/jQuery - AND WORKS: 

<script type="text/javascript" src="https://example.com/wp-content/themes/themeeee-child/js/jquery.cookie.js"></script>
<script type="text/javascript">

// Parse the URL
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

// Give the URL parameters variable names
var source   = getUrlParameter('utm_source');
var medium   = getUrlParameter('utm_medium');
var term     = getUrlParameter('utm_term');
var content  = getUrlParameter('utm_content');
var campaign = getUrlParameter('utm_campaign');

// Setting Cookie using jQuery 
if(jQuery.cookie('utm_source') == null || jQuery.cookie('utm_source') == "") {
  jQuery.cookie('utm_source', source); 
}
if(jQuery.cookie('utm_medium') == null || jQuery.cookie('utm_medium') == "") {
  jQuery.cookie('utm_medium', medium); 
}
if(jQuery.cookie('utm_campaign') == null || jQuery.cookie('utm_campaign') == "") {
  jQuery.cookie('utm_campaign', campaign); 
}
if(jQuery.cookie('utm_term') == null || jQuery.cookie('utm_term') == "") {
  jQuery.cookie('utm_term', term); 
}
if(jQuery.cookie('utm_content') == null || jQuery.cookie('utm_content') == "") {
  jQuery.cookie('utm_content', content); 
}

// Set a flag 
jQuery.cookie('coo_flag', 1, { expires : 365 }); 


</script>

enter image description here

$_COOKIE['coo_flag'] is set to "1" now.

On a total different page, at the bottom of the template file, I have this code part that checks using PHP if the $_COOKIE['coo_flag'] is set, and if is true, it fires a google pixel script: 

<?php 

  // session_start();
  if ( $_COOKIE["coo_flag"] ) {
    echo $_COOKIE["coo_flag"];
?>

<!-- Google Code for Contact Us Registration Conversion Page -->
<script type="text/javascript">
  /* <![CDATA[ */
  var google_conversion_id = 666;
  var google_conversion_language = "en";
  var google_conversion_format = "3";
  var google_conversion_color = "666";
  var google_conversion_label = "666";
  var google_remarketing_only = false;
  /* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/666/?label=666&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

<?php 
  } else {
    echo "false";
     var_dump($_COOKIE["coo_flag"]);
  }
?>

and I keep getting this output result:

falseNULL

I have been trying to get it using JS too: 

<script type="text/javascript" src="https://yellowheadinc.com/wp-content/themes/sogo-child/js/jquery.cookie.js"></script>

<script type="text/javascript">

var cookieValue = jQuery.cookie("coo_flag");
console.log(cookieValue);

</script>

and got no output for console.log(cookieValue);

Please help me find the proper way to get the cookie variable.

[01.02.2017]: More enlightenment:

enter image description here

Upvotes: 3

Views: 2926

Answers (1)

Bj&#246;rn
Bj&#246;rn

Reputation: 489

Jquery Cookie creates cookies with a path in addition to the domain:

path path: '/' Define the path where the cookie is valid. By default the path of the cookie is the path of the page where the cookie was created (standard browser behavior). If you want to make it available for instance across the entire domain use path: '/'. Default: path of page where the cookie was created.

A cookie for path /abc is not visible to a page on path /def even though both pathes are on the same domain. Giving the cookie the root path / as quoted above should do the trick.

Upvotes: 2

Related Questions