добавить модальное окно в woocommerce кнопку добавления в корзину

Я создаю сайт WordPress с помощью woocommerce.

Я хочу добавить дополнительный страховой продукт, который появляется, когда клиент нажимает «добавить в корзину» для определенного продукта. Идея состоит в том, что они должны принять или отклонить этот продукт, прежде чем продолжить оформление заказа.

Я пробовал использовать модальную загрузку, но не могу ее запустить с помощью кнопки «Добавить в корзину». Модальный режим отлично работает как конкретная модальная кнопка, встроенная в страницу, поэтому я знаю, что это не проблема jquery или bootstrap, но я не могу понять, как связать ее с кнопкой добавления в корзину.

Похоже, что-то, что уже должно быть встроено в woocommerce, но если это так, я это пропустил.

Любая помощь очень ценится ...


wordpress jquery woocommerce bootstrap-modal redirect
person vtechmonkey    schedule 06.11.2014    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я закончил настройкой модального окна, чтобы он запускался при открытии страницы корзины, поскольку страница корзины - это Wordpress, это было прямолинейно. Не идеальное решение, поскольку модальное окно открывается, когда покупатель идет за любым продуктом, но это лучше, чем ничего. вот код с содержимым по умолчанию

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
    <div class="modal-body">
    ...
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

и js

<script>
 jQuery(document).ready(function($) {
 $(document).ready(function(){
 $('#myModal').modal('show')
 });
  });
 </script>

Я вставил все это прямо на страницу WordPress "Ваша корзина".

Работает нормально, но хотелось бы услышать лучшее решение

person vtechmonkey    schedule 10.11.2014

arrow_upward
1
arrow_downward

добавив запрос для проверки, содержит ли текущий URL-адрес строку «добавить в корзину», вы можете отобразить модальное окно на странице вашего магазина. Вы также должны снять флажок «Перенаправить на страницу корзины после успешного добавления» в разделе: WooCommerce> Настройки> Продукты> Отображение.

<script>
jQuery(document).ready(function () {
    if (window.location.href.indexOf("add-to-cart") != -1){
        $('#cartModal').modal('show');
    }
});
</script>
person OZD Studio    schedule 10.05.2017

arrow_upward
-1
arrow_downward

всплывающее окно добавления в корзину для woocommerce

используйте этот плагин для создания всплывающего окна.

надеюсь это поможет !

person Thiyagesh    schedule 06.11.2014
comment
спасибо за это, но я не могу понять, как им пользоваться! - person vtechmonkey; 07.11.2014
comment
Я загрузил его и изменил права доступа к файлу, но не вижу, куда добавить его в продукт ?? - person vtechmonkey; 07.11.2014
comment
вам нужно погуглить. Я только что указал путь ... тебе нужно закончить ... вот так, только так много всего еще придет. попробуй себя :) ... - person Thiyagesh; 07.11.2014