{"id":1779,"date":"2026-04-27T12:15:13","date_gmt":"2026-04-27T12:15:13","guid":{"rendered":"https:\/\/aionsmartlife.com\/?page_id=1779"},"modified":"2026-05-06T10:53:25","modified_gmt":"2026-05-06T10:53:25","slug":"products-3","status":"publish","type":"page","link":"https:\/\/aionsmartlife.com\/index.php\/products-3\/","title":{"rendered":"products 3"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1779\" class=\"elementor elementor-1779\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8174d20 e-flex e-con-boxed e-con e-parent\" data-id=\"8174d20\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ee1930 elementor-widget elementor-widget-spacer\" data-id=\"6ee1930\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab6db6a e-con-full e-flex e-con e-parent\" data-id=\"ab6db6a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5fbce7e elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"5fbce7e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.2\/css\/all.min.css\">\r\n\r\n<style>\r\n  \/* \u2500\u2500 Config \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n  :root {\r\n    --green:   #69B242;\r\n    --blue:    #1D68AB;\r\n    --white:   #ffffff;\r\n    --tab-r:   555px;\r\n    --card-r:  0px;\r\n    --gap:     16px;\r\n  }\r\n\r\n  \/* \u2500\u2500 Reset scoped to this widget \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n  #wc-grid-widget * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  #wc-grid-widget {\r\n    font-family: 'Segoe UI', Arial, sans-serif;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* \u2500\u2500 Search Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n  #wc-grid-widget .search-wrap {\r\n    position: relative;\r\n    width: 100%;\r\n  }\r\n\r\n  #wc-grid-widget .search-wrap input {\r\n    width: 100%;\r\n    padding: 12px 50px 12px 18px;\r\n    border-radius: 555px;\r\n    border: 2px solid var(--green);\r\n    background: rgba(29,104,171,0.07);\r\n    color: #1a1a2e;\r\n    font-size: 14px;\r\n    outline: none;\r\n    transition: border-color .25s, box-shadow .25s;\r\n  }\r\n\r\n  #wc-grid-widget .search-wrap input:focus {\r\n    border-color: var(--blue);\r\n    box-shadow: 0 0 0 4px rgba(29,104,171,0.15);\r\n  }\r\n\r\n  #wc-grid-widget .search-wrap input::placeholder {\r\n    color: #aaa;\r\n  }\r\n\r\n  #wc-grid-widget .search-icon {\r\n    position: absolute;\r\n    right: 16px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    color: var(--green);\r\n    pointer-events: none;\r\n    font-size: 16px;\r\n  }\r\n\r\n  #wc-grid-widget .search-dropdown {\r\n    display: none;\r\n    position: absolute;\r\n    top: calc(100% + 6px);\r\n    left: 0;\r\n    right: 0;\r\n    background: #fff;\r\n    border: 1.5px solid var(--green);\r\n    border-radius: 14px;\r\n    box-shadow: 0 8px 32px rgba(29,104,171,0.15);\r\n    z-index: 999;\r\n    max-height: 320px;\r\n    overflow-y: auto;\r\n  }\r\n\r\n  #wc-grid-widget .search-dropdown.open {\r\n    display: block;\r\n  }\r\n\r\n  #wc-grid-widget .search-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 10px 14px;\r\n    cursor: pointer;\r\n    transition: background .18s;\r\n    border-bottom: 1px solid #f0f0f0;\r\n  }\r\n\r\n  #wc-grid-widget .search-item:last-child {\r\n    border-bottom: none;\r\n  }\r\n\r\n  #wc-grid-widget .search-item:hover {\r\n    background: rgba(105,178,66,0.08);\r\n  }\r\n\r\n  #wc-grid-widget .search-item img {\r\n    width: 40px;\r\n    height: 48px;\r\n    object-fit: contain;\r\n    border-radius: 6px;\r\n    background: #f5f5f5;\r\n  }\r\n\r\n  #wc-grid-widget .search-item-info {\r\n    flex: 1;\r\n  }\r\n\r\n  #wc-grid-widget .search-item-name {\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: #1a1a2e;\r\n  }\r\n\r\n  #wc-grid-widget .search-item-cat {\r\n    font-size: 11px;\r\n    color: var(--blue);\r\n  }\r\n\r\n  #wc-grid-widget .search-no-results {\r\n    padding: 16px;\r\n    text-align: center;\r\n    color: #999;\r\n    font-size: 13px;\r\n  }\r\n\r\n  \/* \u2500\u2500 Main Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n  #wc-grid-widget .layout {\r\n    display: flex;\r\n    gap: 20px;\r\n    align-items: flex-start;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* \u2500\u2500 Left: Category Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n  #wc-grid-widget .cat-tabs {\r\n    width: 18%;\r\n    min-width: 190px;\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n    position: sticky;\r\n    top: 20px;\r\n  }\r\n\r\n  #wc-grid-widget .cat-tab {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    width: 100%;\r\n    padding: 10px 14px;\r\n    border-radius: var(--tab-r);\r\n    border: 3px solid var(--green);\r\n    background: var(--green);\r\n    color: var(--white);\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: background .22s, border-color .22s, transform .15s, box-shadow .22s;\r\n    white-space: normal;\r\n    text-align: left;\r\n    word-wrap: break-word;\r\n    line-height: 1.2;\r\n  }\r\n\r\n  #wc-grid-widget .cat-tab i {\r\n    margin-right: 10px;\r\n    font-size: 14px;\r\n    min-width: 18px;\r\n    text-align: center;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  #wc-grid-widget .cat-tab:hover,\r\n  #wc-grid-widget .cat-tab.active {\r\n    background: var(--blue);\r\n    border-color: var(--green);\r\n    box-shadow: 0 4px 14px rgba(29,104,171,0.22);\r\n    transform: translateX(2px);\r\n  }\r\n\r\n  \/* \u2500\u2500 Right: Product Grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n  #wc-grid-widget .product-grid-wrap {\r\n    flex: 1;\r\n    min-width: 0;\r\n  }\r\n\r\n  #wc-grid-widget .grid-header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    margin-bottom: 14px;\r\n    gap: 10px;\r\n  }\r\n\r\n  #wc-grid-widget .grid-title {\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    color: #1a1a2e;\r\n    letter-spacing: -.2px;\r\n  }\r\n\r\n  #wc-grid-widget .product-count {\r\n    font-size: 12px;\r\n    color: var(--blue);\r\n    background: rgba(29,104,171,0.08);\r\n    padding: 4px 10px;\r\n    border-radius: 555px;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  #wc-grid-widget .grid-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  #wc-grid-widget .sort-select {\r\n    padding: 6px 12px;\r\n    border-radius: 555px;\r\n    border: 2px solid var(--green);\r\n    background: #fff;\r\n    color: #1a1a2e;\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    outline: none;\r\n    cursor: pointer;\r\n  }\r\n\r\n  #wc-grid-widget .product-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(6, 1fr);\r\n    gap: 18px;\r\n  }\r\n\r\n  .product-card {\r\n    width: 100%;\r\n    aspect-ratio: 1 \/ 1;\r\n    position: relative;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    background: transparent;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .product-card::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 48%;\r\n    background-color: var(--blue);\r\n    z-index: 1;\r\n  }\r\n\r\n  .card-image-wrap {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 65%;\r\n    z-index: 3;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 8px;\r\n  }\r\n\r\n  .card-image-wrap img {\r\n    max-width: 78%;\r\n    max-height: 100%;\r\n    object-fit: contain;\r\n  }\r\n\r\n  .card-title {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 40%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 8px 12px;\r\n    color: #ffffff;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    text-align: center;\r\n    text-transform: uppercase;\r\n    line-height: 1.2;\r\n    z-index: 4;\r\n  }\r\n\r\n  #wc-grid-widget .card-skeleton {\r\n    aspect-ratio: 1\/1;\r\n    background: #eee;\r\n  }\r\n\r\n  \/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n\r\n  @media (max-width: 1400px) {\r\n    #wc-grid-widget .product-grid {\r\n      grid-template-columns: repeat(5, 1fr);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 1200px) {\r\n    #wc-grid-widget .cat-tabs {\r\n      width: 20%;\r\n      min-width: 170px;\r\n    }\r\n\r\n    #wc-grid-widget .product-grid {\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 16px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 992px) {\r\n    #wc-grid-widget .layout {\r\n      gap: 16px;\r\n    }\r\n\r\n    #wc-grid-widget .cat-tabs {\r\n      width: 22%;\r\n      min-width: 150px;\r\n    }\r\n\r\n    #wc-grid-widget .cat-tab {\r\n      font-size: 11px;\r\n      padding: 9px 12px;\r\n    }\r\n\r\n    #wc-grid-widget .product-grid {\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 14px;\r\n    }\r\n\r\n    .card-title {\r\n      font-size: 10px;\r\n      padding: 6px 10px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    #wc-grid-widget .layout {\r\n      flex-direction: column;\r\n      gap: 14px;\r\n    }\r\n\r\n    #wc-grid-widget .cat-tabs {\r\n      width: 100%;\r\n      min-width: 100%;\r\n      flex-direction: row;\r\n      flex-wrap: wrap;\r\n      position: static;\r\n      gap: 8px;\r\n    }\r\n\r\n    #wc-grid-widget .cat-tab {\r\n      width: auto;\r\n      max-width: 100%;\r\n      padding: 8px 12px;\r\n      font-size: 11px;\r\n      border-width: 2px;\r\n    }\r\n\r\n    #wc-grid-widget .grid-header {\r\n      flex-direction: column;\r\n      align-items: flex-start;\r\n      gap: 10px;\r\n    }\r\n\r\n    #wc-grid-widget .grid-actions {\r\n      width: 100%;\r\n      justify-content: space-between;\r\n    }\r\n\r\n    #wc-grid-widget .sort-select {\r\n      font-size: 11px;\r\n      padding: 5px 10px;\r\n    }\r\n\r\n    #wc-grid-widget .grid-title {\r\n      font-size: 13px;\r\n    }\r\n\r\n    #wc-grid-widget .product-grid {\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 12px;\r\n    }\r\n\r\n    .card-title {\r\n      font-size: 10px;\r\n      line-height: 1.15;\r\n      padding: 6px 8px;\r\n    }\r\n\r\n    .card-image-wrap {\r\n      padding: 6px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    #wc-grid-widget {\r\n      gap: 12px;\r\n    }\r\n\r\n    #wc-grid-widget .search-wrap input {\r\n      padding: 11px 44px 11px 14px;\r\n      font-size: 13px;\r\n    }\r\n\r\n    #wc-grid-widget .search-icon {\r\n      right: 14px;\r\n      font-size: 14px;\r\n    }\r\n\r\n    #wc-grid-widget .product-grid {\r\n      gap: 10px;\r\n    }\r\n\r\n    .card-title {\r\n      font-size: 9px;\r\n      padding: 5px 6px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"wc-grid-widget\">\r\n  <div class=\"search-wrap\">\r\n    <input type=\"text\" id=\"wc-search\" placeholder=\"Search products\u2026\" autocomplete=\"off\" \/>\r\n    \r\n    <span class=\"search-icon\">\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\r\n        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\r\n      <\/svg>\r\n    <\/span>\r\n\r\n    <div class=\"search-dropdown\" id=\"search-dropdown\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"layout\">\r\n    <div class=\"cat-tabs\" id=\"cat-tabs\">\r\n      <div class=\"cat-tab-skeleton\"><\/div>\r\n      <div class=\"cat-tab-skeleton\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"product-grid-wrap\">\r\n\r\n      <div class=\"grid-header\">\r\n        <div class=\"grid-title\" id=\"grid-title\">All Products<\/div>\r\n\r\n        <div class=\"grid-actions\">\r\n          <select id=\"sort-products\" class=\"sort-select\">\r\n            <option value=\"oldest\">Oldest to Newest<\/option>\r\n            <option value=\"newest\">Newest to Oldest<\/option>\r\n            <option value=\"az\">A \u2192 Z<\/option>\r\n            <option value=\"za\">Z \u2192 A<\/option>\r\n          <\/select>\r\n\r\n          <div class=\"product-count\" id=\"product-count\">Loading\u2026<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"product-grid\" id=\"product-grid\">\r\n        <div class=\"card-skeleton\"><\/div>\r\n        <div class=\"card-skeleton\"><\/div>\r\n        <div class=\"card-skeleton\"><\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n\r\n  const BASE_URL        = window.location.origin;\r\n  const CONSUMER_KEY    = 'ck_5975039e27b10f072566c0a07e58e294cf6f086d';\r\n  const CONSUMER_SECRET = 'cs_9b8725b136a29a6439a0ae8abe17b99131439a06';\r\n  const PER_PAGE        = 100;\r\n\r\n  const iconMap = {\r\n    'all products': 'fa-solid fa-border-all',\r\n    'intercom solution & systems': 'fa-solid fa-phone-volume',\r\n    'security systems': 'fa-solid fa-shield-halved',\r\n    'smart switches': 'fa-solid fa-toggle-on',\r\n    'industrial and commercial solution': 'fa-solid fa-industry',\r\n    'smart lights': 'fa-solid fa-lightbulb',\r\n    'touch screens': 'fa-solid fa-tablet-screen-button'\r\n  };\r\n\r\n  function getIcon(name) {\r\n    const key = name.toLowerCase().trim();\r\n    return iconMap[key] || 'fa-solid fa-tag';\r\n  }\r\n\r\n  function apiURL(endpoint, params = {}) {\r\n    const p = new URLSearchParams({\r\n      consumer_key: CONSUMER_KEY,\r\n      consumer_secret: CONSUMER_SECRET,\r\n      per_page: PER_PAGE,\r\n      ...params\r\n    });\r\n\r\n    return `${BASE_URL}\/wp-json\/wc\/v3\/${endpoint}?${p}`;\r\n  }\r\n\r\n  async function wcGet(endpoint, params) {\r\n    const res = await fetch(apiURL(endpoint, params));\r\n\r\n    if (!res.ok) {\r\n      throw new Error(`WC API error: ${res.status}`);\r\n    }\r\n\r\n    return res.json();\r\n  }\r\n\r\n  let allProducts = [];\r\n  let categories = [];\r\n  let activeTab = 0;\r\n  let searchQuery = '';\r\n  let searchTimer = null;\r\n  let sortBy = 'oldest';\r\n\r\n  const catTabsEl   = document.getElementById('cat-tabs');\r\n  const gridEl      = document.getElementById('product-grid');\r\n  const gridTitleEl = document.getElementById('grid-title');\r\n  const countEl     = document.getElementById('product-count');\r\n  const searchInput = document.getElementById('wc-search');\r\n  const dropdown    = document.getElementById('search-dropdown');\r\n  const sortSelect  = document.getElementById('sort-products');\r\n\r\n  function renderTabs() {\r\n\r\n    catTabsEl.innerHTML = '';\r\n\r\n    const allTab = document.createElement('button');\r\n\r\n    allTab.className = 'cat-tab' + (activeTab === 0 ? ' active' : '');\r\n\r\n    allTab.innerHTML = `\r\n      <i class=\"${getIcon('all products')}\"><\/i>\r\n      <span>All Products<\/span>\r\n    `;\r\n\r\n    allTab.onclick = () => selectTab(0, 'All Products');\r\n\r\n    catTabsEl.appendChild(allTab);\r\n\r\n    categories.forEach(cat => {\r\n\r\n      const btn = document.createElement('button');\r\n\r\n      btn.className = 'cat-tab' + (activeTab === cat.id ? ' active' : '');\r\n\r\n      btn.innerHTML = `\r\n        <i class=\"${getIcon(cat.name)}\"><\/i>\r\n        <span>${cat.name}<\/span>\r\n      `;\r\n\r\n      btn.onclick = () => selectTab(cat.id, cat.name);\r\n\r\n      catTabsEl.appendChild(btn);\r\n\r\n    });\r\n\r\n  }\r\n\r\n  function selectTab(id, name) {\r\n    activeTab = id;\r\n    searchInput.value = '';\r\n    searchQuery = '';\r\n\r\n    dropdown.classList.remove('open');\r\n\r\n    gridTitleEl.textContent = name;\r\n\r\n    renderTabs();\r\n    renderProducts();\r\n  }\r\n\r\n  function filteredProducts() {\r\n\r\n    return allProducts.filter(p => {\r\n\r\n      const inCat =\r\n        activeTab === 0 ||\r\n        (p.categories || []).some(c => c.id === activeTab);\r\n\r\n      const inSearch =\r\n        !searchQuery ||\r\n        p.name.toLowerCase().includes(searchQuery.toLowerCase());\r\n\r\n      return inCat && inSearch;\r\n\r\n    });\r\n\r\n  }\r\n\r\n  function renderProducts(overrideList) {\r\n\r\n    let source =\r\n      overrideList !== undefined\r\n        ? [...overrideList]\r\n        : [...filteredProducts()];\r\n\r\n    if (sortBy === 'oldest') {\r\n      source.sort((a, b) =>\r\n        new Date(a.date_created) - new Date(b.date_created)\r\n      );\r\n    }\r\n\r\n    if (sortBy === 'newest') {\r\n      source.sort((a, b) =>\r\n        new Date(b.date_created) - new Date(a.date_created)\r\n      );\r\n    }\r\n\r\n    if (sortBy === 'az') {\r\n      source.sort((a, b) =>\r\n        a.name.localeCompare(b.name)\r\n      );\r\n    }\r\n\r\n    if (sortBy === 'za') {\r\n      source.sort((a, b) =>\r\n        b.name.localeCompare(a.name)\r\n      );\r\n    }\r\n\r\n    gridEl.innerHTML = '';\r\n\r\n    if (source.length === 0) {\r\n\r\n      gridEl.innerHTML = `\r\n        <div class=\"empty-state\">No products found.<\/div>\r\n      `;\r\n\r\n      countEl.textContent = '0 products';\r\n\r\n      return;\r\n    }\r\n\r\n    countEl.textContent =\r\n      `${source.length} product${source.length !== 1 ? 's' : ''}`;\r\n\r\n    source.forEach(p => {\r\n\r\n      const img = p.images?.[0]?.src || '';\r\n\r\n      const card = document.createElement('div');\r\n\r\n      card.className = 'product-card';\r\n\r\n      card.onclick = () => window.open(p.permalink, '_blank');\r\n\r\n      card.innerHTML = `\r\n        <div class=\"card-image-wrap\">\r\n          <img decoding=\"async\"\r\n            src=\"${img}\"\r\n            alt=\"${escHtml(p.name)}\"\r\n            onerror=\"this.src='data:image\/svg+xml,%3Csvg xmlns=\\\\'http:\/\/www.w3.org\/2000\/svg\\\\' width=\\\\'200\\\\' height=\\\\'200\\\\'%3E%3Crect width=\\\\'200\\\\' height=\\\\'200\\\\' fill=\\\\'%23f2f2f2\\\\'\/%3E%3C\/svg%3E'\"\r\n          \/>\r\n        <\/div>\r\n\r\n        <div class=\"card-title\">\r\n          ${escHtml(p.name)}\r\n        <\/div>\r\n      `;\r\n\r\n      gridEl.appendChild(card);\r\n\r\n    });\r\n\r\n  }\r\n\r\n  searchInput.addEventListener('input', () => {\r\n\r\n    clearTimeout(searchTimer);\r\n\r\n    searchQuery = searchInput.value.trim();\r\n\r\n    if (!searchQuery) {\r\n      dropdown.classList.remove('open');\r\n      renderProducts();\r\n      return;\r\n    }\r\n\r\n    searchTimer = setTimeout(() => {\r\n\r\n      const results = allProducts.filter(p =>\r\n        p.name.toLowerCase().includes(searchQuery.toLowerCase())\r\n      );\r\n\r\n      renderProducts(\r\n        results.filter(p =>\r\n          activeTab === 0 ||\r\n          (p.categories || []).some(c => c.id === activeTab)\r\n        )\r\n      );\r\n\r\n    }, 220);\r\n\r\n  });\r\n\r\n  sortSelect.addEventListener('change', () => {\r\n    sortBy = sortSelect.value;\r\n    renderProducts();\r\n  });\r\n\r\n  function escHtml(str) {\r\n    const d = document.createElement('div');\r\n    d.textContent = str;\r\n    return d.innerHTML;\r\n  }\r\n\r\n  async function init() {\r\n\r\n    try {\r\n\r\n      const cats = await wcGet(\r\n        'products\/categories',\r\n        { hide_empty: true }\r\n      );\r\n\r\n      categories = cats.filter(c =>\r\n        c.count > 0 &&\r\n        c.name !== 'Uncategorized'\r\n      );\r\n\r\n      renderTabs();\r\n\r\n      allProducts = await wcGet(\r\n        'products',\r\n        { status: 'publish' }\r\n      );\r\n\r\n      renderProducts();\r\n\r\n    } catch (err) {\r\n\r\n      console.error(err);\r\n\r\n    }\r\n\r\n  }\r\n\r\n  init();\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>All Products Oldest to NewestNewest to OldestA \u2192 ZZ \u2192 A Loading\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1779","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aionsmartlife.com\/index.php\/wp-json\/wp\/v2\/pages\/1779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aionsmartlife.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aionsmartlife.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aionsmartlife.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aionsmartlife.com\/index.php\/wp-json\/wp\/v2\/comments?post=1779"}],"version-history":[{"count":49,"href":"https:\/\/aionsmartlife.com\/index.php\/wp-json\/wp\/v2\/pages\/1779\/revisions"}],"predecessor-version":[{"id":1977,"href":"https:\/\/aionsmartlife.com\/index.php\/wp-json\/wp\/v2\/pages\/1779\/revisions\/1977"}],"wp:attachment":[{"href":"https:\/\/aionsmartlife.com\/index.php\/wp-json\/wp\/v2\/media?parent=1779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}