Magento Custom payment method frontend 需要 JavaScript 只有在选择后才能激活

Magento Custom payment method frontend requires JavaScript to be activated only after it is selected

背景故事

我正在构建一种新的支付方式。我正在结帐页面中添加 frontend。支付方式要求 javascript.

所以我设法将脚本添加到结帐页面的 header。

<?xml version="1.0"?>
<layout>
    <checkout_onepage_index>
        <reference name="head">
            <action method="addJs">
                <script>foo/bar.js</script>
            </action>
        </reference>
    </checkout_onepage_index>
</layout>

问题:

但是在我的例子中,foo/bar.js 绑定了一个 DOM 元素,它还不存在。因此 JavaScript 中出现错误。该 DOM 元素仅在买家到达付款阶段后才添加到页面。

一种肮脏的解决方案是将addJs与内容一起添加,以便脚本一起执行。然而,这种方法给我一个问题,即块 checkout.payment.methods 没有方法 addJs。如果我们要使用这种方法,我应该怎么做才能在 checkout.payment.methods 块中 addJs

或者,我将脚本保留在 head 块,并更新我的 JavaScript 以仅在买家 select 我的付款方式时触发。但是,如果我们要监听付款方式 selected,我不确定正在调度什么 JavaScript 事件。会是什么?

你可以做的一件事是向 core_block_abstract_to_html_after 添加一个观察者并将一些 javascript 附加到 checkout/onepage_payment_methods 块:

public function appendSomeJavascript($observer)
{
    $block = $observer->getBlock();

    if (get_class($block)=='Mage_Checkout_Block_Onepage_Payment_Methods'){

        $transport = $observer->getTransport();
        $html = $transport->getHtml();  

        $html .= "<script>alert('appended some js');</script>"; 

        $transport->setHtml($html);         
    }        

    return $this;
}

在您的付款模型中,从 Mage_Payment_Model_Method_Abstract 扩展而来,您可以添加新的 属性:

protected $_formBlockType = 'form_blockname';

然后在您的模块块文件夹中,在 Package/Module/Block/Form/Blockname.php 中添加块 class 并在其中添加:

class Package_Module_Block_Form_Blockname extends Mage_Payment_Block_Form {
    protected function _construct()
    {
        parent::_construct();
        $this->setTemplate('your_template_dir/form/your_template.phtml');
    }
}

然后在app/design/frontend/base/default/your_template_dir/form/your_template.phtml文件中加入你需要的JS代码。该模板将通过 AJAX 获取,您的 JS 代码将在付款部分打开时启动。从这里您可以轻松地在包含您的付款方式的复选框上添加事件并激活它。 编辑:带有转义字符的模板文件JavaScript。

<script type="text/javascript">
    //<![CDATA[
        alert('This is your JavaScript Code');
    //]]>
</script>