[Skip to main content](#vessel-content) # Hikashop Hybrid Pagination ## - **[khashiz](/forum/user/61259-khashiz "View khashiz's Profile")** - [![khashiz's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61259-khashiz "View khashiz's Profile") Topic Author - [ Offline](/forum/user/61259-khashiz) Less More - Posts: 240 - Thank you received: 13 - - 5 months 3 weeks ago [\#371981](#371981) by [khashiz](/forum/user/61259-khashiz "View khashiz's Profile") *[Hikashop Hybrid Pagination](/forum/26-product-category-display/910535-hikashop-hybrid-pagination#371981 "-- HikaShop version -- : 6.4.1 -- Joomla version -- : 6 -- PHP version -- : 8.4 Hello, We would like to customize the product listing pagination in **HikaShop**. Specifically, we want the pagination to work as follows: If we display **20 products per page**, we would like the **first 10 pages (i.e., the first 200 products)** to load using **infinite scroll**. That means: - Initially, 20 products are displayed. - When the user scrolls down, 20 more products load automatically. - This continues until 10 pages (200 products) have been loaded via infinite scroll. After those first 10 pages, we would like the system to switch to regular pagination and display page numbers starting from **Page 11, Page 12, and so on**. Is this type of hybrid pagination (infinite scroll for the first 10 pages, then standard pagination) possible in HikaShop? If so, could you please advise how we can implement or configure it? Thank you.")* was created by *[khashiz](/forum/user/61259-khashiz "View khashiz's Profile")* -- HikaShop version -- : 6.4.1 -- Joomla version -- : 6 -- PHP version -- : 8.4 Hello, We would like to customize the product listing pagination in **HikaShop**. Specifically, we want the pagination to work as follows: If we display **20 products per page**, we would like the **first 10 pages (i.e., the first 200 products)** to load using **infinite scroll**. That means: - Initially, 20 products are displayed. - When the user scrolls down, 20 more products load automatically. - This continues until 10 pages (200 products) have been loaded via infinite scroll. After those first 10 pages, we would like the system to switch to regular pagination and display page numbers starting from **Page 11, Page 12, and so on**. Is this type of hybrid pagination (infinite scroll for the first 10 pages, then standard pagination) possible in HikaShop? If so, could you please advise how we can implement or configure it? Thank you. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA1MzUtaGlrYXNob3AtaHlicmlkLXBhZ2luYXRpb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86541 - Thank you received: 14304 - - 5 months 3 weeks ago [\#371984](#371984) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Hikashop Hybrid Pagination](/forum/26-product-category-display/910535-hikashop-hybrid-pagination#371984 "-- HikaShop version -- : 6.4.1 -- Joomla version -- : 6 -- PHP version -- : 8.4 Hello, We would like to customize the product listing pagination in **HikaShop**. Specifically, we want the pagination to work as follows: If we display **20 products per page**, we would like the **first 10 pages (i.e., the first 200 products)** to load using **infinite scroll**. That means: - Initially, 20 products are displayed. - When the user scrolls down, 20 more products load automatically. - This continues until 10 pages (200 products) have been loaded via infinite scroll. After those first 10 pages, we would like the system to switch to regular pagination and display page numbers starting from **Page 11, Page 12, and so on**. Is this type of hybrid pagination (infinite scroll for the first 10 pages, then standard pagination) possible in HikaShop? If so, could you please advise how we can implement or configure it? Thank you.")* Hello, That hybrid behaviour is not a built-in HikaShop option, but it can be done with a small product listing view override that builds on top of HikaShop's existing infinite scroll. The idea: keep HikaShop's regular infinite scroll, wrap its trigger so that after the configured number of pages have been auto-loaded it stops, hides the "Load more" block, and reveals / scrolls to a numbered pagination block. A direct navigation to a page past the threshold (the customer arrives at page 11 from a bookmark, a deep link, an SEO crawler, etc.) skips infinite scroll entirely and behaves as a normal paginated page. Two notes before the override itself: (1) HikaShop's stock listing_div.php suppresses the bottom pagination block entirely when infinite scroll is on (its render condition has "&& !$infinite_scroll"). So the override re-renders that same pagination block itself, hidden via display:none, so there is something for the JS to reveal once the threshold is reached. (2) Make sure infinite scroll is enabled on the relevant menu item (Menus > Edit menu item > HikaShop Options > Use the infinite scroll = Yes) so HikaShop's stock scroll runs in the first place; the override only changes when to stop it. Drop this file at: templates/YOUR_TEMPLATE/html/com_hikashop/product/listing.php It includes the unmodified core listing.php from your HikaShop install and then appends the hidden pagination block and the cap JS. The only thing to tune is the HK_HYBRID_THRESHOLD_PAGES constant at the top of the JS block (set to 10 below to match what you asked). Code: <?php defined('_JEXEC') or die('Restricted access'); include rtrim(HIKASHOP_FRONT, DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . 'views' . DIRECTORY_SEPARATOR . 'product' . DIRECTORY_SEPARATOR . 'tmpl' . DIRECTORY_SEPARATOR . 'listing.php'; $hk_hyb_pagination = null; if(!empty($this->pagination) && !empty($this->pageInfo->elements->total) && !empty($this->pageInfo->limit->value) && $this->pageInfo->elements->total > $this->pageInfo->limit->value) { $hk_hyb_pagination = $this->pagination; $hk_hyb_form_suffix = '_bottom_hybrid'; $hk_hyb_pagination->form = $hk_hyb_form_suffix; $hk_hyb_main_div = isset($this->params) ? $this->params->get('main_div_name', '') : ''; $hk_hyb_cat_sel = isset($this->category_selected) ? $this->category_selected : ''; ?> <form action="<?php echo str_replace(array('&tmpl=raw', '&tmpl=component'), '', hikashop_currentURL()); ?>" method="post" name="adminForm_<?php echo $hk_hyb_main_div . $hk_hyb_cat_sel . $hk_hyb_form_suffix; ?>" style="display:none;" class="hikashop_hybrid_pagination_wrapper"> <div class="hikashop_products_pagination hikashop_products_pagination_bottom"> <?php // Strip tmpl=raw / tmpl=component from the rendered page links. // The list-footer helper inherits the request URI, so when the // listing template runs in an AJAX (tmpl=raw) context, the // links carry that parameter and would land on a raw layout if // clicked. Cover the leading-? form too, not just the // &-prefixed one. $hk_hyb_footer = $hk_hyb_pagination->getListFooter((int)$this->pageInfo->limit->value); $hk_hyb_footer = preg_replace('/([?&])tmpl=(raw|component)(&|"|\')/i', '$1$3', $hk_hyb_footer); $hk_hyb_footer = str_replace('?&', '?', $hk_hyb_footer); echo $hk_hyb_footer; ?> <span class="hikashop_results_counter"><?php echo $hk_hyb_pagination->getResultsCounter(); ?></span> </div> <?php if(isset($this->pageInfo->filter->order)) { ?> <input type="hidden" name="filter_order_<?php echo $hk_hyb_main_div . $hk_hyb_cat_sel; ?>" value="<?php echo $this->pageInfo->filter->order->value; ?>" /> <input type="hidden" name="filter_order_Dir_<?php echo $hk_hyb_main_div . $hk_hyb_cat_sel; ?>" value="<?php echo $this->pageInfo->filter->order->dir; ?>" /> <?php } ?> <?php echo JHTML::_('form.token'); ?> </form> <?php } ?> <script type="text/javascript"> (function(){ var HK_HYBRID_THRESHOLD_PAGES = 10; function init(){ if(!window.localPage || typeof window.localPage.infiniteScroll !== 'function'){ setTimeout(init, 200); return; } var params = new URLSearchParams(window.location.search); var limit = parseInt(params.get('limit')) || <?php echo (int)max(1, $this->pageInfo->limit->value); ?>; var limitStart = parseInt(params.get('limitstart')) || parseInt(params.get('start')) || <?php echo (int)$this->pageInfo->limit->start; ?>; var initialPage = Math.floor(limitStart / limit) + 1; if(initialPage > HK_HYBRID_THRESHOLD_PAGES){ window.localPage.infiniteScrollPage = -1; var loadMore = document.querySelector('[id$="_infinite_scroll"]'); if(loadMore) loadMore.style.display = 'none'; revealPagination(); return; } var origInfiniteScroll = window.localPage.infiniteScroll; window.localPage.infiniteScroll = function(container_name){ var nextPage = initialPage + window.localPage.infiniteScrollPage; if(nextPage > HK_HYBRID_THRESHOLD_PAGES){ window.localPage.infiniteScrollPage = -1; var container = document.getElementById(container_name + '_infinite_scroll'); if(container) container.style.display = 'none'; revealPagination(); return false; } return origInfiniteScroll(container_name); }; } function revealPagination(){ var wrapper = document.querySelector('.hikashop_hybrid_pagination_wrapper'); if(!wrapper) return; wrapper.style.display = ''; try { wrapper.scrollIntoView({behavior:'smooth', block:'center'}); } catch(e){} } init(); })(); </script> We tested this on a local Joomla 6 / HikaShop 6.4.1 install (10 dummy products, limit 2, threshold reduced to 2 for the visible transition) and confirmed: pages 1 and 2 load via auto-scroll, the load-more then hides and the pagination block reveals with numbered links to pages 3 to 5, and clicking a numbered link lands on a clean URL with the full template chrome. The following user(s) said Thank You: [khashiz](/forum/user/61259-khashiz "View khashiz's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA1MzUtaGlrYXNob3AtaHlicmlkLXBhZ2luYXRpb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[khashiz](/forum/user/61259-khashiz "View khashiz's Profile")** - [![khashiz's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/61259-khashiz "View khashiz's Profile") Topic Author - [ Offline](/forum/user/61259-khashiz) Less More - Posts: 240 - Thank you received: 13 - - 5 months 3 weeks ago [\#371987](#371987) by [khashiz](/forum/user/61259-khashiz "View khashiz's Profile") Replied by *[khashiz](/forum/user/61259-khashiz "View khashiz's Profile")* on topic *[Hikashop Hybrid Pagination](/forum/26-product-category-display/910535-hikashop-hybrid-pagination#371987 "-- HikaShop version -- : 6.4.1 -- Joomla version -- : 6 -- PHP version -- : 8.4 Hello, We would like to customize the product listing pagination in **HikaShop**. Specifically, we want the pagination to work as follows: If we display **20 products per page**, we would like the **first 10 pages (i.e., the first 200 products)** to load using **infinite scroll**. That means: - Initially, 20 products are displayed. - When the user scrolls down, 20 more products load automatically. - This continues until 10 pages (200 products) have been loaded via infinite scroll. After those first 10 pages, we would like the system to switch to regular pagination and display page numbers starting from **Page 11, Page 12, and so on**. Is this type of hybrid pagination (infinite scroll for the first 10 pages, then standard pagination) possible in HikaShop? If so, could you please advise how we can implement or configure it? Thank you.")* I put listing.php in my template in the folder you said ... but nothing happend. i checked all the settings you mentiond page keeps infinite scrolling until the end should i do anythig else ? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA1MzUtaGlrYXNob3AtaHlicmlkLXBhZ2luYXRpb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86541 - Thank you received: 14304 - - 5 months 3 weeks ago [\#371988](#371988) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Hikashop Hybrid Pagination](/forum/26-product-category-display/910535-hikashop-hybrid-pagination#371988 "-- HikaShop version -- : 6.4.1 -- Joomla version -- : 6 -- PHP version -- : 8.4 Hello, We would like to customize the product listing pagination in **HikaShop**. Specifically, we want the pagination to work as follows: If we display **20 products per page**, we would like the **first 10 pages (i.e., the first 200 products)** to load using **infinite scroll**. That means: - Initially, 20 products are displayed. - When the user scrolls down, 20 more products load automatically. - This continues until 10 pages (200 products) have been loaded via infinite scroll. After those first 10 pages, we would like the system to switch to regular pagination and display page numbers starting from **Page 11, Page 12, and so on**. Is this type of hybrid pagination (infinite scroll for the first 10 pages, then standard pagination) possible in HikaShop? If so, could you please advise how we can implement or configure it? Thank you.")* Hi, Nothing else. It works on my end with this. I would recommend checking with AI. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA1MzUtaGlrYXNob3AtaHlicmlkLXBhZ2luYXRpb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.042 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)