Блог

В настоящее время мы разрабатываем приложение для интернет-магазина с использованием laravel-livewire, а для интерфейса мы используем bootstrap. Недавно мы столкнулись с ситуацией с infinity scroll и загрузкой дополнительных продуктов.

Способ этой загрузки заключается в создании контейнера div с макетом сетки и вставке в него дочерних элементов (продуктов). Если пользователь решает загрузить другую порцию продуктов, он нажимает кнопку, и тот же контейнер div загружается сразу после дочерних элементов, что означает, что контейнеры становятся вложенными.

В коде это выглядит так:

 <div wire:id="XXX" class="products-grid">
    <main>PRODUCT</main>
    <main>PRODUCT</main>
    <main>PRODUCT</main>
    <main>PRODUCT</main>
    <div wire:id="YYY" class="products-grid">
        <main>PRODUCT</main>
        <main>PRODUCT</main>
        <main>PRODUCT</main>
        <main>PRODUCT</main>
        <div wire:id="ZZZ">...</div>
    </div>
</div>

 

И к настоящему времени дополнительно загруженные продукты не продолжают работу в предыдущем ряду, как можно было ожидать. На экранах меньшего размера это может выглядеть очень плохо и запутанно, как вы можете видеть на изображении ниже:

Мы хотели бы, чтобы продукты продолжались в предыдущей сгенерированной строке и не создавали новую, не заполнив верхнюю.

Итак, я ищу возможное решение этой проблемы, предпочтительно на основе интерфейса. Мы должны сохранить атрибут wire:id.

Я рад ответить на дополнительные вопросы и приношу извинения за любую путаницу или ошибки.