Magento更改了div的下拉列表可配置产品选项 [英] Magento changing the dropdown configurable product options for divs

问题描述

我需要将可配置产品的选项显示为内部带有a的div，让用户在选项中执行单击并选择它，而不是下拉列表。就像一个菜单（目标是显示鞋子大小）。

I need to show the options of a configurable product as divs with an "a" inside that let the user perform a click in the option and select it, instead of a dropdown list. Like a menu (the goal is to show shoe sizes).

许多人都知道，Magento使用Json响应来填充下拉菜单的选项。 （var spConfig = new Product.Config（getJsonConfig（）？>），该类位于js / varien / product.js（Product.Config = Class.create（））。

As many of you know, Magento uses a Json response to fill the options of the dropdown menu. (var spConfig = new Product.Config(getJsonConfig() ?>) and the class is located in js/varien/product.js (Product.Config = Class.create() ).

然后，我做的是编辑文件模板/ catalog / product / view / type / options / configurable.phtml并替换原来的行为。

Then, what I did was to edit the file template/catalog/product/view/type/options/configurable.phtml and replace the original behavior for something like this.

'<?php
     echo ' 
                <ul class="super-attribute-select">';
         $resultado = json_decode($this->getJsonConfig(), true);
         $atributo=$resultado['attributes'][162]['options'];
         foreach($atributo as $att){
             echo '<li>';
             echo '<a value="'.$att['id'].'" price="'.$att['price'].'" href="javascript:void()" onclick="return assignValue()">'.$att['label'].'</a>';
             echo '</li>';
             }
     echo ' </ul>
            <div class="clear"></div>';
     ?>'

这个简单的mod让我替换了由div形成的小网格的菜单。现在我正在尝试创建一个模仿本机行为的Javascript函数，但仅针对所选的选项（在这种情况下是鞋号）。据我了解代码，它使用表单发送选项值，所以我的想法是创建一个隐藏的输入，然后在用户执行点击时通过Javascript函数分配值，如下所示：

This simple mod let me replace the menu for a little grid formed by divs. Now I'm trying to make a Javascript function that emulates the native behavior but just for the option that is selected (in this case the shoe size). As I understand the code it sends the option value with the form, so my idea was to create a hidden input and then assign the value through a Javascript function when the user performs a click, something like this:

'<script>
  function assignValue(value){
   //assign the value       
      document.getElementById('super_attribute[162]').value = value;
   //mod the class of the selected item
      this.addClassName("selected");
</script>'

我认为可能需要创建一个函数或调用magento已经具有所需值的方法。即使我不知道在隐藏输入上设置类必需条目是否是个好主意。

I think it could be necessary to create a function or call a method that magento already has to make the value required. Even I don't know if it could be a good idea to set the class "required-entry" on the hidden input.

你能帮我吗？任何形式的帮助或其他想法都将受到高度赞赏。

Could you help me please? Any kind of help or other ideas will be highly appreciated.

推荐答案

这里有一段代码片段。太简单=）!! ..

Here you have a code snippet. Is too simple =) !!..

    <script type="text/javascript">
        function assignValue(idattribute,price,value){
            var sal = new String(value); //this value is what you are showing to the user in the div grid
            var disp = new String(idattribute);

            $('nameinputhidden').value=disp;
            $('advice-required-entry-attribute').fade();
                    $$('.nameinputhidden').each(
                     function(e){
                   e.removeClassName('active');
                      }
                      )
                    $(sal).addClassName('active');

    </script>

并且不要忘记将输入值隐藏起来。此输入值必须是您在网格上显示的属性。

And don't forget to get the input value as hidden. This input value have to be the attribute you are showing on the grid.

希望这会有所帮助。如果我可以帮助你，请告诉我任何方式！

Hope this helps. Any way if I can help you just let me know!

问候！

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