2

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.

0

You could probably do something like this:

  1. Add hidden form element with product SKU
  2. Read the SKU in a JavaScript Drupal.behavior

The key is making the SKU available in the DOM and using Drupal.behaviors to read it, as they run / are reattached after the AJAX form update.

i.e:

/**
 * Implements hook_form_FORM_ID_alter
 */
function MYMODULE_form_commerce_cart_add_to_cart_form_alter(&$form, &$form_state){

  // Add a hidden SKU element to the add to cart form
  if (isset($form_state['default_product']->sku)){
    $form['product_sku'] = array(
      '#type' => 'hidden',
      '#value' => $form_state['default_product']->sku,
    );
  }

}

Then in your JS file

(function ($) {

  Drupal.behaviors.pswtb_loader = {
    attach: function (context, settings) {
     if($('input[name=product_sku]').length > 0){
       pswtb.loader.show({
         widgetConfigurationId: "3a4acc53-216e-48da-8e92-bfaeb58168a7", 
         sku: "US_" +  $('input[name=product_sku]').val();
       }); 
     }
    }
  };

})(jQuery);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.