The arithmetic behind creating a pagination component and displaying the correct products relies on four main variables:
- Items per page: This is usually set by the user; however, we'll use a fixed number of 12, to begin with
- Total items: This is the total number of products to display
- Number of pages: This can be calculated by dividing the number of products by the items per page
- Current page number: This, combined with the others, will allow us to return exactly which products we need
From these numbers, we can calculate everything needed for our pagination. This includes what products to display, whether to show next/previous links and, if desired, a component to skip to different links.
Before we proceed, we are ...