{"id":21826320,"url":"https://github.com/adearriba/infinitescrollmanager","last_synced_at":"2026-04-27T17:34:08.010Z","repository":{"id":220795078,"uuid":"565064650","full_name":"adearriba/InfiniteScrollManager","owner":"adearriba","description":"Ajax pagination plugin for Shopify themes inspired by Ajaxinate","archived":false,"fork":false,"pushed_at":"2022-11-21T11:01:58.000Z","size":129,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T08:15:10.829Z","etag":null,"topics":["ajax","ajax-pagination","ajax-pagination-plugin","infinite-scroll","infinite-scroll-pagination","infinite-scrolling","pagination","pagination-library","shopify","shopify-theme"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adearriba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-11-12T08:17:18.000Z","updated_at":"2024-09-25T02:53:30.000Z","dependencies_parsed_at":"2024-02-04T12:21:22.833Z","dependency_job_id":"ba73b944-520b-40d9-ac69-ea338ebcd7b6","html_url":"https://github.com/adearriba/InfiniteScrollManager","commit_stats":null,"previous_names":["adearriba/infinitescrollmanager"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adearriba%2FInfiniteScrollManager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adearriba%2FInfiniteScrollManager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adearriba%2FInfiniteScrollManager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adearriba%2FInfiniteScrollManager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adearriba","download_url":"https://codeload.github.com/adearriba/InfiniteScrollManager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244795430,"owners_count":20511519,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","ajax-pagination","ajax-pagination-plugin","infinite-scroll","infinite-scroll-pagination","infinite-scrolling","pagination","pagination-library","shopify","shopify-theme"],"created_at":"2024-11-27T18:03:37.953Z","updated_at":"2026-04-27T17:34:07.967Z","avatar_url":"https://github.com/adearriba.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# InfiniteScrollManager\n\u003e Ajax pagination plugin for Shopify themes inspired by Ajaxinate\n\n## Manual installation\n\n\n1. Add `.dist/infiniteScrollManager.min.js` to the assets folder of your shopify theme, or add it to your vendor files if you are using Slate or a similar method.\n\n2. Add the `infiniteScrollManager.min.js` script src tag before the closing body tag, or defer its loading:\n\n```html\n\u003cscript src=\"{{ 'infinite-scroll-manager.js' | asset_url }}\" defer=\"defer\"\u003e\u003c/script\u003e\n```\n\n3. Setup your collection template. For example having previous and next infinite scroll:\n```html\n\u003cdiv id=\"CollectionProductGrid\"\u003e\n\t{%- paginate collection.products by section.settings.products_per_page -%}\n\n\t\t{% if paginate.previous %}\n\t\t\u003cdiv id=\"scrollPaginationPrevious\" style=\"visibility:hidden;\"\u003e\n\t\t\u003ca href=\"{{ paginate.previous.url }}\"\u003eLoading More\u003c/a\u003e\n\t\t\u003c/div\u003e\n\t\t{% endif %}\n\n\t\t\u003cdiv id=\"scrollContainer\"\u003e\n\t\t\t\u003cul id=\"main-collection-product-grid\"\u003e\n\t\t\t{%- for product in collection.products -%}\n\t\t\t\t\u003cli class=\"grid__item\"\u003e\n\t\t\t\t{% render 'product-card', product: product %}\n\t\t\t\t\u003c/li\u003e\n\t\t\t{%- endfor -%}\n\t\t\t\u003c/ul\u003e\n\t\t\u003c/div\u003e\n\n\t\t{% if paginate.next %}\n\t\t\u003cdiv id=\"scrollPaginationNext\" style=\"visibility:hidden;\"\u003e\n\t\t\t\u003ca href=\"{{ paginate.next.url }}\"\u003eLoading More\u003c/a\u003e\n\t\t\u003c/div\u003e\n\t\t{% endif %}\n\n\t{%- endpaginate -%}\n\u003c/div\u003e\n```\n\n4. Initialize it in your script file, or inline:\n```javascript\ndocument.addEventListener('DOMContentLoaded', function () {\n\tconst scrollConfig = {\n\t\tmargin: 0.3,\n\t\tpageTitle: 'Página {pageNum}',\n\t\tdebug: true,\n\t};\n\n\twindow.infiniteScrollManager = new InfiniteScrollManager(scrollConfig);\n});\n```\n\n5. Configure your settings as desired.\n\n## Configuration Settings\nAll settings are optional. You aren't forced to pass a config object to the constructor. Nevertheless, you have multiple settings you can tweak.\n\n| Param | Type | Description | Default |\n| --- | --- | --- | --- |\n| `container` | `string?` | CSS selector for the container where data will be displayed and added after loads. | `'#scrollContainer'` |\n| `paginationPrevious` | `string?` | CSS selector for the pagination element with the previous page URL. | `'#scrollPaginationPrevious'` |\n| `paginationNext` | `string?` | CSS selector for the pagination element with the next page URL. | `'#scrollPaginationNext'` |\n| `threshold` | `number?` | From 0 to 1. A value of 0.0 means that even a single visible pixel counts as the target being visible. 1.0 means that the entire target element is visible. | `0` |\n| `enableHtml5History` | `boolean?` | Push or not each page to the browser's history API. | `true` |\n| `pageQueryParamName` | `string?` | Query parameter name used for specifying current page. | `'page'` |\n| `margin` | `number?` | From 0 (0%) to 1 (100%) the margin used to identify intersections with pagination elements. | `0.3` |\n| `debug` | `boolean?` | If true, it will print out each function call with the current page value. | `false` |\n| `pageTitle` | `string?` | Title displayed above each page content. Use '{pageNum}' to insert the page number. | `'Page {pageNum}'` |\n\n## Events\nThere are 2 events that will trigger while using `infiniteScrollManager`.\n|Event|Description|\n| ------------ | ------------ |\n|infinitescroll:load | This event will trigger after every new pagination load. |\n|infinitescroll:end | This event trigger by the pagination element that has no more pages left to paginate. |\n\nYou can add event listeners using normal JS or using the functions provided in the library:\n```javascript\n// Add an event lister to every page load\nwindow.infiniteScrollManager.addLoadEventListener((e) =\u003e {\n\tconsole.log(e);\n});\n\n// Add an event lister when there are no more previous pages left to load.\nwindow.infiniteScrollManager.addPreviousPageScrollEndEventListener((e) =\u003e{\n\tconsole.log(e);\n});\n\n// Add an event lister when there are no more subsequent pages left to load.\nwindow.infiniteScrollManager.addNextPageScrollEndEventListener((e) =\u003e{\n\tconsole.log(e);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadearriba%2Finfinitescrollmanager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadearriba%2Finfinitescrollmanager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadearriba%2Finfinitescrollmanager/lists"}