magento - Magento 小部件中的图像

Question

我正在为 Magento 社区 1.4.2 版中的时尚客户开发一个网站，作为该项目的一部分，我需要一些定制的主页促销块来展示特定产品或产品类别。为此，我想我会编写自己的小部件，并且除了如何处理图像外，在这方面取得了相当不错的进展。我需要在促销事件中包含图片。在我的小部件定义文件中，我包含了以下参数

        <image>
            <label>Image</label>
            <description>Promotion image</description>
            <visible>1</visible>
            <type>image</type>
        </image>

起初这似乎工作正常，当在管理后端创建/编辑小部件时，小部件选项中包含文件上传字段，但是在保存表单时，图像似乎没有上传，或其详细信息保留在数据库中.有没有其他人有在小部件中使用图像的经验以及我可能做错了什么？

Answer 1

它不保存/上传图像有几个原因:

表格 enctype需要为“multipart/form-data”才能使文件上传工作

即使您更改了表单 enctype到“multipart/form-data”你会注意到如果你监控它被POST的请求“application/x-www-form-urlencoded”这是因为它是通过ajax完成的，ajax本身不能处理文件上传，你需要处理他们分开。

我已经成功实现了一个“插入图像”按钮，它初始化了 Media Library您可以在其中浏览服务器以获取图像和/或上传图像的对话框。

一旦用户单击“插入文件”，它就会将完整的图像 url 插入到小部件的文本框中，这样它就会像普通字段一样传递给您的模板。

这就是我实现它的方式:

在您的 widget.xml 中指定一个新节点:

<image translate="label">
    <label>Image</label>
    <visible>1</visible>
    <required>1</required>
    <type>label</type>
    <helper_block>
        <type>widgets/cms_wysiwyg_images_chooser</type>
        <data>
            <button translate="open">
                <open>Insert Image...</open>
            </button>
        </data>
    </helper_block>
</image>

辅助块类型 <type>widgets/cms_wysiwyg_images_chooser</type>是一个自定义类，因此只要您正确创建类/文件，就可以将其更改为任何您想要的内容。

<?php
class Stackoverflow_Widgets_Block_Cms_Wysiwyg_Images_Chooser extends Mage_Adminhtml_Block_Template
{
public function prepareElementHtml(Varien_Data_Form_Element_Abstract $element)
{
    $config = $this->getConfig();
    $chooseButton = $this->getLayout()->createBlock('adminhtml/widget_button')
        ->setType('button')
        ->setClass('scalable btn-chooser')
        ->setLabel($config['button']['open'])
        ->setOnclick('MediabrowserUtility.openDialog(\''.$this->getUrl('*/cms_wysiwyg_images/index', array('target_element_id' => $element->getName())).'\')')
        ->setDisabled($element->getReadonly());
    $text = new Varien_Data_Form_Element_Text();
    $text->setForm($element->getForm())
        ->setId($element->getName())
        ->setName($element->getName())
        ->setClass('widget-option input-text');
    if ($element->getRequired()) {
        $text->addClass('required-entry');
    }
    if ($element->getValue()) {
        $text->setValue($element->getValue());
    }
    $element->setData('after_element_html', $text->getElementHtml().$chooseButton->toHtml());
    return $element;
}
}
?>

就是这样!现在，您的小部件选项中应该有一个名为“图像”的新字段，其中包含一个文本框和一个按钮，您可以在其中将 url 插入服务器上的图像并从模板中显示它。

对其工作原理的快速解释:

创建了一个带有 onclick 的按钮调用 Media Library 的函数通话对话 MediabrowserUtility.openDialog()其中传递了参数 target_element_id它告诉媒体库在用户单击“ Insert File”后要在哪个元素中设置值，因此我们只需传递 id小部件中的文本框，以便它接收用户选择的图像的 url。

希望这对某人有所帮助，因为我找不到任何解释如何操作的资源，所以我花了很长时间研究 Magento 以解决所有问题:)

我将来想做的是拥有它，以便在您在小部件中选择它后显示图像，并将 url 存储在隐藏字段中，但具有 onchange当值设置为来自 js/mage/adminhtml/browser.js 的元素时，不会触发绑定(bind)在 insert函数，所以不改变核心文件是很难做到的。我想过在 Media Library 之后表单再次获得焦点时玩弄。关闭或计时器(非常狡猾但可以工作)，但我还有其他事情要做，以后可能会回来!

更新:

URL 是 Media Library生成是这样的:
http://www.yourwebsite.com/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvd2lkZ2V0cy9iYW5uZXIvaG9tZXBhZ2UvZm9yZWdyb3VuZC9maXNoLXRhbmsucG5nIn19/key/e8167e3884e40b97d8985e7b84e7cbc7875f134e5f7e5946c9c2a482d0279762/
哪些是缓存图像，仅当用户是管理员时才有效。愚蠢的？是的。如果在为输出生成 html 时将相同的图像插入到 CMS 页面中，它会将其转换为可通过 /media/wysiwyg/path/to/file/photo.jpg 访问的服务器上的原始 url。 .我们需要将原始 url 显示给用户，因此我们可以做的是 Hook 生成小部件 html 的函数(当您单击“插入小部件”时)并查找 /admin/cms_wysiwyg/directive/___directive/并将其替换为图像的原始 URL，就像 CMS 页面那样。

在您的 config.xml对于您的自定义小部件:

<global>
    <models>
        <widget>
            <rewrite>
                <widget>Stackoverflow_Widgets_Model_Widget</widget>
            </rewrite>
        </widget>
    </models>
</global>

然后创建模型Widget code\local\Stackoverflow\Widgets\Model\Widget.php :

<?php
class Stackoverflow_Widgets_Model_Widget extends Mage_Widget_Model_Widget
{
    public function getWidgetDeclaration($type, $params = array(), $asIs = true)
    {
        foreach($params as $k => $v){
            if(strpos($v,'/admin/cms_wysiwyg/directive/___directive/') !== false){
                $parts = explode('/',parse_url($v, PHP_URL_PATH));
                $key = array_search('___directive', $parts);
                if($key !== false){
                    $directive = $parts[$key+1];
                    $src = Mage::getModel('core/email_template_filter')->filter(Mage::helper('core')->urlDecode($directive));
                    if(!empty($src)){
                        $params[$k] = parse_url($src, PHP_URL_PATH);
                    }
                }
            }
        }
        return parent::getWidgetDeclaration($type, $params, $asIs);
    }
}

它覆盖了 getWidgetDeclaration每次为 textarea/wysiwyg 生成小部件输出时调用的函数，并查看所有参数，如果找到链接到管理缓存的图像，它将找出原始图像并覆盖数组中的变量并使用参数调用原始函数。

如果未找到缓存的图像，该功能将正常工作。

更新:13/09/2012

正如乔纳森·戴指出的那样，您必须覆盖 Mage_Widget_Model_Widget_Instance如果您希望它在小部件实例中工作，也是如此。

直到现在，我都不需要通过 Widget Instance 向小部件添加图像，并且很困惑为什么我的功能不起作用，直到我调查并意识到“弹出”小部件实例使用 Mage_Widget_Model_Widget并且在小部件选项选项卡(无弹出窗口)上使用的小部件实例是 Mage_Widget_Model_Widget_Instance并且不延长 Mage_Widget_Model_Widget所以不要继承这个功能。

将功能添加到 Mage_Widget_Model_Widget_Instance只需添加行 <widget_instance>Petbarn_Widgets_Model_Widget_Instance</widget_instance>给您的 config.xml所以它看起来像:

<global>
    <models>
        <widget>
            <rewrite>
                <widget>Stackoverflow_Widgets_Model_Widget</widget>
                <widget_instance>Stackoverflow_Widgets_Model_Widget_Instance</widget_instance>
            </rewrite>
        </widget>
    </models>
</global>

然后创建模型实例 code\local\Stackoverflow\Widgets\Model\Widget\Instance.php :

<?php
class Petbarn_Widgets_Model_Widget_Instance extends Mage_Widget_Model_Widget_Instance
{
    protected function _beforeSave()
    {
        if (is_array($this->getData('widget_parameters'))) {
            $params = $this->getData('widget_parameters');
            foreach($params as $k => $v){
                if(strpos($v,'/cms_wysiwyg/directive/___directive/') !== false){
                    $parts = explode('/',parse_url($v, PHP_URL_PATH));
                    $key = array_search('___directive', $parts);
                    if($key !== false){
                        $directive = $parts[$key+1];
                        $src = Mage::getModel('core/email_template_filter')->filter(Mage::helper('core')->urlDecode($directive));
                        if(!empty($src)){
                            $params[$k] = parse_url($src, PHP_URL_PATH);
                        }
                    }
                }
            }
            $this->setData('widget_parameters', $params);
        }
        return parent::_beforeSave();
    }
}

这次我们修改了 widget_parameters _beforeSave()开头的数据函数，因此它在保存 url 之前修复它。

您还必须确保 /js/mage/adminhtml/browser.js包含 javascript 文件(在我的情况下不是)以获得 MediabrowserUtility功能。

为了确保包含它，最简单的方法是将它包含在所有管理员中(没有花太多时间更好地定位它)。

创建一个 local.xml对于 adminhtml 布局(如果您还没有): app\design\adminhtml\default\default\layout\local.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addJs"><script>mage/adminhtml/browser.js</script></action>
        </reference>
    </default>
</layout>

这将使 Magento 包含 js/mage/adminhtml/browser.js在管理员的每一页上，所以 MediabrowserUtility将永远可用。

注意:我使用的是 Magento Enterprise 1.11.2.0，所以我不确定它在其他版本上的表现。