Как правильно сделать ajax окно в msFavorites?
Была задача сделать избранные товары через msFavorites но не получается сделать идеально, не моментально убираются из списка избранных, и когда доходит до последнего то он убирается но не пропадает.
Подробнее можно посмотреть на сайте https://romnew.bwsite.ru/
Добавить в избранные и убрать и вы поймете о чём я.
Скрипт.
// Обработчик клика по элементу, инициирующему загрузку контента $(document).on('click', '.chiklike', function() { // Получение ссылки на контент, который нужно загрузить var contentUrl = $(this).data('url'); // AJAX-запрос для загрузки контента $.ajax({ url: contentUrl, type: 'GET', dataType: 'html', beforeSend: function() { // Действия, выполняющиеся перед отправкой запроса $('.loader').show(); // Показываем прелоадер }, success: function(response) { // Действия после успешного получения контента $('#result').html(response); // Вставляем контент в контейнер }, complete: function() { // Действия, выполняющиеся после получения контента (успешного или неуспешного) $('.loader').hide(); // Скрываем прелоадер }, error: function(xhr, status, error) { // Действия в случае ошибки console.log(error); // Выводим ошибку в консоль для отладки } }); }); |
// Обработчик клика по элементу, инициирующему загрузку контента $(document).on('click', '.chiklike', function() { // Получение ссылки на контент, который нужно загрузить var contentUrl = $(this).data('url'); // AJAX-запрос для загрузки контента $.ajax({ url: contentUrl, type: 'GET', dataType: 'html', beforeSend: function() { // Действия, выполняющиеся перед отправкой запроса $('.loader').show(); // Показываем прелоадер }, success: function(response) { // Действия после успешного получения контента $('#result').html(response); // Вставляем контент в контейнер }, complete: function() { // Действия, выполняющиеся после получения контента (успешного или неуспешного) $('.loader').hide(); // Скрываем прелоадер }, error: function(xhr, status, error) { // Действия в случае ошибки console.log(error); // Выводим ошибку в консоль для отладки } }); });
вызов
[[!msProducts? &resources=`[[!msFavorites.ids]]` &parents=`0` &tpl=`favouritestpl` &includeThumbs=`small` ]] |
[[!msProducts? &resources=`[[!msFavorites.ids]]` &parents=`0` &tpl=`favouritestpl` &includeThumbs=`small` ]]
favouritestpl
<div class="favourites__item"> <div class="item"> {if $small?} <img src="{$small}" alt="{$description}"> {else} <img src="assets/cache_image/noimage_360x360_6f6.jpg" alt="{$description}"> {/if} </div> <div class="item"> <div class="title"> <a href="javascript:void(0);" data-show-modal data-src="{$id|url}"> {$pagetitle} </a> </div> </div> <div class="item"> {if $price?} <div class="price">{$price} р.</div> {else} <div class="price">Цена отсутствует</div> {/if} </div> <div class="item"> <div class="delete msfavorites chiklike" data-url="/izbrannoe.html" data-click data-data-list="default" data-data-type="resource" data-data-key="[[+id]]" > <img src="assets/img/arrows_circle_remove.svg" alt=""> </div> </div> </div> |
<div class="favourites__item"> <div class="item"> {if $small?} <img src="{$small}" alt="{$description}"> {else} <img src="assets/cache_image/noimage_360x360_6f6.jpg" alt="{$description}"> {/if} </div> <div class="item"> <div class="title"> <a href="javascript:void(0);" data-show-modal data-src="{$id|url}"> {$pagetitle} </a> </div> </div> <div class="item"> {if $price?} <div class="price">{$price} р.</div> {else} <div class="price">Цена отсутствует</div> {/if} </div> <div class="item"> <div class="delete msfavorites chiklike" data-url="/izbrannoe.html" data-click data-data-list="default" data-data-type="resource" data-data-key="[[+id]]" > <img src="assets/img/arrows_circle_remove.svg" alt=""> </div> </div> </div>
Сама конопка (через которую добавление идёт)
<div class="card__like msfavorites chiklike" data-url="/izbrannoe.html" data-click data-data-list="default" data-data-type="resource" data-data-key="[[*id]]"> <svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6.32647C20 11.4974 10.5 17 10.5 17C10.5 17 1 11.4974 1 6.32647C1 -0.694364 10.5 -0.599555 10.5 5.57947C10.5 -0.599555 20 -0.507124 20 6.32647Z" stroke="black" stroke-linejoin="round"></path></svg> </div> |
<div class="card__like msfavorites chiklike" data-url="/izbrannoe.html" data-click data-data-list="default" data-data-type="resource" data-data-key="[[*id]]"> <svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6.32647C20 11.4974 10.5 17 10.5 17C10.5 17 1 11.4974 1 6.32647C1 -0.694364 10.5 -0.599555 10.5 5.57947C10.5 -0.599555 20 -0.507124 20 6.32647Z" stroke="black" stroke-linejoin="round"></path></svg> </div>
Дополнительно:
Ответы:
Ну дык ты get-запрос делаешь на страницу izbrannoe.html, которой у тебя нет, или она не опубликована. Твой скрипт тупо падает
- Да была не опубликована, (опубликовал) нечего не изменилось всё так же ведёт себя.
- Windramix, у тебя оба запроса параллельно идут. Тебе нужно добавить колбэк к функции компонента msFavorites (добавление/удаление из списка), который будет получать список. Иначе у тебя все зависит от того, что раньше отработает - твой запрос или запрос msFavorites.
- Danny Arty, ух.... такое я точно не потяну, ладно спасибо.
- а есть альтернатива ? =)
- такое чувство что не кто не делал данную задачу и не задавался вопросом, что по запросу msFavorites ajax данная страница на 3 месте =)
- Windramix, да там и делать то, раз-два и готово
- Danny Arty, Подскажите, поможете? что куда?
- Windramix, также как и при надобности расширения или изменения функционала других компонентов. Копируете default.min.js компонента и создаете новый файл, условно custom.js. В системных настройках компонента указываете новый файл js. И в него добавляете ваш код, по моему метод назывался processAction
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания AJAX окна в msFavorites, вам потребуется использовать JavaScript с AJAX запросами для загрузки содержимого окна без перезагрузки страницы. Ниже приведен пример кода, демонстрирующий, как это можно сделать:
1. Создайте HTML элемент, который будет открывать ваше AJAX окно, например:
```html
```
2. Напишите JavaScript код, который будет обрабатывать клик по кнопке и отправлять AJAX запрос на сервер для получения содержимого окна. Пример кода:
```html
document.getElementById('openModal').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'url_to_your_server_script.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('modalContent').innerHTML = xhr.responseText;
}
};
xhr.send();
});
```
3. На стороне сервера (в файле `url_to_your_server_script.php`) обработайте AJAX запрос и верните необходимое содержимое окна. Пример PHP кода:
```php
<?php
// Ваш код для получения содержимого окна
echo '
Заголовок окна
Содержимое окна
';
?>
```
Таким образом, при клике на кнопку "Открыть окно" будет отправлен AJAX запрос на сервер, который вернет содержимое окна. Это содержимое будет отображено внутри элемента с идентификатором `modalContent`, создавая эффект AJAX окна в msFavorites. Не забудьте адаптировать код под ваши нужды и стилизовать окно с помощью CSS.