Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.
This plugin was created as a usecase for an ecommerce website. Our category view page has an infinity loader (loads more products as we scroll down). We want to retain the loaded products and scroll position after clicking on a product and redirecting to the product page and then navigating back to the category view page. We want to create a seamless transition going between category view listing and product view page so that the user can continue exploring the available products without losing their progress.
How it works
- Adds click event listeners to the elements (using the developer specified selector) living inside the element that uses the
- When a user clicks on the aforementioned elements, the browser's scroll position is retained as well as the content of the variable that contains all items listed (eg. on an ecommerge category view), the name of the variable can also be configured.
- User goes to item page, the one they clicked on.
- User goes back to the catalog page
- Previously loaded items are inserted by the plugin into the vue component using the directive, thus retaining all items previously loaded
- Previous scroll position is restored.
- User is at the same place they started and can continue scrolling down without losing their previous position in the category view page
npm i --save vue-remember-scroll-cache
In main.js or any other vue entry point:
import Vue from 'vue' import VueRememberScrollCache from 'vue-remember-scroll-cache' Vue.use(VueRememberScrollCache)
In vue component template:
Catalog view .....