Как сверстать кнопку «показать больше»?

Question

[ivankalachikov86]

Добрый день! Я еще совсем зеленый верстальщик и никак не могу сообразить, как сверстать список товаров с кнопкой "Загрузить еще". В общих чертах представляю что js будет подгружать ajax'ом остальные товары, но откуда и как не пойму. Делать отдельно файл с товарами и брать оттуда?
Напишите пожалуйста логику, и ссылки где можно почитать или посмотреть примеры похожих решений.

Comments

[webrapist]

Надо было:
"Which is hot?"

Answer 1

[Сергей delphinpro]

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

Ну а в целом, по нажатию на кнопку отправляется запрос на сервер и с него подтягиваются данные, которые затем вставляются на страницу. Тут надо знать в каком виде сервер будет отдавать данные. Будут это готовые куски html кода, или чистые данные в json (следует согласовать с бэкенд-программистом)

В простом случае, когда у вас с сервера будут приходить куски html кода можно сделать примерно так (примеры с jQuery, так проще).

Ваша html разметка примерно такая (сначала блоки присустствующие на странице, потом пустой контейнер для подгружаемых и в конце кнопка)

.items>.item*2
#moreitems
#readmore-button

Простейший код для подгрузки будет таким:

$('#readmore-button').on('click', function(){
  $.get('/url-address-for-request.php', function(response){
    $('#moreitems').append(response);
  });
});

Адрес /url-address-for-request.php должен быть согласован с программистом. Либо вы можете сделать свою заглушку и указать в комментарии, что адрес нужно указать правильный для сервера. Вашей заглушкой может быть простой html-файл с кусками подгружаемого html-кода.

Answer 2

[Anton Почти]

Сделайте отдельную страничку с товаром а в скриптах пропишите

$('#button').click(function (){ // нажимаем на кнопку подробнее
   $('.container').load('tovar.html') //контейнер это див где будет отбражатся содержимое товар.хтмл
})

Comments

[Anton Почти]

пардон не понял вопроса , но все равно оставлю вдруг пригодится

[ivankalachikov86]

А как подгружать не весь список, а по 5 товаров?

[Anton Почти]

ivankalachikov86: modzone.ru/blog/2015/12/22/ajax-loading-of-content