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

Подскажите как сделать выбор «размера» «цвета» в таком виде как на скрине clip2net.com/s/71wzlj, а не в стандартном выпадающем selecte…
Денис Гром
Денис Гром
16 марта 2014, 14:45
modx.pro
3 483

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

Володя
Володя
16 марта 2014, 20:49
стандартный то чем не угодил? стилизуй с помощью css…
Володя
Володя
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
    Alexei
    17 марта 2014, 01:03
    если уже подключен Jquery, зачем говнокодить на чистом Javascript ?? это такая каша…
      Володя
      Володя
      17 марта 2014, 01:08
      ну если вы умеете, то возьмите и напишите…
      Как смог так помог.
        Alexei
        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
            adminixi
            14 августа 2016, 16:16
            Помогите, пожалуйста, вывести опции товара msProductOptions выпадающим списком, как msOptions
    Денис Гром
    Денис Гром
    17 марта 2014, 02:23
    Спасибо больше, все получилось!
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      10