0

I have been trying for days to get the credit forms (anyone of them!) to auto detect credit card type. I found some scripts that work fine until i try to add them to the credit card templates. Then the scripts disappear or don't show up in the template. The css and anything else I add to the templates show up in the source or if I look at the in Chrome "Inspect" but not any scripts.So I tried adding them to parts of the page above and below the credit card templates but can't get that to work either. How can I get the scripts to show up in the templates and why don't they appear there? Is it a built in security feature?

1 Answer 1

1

What you are experiencing is the fact that the HTML is being injected via an XMLHttpRequest. The embedded scripts are being eval()'d as part of the resulting response. You will not see them in the DOM. (I don't recall the technical explanation for this, but google is your friend)

Refer to: http://api.prototypejs.org/language/String/prototype/evalScripts/

Without actually seeing your code, I cannot comment why your code is not available/working. As per the given link, it is possible your scope is wrong?

You can add a debugger statement in your script, and keep the chrome developer console open. If all is working, you should end up on a breakpoint in your eval()'d code.

You can also consider a different approach, keeping your javascript in a separate .js file. Using the layout directives, you can load this when the initial onepage checkout loads using the following directives in some layout file.

<checkout_onepage_index translate="label">
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/your_file.js</name></action>
        </reference>
    </checkout_onepage_index>

This will load your script when checkout is loaded.

Another alternative, is to inject the given sript into the HEAD, via embedded code in your .phtml.

This will do the job:

<script type="text/javascript">
//<![CDATA[
  var x = document.getElementsByTagName("script");
  var header_already_added = false;
  for (var i=0; i< x.length; i++){
      if (x[i].src == "<?php echo $this->getSkinUrl('js/your_file.js') ?>"){
             header_already_added = true;
      }
  }

  if (header_already_added == false){
    // add header if not already added
    var head = document.getElementsByTagName("head")[0];
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = '<?php echo $this->getSkinUrl('js/your_file.js') ?>';
    head.appendChild(s);
  }
//]]>   
</script>

The code above will inject your scripts file load into the HEAD when teh .phtml loads

Also check your console for ANY js errors. A leading error, from something else on teh page will most likely block further loading/eval action of the embedded code.

Hope that helps.

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.