Как настроить mSearchForm так, чтобы при нажатии открывалось модальное окно с информацией о товаре вместо перехода на страницу?

Как можно изменить функцию поиска товаров на сайте, чтобы при выборе товара из результатов поиска он открывался на отдельной странице, а не в модальном окне?
Изображение к вопросу
Изображение к вопросу
Изображение к вопросу
Изображение к вопросу
  • 21 декабря 2023 г. 7:07
Ответы на вопрос 2
Для реализации открытия модального окна с информацией о товаре вместо перехода на страницу при нажатии на mSearchForm, вам необходимо:

1. Создать модальное окно с помощью HTML и CSS. Ниже приведен пример простого модального окна:
```html
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="productInfo"></div>
  </div>
</div>
```
CSS стили для модального окна:
```css
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
```

2. Добавить JavaScript код, который будет отвечать за открытие и закрытие модального окна, а также заполнять его информацией о товаре. Вот пример:
```javascript
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];

function openModal(product) {
  var productInfo = document.getElementById("productInfo");
  productInfo.innerHTML = "Информация о товаре: " + product;
  modal.style.display = "block";
}

function closeModal() {
  modal.style.display = "none";
}

span.onclick = function() {
  closeModal();
}

window.onclick = function(event) {
  if (event.target == modal) {
    closeModal();
  }
}
```

3. Изменить функцию поиска товаров на вашем сайте для вызова функции openModal() при выборе товара из результатов поиска. Например:
```javascript
function searchProducts() {
  // Ваш код поиска товаров
  
  // Пример вызова openModal() при выборе товара из результатов
  var selectedProduct = "Название товара";
  openModal(selectedProduct);
}
```

Теперь при нажатии на mSearchForm будет открываться модальное окно с информацией о товаре, вместо перехода на отдельную страницу.

Чтобы изменить функцию поиска товаров на сайте, чтобы при выборе товара из результатов поиска он открывался на отдельной странице, можно использовать следующие шаги:

1. Создать отдельную страницу для отображения информации о товаре. Например, `product.html`.

2. Изменить результаты поиска на ссылки на отдельную страницу товара, передавая информацию о товаре в URL. Вот пример:
```html
<a href="product.html?productId=123">Название товара</a>
```

3. На странице `product.html` использовать JavaScript для получения информации о товаре из URL и отображения этой информации. Примерно так:
```javascript
window.onload = function() {
  var productId = getUrlParameter("productId");
  var productInfo = getProductInfo(productId); // Функция, которая получит информацию о товаре из базы данных или другого источника
  
  // Добавить код для отображения информации о товаре на странице
}

function getUrlParameter(name) {
  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
  var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
  var results = regex.exec(location.search);
  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
```

Теперь, при выборе товара из результатов поиска, он будет открываться на отдельной странице `product
Придется наверное писать ajax-запрос и его обработчик. Так как в ui передаются только следующие параметры: id-товара, label для autocomplete, url-товара и его название. 
Тебе нужно в методе select, который на последнем скрине, написать ajax-post запрос, в котором ты будешь передавать id товара. Далее этот запрос обрабатывай плагином или сниппетом и возвращай готовую обертку модалки и выводи ее.
Как работать с Ajax, есть старая добрая статья от Василия по ссылке .
Похожие вопросы