Back

Technologies:

javascriptjavascript
avatar
Tolerim
13 days ago

How can I pass a Woocommerce SKU value to JavaScript?

As someone new to WordPress coding, I need to retrieve the SKU value of a product and utilize custom JavaScript to fetch data from the HP CDN network. In the code snippet below, '7YL27EA' represents the SKU value of a product that I need to pass dynamically into the arguments code so that all HP products can retrieve their specifications data from the CDN network. 
 <script type='text/javascript'>
  var ccsccargs = ccsccargs || [];     
  // Product Page
  ccsccargs.push(['cpn', 'CPN']);
  ccsccargs.push(['mf', 'HP']);
  ccsccargs.push(['pn', '7YL27EA']);
  ccsccargs.push(['lang', 'EN']);
  ccsccargs.push(['market', 'ZA']);     
  (function () {
     var o = ccsccargs; o.push(['SKey', 'ZZZZZZZ']); o.push(['ZoneId', 'ZZZZZZZ']);
     var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.async = true;
     sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.cnetcontent.com/jsc/h.js';
     var n = document.getElementsByTagName('script')[0]; n.parentNode.insertBefore(sc, n);
  })();
  </script>
Despite my attempts to pass the metadata value, I've encountered issues as a beginner. Please guide me.
Answers(2)
avatar
Vogi
12 days ago
Verified Answer
To retrieve the SKU value of a product in WordPress, you can use the get_sku() method from within a WordPress action hook. This is useful if you want to retrieve the SKU in response to an event such as when a visitor adds a product to their cart. Regarding your code snippet, you can pass the metadata value dynamically into the arguments code by using PHP. You can use the get_post_meta() function to retrieve the SKU value of a product and then pass it into the arguments code as shown below: 
 <script type='text/javascript'>
  var ccs_cc_args = ccs_cc_args || [];     
  // Product Page
  ccs_cc_args.push(['cpn', 'CPN']);
  ccs_cc_args.push(['mf', 'HP']);
  ccs_cc_args.push(['pn', '']);
  ccs_cc_args.push(['lang', 'EN']);
  ccs_cc_args.push(['market', 'ZA']);     
  (function () {
     var o = ccs_cc_args; o.push(['_SKey', 'ZZZZZZZ']); o.push(['_ZoneId', 'ZZZZZZZ']);
     var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.async = true;
     sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.cnetcontent.com/jsc/h.js';
     var n = document.getElementsByTagName('script')[0]; n.parentNode.insertBefore(sc, n);
  })();
  </script>
I hope this helps. Let me know if you have any other questions.

Sources

How to get product SKU in WooCommerce - Users InsightsHow to Get Product or Variation by SKU in WooCommercephp - Get SKU of product in cart Wordpress - Stack OverflowWooCommerce: Get Product Info (ID, SKU, $) From $product Object
avatar
Tolerim
13 days ago
To pass the SKU value dynamically, you would first need to fetch the product data in your custom JavaScript code. You can do this by using WordPress functions to retrieve the current product's SKU value and then passing it to the ccs_cc_args.push(['pn', '']); line of code. Here's an example of how you can use WordPress functions to retrieve the product's SKU value and pass it dynamically to the ccs_cc_args array: 
<script type="text/javascript">
  var ccs_cc_args = ccs_cc_args || [];

  // Product Page
  ccs_cc_args.push(['cpn', 'CPN']);
  ccs_cc_args.push(['mf', 'HP']);
  ccs_cc_args.push(['lang', 'EN']);
  ccs_cc_args.push(['market', 'ZA']);

  // Get the current product's SKU value
  var productSku = '<?php echo get_post_meta(get_the_ID(), '_sku', true); ?>';

  // Pass the SKU value to the ccs_cc_args array
  ccs_cc_args.push(['pn', productSku]);

  (function () {
    var o = ccs_cc_args;
    o.push(['_SKey', 'ZZZZZZZ']);
    o.push(['_ZoneId', 'ZZZZZZZ']);
    var sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.async = true;
    sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.cnetcontent.com/jsc/h.js';
    var n = document.getElementsByTagName('script')[0];
    n.parentNode.insertBefore(sc, n);
  })();
</script>
In this example, we have used the get_post_meta() function to retrieve the current product's SKU value. We then passed this value to the ccs_cc_args.push(['pn', productSku]); line of code in our JavaScript. This will ensure that the correct SKU value is used to retrieve the product's specifications data from the CDN network.
;