SELECT 
  cscart_pages.*, 
  cscart_page_descriptions.*, 
  cscart_seo_names.name as seo_name, 
  cscart_seo_names.path as seo_path, 
  cscart_tilda_pages.description AS tilda_description, 
  cscart_tilda_pages.page_id AS tilda_page_id, 
  cscart_tilda_pages.is_only_content AS is_only_content, 
  cscart_tilda_pages.project_id AS tilda_project_id, 
  cscart_tilda_pages.published AS tilda_published 
FROM 
  cscart_pages 
  INNER JOIN cscart_page_descriptions ON cscart_pages.page_id = cscart_page_descriptions.page_id 
  LEFT JOIN cscart_seo_names ON cscart_seo_names.object_id = cscart_pages.page_id 
  AND cscart_seo_names.type = 'a' 
  AND cscart_seo_names.dispatch = '' 
  AND cscart_seo_names.lang_code = 'en' 
  LEFT JOIN cscart_tilda_pages ON cscart_pages.page_id = cscart_tilda_pages.inner_page_id 
WHERE 
  cscart_pages.page_id = 40 
  AND cscart_page_descriptions.lang_code = 'en' 
  AND (
    cscart_pages.usergroup_ids = '' 
    OR FIND_IN_SET(0, cscart_pages.usergroup_ids) 
    OR FIND_IN_SET(1, cscart_pages.usergroup_ids)
  ) 
  AND cscart_pages.page_type IN ('T', 'L', 'B', 'F', 'Z')

Query time 0.00112

JSON explain

{
  "query_block": {
    "select_id": 1,
    "cost": 0.00357658,
    "const_condition": "1",
    "nested_loop": [
      {
        "table": {
          "table_name": "cscart_pages",
          "access_type": "const",
          "possible_keys": ["PRIMARY"],
          "key": "PRIMARY",
          "key_length": "3",
          "used_key_parts": ["page_id"],
          "ref": ["const"],
          "rows": 1,
          "filtered": 100
        }
      },
      {
        "table": {
          "table_name": "cscart_page_descriptions",
          "access_type": "const",
          "possible_keys": ["PRIMARY"],
          "key": "PRIMARY",
          "key_length": "9",
          "used_key_parts": ["page_id", "lang_code"],
          "ref": ["const", "const"],
          "rows": 1,
          "filtered": 100
        }
      },
      {
        "table": {
          "table_name": "cscart_seo_names",
          "access_type": "ref",
          "possible_keys": ["PRIMARY", "dispatch"],
          "key": "PRIMARY",
          "key_length": "206",
          "used_key_parts": ["object_id", "type", "dispatch", "lang_code"],
          "ref": ["const", "const", "const", "const"],
          "loops": 1,
          "rows": 1,
          "cost": 0.00183779,
          "filtered": 100,
          "attached_condition": "trigcond(cscart_seo_names.`type` = 'a' and cscart_seo_names.dispatch = '' and cscart_seo_names.lang_code = 'en')"
        }
      },
      {
        "table": {
          "table_name": "cscart_tilda_pages",
          "access_type": "const",
          "possible_keys": ["PRIMARY"],
          "key": "PRIMARY",
          "key_length": "3",
          "used_key_parts": ["inner_page_id"],
          "ref": ["const"],
          "loops": 1,
          "rows": 1,
          "cost": 0.00173879,
          "filtered": 100
        }
      }
    ]
  }
}

Result

page_id company_id parent_id id_path status page_type position timestamp usergroup_ids localization new_window use_avail_period avail_from_timestamp avail_till_timestamp facebook_obj_type lang_code page description meta_keywords meta_description page_title link seo_name seo_path tilda_description tilda_page_id is_only_content tilda_project_id tilda_published
40 0 0 40 A T 0 1734958800 0 0 N 0 0 activity en Suppliers <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Suppliers</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; } .search-container { text-align: center; padding: 20px; background: white; box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin-bottom: 20px; } .continent-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 15px; margin-bottom: 20px; } .continent-btn { padding: 10px 20px; border-radius: 50px; background: white; border: 2px solid #28A745; color: #28A745; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .continent-btn:hover, .continent-btn.active { background: #28A745; color: white; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.1); } .vendor-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 20px; max-width: 1200px; margin: 0 auto; min-height: 300px; position: relative; } .vendor-item { display: flex; align-items: center; background: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); overflow: hidden; transition: all 0.3s ease; text-decoration: none; position: relative; } .vendor-item:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .vendor-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #28A745, #70ab4b); } .vendor-logo { flex-shrink: 0; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; padding: 15px; } .vendor-logo img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; } .vendor-info { padding: 20px; flex-grow: 1; } .vendor-info h3 { margin: 0 0 5px 0; color: #333; font-size: 18px; } .vendor-info p { margin: 0; color: #6b7280; font-size: 14px; } .pagination { display: flex; justify-content: center; margin: 30px 0; gap: 10px; } .pagination button { padding: 10px 20px; border-radius: 50px; border: none; background: #28A745; color: white; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .pagination button:disabled { background: #e0e0e0; cursor: not-allowed; } #search-box { padding: 12px 20px; border-radius: 50px; border: 2px solid #e0e0e0; font-size: 16px; width: 60%; max-width: 500px; outline: none; transition: all 0.3s ease; } #search-box:focus { border-color: #28A745; } .search-btn { padding: 12px 25px; border-radius: 50px; background: #28A745; color: white; border: none; font-weight: 600; cursor: pointer; margin-left: 10px; transition: all 0.3s ease; } .search-btn:hover { background: #218838; transform: translateY(-2px); } .no-results { text-align: center; padding: 40px; grid-column: 1 / -1; color: #6b7280; } /* Modern Spinner Styles */ .loader-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); display: flex; justify-content: center; align-items: center; z-index: 100; border-radius: 16px; } .modern-spinner { width: 50px; height: 50px; display: inline-block; border: 3px solid rgba(40, 167, 69, 0.3); border-radius: 50%; border-top-color: #28A745; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loader-content { text-align: center; } .loader-text { margin-top: 15px; color: #28A745; font-weight: 500; } </style> </head> <body> <div style=" border-radius:30px; text-align: center; padding: 80px 20px; color: white; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; margin-bottom: 30px; " id="header-bg"> <h1 style="font-family: 'Poppins', sans-serif; font-size:50px; color:white; margin: 0; position: relative; z-index: 2; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">Suppliers</h1> <p style="color:white; font-size: 20px; position: relative; z-index: 2; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);">Find suppliers from around the world</p> <div style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius:30px; background-color: rgba(0,0,0,0.4); z-index: 1; "></div> </div> <div class="search-container" style="border-radius:30px;"> <input type="text" id="search-box" placeholder="Search suppliers..."> <button class="search-btn" onclick="fetchCompanies(1)">Search</button> </div> <div class="continent-filters" id="continent-filters"> <button class="continent-btn" onclick="filterByContinent('')">All</button> <button class="continent-btn" onclick="filterByContinent('Africa')">Africa</button> <button class="continent-btn" onclick="filterByContinent('Asia')">Asia</button> <button class="continent-btn" onclick="filterByContinent('Europe')">Europe</button> <button class="continent-btn" onclick="filterByContinent('North America')">North America</button> <button class="continent-btn" onclick="filterByContinent('South America')">South America</button> <button class="continent-btn" onclick="filterByContinent('Oceania')">Oceania</button> </div> <div class="vendor-list" id="company-list"></div> <div class="pagination" id="pagination"></div> <script> const iconImages = [ 'https://backendapi.gonje.com/public/gonje-storage/public/images/cart.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/cheers-in-love.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/cherry.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/desert.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/handbag.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/grocery.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/ice-cream.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/fridge-meals.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/fridge-items.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/fridge-sushi.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/fridge-pasta.svg', 'https://backendapi.gonje.com/public/gonje-storage/public/images/fridge-meal.svg' ]; // Food/restaurant related background images from Unsplash const headerBackgrounds = [ 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80', 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80', 'https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80', 'https://images.unsplash.com/photo-1537047902294-62a40c20a6ae?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80', 'https://images.unsplash.com/photo-1466978913421-dad2ebd01d17?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80', 'https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-1.2.1&auto=format&fit=crop&w=1940&q=80', 'https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80', 'https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&auto=format&fit=crop&w=1949&q=80' ]; let currentContinent = ''; let isLoading = false; function getRandomImage() { return iconImages[Math.floor(Math.random() * iconImages.length)]; } function setRandomHeaderBackground() { const randomBg = headerBackgrounds[Math.floor(Math.random() * headerBackgrounds.length)]; document.getElementById('header-bg').style.backgroundImage = `url('${randomBg}')`; } function showLoader() { isLoading = true; const companyList = document.getElementById('company-list'); companyList.innerHTML = ` <div class="loader-overlay"> <div class="loader-content"> <div class="modern-spinner"></div> <div class="loader-text">Searching suppliers...</div> </div> </div> `; } function hideLoader() { isLoading = false; const loader = document.querySelector('.loader-overlay'); if (loader) { loader.remove(); } } function filterByContinent(continent) { currentContinent = continent; fetchCompanies(1); // Update active button state const buttons = document.querySelectorAll('.continent-btn'); buttons.forEach(btn => { if (btn.textContent === continent || (continent === '' && btn.textContent === 'All')) { btn.classList.add('active'); } else { btn.classList.remove('active'); } }); } function fetchCompanies(page = 1) { if (isLoading) return; showLoader(); const searchBox = document.getElementById('search-box'); const searchQuery = searchBox.value.trim(); const continentQuery = currentContinent ? `&continent=${encodeURIComponent(currentContinent)}` : ''; const url = `/get_companies.php?page=${page}&search=${encodeURIComponent(searchQuery)}${continentQuery}`; fetch(url) .then(response => response.json()) .then(data => { hideLoader(); const companyList = document.getElementById('company-list'); const pagination = document.getElementById('pagination'); companyList.innerHTML = ''; pagination.innerHTML = ''; if (data.status === 'ok' && data.data.length > 0) { data.data.forEach(company => { const vendorItem = document.createElement('a'); vendorItem.classList.add('vendor-item'); vendorItem.href = company.storefront_url; let logoContent; if (company.logo_url) { logoContent = `<img src="${company.logo_url}" alt="${company.company_name} Logo">`; } else { logoContent = `<img src="${getRandomImage()}" alt="Default Icon">`; } vendorItem.innerHTML = ` <div class="vendor-logo">${logoContent}</div> <div class="vendor-info"> <h3>${company.company_name}</h3> <p>${company.country}</p> </div> `; companyList.appendChild(vendorItem); }); const totalPages = data.pagination.total_pages; const currentPage = data.pagination.current_page; if (totalPages > 1) { const prevButton = document.createElement('button'); prevButton.textContent = 'Previous'; prevButton.disabled = currentPage === 1; prevButton.addEventListener('click', () => fetchCompanies(currentPage - 1)); const nextButton = document.createElement('button'); nextButton.textContent = 'Next'; nextButton.disabled = currentPage === totalPages; nextButton.addEventListener('click', () => fetchCompanies(currentPage + 1)); const pageInfo = document.createElement('span'); pageInfo.style.margin = '0 15px'; pageInfo.style.display = 'flex'; pageInfo.style.alignItems = 'center'; pageInfo.textContent = `Page ${currentPage} of ${totalPages}`; pagination.appendChild(prevButton); pagination.appendChild(pageInfo); pagination.appendChild(nextButton); } } else { companyList.innerHTML = ` <div class="no-results"> <h3>No suppliers found</h3> <p>Try adjusting your search or filter criteria</p> </div> `; } }) .catch(error => { hideLoader(); console.error('Error:', error); document.getElementById('company-list').innerHTML = ` <div class="no-results"> <h3>Error loading suppliers</h3> <p>Please try again later</p> </div> `; }); } // Initialize with all suppliers window.onload = () => { setRandomHeaderBackground(); fetchCompanies(); document.getElementById('search-box').addEventListener('keypress', (e) => { if (e.key === 'Enter') { fetchCompanies(1); } }); }; </script> </body> </html> suppliers suppliers suppliers suppliers