Magento-可配置的产品选项图像 [英] Magento - configurable product option images

问题描述

我目前正在为我的第一个magento版本上显示的产品选项获取图像.我有这可以找到捆绑产品，就像这样:

I'm currently working on getting images for product options showing up on my first magento build. I have THIS figured out for bundled product, like so:

建立选择的选项时，我正在获取相关图像的网址(例如色板).现在，我正在尝试对可配置产品执行相同的操作，但它似乎并不那么简单.

I'm obtaining urls of related images (swatches, for example) when the options for the select gets built. Now I'm trying to do the same with configurable products, but it does not seem to be as straightforward.

可配置产品是从代表可用选项的每个迭代的简单产品构建的.伟大的.显然，我可以为每个简单的产品上传图片，这将是解决此问题的一个好的开始.

Configurable products are built from simple products which represent each iteration of available options. Great. I can obviously upload images for each simple product, and that would be a good start to a solution to this.

例如: 椅子有3种内饰和2种扶手选择(6种简单产品). 对于椅子2/b，我上载了家具样本2和扶手样本b，并相应地贴上了标签.生成选项后，我将按其标签抓取与每个简单产品关联的图片网址(也许抓取该标签的所有图片并删除重复的内容或其他内容?)...

For example: Chair has 3 upholstery and 2 armrest choices (6 simple products). For chair 2/b I upload upholstery swatch 2 and armrest swatch b, and label them accordingly. When the options get built, I grab image urls associated with each simple product by their label (maybe grabbing all images for that label and removing duplicates or somethign?)...

在Magento中，我看到了:

In Magento, I see:

在 theme/catalog/product/view/type/option/configurable.phtml

<?php foreach($_attributes as $_attribute): ?>
    ..// 
    <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
        <option><?php echo $this->__('Choose an Option...') ?></option>
    </select>
    ..//
</div>
<?php endforeach; ?>
<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
</script>

与捆绑包不同，可配置产品选择/选项通过javascript(在js/varien/configurable.js中)注入到页面上.然后，此类依靠getJsonConfig()来提供所有信息.

Unlike the bundle, the configurable product select/options are injected onto the page via javascript (in js/varien/configurable.js). This class is then reliant on getJsonConfig() to supply all information after that.

在这一点上，看来我应该能够从该对象获得简单产品的图像URL信息.在configurable.js中，我看不到任何处理图像的逻辑. 我将如何获取这些URL并将它们与相关的选项选择相关联?

At this point, it seems I should be able to obtain a simple product's image url information from that object. Tho I see no logic dealing with images at all in configurable.js. How would I go about obtaining those urls and associating them with the related option selects?

任何有关如何进行此操作的建议都是很好的.

Any advice on how I should proceed with this would be great.

欢呼

...也:这确实看起来像是绝对必要的功能. magento为什么不支持这种开箱即用的东西?

... also: This really seems like drop-dead no-brainer absolutely-required functionality. Why wouldn't magento support stuff like this out of the box??

对于那些对类似事物感兴趣的人，我终于弄明白了.

I finally got this figured out, for those individuals interested in something similar.

我处理此问题的第一种方法-从子产品中获取图像在一定程度上可行，但是在尝试获取多组属性的唯一图像url时却感到费解.这还意味着必须为简单产品中的每个选项提供图像，因此-产生了很多不必要的劳动.

My first method of dealing with this - getting images from the child products worked to a degree, but got convoluted when trying to grab unique image urls for multiple sets of attributes. It also meant having to supply an image for each option in a simple product, so - a lot of unnecessary labor.

我最终使用了

I ended up using the free plugin (with some modifications) that @Greg Demetrick suggested. Its a pretty solid little module that allows for image urls to be associated with any attribute option / as well as a couple of methods for grabbing them.

我的最终解决方案看起来像这样:

My final solution looks a bit like this:

目录/产品/视图/类型/选项/可配置.phtml :

<?php foreach($_attributes as $_attribute): ?>

  // markup for the attribute

    <script type="text/javascript">
        //<![CDATA[
        var attribute_data_<?php echo $_attribute->getAttributeId() ?> = {};
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.id = '<?php echo $_attribute->getAttributeId() ?>';
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.title = '<?php echo $_attribute->getLabel() ?>';
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.data = {};
        <?php 
        $a = Mage::getModel('eav/config')->getAttribute('catalog_product', $_attribute->getAttributeId() );
        $helper = Mage::helper('attributeoptionimage');
        foreach ( $a->getSource()->getAllOptions(true) as $option): ?>
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.data.option_<?php echo $option['value'] ?> = {};
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.data.option_<?php echo $option['value'] ?>.val = '<?php echo $option['value'] ?>';
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.data.option_<?php echo $option['value'] ?>.imageurl = '<?php echo $helper->getAttributeOptionImage($option['value']); ?>';
            attribute_data_<?php echo $_attribute->getAttributeId() ?>.data.option_<?php echo $option['value'] ?>.imgtitle = '<?php echo $option['label']; ?>';
        <?php endforeach; ?>
        //]]>
    </script>

    <?php endforeach; ?>

它被打印在标记中，每个属性一组.效果很好，但是返回该属性的所有选项，而不仅返回为产品选择的选项(getJsonConfig()对象已存储的数据).因此，然后我只需针对spConfig测试我的attribute_data_xxx对象，并将唯一的匹配选项发送到我的控制器脚本中.

This gets printed in the markup, one set for each attribute. Which works nicely, but returns all options for the attribute, instead of only the options selected for the product (data which teh getJsonConfig() object has stored). So, then I just test my attribute_data_xxx object against the spConfig, and send the unique matching options along to my controller script.

扩展getJsonConfig来获取属性url也可能会起作用...

Extending getJsonConfig to grab the attribute urls would probably of worked as well...

无论如何-这里的关键是将图像url与属性选项本身(而不是产品)相关联.

Whatever the case - the key point here was associating image urls with the attribute options themselves (instead of products).

欢呼

推荐答案

您可以使用

You can get an array of simple products used in the configurable by using the getUsedProducts() method. This method is not part of the standard product model, but can be found in app/code/core/Mage/Catalog/Model/Product/Type/Configurable.php, so you'll need to first get the configurable product model using getTypeInstance(). That method accepts a single parameter stating whether or not you'd like to return the type model as a singleton (I did).

foreach ($_product->getTypeInstance(true)->getUsedProducts() as $simpleProduct) {
    // From this you should be able to get the image url
}

更新

在由Mage_Catalog_Block_Product_View_Type_Configurable::getJsonConfig()创建的spConfig中，有一个options数组，其中包含特定于该可配置选项的product_id.

In spConfig as created by Mage_Catalog_Block_Product_View_Type_Configurable::getJsonConfig() there is an options array containing the product_ids specific to that configurable option.

spConfig :
  attributes : {
    603 : {
      id      : 603,
      code    : part_state,
      label   : "Part State",
      options : [
        {
          id       : 648,
          label    : Harvested,
          price    : 0,
          products : [204379]   // <-- Simple Product ID
        },
        {
          id       : 647,
          label    : New,
          price    : 0,
          products : [224333]
        }]
    },
  ...

此时，您可以:

1. 扩展getJsonConfig以包含简单的商品图片网址，或
2. 创建简单产品ID到图像URL的映射

1. Extend getJsonConfig to include a simple product image URL, or
2. Create a mapping of simple product IDs to image URLs

我将为您提供第2个示例，以便您可以看到可以使用的功能.

I'll give you an example of #2 so you can see what functions you might use.

$spImages = array();
foreach ($this->getAllowProducts() as $_sp) {
    $spImages[$_sp->getId()] = 
        (string)$this->helper('catalog/image')
            ->init($_sp, 'small_image')
            ->resize(40,40);
}
// It is necessary to cast the URL to a `string` because the actual work done by
// Mage_Catalog_Helper_Image happens in the `__toString()` method... weird!

<script type="text/javascript">
    var spImages = <?php echo json_encode($spImages); ?>;
</script>

现在，您可以将图片网址与简单的商品ID相关联，您需要根据当前所选选项更新图片. Magento的Product.Config有一个configureElement()方法，当<select class="super-attribute-select">更改时会触发该方法，所以我会介绍一下.如果您不习惯这样做，则可以在spConfig.config和spImages中获得所有信息，您可以从中编写自己的onChange事件处理程序.

Now that you have a way to associate an image URL with a simple product ID, you'll need to update the image based on the current selected option. Magento's Product.Config has a configureElement() method that is triggered when the <select class="super-attribute-select"> changes, so I would tap into that. If you're not comfortable doing that, you've got all the information in spConfig.config and spImages from which you could write your own onChange event handler.

这篇关于Magento-可配置的产品选项图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！