javascript - 在 Magento 产品页面上添加动态 JS 代码

Question

在我的 magento 产品页面上，我需要添加一个基于在产品页面上显示追加销售产品的动态 JavaScript 数组。目标是当用户更改主要产品的颜色时更改追加销售产品的图像。

为了实现我的目标，我需要在每个产品页面上都有一个自定义 JavaScript 数组，为我提供有关交叉销售产品和关联产品图像的信息。

最好的方法是什么？

我试试这个

在我的 config.xml 中添加一个观察者事件

<controller_action_layout_load_before>
    <observers>
       <crossselling_product_view>
           <type>singleton</type>
           <class>XXXXXXXX_Crossselling_Model_Observer</class>
           <method>productview</method>
        </crossselling_product_view>
    </observers>
</controller_action_layout_load_before>

添加观察者添加具体的JS代码

<?php
class XXXXXXXX_Crossselling_Model_Observer {

    public function productview(Varien_Event_Observer $observer) {

        $product = Mage::registry('current_product');

        //only on product page
        if (!($product instanceof Mage_Catalog_Model_Product)) {
            return;
        }

        $controller = $observer->getAction();
        $layout = $controller->getLayout();
        $block = $layout->createBlock('core/text');
        $block->setText(
            '<script type="text/javascript">
            function main_pulsestorm_hellojavascript()
            {
                alert("Foo");
            }
            main_pulsestorm_hellojavascript();
        </script>'
        );
        $layout->getBlock('head')->append($block);
    }

}

我的错误: fatal error :在非对象上调用成员函数append()

我的问题是什么？添加动态 js 代码的正确方法是吗？

Answer 1

我可能会从不同的 Angular 来处理这个问题。由于您只对与加售 block 的数据和输出进行交互感兴趣，因此您可以通过观察其输出并附加额外的 JavaScript 来更改该 block 的行为。为简洁起见，此答案假设您了解 Magento 扩展的基础知识。

1. 观察 core_block_abstract_to_html_after 事件:

etc/config.xml

<core_block_abstract_to_html_after>
    <observers>
        <addCustomUpsellFormat>
            <class>XXXXXXXX_Crossselling_Model_Observer</class>
            <method>addCustomUpsellFormat</method>
        </addCustomUpsellFormat>
    </observers>
</core_block_abstract_to_html_after>

通过附加将读取其数据的新 block 的输出来对 Mage_Catalog_Block_Product_List_Upsell 实例进行操作:

模型/Observer.php

public function addCustomUpsellFormat(Varien_Event_Observer $observer)
{
    /* @var Mage_Core_Block_Abstract $block */
    $block = $observer->getBlock();
    if ($block instanceof Mage_Catalog_Block_Product_List_Upsell) {
        /* @var Varien_Object $transport */
        $transport = $observer->getTransport();
        // Receive the standard output for the block.
        $output = $transport->getHtml();

        /* @var Mage_Core_Model_Layout $layout */
        $layout = $block->getLayout();
        $json = $layout->createBlock('core/template')
            ->setTemplate('catalog/product/list/upsell_json.phtml')
            ->setItems($block->getItems())
            ->toHtml();

        // Append new JSON data to block output.
        $transport->setHtml($output . $json);
    }
    return $this;
}

创建一个模板来解释追加销售数据并以您想要的方式输出它，在上面的示例中，我创建了一个可以执行类似操作的模板(我的示例创建了一个新模板，因此它应该进入基本主题) :

app/design/frontend/base/default/template/catalog/product/list/upsell_json.phtml

<?php
$_json = array(); // Add data in here to convert to JSON for output.
$_items = $this->getItems();
/* @var Mage_Catalog_Model_Product $_product */
foreach ($_items as $_product) {
    $_json[$_product->getId()] = array(
        'image' => (string)Mage::helper('catalog/image')->init($_product, 'image')
    );
}
?>
<script type="text/javascript">var upsellData = <?php echo json_encode($_json) ?>;</script>