Блог

У меня есть кнопка «Добавить в корзину» на моем веб-сайте электронной коммерции на основе Bootstrap 4. Я хочу добавить модальный триггер к кнопке «Добавить в корзину» (для отображения инструкции), и все в порядке, но если я попытаюсь добавить модальный триггер непосредственно внутри кнопки:

 <a role="button" class="btn btn-warning" id="buynow" href="/?add-to-cart=51" data-toggle="modal" data-target="#modal-1">Purchase</a>
  

#modal-1 Отображается, но товар не добавляется в корзину (функция href не работает)

И когда я пытаюсь отобразить модальный без добавления data-toggle="modal" data-target="#modal-1" атрибутов следующим образом:

 $('#buynow').click(function(){
  $('#modal-1').modal('show')
});
  

Модальное окно появляется на пару секунд, но затем следует ссылка на страницу корзины из-за href=/?add-to-cart=51 перенаправления.

Что правильно делать, если я хочу, чтобы товар был добавлен в корзину (благодаря триггеру href), но модальное окно все еще появляется, и при отображении модального не происходит перенаправления?

Другой подход заключается в использовании атрибута данных, например

    <a role="button" class="btn btn-warning" id="add-to-cart" data-url="/?add-to-cart=51" href="#modal-1" data-toggle="modal" data-target="#modal-1">Purchase</a>
  

и ваш модальный должен выглядеть так

     <div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="modal-1"
    aria-hidden="true">
     <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                ...whatever here. maybe a loading image?
                </div>
            </div>
        </div>
    </div>
  

и затем вызвать URL-адрес

     $('#modal-1').on('show.bs.modal', function(e) {
        var button = $(e.relatedTarget);
        var modal = $(this);
        modal.find('.modal-body').load(button.data("url"));
    });
  

Обратите внимание, что я просто загружаю содержимое в модальном load(button.data("url") формате, вы можете манипулировать атрибутом данных любым удобным для вас способом, например, возможно, вы можете просто присвоить атрибуту данных идентификатор продукта data-id="51" , а затем, в 'show.bs.modal' случае, если вы можете вызвать Ajax-запрос для выполнения с ним определенного действия.

Вы можете добавить скрытую ссылку

 <div class="add-to-cart-btn">
    <a role="button" class="btn btn-warning"  id="buynow"  data-toggle="modal" data-target="#modal-1">Purchase</a>

    <a role="button" class="d-none add-to-cart"  href="/?add-to-cart=51" ></a>
    </div>
    $('#buynow').click(function(){
      $('#modal-1').modal('show')
      $(this).closest('.add-to-cart-btn').find('.add-to-cart').trigger("click");
    });