I am trying to integrate our Drupal 7 Commerce install with Digital River’s where-to-buy widget.

All I need to do is add a little JS to the product page, with a script variable set to the product sku. On page load, this inline JS runs and adds a button that when clicked will pop-up a lightbox with where-to-buy information. This script has a variable that requires a SKU to be entered. If I add the snippet to my node-template it works fine.

HOWEVER, I have several products on each product display, and I have 2 product attributes that can be selected. This, of course, refreshes the node/entity field values in my page, like the title, a product image and so forth. This will not refresh the sku parameter of my javascript snippet though, so my WTB button does not update. IE, if I did something like this:

<script type="text/javascript">           pswtb.loader.show({             widgetConfigurationId: "3a4acc53-216e-48da-8e92-bfaeb58168a7",              sku: "US_<?php print trim($content['product:sku']['#markup']) ?>"            });          </script> 

I discovered that it would initially load but the product:sku wouldn’t change as I selected a new attribute.

So, I also discovered that my values would update if they were displayed via the render() function. So, if I just did this:

<?php print render($content['product:sku']) ?> 

I would get an element that updates ‘properly’ when a product attribute is selected. It does, however come with a lot of div’s wrapping it, so I can’t use it as a parameter in my script,and I didn’t want to override the ‘sku’ field template because I need that sku elsewhere on the page, and even overriding the template, I would still get a wrapper around it.

Ok, so my next attempt was to create a ‘virtual’ field, using the virtual_field module. This just lets you have a dummy field that doesn’t get stored anywhere but still lets you create custom templates and specify display formatters. I created a dummy field that just contains the product sku.

Using this, I created a custom field template (field–field-product-wtb.tpl.php) for this virtual field like so:

this will update: <?php print render($item); ?> but this gets stripped out: <script type="text/javascript">    pswtb.loader.show({      widgetConfigurationId: "3a4acc53-216e-48da-8e92-bfaeb58168a7",       sku: "US_<?php print render($item); ?>"     });  </script> 

And then in my node template, I just do this:

<?php print render($content['product:field_product_wtb']) ?> 

It works on initial load, and when a product attribute is selected, the sku does change (the ‘this will update’ part) but the entire script tag gets stripped out and my button disappears. I guess because it gets filtered via some xss protection, but I haven’t tracked it down. As near as I can tell, this is because when content on a page is updated via ajax, the HTML returned from a tpl file is sanitized and things like script tags are filtered out.

Now I’m at a loss as to how to get this to work.