I am developing the online web shop with codeigniter and design to make the product grid display to show the list of products in home page.
Here are the requirements:
1. Responsive Layout for pc, tablet and mobile.
2. each grid of product should show the name, image, category_name, rating with no of rating, tags, original price, special price (aka discounted price) of product and store name
3. just a suggestion, display 2 column each row for mobile, 3 for tablet and 6 for pc (prefer that adjustable based on the device width automatically)
4. tags of product maybe too long and no space to show all, so there should hide the exceeded tag by default and allow user to read more by hover or click on the + sign
5. name of product maybe also too long and split to two or more line to show, so limit the display length of name, maximun two row only.
6. for the final price display of variant product, show the min_price or special_price (Whichever is lower) with postfix "起", example of display: HK$ 120.0 起
7. for the final price display of single product, show the special_price without postfix, example of display: HK$ 120.0
8. format the price with prefix "HK$" and show to 1 decimal digit, example of display: HK$ 100.0
9. display the discount_percentage like a tag with "最高-" at the price below (if discount_amount not = 0), example of display: 最高 -5%
10. user can click on any tag, category and store name to browse the related page:
10.1: for tag: products/tags/<tag_name>
10.2: for category: products/category/<category_name>
10.3: for seller: sellers/seller_details/<seller_slug>

There are two type of product in shop, one is single product (the product without any variant/spec), another one is variant product (the product with spec selection)
Example of Data of Single Product from Server:
{
            "total": "1",
            "sales": "1",
            "stock_type": "",
            "is_prices_inclusive_tax": "0",
            "type": "simple_product",
            "attr_value_ids": "",
            "seller_rating": "0.0",
            "seller_slug": "閃互-flash-mutual",
            "seller_no_of_ratings": "0",
            "seller_profile": "https://yymart.com.hk/uploads/seller/flash-mutual-logo-uzdG3sf7.webp",
            "store_name": "閃互 Flash Mutual",
            "store_description": "閃互科技（國際）是一間專注於通過科技改善老年人生活質量的投資服務型公司。我們的核心目標是搭建一個多層次的安全守護網絡，通過科技與社會資源的結合，希望為長者創造一個更安全、更溫暖的生活環境，守護他們的幸福晚年。",
            "seller_id": "75",
            "seller_name": null,
            "id": "32",
            "stock": "",
            "name": "閃互「銀齡守護卡」：長者智慧守護卡",
            "category_id": "89",
            "short_description": "閃互「銀齡守護卡」溶合騰訊科技，配合GPS+北斗雙模定位系統，能在1米範圍內精確定位使用者位置。當緊急情況發生時，簡單的一個按鈕就能連通24小時待命的支援團隊能在平均20秒內作出回應。在香港，澳門及中國的中移動覆蓋的網路支援下，無論您的家人在茶餐廳閑坐還是在內地探親，守護從不間斷。",
            "slug": "閃互銀齡守護卡長者智慧守護卡-1",
            "description": "Example",
            "extra_description": "",
            "total_allowed_quantity": "",
            "status": "1",
            "deliverable_type": "1",
            "is_attachment_required": "0",
            "deliverable_zipcodes": "",
            "minimum_order_quantity": "1",
            "sku": "",
            "quantity_step_size": "1",
            "cod_allowed": "0",
            "row_order": "0",
            "rating": "0.00",
            "no_of_ratings": "0",
            "image": "https://yymart.com.hk/uploads/media/2025/銀齡守護卡_YY_Mart_Product_Thumbnail.webp",
            "is_returnable": "0",
            "is_cancelable": "0",
            "cancelable_till": "",
            "indicator": "0",
            "other_images": [],
            "video_type": "youtube",
            "video": "https://youtu.be/Do3IZvCvscw?si=1DL4Zosl9sXZmqzm",
            "tags": [
                "銀髮",
                "銀齡守護卡"
            ],
            "warranty_period": "",
            "guarantee_period": "",
            "made_in": "",
            "hsn_code": "",
            "download_allowed": "",
            "download_type": "",
            "download_link": "",
            "pickup_location": "",
            "brand": "",
            "availability": "",
            "product_slug": "閃互銀齡守護卡長者智慧守護卡-1",
            "brand_slug": null,
            "category_name": "輔助器材",
            "tax_percentage": "0",
            "tax_id": "0",
            "review_images": [],
            "attributes": [],
            "variants": [
                {
                    "id": "40",
                    "product_id": "32",
                    "attribute_value_ids": "",
                    "attribute_set": "",
                    "price": "3312",
                    "special_price": "0",
                    "sku": "",
                    "stock": "",
                    "weight": "0.01",
                    "height": "0",
                    "breadth": "0",
                    "length": "0",
                    "images": [],
                    "availability": "",
                    "exredeem_id": "",
                    "status": "1",
                    "date_added": "2025-07-02 23:14:40",
                    "variant_ids": "",
                    "attr_name": "",
                    "variant_values": "",
                    "swatche_type": "0",
                    "swatche_value": "0",
                    "images_md": [],
                    "images_sm": [],
                    "variant_relative_path": [],
                    "cart_count": "0"
                }
            ],
            "total_stock": "",
            "min_max_price": {
                "min_price": 3312,
                "max_price": 3312,
                "special_price": 0,
                "max_special_price": 0,
                "discount_in_percentage": 100
            },
            "relative_path": "uploads/media/2025/銀齡守護卡_YY_Mart_Product_Thumbnail.webp",
            "other_images_relative_path": [],
            "video_relative_path": "https://youtu.be/Do3IZvCvscw?si=1DL4Zosl9sXZmqzm",
            "total_product": "1",
            "deliverable_zipcodes_ids": "",
            "is_deliverable": true,
            "is_purchased": false,
            "discount_amount": 0,
            "discount_percentage": 0,
            "is_favorite": "0",
            "image_md": "https://yymart.com.hk/uploads/media/2025/銀齡守護卡_YY_Mart_Product_Thumbnail.webp",
            "image_sm": "https://yymart.com.hk/uploads/media/2025/銀齡守護卡_YY_Mart_Product_Thumbnail.webp",
            "other_images_sm": [],
            "other_images_md": [],
            "variant_attributes": []
        }
Example of the Data of Variant Product from Server:
{
            "total": "1",
            "sales": "4",
            "stock_type": "2",
            "is_prices_inclusive_tax": "0",
            "type": "variable_product",
            "attr_value_ids": "1,4,8,10",
            "seller_rating": "4.0",
            "seller_slug": "網上商店",
            "seller_no_of_ratings": "1",
            "seller_profile": "https://yymart.com.hk/uploads/seller/YYMART_Square_Black.webp",
            "store_name": "網上商店",
            "store_description": "",
            "seller_id": "2",
            "seller_name": "網上商店",
            "id": "14",
            "stock": "",
            "name": "Variant Product",
            "category_id": "12",
            "short_description": "For Test only",
            "slug": "variant-product-1",
            "description": "<p>Testing</p>",
            "extra_description": "",
            "total_allowed_quantity": "",
            "status": "1",
            "deliverable_type": "1",
            "is_attachment_required": "0",
            "deliverable_zipcodes": "",
            "minimum_order_quantity": "1",
            "sku": "",
            "quantity_step_size": "1",
            "cod_allowed": "0",
            "row_order": "0",
            "rating": "0.00",
            "no_of_ratings": "0",
            "image": "https://yymart.com.hk/uploads/media/2025/temp_product.png",
            "is_returnable": "0",
            "is_cancelable": "0",
            "cancelable_till": "",
            "indicator": "0",
            "other_images": [],
            "video_type": "",
            "video": "",
            "tags": [],
            "warranty_period": "",
            "guarantee_period": "",
            "made_in": "",
            "hsn_code": "",
            "download_allowed": "",
            "download_type": "",
            "download_link": "",
            "pickup_location": "",
            "brand": "APPLE",
            "availability": 1,
            "product_slug": "variant-product-1",
            "brand_slug": "apple",
            "category_name": "運動手環",
            "tax_percentage": "0",
            "tax_id": "0",
            "review_images": [],
            "attributes": [
                {
                    "ids": "8,10",
                    "value": " 256GB, 1TB",
                    "attr_name": "容量",
                    "name": "容量",
                    "swatche_type": "0,0",
                    "swatche_value": "0,0"
                },
                {
                    "ids": "1,4",
                    "value": " 100, 400",
                    "attr_name": "面額",
                    "name": "面額",
                    "swatche_type": "0,0",
                    "swatche_value": "0,0"
                }
            ],
            "variants": [
                {
                    "id": "19",
                    "product_id": "14",
                    "attribute_value_ids": "1,8",
                    "attribute_set": "",
                    "price": "3000",
                    "special_price": "2800",
                    "sku": "T001",
                    "stock": "5",
                    "weight": "0",
                    "height": "0",
                    "breadth": "0",
                    "length": "0",
                    "images": [],
                    "availability": "1",
                    "exredeem_id": "",
                    "status": "1",
                    "date_added": "2025-06-25 03:23:55",
                    "variant_ids": "1,8",
                    "attr_name": " 面額, 容量",
                    "variant_values": "100,256GB",
                    "swatche_type": "0,0",
                    "swatche_value": "0,0",
                    "images_md": [],
                    "images_sm": [],
                    "variant_relative_path": [],
                    "cart_count": "0"
                },
                {
                    "id": "20",
                    "product_id": "14",
                    "attribute_value_ids": "1,10",
                    "attribute_set": "",
                    "price": "8500",
                    "special_price": "7000",
                    "sku": "T002",
                    "stock": "5",
                    "weight": "0",
                    "height": "0",
                    "breadth": "0",
                    "length": "0",
                    "images": [],
                    "availability": "1",
                    "exredeem_id": "",
                    "status": "1",
                    "date_added": "2025-06-25 03:23:55",
                    "variant_ids": "1,10",
                    "attr_name": " 面額, 容量",
                    "variant_values": "100,1TB",
                    "swatche_type": "0,0",
                    "swatche_value": "0,0",
                    "images_md": [],
                    "images_sm": [],
                    "variant_relative_path": [],
                    "cart_count": "0"
                },
                {
                    "id": "21",
                    "product_id": "14",
                    "attribute_value_ids": "4,8",
                    "attribute_set": "",
                    "price": "6000",
                    "special_price": "5500",
                    "sku": "T003",
                    "stock": "5",
                    "weight": "0",
                    "height": "0",
                    "breadth": "0",
                    "length": "0",
                    "images": [],
                    "availability": "1",
                    "exredeem_id": "",
                    "status": "1",
                    "date_added": "2025-06-25 03:23:55",
                    "variant_ids": "4,8",
                    "attr_name": " 面額, 容量",
                    "variant_values": "400,256GB",
                    "swatche_type": "0,0",
                    "swatche_value": "0,0",
                    "images_md": [],
                    "images_sm": [],
                    "variant_relative_path": [],
                    "cart_count": "0"
                },
                {
                    "id": "22",
                    "product_id": "14",
                    "attribute_value_ids": "4,10",
                    "attribute_set": "",
                    "price": "13000",
                    "special_price": "10000",
                    "sku": "T004",
                    "stock": "5",
                    "weight": "0",
                    "height": "0",
                    "breadth": "0",
                    "length": "0",
                    "images": [],
                    "availability": "1",
                    "exredeem_id": "",
                    "status": "1",
                    "date_added": "2025-06-25 03:23:55",
                    "variant_ids": "4,10",
                    "attr_name": " 面額, 容量",
                    "variant_values": "400,1TB",
                    "swatche_type": "0,0",
                    "swatche_value": "0,0",
                    "images_md": [],
                    "images_sm": [],
                    "variant_relative_path": [],
                    "cart_count": "0"
                }
            ],
            "total_stock": 20,
            "min_max_price": {
                "min_price": 3000,
                "max_price": 13000,
                "special_price": 2800,
                "max_special_price": 10000,
                "discount_in_percentage": 6
            },
            "relative_path": "uploads/media/2025/temp_product.png",
            "other_images_relative_path": [],
            "video_relative_path": "",
            "total_product": "12",
            "deliverable_zipcodes_ids": "",
            "is_deliverable": true,
            "is_purchased": false,
            "discount_amount": 3000,
            "discount_percentage": 23,
            "is_favorite": "0",
            "image_md": "https://yymart.com.hk/uploads/media/2025/thumb-md/temp_product.png",
            "image_sm": "https://yymart.com.hk/uploads/media/2025/thumb-sm/temp_product.png",
            "other_images_sm": [],
            "other_images_md": [],
            "variant_attributes": []
        }


For reference, I have following javascript for the infinite load more function:
<script>
const productBatches = <?= $product_batches_json ?>; // array of arrays of products
const batchSize = <?= $batch_size ?>;
let currentBatchIndex = 0;

console.log(productBatches);

const productListElem = document.getElementById('product-list');
const loadingElem = document.getElementById('loading');
loadingElem.style.display = 'none';

function escapeHtml(text) {
    const map = {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'};
    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

function formatCurrency(value) {
    return 'HKD ' + Number(value).toFixed(2);
}

function buildProductHTML(product_row) {
    const variant_price = (product_row.variants[0].special_price > 0 && product_row.variants[0].special_price !== '') 
        ? product_row.variants[0].special_price 
        : product_row.variants[0].price;
    const special_price = product_row.variants[0].special_price;
    const price = product_row.variants[0].price;

    const name = escapeHtml(product_row.name);
    const category_name = escapeHtml(product_row.category_name);
    const seller_slug = escapeHtml(product_row.seller_slug);
    const store_name = escapeHtml(product_row.store_name);
    const slug = escapeHtml(product_row.slug);
    const image_sm = escapeHtml(product_row.image_sm);

    const tags_html = product_row.tags.map(tag => {
        const t = escapeHtml(tag);
        return `<span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50"><a href="<?= base_url('products/tags/') ?>${t}">${t}</a></span>`;
    }).join(' ');

    return `
    <div class="col-6 col-md-3 col-lg-2 product-grid" data-aos="fade-up" data-aos-duration="200">
        <div class="product-card h-100 rounded-16 position-relative transition-2" style="padding: 0px !important;">
            <div class="product-card__thumb rounded-8 position-relative">
                <a href="<?= base_url() ?>products/details/${slug}" class="w-100 h-100 flex-center"> 
                    <img src="${image_sm}" alt="${name}" class="w-auto rounded-8">
                </a>
            </div>
            <div class="product-card__content w-100">
                <div class="product-card-tags">
                    ${tags_html}
                </div>
                <h6 class="title text-lg fw-semibold" style="margin-bottom: 0px !important;">
                    <a href="<?= base_url() ?>products/details/${slug}" class="link text-line-2" tabindex="0">${name}</a>
                </h6>

                <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4">
                    <a href="<?= base_url() ?>products/category/${category_name}">${category_name}</a>
                </span>

                <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4">
                    <a href="<?= base_url() ?>sellers/seller_details/${seller_slug}">由${store_name}提供</a>
                </span>

                <div class="product-card__price mt-4 mb-4">
                    ${special_price !== '' && special_price > 0 && special_price !== price ? `<span class="text-gray-400 text-md fw-semibold text-decoration-line-through">${formatCurrency(price)}</span>` : ''}
                    <span class="text-heading text-md fw-semibold">${formatCurrency(variant_price)}</span>
                </div>
            </div>
        </div>
    </div>
    `;
}

function renderBatch(index) {
    if (index >= productBatches.length) {
        currentBatchIndex = 0; // Loop back to first batch
        index = 0;
    }
    const batch = productBatches[index];
    let html = '';
    batch.forEach(item => {
        html += buildProductHTML(item);
    });
    productListElem.insertAdjacentHTML('beforeend', html);

    // Optional: limit max products chunks to avoid too many nodes for performance
    const maxBatchesInDOM = 5; // e.g. max 5 batches ~ 30 products
    if(productListElem.children.length > maxBatchesInDOM * batchSize) {
        // Remove oldest batch:
        for(let i = 0; i < batchSize; i++) {
            if(productListElem.firstChild) productListElem.removeChild(productListElem.firstChild);
        }
    }
}

function onScroll() {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 400) {
        currentBatchIndex++;
        renderBatch(currentBatchIndex);
    }
}

// Initial render first batch
renderBatch(currentBatchIndex);
window.addEventListener('scroll', onScroll);
</script>

and the products data from server will be handled by following code to split the products with the batch size for load more function:
<?php
// Your full product array
$all_products = $this->data['products']['product'];

// Chunk size
$batch_size = 6;
$product_batches = array_chunk($all_products, $batch_size);

// Convert batches to JSON and safely pass to JS
$product_batches_json = json_encode($product_batches);
?>

Please based on the information above to redesign the product grid and list display and generate full set of code of HTML, CSS and JavaScript (if any)
the class or id name of elements should have the prefix "new-product-list-" to avoid any conflict to other styling