Нестандартный вывод msOptions

Подскажите как сделать выбор «размера» «цвета» в таком виде как на скрине clip2net.com/s/71wzlj, а не в стандартном выпадающем selecte…

Денис Гром

16 марта 2014, 14:45

3 576

Комментарии: 10

Володя Эксперт

16 марта 2014, 20:49

стандартный то чем не угодил? стилизуй с помощью css…

Володя Эксперт

16 марта 2014, 21:21

типа такого — jsbin.com/zitagogo/1/

Володя Эксперт

16 марта 2014, 21:51

пардон… не так понял) Выше не то

Володя Эксперт

16 марта 2014, 23:33

вызов на странице продукта —

[[!msOptions?
&tplRow=`tpl.msOptions.row.my`
&tplOuter=`tpl.msOptions.outer.my`
&name=`size`
]]
<span style="display:none">[[!msOptions?name=`size`]]</span>

чанки — tpl.msOptions.outer.my

<div class="select">
    [[+rows]]
</div>			
<script>
  function select(element) {
  var value = element.getAttribute("data-value");
  var nodes = element.parentNode.childNodes;
  for (var i = 0; i < nodes.length; i++) {
    if (nodes[i] instanceof HTMLParagraphElement) {
       if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "active";
      else nodes[i].className = "";
    }
  }
  $(document.getElementsByName("options[size]")).find("option[value="+ value +"]").attr("selected","selected")
}
</script>

чанк — tpl.msOptions.row.my

<p data-value="[[+value]]" onclick="select(this)" class="">[[+value]]</p>

велосипед конечно, но едет)))
пример тут — s5351.test.modx.pro/index.php?id=6
p.s. стилизуем на свой вкус)

Alexei Старожил

17 марта 2014, 01:03

если уже подключен Jquery, зачем говнокодить на чистом Javascript ?? это такая каша…

Володя Эксперт

17 марта 2014, 01:08

ну если вы умеете, то возьмите и напишите…
Как смог так помог.

Alexei Старожил

17 марта 2014, 01:34

function select(element) {
    if($(element).hasClass('active')){
        $(element).removeClass('active');
        $("select[name='options[size]']").find('option').removeAttr('selected')
    } else {   
        var value = $(element).data("value");
        $(element).siblings().removeClass('active');
        $(element).addClass('active');

        $("select[name='options[size]']").find('option').removeAttr('selected')
        $("select[name='options[size]']").find("option[value="+ value +"]").attr("selected","selected")


    }
   
}

тоже не панацея :), вообще у jquery есть одно преимущество, если вы не задрот, он точно будет работать во всех браузерах без лишних телодвижений.
select[name='options[size]'] — только одна опция может быть выбрана?
еще добавил toggle
P.S. можно на ты

Володя Эксперт

17 марта 2014, 01:48

ну во) другое дело…
можно несколько опций —

<div class="select">
    [[+rows]]
 </div>			
 <script>
    function select(element) {
    if($(element).hasClass('active')){
        $(element).removeClass('active');
        $("select[name='options[[[+name]]]']").find('option').removeAttr('selected')
    } else {   
        var value = $(element).data("value");
        $(element).siblings().removeClass('active');
        $(element).addClass('active');
        $("select[name='options[[[+name]]]']").find('option').removeAttr('selected')
        $("select[name='options[[[+name]]]']").find("option[value="+ value +"]").attr("selected","selected")
     }
 }
</script>

adminixi Проверенный

14 августа 2016, 16:16

Помогите, пожалуйста, вывести опции товара msProductOptions выпадающим списком, как msOptions

Денис Гром Старожил

17 марта 2014, 02:23

Спасибо больше, все получилось!

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Нестандартный вывод msOptions

Job Piper собирает IT заказы со всего Интернета.

Комментарии: 10