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

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

0 голосов
/ 17 апреля 2020

Я разрабатываю сайт электронной коммерции, используя woocommerce и Flatsome Theme в WordPress. Я планирую доставить фрукты и овощи только в два города. Теперь я хочу всплывающее окно, когда кто-то приходит на мой сайт, которое спрашивает «Выберите, куда вы хотите доставить», и оно дает возможность только для двух городов. Когда пользователи выбирают один вариант, этот выбор должен быть помещен в заголовок. Я попробовал bootstrap модальный для этого. и работает нормально. Теперь, когда пользователь выбирает продукт и переходит на страницу продукта, снова появляется всплывающее окно, что не очень удобно. Я просто хочу, чтобы он отображался на главной странице, и выбор, сделанный пользователем, должен оставаться на любой другой странице, которую он / она перемещает. Если у кого-то есть идея для выполнения такой функции, поделитесь, или если у вас есть решение в этой программе, тогда оно будет оценено.

HTML код 

<img style="height:20px;" src="logo.png" >
<a type="button" id="hash" class="btn" data-toggle="modal" data-target="#exampleModalCenter">
    Select Your Location
</a>

  <!-- Modal -->
  <div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="hasha">Select Your Location</h5>
          <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button> -->
        </div>
        <div class="modal-body text-center">
            <div class="row">

                <div class="col-md-6">
                    <a id="btnsave" ><img style="height:80px;" src="tajMahal.png" ></a>
                    <p id="first">Indirapuram</p>
                </div>
                <div class="col-md-6">
                    <a id="btnsaveone" ><img style="height:80px;" src="mumbai.jpg" ></a>
                    <p id="firstone">Faridabad</p>

                </div>
            </div>


        </div>
        <div class="modal-footer">
            <p> ©2020 Grofers Inc.</p>
        </div>
      </div>
    </div>
  </div>

1 Ответ

0 голосов
/ 17 апреля 2020

Вы можете использовать session или cookies, чтобы сохранить выбор. На bootstrap, следуя разделу Использование 

$('#exampleModalCenter').modal({show: false})

Затем на каждой странице (товары, заказы и т. Д. c ...) вы можете проверить с помощью session или cookies если существует выбор страны, в противном случае: 

$('#exampleModalCenter').modal('show');
...