magento 选择不同的可配置产品时,更改显示的图像(例如,不同颜色)

sd2nnvve  于 2022-11-12  发布在  其他
关注(0)|答案(3)|浏览(175)

我目前正在为我的第一个magento build上显示的产品选项获取图片。我已经为捆绑的产品找到了this,如下所示:

当select的选项被构建时,我获得了相关图片(例如,样本)的url。现在我尝试对可配置产品做同样的事情,但似乎没有那么简单。
可配置的产品是从简单的产品构建的,这些产品代表了可用选项的每一次迭代。太好了。我显然可以为每个简单的产品上传图像,这将是一个很好的解决方案的开始。
例如:椅子有3个室内装饰和2个扶手选择(6个简单产品)。对于椅子2/B,我上传了室内装饰样本2和扶手样本b,并相应地标记它们。当选项建立后,我通过它们的标签获取与每个简单产品相关的图像URL(可能会获取该标签的所有图像并删除重复项或其他内容?)...
在Magento,我看到:
在主题/目录/产品/视图/类型/选项/可配置.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>

与bundle不同的是,可配置的产品选择/选项通过javascript注入到页面中(在js/varien/configurable.js中)。然后,该类依赖getJsonConfig()来提供之后的所有信息。
此时,我似乎应该能够从该对象中获得一个简单产品的图像url信息,但我在configurable.js中根本看不到处理图像的逻辑。我将如何获得这些url并将它们与相关的选项选择相关联呢?

kdfy810k

kdfy810k1#

您可以使用getUsedProducts()方法获取可配置产品中使用的简单产品数组。该方法不是标准产品模型的一部分,但可以在app/code/core/Mage/Catalog/Model/Product/Type/Configurable.php中找到,因此您需要首先使用getTypeInstance()获取可配置产品模型。该方法接受一个参数,该参数表示您是否希望将类型模型作为单例返回(我已经这样做了)。

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。

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以包括简单的产品图像URL,或者
1.创建简单产品ID到图像URL的Map
我将给予你一个#2的例子,这样你就可以看到你可能会使用什么函数。

$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>

现在你已经有了一种方法来关联一个图片URL和一个简单的产品ID,你需要根据当前选择的选项来更新图片。Magento的Product.Config有一个configureElement()方法,当<select class="super-attribute-select">发生变化时会触发这个方法,所以我会使用这个方法。如果你不习惯这样做,您已经在spConfig.configspImages中获得了可以用来编写自己的onChange事件处理程序的所有信息。

h43kikqp

h43kikqp2#

我认为你在这里遇到的最大问题是属性中的选项没有与之关联的图像。你可能需要安装一些像GoMage的高级导航这样的东西,它会为你添加该功能。在基本的Magento中,图像只与产品关联,这就是为什么你可以为捆绑的产品提取它们。
一旦你有了带有图像的选项,你应该能够从Magento中添加的表中提取每个产品的选项图像,在加载时显示每个选项的基本图像,然后在选择时用JS交换其他图像。我的建议是下载下面的免费“带选项的图像”模块并安装它。这将添加一个新的helper类来显示图像,并且可能还会给予交换所需的代码。
GoMage模块:http://www.gomage.com/extensions/searching-optimization/gomage-advanced-navigation.html/
免费版类似功能:http://www.johannreinke.com/en/2012/02/05/magento-add-images-to-product-attribute-options/

dphi5xsq

dphi5xsq3#

从子产品中获取图片在一定程度上是可行的,但是当试图为多个属性集获取唯一的图片URL时,这就变得复杂了。这还意味着必须为一个简单产品中的每个选项提供一个图片,所以--有很多不必要的劳动。
您可以使用this plugin(经过一些修改),这是一个非常可靠的小模块,它允许将图像url与任何属性选项/以及几个获取它们的方法相关联。最后,解决方案如下所示:
目录/产品/视图/类型/选项/可配置.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对象,并将唯一匹配的选项沿着我的控制器脚本。
扩展getJsonConfig()以获取属性url可能也会起作用。
不管是什么情况-这里的关键点是将图像URL与属性选项本身(而不是产品)相关联。

相关问题