Как реализовать такое?

Question

[justifycontent]

Как верстают "Показать больше v" ? Чтобы при нажатии на "Показать больше", появлялось больше товаров

Comments

[Rustam Bainazarov]

<div>
    <div>Показать больше</div>
</div>

[justifycontent]

Рустам Байназаров, Имею ввиду, чтобы при нажатии на "Показать больше", появлялось больше товаров

[Rustam Bainazarov]

justifycontent, ну, тогда оригинальный вопрос «как сверстать» не очень (совсем не) подходит под задачу.

Делается это с помощью JS и AJAX, нажимаем кнопку — грузим новые товары из backend'a, вставляем.

[justifycontent]

Рустам Байназаров, Спасибо, в вопросе налажал, соглашусь.

[Антон Литвиненко]

Рустам Байназаров, а как же доступность? Лучше ссылкой или кнопкой)

[Rustam Bainazarov]

Антон Литвиненко, это часть шутки.

[Дмитрий Беляев]

Антон Литвиненко, лучше все таки кнопкой, ссылка должна куда-то вести, а после мы должны иметь возможность вернуться с помощью истории браузера.

Answer 1

[Дмитрий Беляев]

Для начала наш бэк должен уметь отвечать на запрос вида "дай мне N товаров после товара X", иначе такая кнопка в принципе не имеет смысл.
Так вот, при нажатии на кнопку "Показать больше" мы первым делом должны ее заблокировать (чтоб пользователь не на тыкал лишнего) и показать лоадер (вдруг инет пользователя медленный), а затем отправить наш запрос к бэку, чтоб он дал нам данные о дополнительных товарах.
Когда данные загрузились, отрисовываем их в конец и в зависимости от того, есть ли у бэка еще товары (это он тоже должен нам сказать) мы или разблокируем или прячем кнопку "Показать больше".
Все.