javascript - Magento 自定义选项上的 JS 警报单击

Question

我有一个带有 3 个选项的单选按钮自定义选项。例如，在选择选项 2 时，我希望一个简单的 JS alert() 弹出一条关于此选择的消息，而不是所有选项，只有一个。

我发现的问题是，为了使其与所有产品兼容，他们使用 JS 生成 ID 和类名，因此几乎没有什么模式可以遵循以确保我的代码适用于所有产品。

我可以通过查找该元素并使用 getElementByTag() 获取第二个元素来完成此操作，但是我想要一种 Magento 友好的方式来完成它，因为我正朝着我的认证前进在接下来的几个月里，我想确保我的实践与 Magento 保持一致，而不是“绕过”它。

示例代码(由 Magento 即时生成的 ID、类和名称)

<dd class="last">
    <ul id="options-54765-list" class="options-list">
        <li>
            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[54765]" id="options_54765_2" value="210674" />
            <span class="label"><label for="options_54765_2">Colour Edge </label></span>
            <script type="text/javascript">$('options_54765_2').advaiceContainer = 'options-54765-container';$('options_54765_2').callbackFunction = 'validateOptionsCallback';</script>
        </li>
        <li>
            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[54765]" id="options_54765_3" value="210673" />
            <span class="label"><label for="options_54765_3">Gallery Wrap </label></span>
            <script type="text/javascript">$('options_54765_3').advaiceContainer = 'options-54765-container';$('options_54765_3').callbackFunction = 'validateOptionsCallback';</script>
        </li>
        <li>
            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[54765]" id="options_54765_4" value="210672" />
            <span class="label"><label for="options_54765_4">White Edge </label></span>
            <script type="text/javascript">$('options_54765_4').advaiceContainer = 'options-54765-container';$('options_54765_4').callbackFunction = 'validateOptionsCallback';</script>
        </li>
    </ul>
</dd>

Answer 1

为此，在该产品的设计选项卡中，添加自定义 block ，如下所示:

<reference name="before_body_end">
    <block type="your_module/product" name="option.select.js" template="path/to/template.phtml" />
</reference>

在您的新 block 中，获取 Mage::registry('current_product');，然后调用 getProductOptions()。根据任何标准过滤它。现在，最好的方法可能是，根据是否需要大量重复使用，向数据库中的 Catalog_Model_Product_Option_Value 表添加一列，并扩展管理模板，以便选中一个框，或者使用下拉菜单，或输入一些文本以弹出确认信息。

然后，在 protected function _toHtml() {} 函数中，为确认框输出您的 JS。

我就是这样做的。