Как открыть карточку определенную товара по клику в каталоге?

Question

[poshalim]

Есть файл catalog.html, где при список товаров рендерится из объекта products с помощью метода класса catalogPage.render(). Также есть страница product.html, с шаблоном страницы товара, которая должна открываться при клике на товар в каталоге. У каждого товара есть артикул. Не понимаю как реализовать переход и рендер на определенный товар по клику на карточку-ссылку на странице каталога. Нужно, чтобы при открытии адрес был /product/code. Пишу на JS, без фраемворков. Помогите, пожалуйста, разобраться. Спасибо.

Comments

[Вадим]

Ну так а сложность то в чём? С чем помочь?
используете product.html как шаблон.
Делаете матчинг роута product/code на этот шаблон, который заполняете данными товара из code.
Профит.

[szQocks]

Нужна маршрутизация ( роуты ), если делать маршутизацию на стороне клиента то обычно твои страницы должны быть js файлами а не html, но можно сделать прокси сервер, то есть сервер который будет раздавать твои html странички как статику ( маршрутизация на стороне сервера ) .

Answer 1

[Геннадий]

1. Делаете маршрутизацию.
2. Для каждого элемента (товара) на странице catalog, формируете ссылку /product/{code}, где code - артикул или другой уникальный идентификатор товара.
3. При нажатии на товар происходит переход на /product/{code}, где по code получаете данные для нужного товара и делаете рендеринг шаблона product.html.

Comments

[poshalim]

Я нашёл как делать маршрутизацию, но я не могу понять и не знаю где искать, как сделать, чтобы по нажатию на каталог у меня открывалась именна страница каталога из HTML, возможно ли это? Сейчас при нажатии на каталог у меня меняется url и выводится catalog в консоль. Понимаю, что можно вставить таким образом всю страницу, заменив контент текущей, но возможно ли именно открыть catalog.html, а затем туда уже вставить элемент?

<ul>
        <li><a href="/#/">Home</a></li>
        <li><a href="/#/catalog">catalog</a></li>
    </ul>

router
  .add(/catalog/, () => {
    console.log('catalog')
  })

[Геннадий]

poshalim, теперь вам нужно создать маршрут с параметрами для страницы товара.
Например, как здесь:

Чтобы вы могли перейти, например, по ссылке /product/123, где 123 - это артикул товара и, соответственно, уже по этому артикулу показать нужный товар на странице.