Как динамически менять параметры в скрипте

Question

Есть код <script id="hotels-list" src="https://www.travelpayouts.com/blissey/scripts.js?categories=center%2Ctophotels%2Cpopularity%2Cluxury%2Chighprice%2Cprice&id=12153&type=compact&marker=248756&powered_by=false&host=bluefox.one%2Fsearch?#/hotels&locale=ru&currency=rub&limit=20&nobooking=true" charset="utf-8"></script> , который выводит отели на странице. Как менять параметр currency(валюта) при нажатии на кнопку с определенным значением валюты, то есть нужно переключать валюту, желательно без перезагрузки страницы, динамически, ну и запомнить значение валюты при перезагрузке путем local storage или cookie.

Answer 1

У Вас есть несколько вариантов подхода:
1. Использовать автоматический пересчёт суммы самостоятельно в зависимости от курса валют.
2. У Вас скрипт сразу прорисовывает div с классом blissey-widget_type--compact blissey-widget--l, а значит для загрузки другой валюты из сервиса (Прям других картинок и вообще всех элементов, Вам понадобится либо перезагружать страницу(тогда можно сделать на одной), либо воспользоваться методом загрузки страниц).

Пример с удалением скрипта и прорисовкой нового(Для демонстрации без localtorage, так как сниппеты не поддерживают работу с ним):

Сама страница не перезагружается, а меняется прорисовка данных из скрипта.

    window.onload =function() {
        let currency = document.getElementById('cur');
        let main = document.getElementsByClassName('main')[0];
        currency.onchange = function() {
            let val = currency.value;
            main.innerHTML = "";
            let script = document.createElement('script');
            script.src = "https://www.travelpayouts.com/blissey/scripts.js?categories=center%2Ctophotels%2Cpopularity%2Cluxury%2Chighprice%2Cprice&id=12153&type=compact&marker=248756&powered_by=false&host=bluefox.one%2Fsearch?#/hotels&locale=ru&currency="+val+"&limit=20&nobooking=true";
            script.charset = 'utf-8';
            main.appendChild(script);
        }
    }

<select id="cur">
    <option></option>
    <option>rub</option>
    <option>eur</option>
    <option>usd</option>
</select>
<div class="main">
    <script id="hotels-list" src="https://www.travelpayouts.com/blissey/scripts.js?categories=center%2Ctophotels%2Cpopularity%2Cluxury%2Chighprice%2Cprice&id=12153&type=compact&marker=248756&powered_by=false&host=bluefox.one%2Fsearch?#/hotels&locale=ru&currency=rub&limit=20&nobooking=true" charset="utf-8"></script>
</div>

Пример с localstorage(Надо код скопировать и запустить у себя):

<select id="cur">
    <option></option>
    <option>rub</option>
    <option>eur</option>
    <option>usd</option>
</select>
<div class="main">
    <script id="hotels-list" src="https://www.travelpayouts.com/blissey/scripts.js?categories=center%2Ctophotels%2Cpopularity%2Cluxury%2Chighprice%2Cprice&id=12153&type=compact&marker=248756&powered_by=false&host=bluefox.one%2Fsearch?#/hotels&locale=ru&currency=rub&limit=20&nobooking=true" charset="utf-8"></script>
</div>
<script>
    window.onload =function() {
        let currency = document.getElementById('cur');
        let main = document.getElementsByClassName('main')[0];
        let cur = localStorage.getItem('cur'); // Получаем данные из localstorage
        if(cur){ // Если есть значение в localstorage
            main.innerHTML = "";
            let script = document.createElement('script');
            script.src = "https://www.travelpayouts.com/blissey/scripts.js?categories=center%2Ctophotels%2Cpopularity%2Cluxury%2Chighprice%2Cprice&id=12153&type=compact&marker=248756&powered_by=false&host=bluefox.one%2Fsearch?#/hotels&locale=ru&currency="+cur+"&limit=20&nobooking=true";
            script.charset = 'utf-8';
            main.appendChild(script);
        }
        currency.onchange = function() {
            let val = currency.value;
            localStorage.setItem('cur', val); // Записываем в localstorage
            main.innerHTML = "";
            let script = document.createElement('script');
            script.src = "https://www.travelpayouts.com/blissey/scripts.js?categories=center%2Ctophotels%2Cpopularity%2Cluxury%2Chighprice%2Cprice&id=12153&type=compact&marker=248756&powered_by=false&host=bluefox.one%2Fsearch?#/hotels&locale=ru&currency="+val+"&limit=20&nobooking=true";
            script.charset = 'utf-8';
            main.appendChild(script);
        }
    }
</script>

Другая идея реализации - подгрузка файлов(Точно так же можно делать запросы ajax, чтобы не делать много файлов одинаковых, но просто для примера)
Например, первый файл основной index.html:

<?php
?>
<script
    src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
<select id="cur">
    <option></option>
    <option>rub</option>
    <option>eur</option>
    <option>usd</option>
</select>
<div class="main">

</div>
<script>
    window.onload =function() {
        let currency = document.getElementById('cur'); //Получаем элемент селекта
        let cur = localStorage.getItem('cur'); // Получаем данные из localstorage
        if(cur){ // Если есть значение в localstorage
            $('.main').load('inp'+cur+'.php'); // Вызываем нужную страницу
        } else { // Если нет
            $('.main').load('inprub.php'); // Ставим по умолчанию рубли
        }
        currency.onchange = function() { // При изменении селекта
            let val = currency.value; // получаем значение
            localStorage.setItem('cur', val); // Записываем в localstorage
            $('.main').load('inp'+val+'.php'); // Вызываем нужную страницу
        }
    }
</script>

Второй файл(inprub.html):

<script id="hotels-list" src="https://www.travelpayouts.com/blissey/scripts.js?categories=center%2Ctophotels%2Cpopularity%2Cluxury%2Chighprice%2Cprice&id=12153&type=compact&marker=248756&powered_by=false&host=bluefox.one%2Fsearch?#/hotels&locale=ru&currency=rub&limit=20&nobooking=true" charset="utf-8"></script>

Третий файл(inpeur.html):

<script id="hotels-list" src="https://www.travelpayouts.com/blissey/scripts.js?categories=center%2Ctophotels%2Cpopularity%2Cluxury%2Chighprice%2Cprice&id=12153&type=compact&marker=248756&powered_by=false&host=bluefox.one%2Fsearch?#/hotels&locale=ru&currency=eur&limit=20&nobooking=true" charset="utf-8"></script>

Четвёртый файл(inpusd.html):

<script id="hotels-list" src="https://www.travelpayouts.com/blissey/scripts.js?categories=center%2Ctophotels%2Cpopularity%2Cluxury%2Chighprice%2Cprice&id=12153&type=compact&marker=248756&powered_by=false&host=bluefox.one%2Fsearch?#/hotels&locale=ru&currency=usd&limit=20&nobooking=true" charset="utf-8"></script>

И так далее.

Тоже самое можно реализовать через ajax запросы к файлам передавая им валюту и уже в зависимости от этого выводить код скрипта с валютой.

Но думаю, что первый пример всё-равно более приемлемый.

БЛОГ НА HUSL

Как динамически менять параметры в скрипте

Ответы (1 шт):