在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);
    }

}

我的錯誤： 致命錯誤：在非對象上調用成員函數append（）

我的問題是什么，添加動態js代碼是否正確？

Answer 1

我可能會從另一個角度來解決這個問題。 由於您只對與upsell塊的數據和輸出進行交互感興趣，因此可以通過觀察該塊的輸出並附加額外的JavaScript來更改該塊的行為。 為了簡潔起見，此答案假定您了解Magento擴展的基礎。

1. 觀察core_block_abstract_to_html_after事件：

等/ 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>

2. 通過附加將讀取其數據的新塊的輸出，對Mage_Catalog_Block_Product_List_Upsell實例采取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;
}

3. 創建一個解釋加售數據並以您期望的方式輸出的模板，在上面的示例中，我創建了一個模板，該模板可以執行以下操作（我的示例創建了一個新模板，因此應該進入基本主題）：

應用程序/設計/前端/基/默認/模板/目錄/產品/列表/ 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>

Answer 2

采用

$controller = $observer->getEvent()->getAction();

代替

$controller = $observer->getAction();