{"id":22,"date":"2026-05-05T03:48:16","date_gmt":"2026-05-05T03:48:16","guid":{"rendered":"https:\/\/almajeedtraders.com\/wp\/?page_id=22"},"modified":"2026-06-01T13:29:31","modified_gmt":"2026-06-01T13:29:31","slug":"our-products","status":"publish","type":"page","link":"https:\/\/almajeedtraders.com\/ar\/our-products\/","title":{"rendered":"Our Products"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"22\" class=\"elementor elementor-22\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f621665 elementor-section-full_width elementor-section-height-min-height elementor-section-height-default elementor-section-items-middle\" data-id=\"f621665\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c75f52b\" data-id=\"c75f52b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-20f2285 elementor-widget elementor-widget-heading\" data-id=\"20f2285\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Product<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a67f92e elementor-widget elementor-widget-hfe-breadcrumbs-widget\" data-id=\"a67f92e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hfe-breadcrumbs-widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<nav aria-label=\"Breadcrumb\"><ul class=\"hfe-breadcrumbs hfe-breadcrumbs-show-home\"><li class=\"hfe-breadcrumbs-item hfe-breadcrumbs-first\"><span class=\"hfe-breadcrumbs-home-icon\"><i aria-hidden=\"true\" class=\"fas fa-home\"><\/i><\/span><a href=\"https:\/\/almajeedtraders.com\/ar\"><span class=\"hfe-breadcrumbs-text\">Home<\/span><\/a><\/li><\/ul><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c2ae409 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c2ae409\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4b07701\" data-id=\"4b07701\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b5ac678 elementor-widget elementor-widget-heading\" data-id=\"b5ac678\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Product Categories<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e0110a5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"e0110a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35159c7 elementor-widget elementor-widget-html\" data-id=\"35159c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"shop\">\r\n\r\n  <div class=\"sidebar\">\r\n    <h3>Categories<\/h3>\r\n    <ul id=\"catList\">Loading...<\/ul>\r\n  <\/div>\r\n\r\n  <div class=\"main\">\r\n    <h3>Products<\/h3>\r\n    <div id=\"productGrid\">Select category<\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n*{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.shop{\r\n  display:flex;\r\n  gap:20px;\r\n  align-items:flex-start;\r\n}\r\n\r\n\/* =====================\r\n   SIDEBAR\r\n===================== *\/\r\n.sidebar{\r\n  width:280px;\r\n  padding:15px;\r\n  border-radius:12px;\r\n  background:#fff;\r\n  position:sticky;\r\n  top:20px;\r\n  max-height: calc(100vh - 40px); \/* screen height ke hisaab se *\/\r\n  overflow: hidden;               \/* sidebar card se bahar na jaye *\/\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.sidebar h3{\r\n  margin-top:0;\r\n  flex-shrink: 0; \/* heading fix rahegi *\/\r\n}\r\n\r\n.sidebar h3{\r\n  margin-top:0;\r\n}\r\n\r\n#catList{\r\n  padding:0;\r\n  margin-top:15px;\r\n  margin-bottom:0;\r\n  overflow-y: auto;        \/* \u2190 yeh add karo *\/\r\n  flex: 1;                 \/* \u2190 remaining space le ga *\/\r\n  scrollbar-width: thin;   \/* Firefox thin scrollbar *\/\r\n  scrollbar-color: #ccc transparent;\r\n}\r\n\r\n\/* Chrome ke liye custom scrollbar *\/\r\n#catList::-webkit-scrollbar{\r\n  width: 4px;\r\n}\r\n\r\n#catList::-webkit-scrollbar-thumb{\r\n  background: #ccc;\r\n  border-radius: 20px;\r\n}\r\n\r\n.sidebar li{\r\n  list-style:none;\r\n  padding:12px;\r\n  margin-bottom:10px;\r\n  background:#F1F3F7;\r\n  border-radius:10px;\r\n  cursor:pointer;\r\n  transition:0.3s;\r\n  font-size:15px;\r\n  font-weight:500;\r\n}\r\n\r\n.sidebar li:hover{\r\n  background:#ddd;\r\n}\r\n\r\n.sidebar li.active{\r\n  background:#FF7F7F;\r\n  color:#fff;\r\n}\r\n\r\n\/* =====================\r\n   MAIN\r\n===================== *\/\r\n.main{\r\n  flex:1;\r\n  background:#fff;\r\n  padding:20px;\r\n  border-radius:12px;\r\n  box-shadow:0 4px 20px rgba(0,0,0,0.08);\r\n}\r\n\r\n.main h3{\r\n  margin-top:0;\r\n}\r\n\r\n#productGrid{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:15px;\r\n}\r\n\r\n\/* =====================\r\n   PRODUCT CARD\r\n===================== *\/\r\n.card{\r\n  border:1px solid #eee;\r\n  padding:12px;\r\n  text-align:center;\r\n  background:#fff;\r\n  border-radius:12px;\r\n  text-decoration:none;\r\n  color:#000;\r\n  transition:0.3s;\r\n}\r\n\r\n.card:hover{\r\n  transform:translateY(-3px);\r\n  box-shadow:0 5px 15px rgba(0,0,0,0.08);\r\n}\r\n\r\n.card img{\r\n  width:100%;\r\n  height:180px;\r\n  object-fit:contain;\r\n}\r\n\r\n.card h4{\r\n  margin-top:10px;\r\n  font-size:16px;\r\n  line-height:1.4;\r\n}\r\n\r\n\/* =====================\r\n   TABLET\r\n===================== *\/\r\n@media(max-width:991px){\r\n\r\n  .shop{\r\n    flex-direction:column;\r\n  }\r\n\r\n  .sidebar{\r\n    width:100%;\r\n    position:relative;\r\n    top:auto;\r\n  }\r\n\r\n  #catList{\r\n    display:flex;\r\n    gap:10px;\r\n    overflow-x:auto;\r\n    white-space:nowrap;\r\n    padding-bottom:5px;\r\n  }\r\n\r\n  #catList::-webkit-scrollbar{\r\n    height:5px;\r\n  }\r\n\r\n  #catList::-webkit-scrollbar-thumb{\r\n    background:#ccc;\r\n    border-radius:20px;\r\n  }\r\n\r\n  .sidebar li{\r\n    margin-bottom:0;\r\n    min-width:max-content;\r\n  }\r\n\r\n  .main{\r\n    width:100%;\r\n  }\r\n\r\n  #productGrid{\r\n    grid-template-columns:repeat(2,1fr);\r\n  }\r\n\r\n}\r\n\r\n\/* =====================\r\n   MOBILE\r\n===================== *\/\r\n@media(max-width:576px){\r\n\r\n  .shop{\r\n    gap:15px;\r\n  }\r\n\r\n  .sidebar{\r\n    padding:12px;\r\n  }\r\n\r\n  .main{\r\n    padding:15px;\r\n  }\r\n\r\n  #productGrid{\r\n    grid-template-columns:1fr;\r\n    gap:12px;\r\n  }\r\n\r\n  .card{\r\n    padding:10px;\r\n  }\r\n\r\n  .card img{\r\n    height:160px;\r\n  }\r\n\r\n  .card h4{\r\n    font-size:15px;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n\r\nconst ajaxurl = window.location.origin + \"\/wp\/wp-admin\/admin-ajax.php\";\r\n\r\nlet firstCatId = null;\r\n\r\n\/* =====================\r\n   LOAD CATEGORIES\r\n===================== *\/\r\nfunction loadCats(){\r\n\r\n  fetch(ajaxurl + \"?action=shop_categories\")\r\n  .then(r => r.json())\r\n  .then(data => {\r\n\r\n    let html = \"\";\r\n    firstCatId = null;\r\n\r\n    data.forEach((c) => {\r\n\r\n      \/\/ Ignore Uncategorized\r\n      if(c.name.toLowerCase() === \"uncategorized\") return;\r\n\r\n      \/\/ First category auto select\r\n      if(firstCatId === null){\r\n        firstCatId = c.id;\r\n      }\r\n\r\n      html += `\r\n        <li data-id=\"${c.id}\" onclick=\"loadProducts(${c.id}, this)\">\r\n          ${c.name}\r\n        <\/li>\r\n      `;\r\n    });\r\n\r\n    document.getElementById(\"catList\").innerHTML = html;\r\n\r\n    \/\/ Auto load first category\r\n    if(firstCatId){\r\n\r\n      const firstLi = document.querySelector(\"#catList li\");\r\n\r\n      if(firstLi){\r\n        loadProducts(firstCatId, firstLi);\r\n      }\r\n\r\n    }\r\n\r\n  });\r\n\r\n}\r\n\r\n\/* =====================\r\n   LOAD PRODUCTS\r\n===================== *\/\r\nwindow.loadProducts = function(catID, el){\r\n\r\n  document.querySelectorAll(\"#catList li\").forEach(li => li.classList.remove(\"active\"));\r\n\r\n  if(el){\r\n    el.classList.add(\"active\");\r\n\r\n    \/\/ mobile auto scroll active category\r\n    el.scrollIntoView({\r\n      behavior:\"smooth\",\r\n      inline:\"center\",\r\n      block:\"nearest\"\r\n    });\r\n  }\r\n\r\n  document.getElementById(\"productGrid\").innerHTML = \"Loading...\";\r\n\r\n  let formData = new FormData();\r\n  formData.append(\"action\",\"shop_products\");\r\n  formData.append(\"cat_id\",catID);\r\n\r\n  fetch(ajaxurl,{\r\n    method:\"POST\",\r\n    body:formData\r\n  })\r\n  .then(r => r.json())\r\n  .then(data => {\r\n\r\n    let html = \"\";\r\n\r\n    if(data.length === 0){\r\n      html = \"<p>No products found<\/p>\";\r\n    }else{\r\n\r\n      data.forEach(p => {\r\n\r\n        html += `\r\n          <a href=\"${p.link}\" class=\"card\">\r\n            <img decoding=\"async\" src=\"${p.image}\" alt=\"${p.title}\">\r\n            <h4>${p.title}<\/h4>\r\n          <\/a>\r\n        `;\r\n\r\n      });\r\n\r\n    }\r\n\r\n    document.getElementById(\"productGrid\").innerHTML = html;\r\n\r\n  });\r\n\r\n}\r\n\r\n\/* INIT *\/\r\ndocument.addEventListener(\"DOMContentLoaded\", loadCats);\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Our Product Home Product Categories Categories Loading&#8230; Products Select category<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/almajeedtraders.com\/ar\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/almajeedtraders.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/almajeedtraders.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/almajeedtraders.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/almajeedtraders.com\/ar\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":293,"href":"https:\/\/almajeedtraders.com\/ar\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":2155,"href":"https:\/\/almajeedtraders.com\/ar\/wp-json\/wp\/v2\/pages\/22\/revisions\/2155"}],"wp:attachment":[{"href":"https:\/\/almajeedtraders.com\/ar\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}