Здравствуйте.
Помогите, пожалуйста, реализовать интерактивную генерацию ссылки.
Есть следующий функционал:
https://mi-spb-rservice.ru/uslugi/smartfonyi
Суть данного интерактивного функционала в том, что он помогает визуальным образом нажатиями на блоки-триггеры получить ссылку по частям на необходимую страницу.
По своей сути, каждая из ссылок по параметру "устройство" и "поломка" могут сами каким-то образом стать первоначальной частью ссылки, то есть пользователь может как от поломки перейти к починке, выбрав устройство, так и от устройства перейти к починке, выбрав поломку.
Заметил, что пункты списка поломки содержат в коде
data-alias="razbito-sensornoe-steklo-(tachskrin)", а в выборе устройства пункты содержат
data-rel="Mi"
При поптыках найти решение на вопрос, подсказали такой код:
const filters = {}
// Добавляем кнопкам data атрибуты (data-filter, data-value)
// Вешает событие onclick на все кнопки
document.querySelectorAll('button[data-filter]').forEach(btn => {
btn.addEventListener('click', () => {
const key = btn.getAttribute('data-filter')
const value = btn.getAttribute('data-value')
filters[key] = value
})
}) // P.s можно добавить проверки на наличие атрибутов
// И код для получения querystring
const getQueryString = () => Object.keys(filters).map((key) => {
return encodeURIComponent(key) + '=' + encodeURIComponent(filters[key])
}).join('&')
<button data-filter="a" data-value="1">Параметр a = 1</button>
<button data-filter="b" data-value="2">Параметр b = 2</button>
<button data-filter="c" data-value="3">Параметр c = 3</button>
<button onclick="alert(`${window.location.origin}/?${getQueryString()}`);">Получить querystring</button>
UPD. Нашел вот такую занимательную вещь:
https://codepen.io/pen/
Вот так, в принципе, и нужно, но как сделать вывод массива в href=""?
