Показать выпадающий вариант WooCommerce в виде модального окна - PullRequest
Новая
       25

Показать выпадающий вариант WooCommerce в виде модального окна

2 голосов
/ 09 апреля 2019

Я ищу способ изменить выпадающий список вариантов продукта на модальное поле.

Допустим, у моего продукта 50 цветов (50 вариантов цветов), но я не хочу показывать их все наодна страница продукта.Вместо этого я хочу показать кнопку выбора, и когда я нажимаю на кнопку, модальное окно открывает все доступные цвета.

Я был бы благодарен за вашу помощь.

Лучший вариант для меня будетбыть, если я могу вставить код в мой functions.php.

Я использую плагин WooCommerce Variation Swatches для отображения цветов / изображений для вариантов продукта.

Ожидаемый результат:

enter image description here

Я пытался добавить этот код в functions.php, чтобы создать кнопку, которая вызывает модальное окно.В результате он не работает как модальный, вместо этого модальный показывает под кнопкой.Кроме того, он показывает только условия цветовых атрибутов без возможности выбора какого-либо цвета.Заранее благодарю за любые предложения. 

add_action( 'woocommerce_before_add_to_cart_form', 'color_modal', 5 );
function color_modal() {
  $product = wc_get_product();
  echo '<button id="myBtn">Vyberte si farbu</button><div class="modal-content">
      <span class="close">&times;</span>' . $product->get_attribute( 'pa_odtien' ) . '</div>';
    ?>
        <script>
        var modal = document.getElementById('myModal');
        var btn = document.getElementById("myBtn");
        var span = document.getElementsByClassName("close")[0];
        btn.onclick = function() {
          modal.style.display = "block";
        }
        span.onclick = function() {
          modal.style.display = "none";
        }
        window.onclick = function(event) {
          if (event.target == modal) {
            modal.style.display = "none";
          }
        }
        </script>
    <?php
    }
...