Creating A Responsive Load More Section With Sprig Plugin

Hey guys! Let's dive into creating a responsive section with a "Load More" button using the Sprig plugin. This is a common requirement for web pages where you want to display content in chunks, optimizing the initial load time and providing a better user experience. We'll tackle the responsive layout, ensuring it looks great on different screen sizes, and then implement the "Load More" functionality using Sprig.

Understanding the Requirements

Before we jump into the code, let's clarify the requirements. The goal is to build a section that:

• Displays entries in a grid layout.
• Shows one entry per row on small screens.
• Shows two entries per row on medium screens.
• Shows three entries per row on large screens.
• Has a "Load More" button to fetch and display additional entries.
• Loads one, two, or three entries (corresponding to the screen size) each time the button is clicked.

Setting Up the HTML Structure

First, we need to create the basic HTML structure. This will include a container for our entries, the entries themselves, and the "Load More" button. Let’s start with the basic HTML structure, keeping responsiveness in mind. We will use CSS classes to control the layout for different screen sizes. Think of this as building the foundation of your dynamic content display. We'll use a container element, perhaps a div with the class entries-container, to hold all the entries. Inside this container, we'll have individual div elements representing each entry. Each entry div should contain the content you want to display, such as an image, title, and description. Finally, we'll add a button with the id load-more that will trigger the loading of more content. This basic structure provides a clear separation of concerns and makes it easier to style and manipulate the content dynamically. The key here is to structure your HTML in a way that's easy to work with using both CSS for layout and JavaScript/Sprig for dynamic content loading.

<div class="entries-container">
    <div class="entry">Entry 1</div>
    <div class="entry">Entry 2</div>
    <div class="entry">Entry 3</div>
    <!-- More entries will be added here dynamically -->
</div>
<button id="load-more">Load More</button>

CSS for Responsive Grid Layout

Now, let's style the layout using CSS to achieve the desired responsiveness. We'll use CSS media queries to define different grid layouts for different screen sizes. This is where the magic happens in terms of making your layout adapt seamlessly to various devices. CSS Grid is a fantastic tool for creating responsive layouts, and we'll leverage it to arrange our entries. First, we set the entries-container to display: grid. Then, we use grid-template-columns to define the number of columns for each screen size. For small screens, we set it to 1fr (one fraction), meaning one column. For medium screens, we use 1fr 1fr (two columns), and for large screens, we use 1fr 1fr 1fr (three columns). Media queries allow us to apply these styles conditionally based on the screen size. For example, @media (min-width: 768px) applies styles to screens that are 768 pixels or wider (medium screens), and @media (min-width: 992px) applies styles to screens that are 992 pixels or wider (large screens). This approach ensures that your content flows naturally and looks great regardless of the device being used.

.entries-container {
    display: grid;
    grid-template-columns: 1fr; /* Default: 1 column */
    gap: 20px;
}

@media (min-width: 768px) { /* Medium screens */
    .entries-container {
        grid-template-columns: 1fr 1fr; /* 2 columns */
    }
}

@media (min-width: 992px) { /* Large screens */
    .entries-container {
        grid-template-columns: 1fr 1fr 1fr; /* 3 columns */
    }
}

.entry {
    padding: 20px;
    border: 1px solid #ddd;
    text-align: center;
}

Implementing "Load More" with Sprig

Okay, let's get to the fun part: implementing the "Load More" functionality using Sprig. Sprig makes it incredibly easy to handle AJAX requests and update parts of your page without full reloads. This is crucial for a smooth user experience, as it avoids unnecessary delays and keeps the user engaged. The basic idea is that when the "Load More" button is clicked, we'll send an AJAX request to the server, fetch additional entries, and then append them to the entries-container. Sprig simplifies this process by allowing you to define server-side components that render HTML fragments. These components can then be dynamically loaded and inserted into your page. We'll create a Sprig component that fetches the next set of entries and renders them as HTML. This component will be responsible for interacting with your data source (e.g., a database) and returning the appropriate entries. On the client-side, we'll use JavaScript to listen for the button click event and then use Sprig's ajax function to send the request to the server. When the response comes back, we'll simply append the new entries to the entries-container. This approach keeps your code clean and maintainable, as the logic for fetching and rendering entries is encapsulated within the Sprig component.

Creating the Sprig Component

First, you'll need to create a Sprig component that fetches the entries and renders them. This component will receive the current number of displayed entries and the number of entries to load as parameters. Think of this component as the workhorse that fetches and prepares the content for display. It needs to interact with your data source (database, CMS, etc.) to retrieve the next set of entries. The component should also handle pagination logic, keeping track of which entries have already been loaded and ensuring that it fetches the correct subset. Inside the component, you'll typically use templating to generate the HTML for the new entries. This might involve looping through the fetched entries and creating a div element for each one, including the necessary content (image, title, description, etc.). The component should return this HTML, which will then be sent back to the client and inserted into the page. This separation of concerns makes your code more modular and easier to test.

<?php

namespace App\Sprig\Components;

use craft\base\Component;
use craft\db\Paginator;
use craft\elements\Entry;

class LoadMoreEntries extends Component
{
    public int $perPage = 3;
    public int $page = 1;

    public function getEntries(): array
    {
        $query = Entry::find()
            ->section('news')
            ->limit($this->perPage)
            ->offset(($this->page - 1) * $this->perPage);

        return $query->all();
    }

    public function render(): string
    {
        $entries = $this->getEntries();

        return \Craft::\tales()->renderTemplate('_components/entries', [
            'entries' => $entries,
        ]);
    }
}

JavaScript for Handling "Load More" Click

Next, we'll write the JavaScript code to handle the "Load More" button click and use Sprig's ajax function to fetch the new entries. This is where the client-side magic happens, connecting the button click to the server-side component. The first step is to attach an event listener to the "Load More" button. When the button is clicked, this listener will trigger a function that sends the AJAX request. Inside this function, we'll use Sprig's ajax function to send a request to the server, specifying the component we want to render (in this case, the LoadMoreEntries component) and any necessary parameters (such as the current number of entries displayed and the number of entries to load). We'll also define a callback function that will be executed when the response comes back from the server. This callback function will receive the HTML for the new entries, and we'll use JavaScript to append this HTML to the entries-container. This dynamic update of the page content is what makes the "Load More" functionality so seamless and user-friendly. We also need to increment a counter to keep track of the current page, and we can also hide the "Load More" button if no more entries are available. This ensures that the user experience remains intuitive and avoids unnecessary requests.

document.addEventListener('DOMContentLoaded', function () {
    const loadMoreButton = document.getElementById('load-more');
    const entriesContainer = document.querySelector('.entries-container');
    let page = 1;
    const perPageSmall = 1;
    const perPageMedium = 2;
    const perPageLarge = 3;

    function getEntriesPerPage() {
        if (window.innerWidth < 768) {
            return perPageSmall;
        } else if (window.innerWidth < 992) {
            return perPageMedium;
        } else {
            return perPageLarge;
        }
    }

    if (loadMoreButton) {
        loadMoreButton.addEventListener('click', function (e) {
            e.preventDefault();
            const entriesPerPage = getEntriesPerPage();
            page++;

            Sprig.ajax({
                url: '/actions/my-plugin/load-more',
                method: 'POST',
                body: {
                    page: page,
                    perPage: entriesPerPage,
                },
                success: function (response) {
                    entriesContainer.insertAdjacentHTML('beforeend', response);
                    if (response.trim() === '') {
                        loadMoreButton.style.display = 'none';
                    }
                },
                error: function (error) {
                    console.error('Error loading more entries:', error);
                }
            });
        });
    }
});

Controller Action to Render the Component

Finally, we need a controller action that will render the Sprig component and return the HTML. This action acts as the bridge between the client-side JavaScript and the server-side component. When the AJAX request is sent from the client, it will hit this controller action. The action's primary responsibility is to instantiate the Sprig component, pass in any necessary parameters (such as the page number and entries per page), and then render the component. The rendered HTML is then returned as the response to the AJAX request. This response is what the client-side JavaScript will use to update the page content. The controller action typically involves minimal logic, focusing mainly on orchestrating the rendering of the component. It may also include error handling to gracefully handle cases where the component rendering fails or no more entries are available. This separation of concerns keeps your code organized and makes it easier to maintain and debug.

<?php

namespace App\Controllers;

use App\Sprig\Components\LoadMoreEntries;
use Craft;
use craft\web\Controller;
use yii\web\Response;

class MyController extends Controller
{
    protected array|bool|int $allowAnonymous = true;

    public function actionLoadMore(): Response
    {
        $this->requirePostRequest();
        $request = Craft::$app->getRequest();
        $page = $request->getBodyParam('page', 1);
        $perPage = $request->getBodyParam('perPage', 3);

        $component = new LoadMoreEntries([
            'page' => $page,
            'perPage' => $perPage,
        ]);

        return $this->asJson($component->render());
    }
}

Bringing It All Together

Alright, guys, let's recap what we've done. We've created a responsive grid layout using CSS, implemented a "Load More" button using Sprig, and set up the necessary JavaScript and controller action. This combination allows us to dynamically load and display content in a way that's both user-friendly and performant. The key takeaways here are the use of CSS Grid for responsive layouts, Sprig for simplified AJAX handling, and a clear separation of concerns between the client-side and server-side code. By structuring your application in this way, you can easily extend and maintain it as your needs evolve. For example, you might want to add filtering or sorting functionality to the loaded entries, or you might want to integrate with a different data source. The modular nature of this approach makes it relatively easy to adapt to new requirements. Remember to test your implementation thoroughly on different devices and screen sizes to ensure that it works as expected. This includes testing the "Load More" functionality, the responsive layout, and the overall user experience. With a little bit of effort, you can create a dynamic and engaging content display that enhances your website's usability and keeps your users coming back for more.

Conclusion

Creating a responsive "Load More" section might seem daunting at first, but with the right tools and techniques, it becomes a manageable task. Sprig simplifies the AJAX interactions, and CSS Grid makes responsive layouts a breeze. By following the steps outlined in this article, you can build a dynamic and engaging content display for your website. Remember to always prioritize user experience and test your implementation thoroughly. Happy coding!