Вывести опции в карточке товара 2 раза

[Savril]

Всем привет!

Есть задача вывести опции товара в карточке два раза, один раз в блоке с ценой и кнопкой купить в виде radio (checbox) - это делается легко и не принужденно в любом шаблоне.

Второй раз выбор опции должен быть во всплывающем блоке (который появляется когда страница прокручена вниз и блок с ценой скрылся) блок сделан и все работает. В виде выпадающего списка (select) , выбор опции в одном месте должен повторять выбор в другом месте и наоборот,  если тупо скопировать код из блока с ценой и заменить radio на select то это не работает. Надеюсь понятно объяснил )) Может кто подскажет в каком направлении копать?

Например в citilink, но там во всплывающей окошке нет выбора опций...

https://prnt.sc/10h5rjm

https://prnt.sc/10h5q9w

Змінено 9 березня 2021 користувачем Savril

[Ulv]

Вам не нужно его дублировать и заменять radio на select. Отслеживайте событие скролла и добавляйте блоку (который содержит кнопку купить, и опции) класс, к примеру top-fixed. Задайте ему позиционирование относительно окна и все у вас будет отображаться как в ситилинк.. 

[Savril]

Дело в том что по задумке создается новый блок (который содержит цены, кнопку купить, и опции) выпадающий сверху страницы и фиксированный. Изменить позицию существующего блока не выход, опции  состоят из картинок (radio) поместить их лаконично в fixed блок размером 80px невозможно и оставлять этот блок без опций товара тоже не хотелось бы. От сюда и вопрос по теме собственно..

[Savril]

Добавил такой костылек, работает, но хотелось бы что-то красивее и чтобы работало в обе стороны

<script>
  $('select').on('change', function() {
    $('input:radio[name="option[{{ option.product_option_id }}]"][value="' + this.value +'"]').trigger('click');
  });
</script>

 

[Savril]

Если кому интересно или может понадобится, решение по ссылке сделал как смог, зато работает ))

 

https://codepen.io/savril/pen/WNQgbwg