Implementation Guide: Displaying All Relevant Apps in Category Pages

IMPORTANT: Only include apps that already have existing pages (apps-*.html files). Do not create app cards for apps without corresponding pages.
NOTE: As requested, we are only updating category pages. No changes will be made to subcategory pages.

Overview

The goal is to update all category pages to display all relevant apps, making sure users can see apps from all subcategories within each category.

Step 1: Copy the update_app_display.js file

This JavaScript file has already been created and helps ensure all relevant app cards are properly displayed and sorted on category pages.

Step 2: Update Category Pages

  1. Display apps from ALL subcategories

    For each category page (like category-crypto.html), add app cards from ALL its subcategories, but only for apps that have existing pages.

    IMPORTANT: Make sure to include at least one or two apps from EACH subcategory. This is crucial for proper category representation.

    For example, in a Finance & Payments category page, you should include app cards for:

    Use the existing app card HTML structure and modify it for each app:

    <div class="app-card">
  <div class="card-logo">
    <img src="https://logo.clearbit.com/example.com" alt="App Name logo">
  </div>
  <div class="app-info">
    <div class="card-tags">
      <span class="tag">Category</span>
      <span class="country-tag">Country</span>
    </div>
    <h3>App Name</h3>
    <p class="reward">Reward description</p>
    <div class="rating">
      <span>★★★★★</span>
      <span class="rating-count">(XXk+ used)</span>
    </div>
    <a href="apps-appname.html" class="btn-primary">Get Referral Code</a>
  </div>
</div>
  2. Organize apps with category comments

    Add comments before each group of apps to keep your HTML organized:

    <!-- Digital Wallets Apps -->
<div class="app-card">...</div>
<div class="app-card">...</div>

<!-- Credit Cards Apps -->
<div class="app-card">...</div>
<div class="app-card">...</div>
  3. Ensure pagination is configured

    If your category has more than 12 app cards, make sure the pagination structure is present below the category-grid section:

    <div class="pagination">
  <button class="prev">Previous</button>
  <div class="page-numbers"></div>
  <button class="next">Next</button>
</div>

    This structure will automatically paginate app cards with 12 items per page when the pagination.js script is included.

  4. Add required JavaScript files

    Make sure to include these scripts before the closing </body> tag:

    <script src="pagination.js"></script>
<script src="update_app_display.js"></script>

    The pagination.js script handles the pagination functionality, and update_app_display.js ensures all app cards are properly displayed.

Note about pagination: The pagination system will automatically:

Existing App Pages Reference

Here's a list of existing app pages that you can use in the app cards:

Example Implementation: Food & Beverage Category

The category-food-beverage.html page has been updated to include apps from all its subcategories:

This ensures users can discover apps across all subcategories from the main category page.

Example Implementation: Crypto Category

The category-crypto.html page has been updated with the update_app_display.js script reference, which helps ensure all relevant apps are displayed properly.

Note: The update_app_display.js script will only display app cards that have valid links to existing pages. This prevents showing apps without corresponding detail pages.

Best Practices

List of Category Pages to Update