Master CodeIgniter 4 AJAX Product Filter (Beginner Guide | 2025)24 min read

composer create-project codeigniter4/appstarter ci4_product_filter

public array $default = [
    'DSN'          => '',
    'hostname'     => 'localhost', // Or your database host
    'username'     => 'your_db_username',
    'password'     => 'your_db_password',
    'database'     => 'your_db_name', // Create this database in MySQL
    'DBDriver'     => 'MySQLi',
    'DBPrefix'     => '',
    'pConnect'     => false,
    'DBDebug'      => true, // Set to false in production
    'charset'      => 'utf8',
    'DBCollat'     => 'utf8_general_ci',
    'swapPre'      => '',
    'encrypt'      => false,
    'compress'     => false,
    'strictOn'     => false,
    'failover'     => [],
    'port'         => 3306,
    'foreignKeys'  => true, // Ensure this is true if using foreign keys
    'busyTimeout'  => 1000,
];

php spark serve

<?= $this->extend('layouts/main') ?> <?= $this->section('content') ?>
<div class="container mt-4">
    <h1 class="mb-4">Product Catalog</h1>

    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5>Filters</h5>
                </div>
                <div class="card-body">
                    <form id="filterForm">
                        <div class="mb-3">
                            <label for="collection_id" class="form-label">Collection:</label>
                            <select class="form-select" id="collection_id" name="collection_id">
                                <option value="">All Collections</option>
                                <option value="most_viewed">Most Viewed</option>
                                <?php foreach ($collections as $collection): ?>
                                    <option value="<?= $collection['id'] ?>"><?= esc($collection['title']) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="price_sort" class="form-label">Price Order:</label>
                            <select class="form-select" id="price_sort" name="price_sort">
                                <option value="">Default</option>
                                <option value="asc">Price: Low to High</option>
                                <option value="desc">Price: High to Low</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Price Range:</label>
                            <div class="row g-2">
                                <div class="col">
                                    <input type="number" class="form-control" id="min_price" name="min_price" placeholder="Min Price">
                                </div>
                                <div class="col">
                                    <input type="number" class="form-control" id="max_price" name="max_price" placeholder="Max Price">
                                </div>
                            </div>
                            <div id="price-range-slider" class="mt-2"></div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Colors:</label>
                            <?php foreach ($colors as $color): ?>
                                <div class="form-check">
                                    <input class="form-check-input color-filter" type="checkbox" value="<?= $color['id'] ?>" id="color_<?= $color['id'] ?>" name="colors[]">
                                    <label class="form-check-label" for="color_<?= $color['id'] ?>">
                                        <?= esc($color['name']) ?>
                                    </label>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <button type="button" class="btn btn-secondary w-100" id="resetFiltersBtn">Reset Filters</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div id="productList" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
                <?php
                // Load the view responsible for rendering product items
                echo $this->include('products/_product_items', ['products' => $products]);
                ?>
            </div>

            <div id="loading" style="display: none; text-align: center; margin-top: 20px;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p>Loading products...</p>
            </div>

            <div id="loadMoreContainer" class="text-center mt-4">
                <?php if (count($products) >= 9): // Assuming 9 products per page/load ?>
                    <button class="btn btn-primary" id="loadMoreBtn">Load More Products</button>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection() ?>

<?php if (!empty($products)): ?>
    <?php foreach ($products as $product): ?>
        <div class="col">
            <div class="card h-100">
                <img src="placeholder.jpg" class="card-img-top" alt="<?= esc($product['product_name']) ?>">
                <div class="card-body">
                    <h5 class="card-title"><?= esc($product['product_name']) ?></h5>
                    <p class="card-text">Price: $<?= esc(number_format($product['gross_price'], 2)) ?></p>
                    <a href="/products/<?= esc($product['uri']) ?>" class="btn btn-sm btn-outline-primary">View Details</a>
                </div>
                 <div class="card-footer">
                    <small class="text-muted">Views: <?= esc($product['view']) ?></small>
                 </div>
            </div>
        </div>
    <?php endforeach; ?>
<?php else: ?>
    <?php if (!isset($is_ajax) || $is_ajax === false): ?>
         <div class="col-12"><p>No products found matching your criteria.</p></div>
    <?php elseif (isset($is_ajax) && $is_ajax === true && empty($products)): ?>
         <?php endif; ?>

<?php endif; ?>

// Place this script in your view file or a separate JS file loaded on the page

$(document).ready(function() {

    const productList = $('#productList');
    const filterForm = $('#filterForm');
    const loadingIndicator = $('#loading');
    const loadMoreBtn = $('#loadMoreBtn');
    let isLoading = false; // Prevent multiple requests
    let offset = 0; // Pagination offset
    const limit = 9; // Products per load

    // Function to collect filter data
    function collectFilterData() {
        const filters = {};
        filters.collection_id = $('#collection_id').val();
        filters.price_sort = $('#price_sort').val();
        filters.min_price = $('#min_price').val();
        filters.max_price = $('#max_price').val();
        filters.colors = [];
        $('.color-filter:checked').each(function() {
            filters.colors.push($(this).val());
        });
        // Add pagination offset and limit
        filters.offset = offset;
        filters.limit = limit;
        return filters;
    }

    // Function to perform the AJAX request
    function loadProducts(append = false) {
        if (isLoading) return; // Prevent loading if already loading

        isLoading = true;
        if (!append) {
             loadingIndicator.show(); // Show loader only for initial load/filter change
             productList.html(''); // Clear current products if not appending
        } else {
             // Show loader below existing products when loading more
             loadingIndicator.show();
        }


        const filters = collectFilterData();

        $.ajax({
            url: '<?= site_url('products/filterProducts') ?>', // Your CodeIgniter route/method
            method: 'POST',
            data: filters,
            dataType: 'json', // Expect JSON response
            success: function(response) {
                isLoading = false;
                loadingIndicator.hide();

                if (response && response.products) {
                     if (append) {
                         // Append new products for load more
                         productList.append(response.html); // Assuming backend returns HTML snippet
                     } else {
                         // Replace content for filter changes
                         productList.html(response.html);
                     }

                    // Update offset for the next load
                    offset += response.products.length; // Increase offset by the number of products received

                    // Show/hide Load More button based on results
                    if (response.products.length < limit) {
                        loadMoreContainer.hide(); // Hide button if less than limit returned
                    } else {
                        loadMoreContainer.show(); // Show button if full limit returned
                    }

                     if (!append && response.products.length === 0) {
                         // If initial/filtered load returned no results
                          productList.html('<div class="col-12"><p>No products found matching your criteria.</p></div>');
                          loadMoreContainer.hide();
                     }


                } else {
                    // Handle cases where response is not as expected
                    if (!append) {
                         productList.html('<div class="col-12"><p>Error loading products.</p>');
                         loadMoreContainer.hide();
                    }
                    console.error("Invalid response format:", response);
                }
            },
            error: function(xhr, status, error) {
                isLoading = false;
                loadingIndicator.hide();
                console.error("AJAX Error:", status, error);
                 if (!append) {
                     productList.html('<div class="col-12"><p>An error occurred while loading products.</p></div>');
                     loadMoreContainer.hide();
                 } else {
                      // Optional: Show a message near the load more button
                      loadMoreContainer.html('<p class="text-danger">Failed to load more products.</p>');
                 }
            }
        });
    }

    // --- Event Listeners ---

    // Listen for changes on filter elements (selects, inputs, checkboxes)
    filterForm.find('select, input[type="number"], input[type="checkbox"]').on('change', function() {
        offset = 0; // Reset offset on any filter change
        loadMoreContainer.show().html('<button class="btn btn-primary" id="loadMoreBtn">Load More Products</button>'); // Reset load more state
        loadProducts(false); // Load products, do not append
    });

     // Handle input keyup for price filters with a slight delay (optional debounce)
     let priceInputTimer;
     $('#min_price, #max_price').on('keyup', function() {
          clearTimeout(priceInputTimer);
          priceInputTimer = setTimeout(function() {
               offset = 0; // Reset offset
               loadMoreContainer.show().html('<button class="btn btn-primary" id="loadMoreBtn">Load More Products</button>'); // Reset load more state
               loadProducts(false); // Load products, do not append
          }, 500); // Wait 500ms after typing stops
     });


    // Listen for click on Load More button
    $(document).on('click', '#loadMoreBtn', function() {
        loadProducts(true); // Load products, append
    });

    // Listen for click on Reset button
    $('#resetFiltersBtn').on('click', function() {
        filterForm[0].reset(); // Reset the form elements
        offset = 0; // Reset offset
        loadMoreContainer.show().html('<button class="btn btn-primary" id="loadMoreBtn">Load More Products</button>'); // Reset load more state
        loadProducts(false); // Load initial products
    });

    // Initial load of products (if not loaded by backend initially)
    // If your backend already loads the first page, you don't need this here.
    // We ARE loading initially in the backend, so this is not needed unless
    // you want the JS to control the very first load as well.

    // Optional: Implement Infinite Scroll instead of a button
    // $(window).scroll(function() {
    //     if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) { // 100px from bottom
    //         loadProducts(true);
    //     }
    // });

});

<?php namespace App\Controllers;

use App\Models\ProductModel;
use App\Models\CollectionModel;
use App\Models\ColorModel;
use CodeIgniter\Controller;

class Products extends BaseController
{
    protected $productModel;
    protected $collectionModel;
    protected $colorModel;
    protected $perPage = 9; // Number of products per load

    public function __construct()
    {
        // Load models in the constructor or use dependency injection
        $this->productModel = new ProductModel();
        $this->collectionModel = new CollectionModel();
        $this->colorModel = new ColorModel();
    }

    // Method to display the initial product listing page
    public function index()
    {
        // Load initial products
        $products = $this->productModel->getFilteredProducts([], 0, $this->perPage);

        // Load collections and colors for filters
        $collections = $this->collectionModel->findAll();
        $colors = $this->colorModel->findAll();

        $data = [
            'title' => 'Product Catalog',
            'products' => $products,
            'collections' => $collections,
            'colors' => $colors,
        ];

        // Load the view
        return view('products/index', $data);
    }

    // Method to handle AJAX filter requests
    public function filterProducts()
    {
        // Ensure it's an AJAX POST request (optional but recommended)
        if (!$this->request->isAJAX() || $this->request->getMethod() !== 'post') {
             return $this->response->setStatusCode(405)->setJSON(['status' => 'error', 'message' => 'Method Not Allowed or Not AJAX']);
        }

        // Get filter data from the POST request
        $filters = $this->request->getPost();

        // Basic sanitization (more robust validation needed for production)
        $collectionId = $filters['collection_id'] ?? null;
        $priceSort = $filters['price_sort'] ?? null;
        $minPrice = $filters['min_price'] ?? null;
        $maxPrice = $filters['max_price'] ?? null;
        $selectedColors = $filters['colors'] ?? []; // Array of color IDs
        $offset = (int) ($filters['offset'] ?? 0);
        $limit = (int) ($filters['limit'] ?? $this->perPage);


        // Fetch filtered products using the model
        $products = $this->productModel->getFilteredProducts(
            [
                'collection_id' => $collectionId,
                'price_sort' => $priceSort,
                'min_price' => $minPrice,
                'max_price' => $maxPrice,
                'colors' => $selectedColors,
            ],
            $offset,
            $limit
        );

        // Prepare the HTML snippet for the products
        // We use the same partial view as the initial load
        $productHtml = view('products/_product_items', ['products' => $products, 'is_ajax' => true]);

        // Send the response back as JSON
        return $this->response->setJSON([
            'status' => 'success',
            'products' => $products, // Send raw data too (useful for JS offset tracking)
            'html' => $productHtml, // Send the rendered HTML
        ]);
    }

     // Method to handle tracking product views (Optional, as per outline)
     public function trackView($productId)
     {
         // Ensure it's an AJAX POST request for tracking (optional)
         if (!$this->request->isAJAX() || $this->request->getMethod() !== 'post') {
             return $this->response->setStatusCode(405)->setJSON(['status' => 'error', 'message' => 'Method Not Allowed or Not AJAX']);
         }

         // Increment the view count for the product
         $updated = $this->productModel->incrementViewCount($productId);

         if ($updated) {
             return $this->response->setJSON(['status' => 'success', 'message' => 'View tracked']);
         } else {
             return $this->response->setJSON(['status' => 'error', 'message' => 'Failed to track view']);
         }
     }

}

<?php namespace App\Models;

use CodeIgniter\Model;

class ProductModel extends Model
{
    protected $table      = 'products';
    protected $primaryKey = 'id';
    protected $useAutoIncrement = true;
    protected $returnType     = 'array'; // Or 'object'
    protected $useSoftDeletes = false;
    protected $allowedFields = ['product_name', 'uri', 'gross_price', 'net_price', 'view', 'created_at', 'updated_at']; // Add other fields as needed

    // CI4 automatically handles created_at/updated_at if columns exist
    protected $useTimestamps = true;
    protected $dateFormat    = 'datetime';
    protected $createdField  = 'created_at';
    protected $updatedField  = 'updated_at';
    protected $deletedField  = 'deleted_at'; // If you use soft deletes

    // Validation rules (recommended)
    protected $validationRules    = [];
    protected $validationMessages = [];
    protected $skipValidation     = false;

    /**
     * Fetches products based on filters and pagination.
     * Assumes many-to-many tables: product_collections, product_colors
     */
    public function getFilteredProducts(array $filters = [], int $offset = 0, int $limit = 9)
    {
        $builder = $this->builder(); // Uses the model's default table ('products')

        // --- Apply Filters ---

        // 1. Collection Filter (including "Most Viewed")
        if (!empty($filters['collection_id'])) {
            if ($filters['collection_id'] === 'most_viewed') {
                 // Handled in sorting below
            } else {
                // Filter by specific collection ID using the pivot table
                $builder->join('product_collections pc', 'pc.product_id = products.id');
                $builder->where('pc.collection_id', $filters['collection_id']);
                $builder->distinct(); // Use distinct to avoid duplicate products if they appear in product_collections multiple times (e.g., via different columns, though not expected here)
            }
        }

        // 2. Price Filter
        if (!empty($filters['min_price'])) {
            $builder->where('products.gross_price >=', $filters['min_price']);
        }
        if (!empty($filters['max_price'])) {
            $builder->where('products.gross_price <=', $filters['max_price']);
        }

        // 3. Color Filter
        if (!empty($filters['colors']) && is_array($filters['colors'])) {
            // Filter by selected color IDs using the pivot table
            $builder->join('product_colors pco', 'pco.product_id = products.id');
            $builder->whereIn('pco.color_id', $filters['colors']);
            $builder->distinct(); // Use distinct here as a product can have multiple selected colors
        }

        // --- Apply Sorting ---

        // Default sort
        $builder->orderBy('products.id', 'DESC'); // Or creation date, etc.

        // Price Sorting
        if (!empty($filters['price_sort'])) {
            if ($filters['price_sort'] === 'asc') {
                $builder->orderBy('products.gross_price', 'ASC');
            } elseif ($filters['price_sort'] === 'desc') {
                $builder->orderBy('products.gross_price', 'DESC');
            }
        }

         // "Most Viewed" Sorting (overrides other sorting if selected)
         if (!empty($filters['collection_id']) && $filters['collection_id'] === 'most_viewed') {
             $builder->orderBy('products.view', 'DESC');
         }


        // --- Apply Pagination ---
        $builder->limit($limit, $offset);

        // --- Execute Query ---
        $results = $builder->get()->getResultArray(); // Use getResultArray() for array return type

        return $results;
    }

     /**
      * Increments the view count for a given product ID.
      */
     public function incrementViewCount(int $productId): bool
     {
         // Ensure the product exists before attempting to update
         $product = $this->find($productId);

         if ($product) {
             // Use the Query Builder's update with increment
             return $this->db->table($this->table)
                             ->where('id', $productId)
                             ->increment('view', 1);
         }

         return false; // Product not found
     }

}

// --- Simple Models for Collections and Colors ---

<?php namespace App\Models;

use CodeIgniter\Model;

class CollectionModel extends Model
{
    protected $table      = 'collections';
    protected $primaryKey = 'id';
    protected $returnType = 'array'; // Or 'object'
    protected $useTimestamps = false; // Assuming no timestamps on this table
}

<?php namespace App\Models;

use CodeIgniter\Model;

class ColorModel extends Model
{
    protected $table      = 'colors';
    protected $primaryKey = 'id';
    protected $returnType = 'array'; // Or 'object'
    protected $useTimestamps = false; // Assuming no timestamps on this table
}

$routes->get('/', 'Products::index'); // Your default product listing page
$routes->post('products/filterProducts', 'Products::filterProducts'); // Route for AJAX POST requests
$routes->post('products/trackView/(:num)', 'Products::trackView/$1'); // Route for view tracking (optional)