wip

resources/views/web/themes/shella/pages/home/collections.blade.php

@@ -0,0 +1,63 @@
+@push('header-css')
+<style>
+    .m-w-90 {
+        max-width: 90%;
+    }
+    #product-collections-container {
+        margin: 0 -12.5px;
+    }
+</style>
+@endpush
+
+@push('footer-javascript')
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        let homepage2GridBannerContainer = document.getElementById('theme-section-two-grid-banners');
+        let productCollectionContainer = document.getElementById('product-collections-container');
+        let collectionLoader = document.getElementById('collection-products-loader');
+
+        let loading = false;
+        let pagination = 2;
+        let paginationDone = false;
+        elementAppeared(homepage2GridBannerContainer, () => {
+            if (! loading && ! paginationDone) {
+                loading = true;
+                collectionLoader.classList.remove('d-none')
+                collectionLoader.classList.add('d-flex')
+                
+                $.ajax(location.href, {
+                    data: {
+                        page: pagination
+                    },
+                    success(response) {
+                        productCollectionContainer.insertAdjacentHTML('beforeend', response.collections)
+
+                        pagination++;
+                        loading = false;
+                        collectionLoader.classList.remove('d-flex')
+                        collectionLoader.classList.add('d-none')
+                        new LazyLoad({
+                            elements_selector: '.lazyload',
+                            threshold: 100,
+                        })
+
+                        if (! response.pagination.next_page_url) {
+                            paginationDone = true
+                        }
+                    }
+                })
+            }
+        });
+    })
+</script>
+@endpush
+
+<div class="container m-w-90">
+    <div id="product-collections-container" class="component-list component-small-list d-flex flex-wrap">
+        @include('web.themes.trendyol.components.products.collection.collections')
+    </div>
+
+    <div id="collection-products-loader" class="d-flex justify-content-center">
+        <img src="/web/shella/images/shella-preloader.svg" alt="Pre-loader"></div>
+    </div>
+</div>