{"id":461,"date":"2026-01-04T00:10:26","date_gmt":"2026-01-04T00:10:26","guid":{"rendered":"https:\/\/simak-keramika.si\/?page_id=461"},"modified":"2026-03-18T12:57:27","modified_gmt":"2026-03-18T12:57:27","slug":"negozio","status":"publish","type":"page","link":"https:\/\/simak-keramika.si\/it\/negozio\/","title":{"rendered":"Negozio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"461\" class=\"elementor elementor-461\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7874676 e-con-full e-flex e-con e-parent\" data-id=\"7874676\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6b2b5bc elementor-widget elementor-widget-html\" data-id=\"6b2b5bc\" 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<!-- SIMAK Keramika - Trgovina -->\r\n<!-- Kopiraj celotno kodo v WordPress Custom HTML widget -->\r\n\r\n<style>\r\n\/* ===== TRGOVINA PAGE STYLES ===== *\/\r\n\/* Primary color: Magenta #ff2d8c *\/\r\n.simak-trgovina * {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n\/* Strong reset for WP themes *\/\r\n.simak-trgovina input,\r\n.simak-trgovina select,\r\n.simak-trgovina button,\r\n.simak-trgovina a {\r\n  font-family: inherit !important;\r\n  font-size: inherit !important;\r\n  line-height: inherit !important;\r\n  color: inherit !important;\r\n  max-width: none !important;\r\n}\r\n\r\n.simak-trgovina input {\r\n  background-image: none !important;\r\n}\r\n\r\n.simak-trgovina {\r\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n  color: #1f2937;\r\n  line-height: 1.6;\r\n}\r\n\r\n.simak-trgovina-container {\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n  padding: 32px 24px 64px;\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n  .simak-trgovina-container {\r\n    padding: 48px 32px 80px;\r\n  }\r\n}\r\n\r\n\/* Toolbar *\/\r\n.simak-toolbar {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 16px;\r\n  margin-bottom: 24px;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n  .simak-toolbar {\r\n    flex-direction: row;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n  }\r\n}\r\n\r\n\/* Search *\/\r\n.simak-search {\r\n  position: relative !important;\r\n  flex: 1 1 auto !important;\r\n  min-width: 240px;\r\n}\r\n\r\n.simak-search-input {\r\n  display: block !important;\r\n  width: 100% !important;\r\n  height: 44px;\r\n  padding: 0 14px 0 40px !important;\r\n  border: 1px solid #e5e7eb !important;\r\n  border-radius: 8px !important;\r\n  font-size: 0.875rem !important;\r\n  background: #ffffff !important;\r\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n  -webkit-appearance: none !important;\r\n  appearance: none !important;\r\n  outline: none;\r\n  line-height: 44px !important;\r\n}\r\n\r\n.simak-search-input:focus {\r\n  border-color: #ff2d8c !important;\r\n  box-shadow: 0 0 0 3px rgba(255, 45, 140, 0.12) !important;\r\n}\r\n\r\n.simak-search-input::placeholder {\r\n  color: #9ca3af;\r\n  line-height: normal;\r\n}\r\n\r\n.simak-search-icon {\r\n  position: absolute !important;\r\n  left: 14px !important;\r\n  top: 50% !important;\r\n  transform: translateY(-50%) !important;\r\n  width: 18px;\r\n  height: 18px;\r\n  color: #9ca3af;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* Select *\/\r\n.simak-select {\r\n  display: block !important;\r\n  width: 100% !important;\r\n  height: 44px;\r\n  padding: 0 40px 0 14px !important;\r\n  border: 1px solid #e5e7eb !important;\r\n  border-radius: 8px !important;\r\n  font-size: 0.875rem !important;\r\n  background: #ffffff url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'\/%3E%3C\/svg%3E\") no-repeat right 12px center !important;\r\n  cursor: pointer;\r\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n  -webkit-appearance: none !important;\r\n  -moz-appearance: none !important;\r\n  appearance: none !important;\r\n  line-height: 44px !important;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n  .simak-select {\r\n    width: auto !important;\r\n    min-width: 220px;\r\n  }\r\n}\r\n\r\n.simak-select:focus {\r\n  border-color: #ff2d8c !important;\r\n  box-shadow: 0 0 0 3px rgba(255, 45, 140, 0.12) !important;\r\n  outline: none;\r\n}\r\n\r\n\/* Results count *\/\r\n.simak-results-count {\r\n  font-size: 0.875rem;\r\n  color: #6b7280;\r\n  margin-bottom: 24px;\r\n}\r\n\r\n\/* Products Grid *\/\r\n.simak-products-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  gap: 16px;\r\n}\r\n\r\n@media (min-width: 640px) {\r\n  .simak-products-grid {\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n  .simak-products-grid {\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    gap: 24px;\r\n  }\r\n}\r\n\r\n\/* Product Card *\/\r\n.simak-product-card {\r\n  background: #ffffff;\r\n  border-radius: 12px;\r\n  border: 1px solid #e5e7eb;\r\n  overflow: hidden;\r\n  transition:\r\n    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),\r\n    box-shadow 480ms cubic-bezier(0.22, 1, 0.36, 1),\r\n    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1);\r\n  will-change: transform, box-shadow;\r\n  transform: translate3d(0, 0, 0);\r\n  backface-visibility: hidden;\r\n  min-width: 0;\r\n}\r\n\r\n.simak-product-card:hover {\r\n  transform: translate3d(0, -5px, 0);\r\n  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.simak-product-image {\r\n  position: relative;\r\n  aspect-ratio: 1;\r\n  overflow: hidden;\r\n  display: block;\r\n}\r\n\r\n.simak-product-image img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);\r\n  will-change: transform;\r\n  transform: translate3d(0, 0, 0) scale(1);\r\n  backface-visibility: hidden;\r\n}\r\n\r\n.simak-product-card:hover .simak-product-image img {\r\n  transform: translate3d(0, 0, 0) scale(1.05);\r\n}\r\n\r\n.simak-product-badge {\r\n  position: absolute;\r\n  top: 12px;\r\n  left: 12px;\r\n  background: #ff2d8c;\r\n  color: #ffffff;\r\n  padding: 4px 10px;\r\n  border-radius: 6px;\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n  z-index: 2;\r\n}\r\n\r\n.simak-product-badge-sale {\r\n  background: #fbbf24;\r\n  color: #78350f;\r\n}\r\n\r\n.simak-product-badge-last {\r\n  background: #ff2d8c !important;\r\n  color: #ffffff !important;\r\n}\r\n\r\n\/* Favorite button *\/\r\n.simak-product-favorite {\r\n  position: absolute;\r\n  top: 12px;\r\n  right: 12px;\r\n  width: 36px;\r\n  height: 36px;\r\n  background: #ffffff;\r\n  border: none;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\r\n  opacity: 0;\r\n  transform: translateX(8px);\r\n  transition: all 0.3s ease;\r\n  z-index: 2;\r\n}\r\n\r\n.simak-product-card:hover .simak-product-favorite {\r\n  opacity: 1;\r\n  transform: translateX(0);\r\n}\r\n\r\n.simak-product-favorite:hover {\r\n  background: #fdf2f8;\r\n}\r\n\r\n.simak-product-favorite svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  color: #6b7280;\r\n}\r\n\r\n.simak-product-favorite:hover svg {\r\n  color: #ff2d8c;\r\n}\r\n\r\n.simak-product-body {\r\n  padding: 16px;\r\n}\r\n\r\n.simak-product-name {\r\n  font-weight: 500;\r\n  font-size: 0.875rem;\r\n  color: #1f2937;\r\n  margin-bottom: 8px;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n  line-height: 1.4;\r\n  min-height: 2.8em;\r\n}\r\n\r\n.simak-product-name a {\r\n  color: inherit;\r\n  text-decoration: none;\r\n  transition: color 0.2s ease;\r\n}\r\n\r\n.simak-product-name a:hover {\r\n  color: #ff2d8c;\r\n}\r\n\r\n\/* Price row with action button *\/\r\n.simak-product-price-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 8px;\r\n}\r\n\r\n.simak-product-price {\r\n  font-size: 1.125rem;\r\n  font-weight: 700;\r\n  color: #ff2d8c;\r\n}\r\n\r\n.simak-product-unit {\r\n  font-size: 0.875rem;\r\n  color: #6b7280;\r\n  font-weight: 400;\r\n}\r\n\r\n\/* Action button *\/\r\n.simak-trgovina .simak-btn-add {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 8px 12px;\r\n  background: #ff2d8c;\r\n  color: #ffffff !important;\r\n  border: none;\r\n  border-radius: 6px;\r\n  font-size: 0.875rem;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n  white-space: nowrap;\r\n  height: 36px;\r\n  text-decoration: none;\r\n  flex: 0 0 auto;\r\n}\r\n\r\n.simak-trgovina .simak-btn-add:hover {\r\n  background: #e6297e;\r\n  transform: translateY(-1px);\r\n}\r\n\r\n.simak-product-stock {\r\n  margin-top: 8px;\r\n  font-size: 0.75rem;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n.simak-product-stock-dot {\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 50%;\r\n}\r\n\r\n.simak-product-stock.in-stock .simak-product-stock-dot {\r\n  background: #16a34a;\r\n}\r\n\r\n.simak-product-stock.in-stock {\r\n  color: #16a34a;\r\n}\r\n\r\n\/* Pagination *\/\r\n.simak-pagination {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  margin-top: 48px;\r\n  padding-top: 32px;\r\n  border-top: 1px solid #e5e7eb;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.simak-pagination-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 6px;\r\n  padding: 10px 16px;\r\n  background: #ffffff;\r\n  color: #4b5563;\r\n  border: 1px solid #e5e7eb;\r\n  border-radius: 8px;\r\n  font-size: 0.875rem;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n  text-decoration: none;\r\n}\r\n\r\n.simak-pagination-btn:hover {\r\n  background: #fdf2f8;\r\n  border-color: #ff2d8c;\r\n  color: #ff2d8c;\r\n}\r\n\r\n.simak-pagination-btn.disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.simak-pagination-btn svg {\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n\r\n.simak-pagination-pages {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n}\r\n\r\n.simak-pagination-page {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: 40px;\r\n  height: 40px;\r\n  padding: 0 12px;\r\n  background: #ffffff;\r\n  color: #4b5563;\r\n  border: 1px solid #e5e7eb;\r\n  border-radius: 8px;\r\n  font-size: 0.875rem;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n  text-decoration: none;\r\n}\r\n\r\n.simak-pagination-page:hover {\r\n  background: #fdf2f8;\r\n  border-color: #ff2d8c;\r\n  color: #ff2d8c;\r\n}\r\n\r\n.simak-pagination-page.active {\r\n  background: #ff2d8c;\r\n  border-color: #ff2d8c;\r\n  color: #ffffff !important;\r\n}\r\n\r\n.simak-pagination-page.active * {\r\n  color: #ffffff !important;\r\n}\r\n\r\n.simak-pagination-ellipsis {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 40px;\r\n  height: 40px;\r\n  color: #9ca3af;\r\n  font-size: 0.875rem;\r\n}\r\n\r\n\/* States *\/\r\n.simak-no-results,\r\n.simak-loading,\r\n.simak-error {\r\n  text-align: center;\r\n  padding: 64px 24px;\r\n  color: #6b7280;\r\n  grid-column: 1 \/ -1;\r\n}\r\n\r\n.simak-no-results p,\r\n.simak-loading p,\r\n.simak-error p {\r\n  font-size: 1.125rem;\r\n  margin-bottom: 24px;\r\n}\r\n\r\n.simak-btn-reset {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  background: #ffffff;\r\n  color: #1f2937;\r\n  border: 1px solid #e5e7eb;\r\n  border-radius: 8px;\r\n  font-size: 0.875rem;\r\n  font-weight: 500;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n.simak-btn-reset:hover {\r\n  background: #fdf2f8;\r\n  border-color: #ff2d8c;\r\n  color: #ff2d8c;\r\n}\r\n<\/style>\r\n\r\n<div class=\"simak-trgovina\" id=\"simak-trgovina-root\">\r\n  <div class=\"simak-trgovina-container\">\r\n\r\n    <div class=\"simak-toolbar\">\r\n      <div class=\"simak-search\">\r\n        <svg class=\"simak-search-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg>\r\n        <input type=\"text\" inputmode=\"search\" class=\"simak-search-input\" placeholder=\"I\u0161\u010di izdelke...\" autocomplete=\"off\" \/>\r\n      <\/div>\r\n\r\n      <select class=\"simak-select\" id=\"category-select\">\r\n        <option value=\"all\">Vse kategorije<\/option>\r\n      <\/select>\r\n\r\n      <select class=\"simak-select\" id=\"sort-select\">\r\n        <option value=\"newest\">Najnovej\u0161e<\/option>\r\n        <option value=\"price-asc\">Cena: nara\u0161\u010dajo\u010de<\/option>\r\n        <option value=\"price-desc\">Cena: padajo\u010de<\/option>\r\n        <option value=\"name\">Po imenu<\/option>\r\n      <\/select>\r\n    <\/div>\r\n\r\n    <p class=\"simak-results-count\">Nalagam izdelke...<\/p>\r\n\r\n    <div class=\"simak-products-grid\"><\/div>\r\n\r\n    <nav class=\"simak-pagination\" aria-label=\"Paginacija\"><\/nav>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  const root = document.getElementById('simak-trgovina-root');\r\n  if (!root) return;\r\n\r\n  const searchInput = root.querySelector('.simak-search-input');\r\n  const categorySelect = root.querySelector('#category-select');\r\n  const sortSelect = root.querySelector('#sort-select');\r\n  const resultsCount = root.querySelector('.simak-results-count');\r\n  const productsGrid = root.querySelector('.simak-products-grid');\r\n  const pagination = root.querySelector('.simak-pagination');\r\n\r\n  const state = {\r\n    page: 1,\r\n    perPage: 12,\r\n    search: '',\r\n    category: 'all',\r\n    sort: 'newest',\r\n    total: 0,\r\n    totalPages: 1,\r\n    allProducts: [],\r\n    filteredProducts: [],\r\n    categories: [],\r\n    catalogAbortController: null,\r\n    categoriesAbortController: null\r\n  };\r\n\r\n  const SERVER_PER_PAGE = 100;\r\n\r\n  function getRestRoot() {\r\n    if (window.wpApiSettings && window.wpApiSettings.root) {\r\n      return String(window.wpApiSettings.root).replace(\/\\\/$\/, '');\r\n    }\r\n\r\n    const apiLink = document.querySelector('link[rel=\"https:\/\/api.w.org\/\"]');\r\n    if (apiLink && apiLink.href) {\r\n      return apiLink.href.replace(\/\\\/$\/, '');\r\n    }\r\n\r\n    return window.location.origin.replace(\/\\\/$\/, '') + '\/wp-json';\r\n  }\r\n\r\n  const REST_ROOT = getRestRoot();\r\n  const PRODUCTS_ENDPOINT = REST_ROOT + '\/wc\/store\/v1\/products';\r\n  const CATEGORIES_ENDPOINT = REST_ROOT + '\/wc\/store\/v1\/products\/categories';\r\n\r\n  function escapeHtml(value) {\r\n    return String(value == null ? '' : value)\r\n      .replace(\/&\/g, '&amp;')\r\n      .replace(\/<\/g, '&lt;')\r\n      .replace(\/>\/g, '&gt;')\r\n      .replace(\/\"\/g, '&quot;')\r\n      .replace(\/'\/g, '&#039;');\r\n  }\r\n\r\n  function decodeHtml(value) {\r\n    const textarea = document.createElement('textarea');\r\n    textarea.innerHTML = String(value == null ? '' : value);\r\n    return textarea.value;\r\n  }\r\n\r\n  function debounce(fn, delay) {\r\n    let timer;\r\n    return function () {\r\n      const args = arguments;\r\n      clearTimeout(timer);\r\n      timer = setTimeout(function () {\r\n        fn.apply(null, args);\r\n      }, delay);\r\n    };\r\n  }\r\n\r\n  function minorToNumber(value, minorUnit) {\r\n    const num = Number(value || 0);\r\n    const decimals = Number.isFinite(Number(minorUnit)) ? Number(minorUnit) : 2;\r\n    return num \/ Math.pow(10, decimals);\r\n  }\r\n\r\n  function getProductPriceNumber(product) {\r\n    if (!product || !product.prices) return 0;\r\n    const decimals = Number.isFinite(Number(product.prices.currency_minor_unit))\r\n      ? Number(product.prices.currency_minor_unit)\r\n      : 2;\r\n    return minorToNumber(product.prices.price, decimals);\r\n  }\r\n\r\n  function formatPrice(prices) {\r\n    if (!prices) return '';\r\n\r\n    const decimals = Number.isFinite(Number(prices.currency_minor_unit))\r\n      ? Number(prices.currency_minor_unit)\r\n      : 2;\r\n\r\n    const amount = minorToNumber(prices.price, decimals);\r\n    const locale = document.documentElement.lang || 'sl-SI';\r\n\r\n    const formattedNumber = new Intl.NumberFormat(locale, {\r\n      minimumFractionDigits: decimals,\r\n      maximumFractionDigits: decimals\r\n    }).format(amount);\r\n\r\n    const prefix = prices.currency_prefix || '';\r\n    const suffix = prices.currency_suffix || '';\r\n\r\n    if (prefix) return (prefix + formattedNumber + suffix).trim();\r\n    if (suffix) return (formattedNumber + suffix).trim();\r\n\r\n    const symbol = prices.currency_symbol || '\u20ac';\r\n    return (formattedNumber + ' ' + symbol).trim();\r\n  }\r\n\r\n  function getProductUnit(product) {\r\n    const categories = Array.isArray(product.categories) ? product.categories.map(function (c) { return c.slug; }) : [];\r\n\r\n    if (categories.includes('keramika') || categories.includes('xxl-ploscice')) {\r\n      return '\/ m\u00b2';\r\n    }\r\n\r\n    return '\/ kos';\r\n  }\r\n\r\n  function getDiscountPercent(prices) {\r\n    if (!prices) return null;\r\n\r\n    const decimals = Number.isFinite(Number(prices.currency_minor_unit))\r\n      ? Number(prices.currency_minor_unit)\r\n      : 2;\r\n\r\n    const regular = minorToNumber(prices.regular_price, decimals);\r\n    const sale = minorToNumber(prices.sale_price, decimals);\r\n\r\n    if (!regular || !sale || sale >= regular) return null;\r\n\r\n    return Math.round(((regular - sale) \/ regular) * 100);\r\n  }\r\n\r\n  function getBadge(product) {\r\n    if (product.on_sale) {\r\n      const discount = getDiscountPercent(product.prices);\r\n      return {\r\n        text: discount ? '-' + discount + '%' : 'Akcija',\r\n        className: 'simak-product-badge simak-product-badge-sale'\r\n      };\r\n    }\r\n\r\n    if (product.low_stock_remaining && Number(product.low_stock_remaining) > 0 && Number(product.low_stock_remaining) <= 5) {\r\n      return {\r\n        text: 'Zadnji kosi',\r\n        className: 'simak-product-badge simak-product-badge-last'\r\n      };\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  function buildCategoryTree(categories) {\r\n    const byParent = {};\r\n\r\n    categories.forEach(function (cat) {\r\n      const parentId = Number(cat.parent || 0);\r\n      if (!byParent[parentId]) byParent[parentId] = [];\r\n      byParent[parentId].push(cat);\r\n    });\r\n\r\n    Object.keys(byParent).forEach(function (key) {\r\n      byParent[key].sort(function (a, b) {\r\n        return String(a.name).localeCompare(String(b.name), 'sl');\r\n      });\r\n    });\r\n\r\n    function walk(parentId, level, output) {\r\n      const items = byParent[parentId] || [];\r\n      items.forEach(function (cat) {\r\n        output.push({\r\n          id: cat.id,\r\n          slug: cat.slug,\r\n          name: cat.name,\r\n          parent: Number(cat.parent || 0),\r\n          level: level\r\n        });\r\n        walk(Number(cat.id), level + 1, output);\r\n      });\r\n      return output;\r\n    }\r\n\r\n    return walk(0, 0, []);\r\n  }\r\n\r\n  function getDescendantSlugs(selectedSlug) {\r\n    if (!selectedSlug || selectedSlug === 'all') return [];\r\n\r\n    const bySlug = {};\r\n    state.categories.forEach(function (cat) {\r\n      bySlug[cat.slug] = cat;\r\n    });\r\n\r\n    const selectedCategory = bySlug[selectedSlug];\r\n    if (!selectedCategory) return [selectedSlug];\r\n\r\n    const descendants = new Set([selectedSlug]);\r\n\r\n    function walk(parentId) {\r\n      state.categories.forEach(function (cat) {\r\n        if (Number(cat.parent || 0) === Number(parentId)) {\r\n          descendants.add(cat.slug);\r\n          walk(cat.id);\r\n        }\r\n      });\r\n    }\r\n\r\n    walk(selectedCategory.id);\r\n\r\n    return Array.from(descendants);\r\n  }\r\n\r\n  function renderCategoryOptions() {\r\n    const flatCategories = buildCategoryTree(state.categories);\r\n    const options = ['<option value=\"all\">Vse kategorije<\/option>'];\r\n\r\n    flatCategories.forEach(function (cat) {\r\n      let prefix = '';\r\n      if (cat.level > 0) {\r\n        prefix = new Array(cat.level + 1).join('\\u00A0\\u00A0\\u00A0') + '\u2022 ';\r\n      }\r\n      const selected = state.category === cat.slug ? ' selected' : '';\r\n      options.push(\r\n        '<option value=\"' + escapeHtml(cat.slug) + '\"' + selected + '>' +\r\n        escapeHtml(prefix + decodeHtml(cat.name)) +\r\n        '<\/option>'\r\n      );\r\n    });\r\n\r\n    categorySelect.innerHTML = options.join('');\r\n\r\n    const exists = flatCategories.some(function (cat) {\r\n      return cat.slug === state.category;\r\n    });\r\n\r\n    if (state.category !== 'all' && !exists) {\r\n      state.category = 'all';\r\n      categorySelect.value = 'all';\r\n    }\r\n  }\r\n\r\n  function buildCatalogUrl(page) {\r\n    const url = new URL(PRODUCTS_ENDPOINT);\r\n    url.searchParams.set('page', String(page));\r\n    url.searchParams.set('per_page', String(SERVER_PER_PAGE));\r\n    url.searchParams.set('catalog_visibility', 'visible');\r\n    url.searchParams.set('stock_status[0]', 'instock');\r\n    url.searchParams.set('orderby', 'date');\r\n    url.searchParams.set('order', 'desc');\r\n    return url.toString();\r\n  }\r\n\r\n  async function fetchJson(url, signal) {\r\n    const response = await fetch(url, {\r\n      method: 'GET',\r\n      credentials: 'same-origin',\r\n      signal: signal\r\n    });\r\n\r\n    if (!response.ok) {\r\n      throw new Error('HTTP ' + response.status);\r\n    }\r\n\r\n    const json = await response.json();\r\n    return { response: response, json: json };\r\n  }\r\n\r\n  function hasValidImage(product) {\r\n    if (!product || !Array.isArray(product.images) || !product.images.length) return false;\r\n    return product.images.some(function (image) {\r\n      return !!(image && (image.src || image.thumbnail));\r\n    });\r\n  }\r\n\r\n  function normalizeProducts(products) {\r\n    const seen = new Set();\r\n    const normalized = [];\r\n\r\n    (Array.isArray(products) ? products : []).forEach(function (product, index) {\r\n      if (!product || seen.has(product.id)) return;\r\n      seen.add(product.id);\r\n\r\n      if (!product.is_in_stock) return;\r\n      if (!hasValidImage(product)) return;\r\n\r\n      normalized.push(Object.assign({}, product, {\r\n        _catalogIndex: index\r\n      }));\r\n    });\r\n\r\n    return normalized;\r\n  }\r\n\r\n  async function loadCategories() {\r\n    if (state.categoriesAbortController) {\r\n      state.categoriesAbortController.abort();\r\n    }\r\n\r\n    state.categoriesAbortController = new AbortController();\r\n\r\n    const { json } = await fetchJson(CATEGORIES_ENDPOINT, state.categoriesAbortController.signal);\r\n    state.categories = Array.isArray(json) ? json : [];\r\n    renderCategoryOptions();\r\n  }\r\n\r\n  async function loadAllProducts() {\r\n    if (state.catalogAbortController) {\r\n      state.catalogAbortController.abort();\r\n    }\r\n\r\n    state.catalogAbortController = new AbortController();\r\n\r\n    resultsCount.textContent = 'Nalagam izdelke...';\r\n    productsGrid.innerHTML = `\r\n      <div class=\"simak-loading\">\r\n        <p>Nalagam izdelke...<\/p>\r\n      <\/div>\r\n    `;\r\n    pagination.innerHTML = '';\r\n\r\n    const all = [];\r\n\r\n    const first = await fetchJson(buildCatalogUrl(1), state.catalogAbortController.signal);\r\n    const firstPageProducts = Array.isArray(first.json) ? first.json : [];\r\n    const totalPages = Math.max(1, Number(first.response.headers.get('X-WP-TotalPages') || 1));\r\n\r\n    firstPageProducts.forEach(function (product) {\r\n      all.push(product);\r\n    });\r\n\r\n    for (let page = 2; page <= totalPages; page++) {\r\n      resultsCount.textContent = 'Nalagam izdelke... (' + page + '\/' + totalPages + ')';\r\n      const next = await fetchJson(buildCatalogUrl(page), state.catalogAbortController.signal);\r\n      const pageProducts = Array.isArray(next.json) ? next.json : [];\r\n      pageProducts.forEach(function (product) {\r\n        all.push(product);\r\n      });\r\n    }\r\n\r\n    state.allProducts = normalizeProducts(all);\r\n  }\r\n\r\n  function sortProducts(products) {\r\n    const sorted = products.slice();\r\n\r\n    switch (state.sort) {\r\n      case 'price-asc':\r\n        sorted.sort(function (a, b) {\r\n          return getProductPriceNumber(a) - getProductPriceNumber(b);\r\n        });\r\n        break;\r\n\r\n      case 'price-desc':\r\n        sorted.sort(function (a, b) {\r\n          return getProductPriceNumber(b) - getProductPriceNumber(a);\r\n        });\r\n        break;\r\n\r\n      case 'name':\r\n        sorted.sort(function (a, b) {\r\n          return decodeHtml(a.name || '').localeCompare(decodeHtml(b.name || ''), 'sl');\r\n        });\r\n        break;\r\n\r\n      case 'newest':\r\n      default:\r\n        sorted.sort(function (a, b) {\r\n          return Number(a._catalogIndex || 0) - Number(b._catalogIndex || 0);\r\n        });\r\n        break;\r\n    }\r\n\r\n    return sorted;\r\n  }\r\n\r\n  function filterProducts() {\r\n    const search = String(state.search || '').trim().toLowerCase();\r\n    const categorySlugs = state.category === 'all' ? [] : getDescendantSlugs(state.category);\r\n\r\n    let filtered = state.allProducts.filter(function (product) {\r\n      if (!product || !product.is_in_stock || !hasValidImage(product)) return false;\r\n\r\n      if (search) {\r\n        const haystack = [\r\n          decodeHtml(product.name || ''),\r\n          decodeHtml(product.slug || ''),\r\n          decodeHtml(product.sku || '')\r\n        ].join(' ').toLowerCase();\r\n\r\n        if (haystack.indexOf(search) === -1) return false;\r\n      }\r\n\r\n      if (categorySlugs.length) {\r\n        const productCategorySlugs = Array.isArray(product.categories)\r\n          ? product.categories.map(function (cat) { return cat.slug; })\r\n          : [];\r\n\r\n        const matchesCategory = productCategorySlugs.some(function (slug) {\r\n          return categorySlugs.includes(slug);\r\n        });\r\n\r\n        if (!matchesCategory) return false;\r\n      }\r\n\r\n      return true;\r\n    });\r\n\r\n    filtered = sortProducts(filtered);\r\n\r\n    state.filteredProducts = filtered;\r\n    state.total = filtered.length;\r\n    state.totalPages = Math.max(1, Math.ceil(filtered.length \/ state.perPage));\r\n\r\n    if (state.page > state.totalPages) {\r\n      state.page = 1;\r\n    }\r\n  }\r\n\r\n  function updateResultsCount(pageItemsCount) {\r\n    if (state.total === 0) {\r\n      resultsCount.textContent = 'Ni najdenih izdelkov';\r\n      return;\r\n    }\r\n\r\n    const from = ((state.page - 1) * state.perPage) + 1;\r\n    const to = from + pageItemsCount - 1;\r\n    resultsCount.textContent = 'Prikazanih ' + from + ' - ' + to + ' od ' + state.total + ' izdelkov';\r\n  }\r\n\r\n  function createProductCard(product) {\r\n    const productName = escapeHtml(decodeHtml(product.name || ''));\r\n    const productUrl = escapeHtml(product.permalink || '#');\r\n    const image = product.images && product.images[0] ? product.images[0] : null;\r\n    const imageSrc = escapeHtml((image && (image.thumbnail || image.src)) || '');\r\n    const imageAlt = escapeHtml(decodeHtml((image && image.alt) || product.name || ''));\r\n    const price = formatPrice(product.prices);\r\n    const unit = escapeHtml(getProductUnit(product));\r\n    const badge = getBadge(product);\r\n\r\n    return `\r\n      <div class=\"simak-product-card\">\r\n        <a href=\"${productUrl}\" class=\"simak-product-image\">\r\n          <img decoding=\"async\" src=\"${imageSrc}\" alt=\"${imageAlt}\" loading=\"lazy\" \/>\r\n          ${badge ? `<span class=\"${badge.className}\">${escapeHtml(badge.text)}<\/span>` : ''}\r\n        <\/a>\r\n\r\n        <button class=\"simak-product-favorite\" type=\"button\" aria-label=\"Dodaj med priljubljene\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\/><\/svg>\r\n        <\/button>\r\n\r\n        <div class=\"simak-product-body\">\r\n          <h3 class=\"simak-product-name\">\r\n            <a href=\"${productUrl}\">${productName}<\/a>\r\n          <\/h3>\r\n\r\n          <div class=\"simak-product-price-row\">\r\n            <div>\r\n              <span class=\"simak-product-price\">${escapeHtml(price)}<\/span>\r\n              <span class=\"simak-product-unit\">${unit}<\/span>\r\n            <\/div>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"simak-btn-add\"\r\n              data-action=\"product-click\"\r\n              data-product-url=\"${productUrl}\"\r\n            >\r\n              <span>Poglej ve\u010d<\/span>\r\n            <\/button>\r\n          <\/div>\r\n\r\n          <p class=\"simak-product-stock in-stock\">\r\n            <span class=\"simak-product-stock-dot\"><\/span>\r\n            Na zalogi\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  function getPageItems(current, total) {\r\n    const items = [];\r\n\r\n    if (total <= 7) {\r\n      for (let i = 1; i <= total; i++) items.push(i);\r\n      return items;\r\n    }\r\n\r\n    items.push(1);\r\n\r\n    if (current > 3) {\r\n      items.push('ellipsis-left');\r\n    }\r\n\r\n    const start = Math.max(2, current - 1);\r\n    const end = Math.min(total - 1, current + 1);\r\n\r\n    for (let i = start; i <= end; i++) {\r\n      items.push(i);\r\n    }\r\n\r\n    if (current < total - 2) {\r\n      items.push('ellipsis-right');\r\n    }\r\n\r\n    items.push(total);\r\n\r\n    return items;\r\n  }\r\n\r\n  function renderPagination() {\r\n    if (state.totalPages <= 1) {\r\n      pagination.innerHTML = '';\r\n      return;\r\n    }\r\n\r\n    const pageItems = getPageItems(state.page, state.totalPages);\r\n\r\n    pagination.innerHTML = `\r\n      <button type=\"button\" class=\"simak-pagination-btn ${state.page <= 1 ? 'disabled' : ''}\" data-page=\"${state.page - 1}\">\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"\/><\/svg>\r\n        Prej\u0161nja\r\n      <\/button>\r\n\r\n      <div class=\"simak-pagination-pages\">\r\n        ${pageItems.map(function (item) {\r\n          if (String(item).indexOf('ellipsis') === 0) {\r\n            return '<span class=\"simak-pagination-ellipsis\">...<\/span>';\r\n          }\r\n\r\n          return `\r\n            <button\r\n              type=\"button\"\r\n              class=\"simak-pagination-page ${item === state.page ? 'active' : ''}\"\r\n              data-page=\"${item}\"\r\n              ${item === state.page ? 'aria-current=\"page\"' : ''}\r\n            >\r\n              ${item}\r\n            <\/button>\r\n          `;\r\n        }).join('')}\r\n      <\/div>\r\n\r\n      <button type=\"button\" class=\"simak-pagination-btn ${state.page >= state.totalPages ? 'disabled' : ''}\" data-page=\"${state.page + 1}\">\r\n        Naslednja\r\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>\r\n      <\/button>\r\n    `;\r\n  }\r\n\r\n  function renderNoResults() {\r\n    resultsCount.textContent = 'Ni najdenih izdelkov';\r\n    productsGrid.innerHTML = `\r\n      <div class=\"simak-no-results\">\r\n        <p>Za izbrane filtre ni zadetkov.<\/p>\r\n        <button type=\"button\" class=\"simak-btn-reset\" data-action=\"reset\">Ponastavi filtre<\/button>\r\n      <\/div>\r\n    `;\r\n    pagination.innerHTML = '';\r\n  }\r\n\r\n  function renderError() {\r\n    resultsCount.textContent = 'Napaka pri nalaganju izdelkov';\r\n    productsGrid.innerHTML = `\r\n      <div class=\"simak-error\">\r\n        <p>Izdelkov trenutno ni bilo mogo\u010de nalo\u017eiti.<\/p>\r\n        <button type=\"button\" class=\"simak-btn-reset\" data-action=\"retry\">Poskusi znova<\/button>\r\n      <\/div>\r\n    `;\r\n    pagination.innerHTML = '';\r\n  }\r\n\r\n  function renderProducts() {\r\n    filterProducts();\r\n\r\n    if (!state.filteredProducts.length) {\r\n      renderNoResults();\r\n      return;\r\n    }\r\n\r\n    const startIndex = (state.page - 1) * state.perPage;\r\n    const endIndex = startIndex + state.perPage;\r\n    const pageProducts = state.filteredProducts.slice(startIndex, endIndex);\r\n\r\n    productsGrid.innerHTML = pageProducts.map(createProductCard).join('');\r\n    updateResultsCount(pageProducts.length);\r\n    renderPagination();\r\n  }\r\n\r\n  function handleProductAction(button) {\r\n    const productUrl = button.getAttribute('data-product-url');\r\n    if (!productUrl) return;\r\n    window.location.href = productUrl;\r\n  }\r\n\r\n  function resetFilters() {\r\n    state.page = 1;\r\n    state.search = '';\r\n    state.category = 'all';\r\n    state.sort = 'newest';\r\n\r\n    searchInput.value = '';\r\n    categorySelect.value = 'all';\r\n    sortSelect.value = 'newest';\r\n\r\n    renderProducts();\r\n  }\r\n\r\n  async function initializeCatalog() {\r\n    try {\r\n      await Promise.all([\r\n        loadCategories(),\r\n        loadAllProducts()\r\n      ]);\r\n\r\n      renderProducts();\r\n    } catch (error) {\r\n      if (error && error.name === 'AbortError') return;\r\n      renderError();\r\n    }\r\n  }\r\n\r\n  searchInput.addEventListener('input', debounce(function (event) {\r\n    state.search = event.target.value || '';\r\n    state.page = 1;\r\n    renderProducts();\r\n  }, 250));\r\n\r\n  categorySelect.addEventListener('change', function (event) {\r\n    state.category = event.target.value || 'all';\r\n    state.page = 1;\r\n    renderProducts();\r\n  });\r\n\r\n  sortSelect.addEventListener('change', function (event) {\r\n    state.sort = event.target.value || 'newest';\r\n    state.page = 1;\r\n    renderProducts();\r\n  });\r\n\r\n  productsGrid.addEventListener('click', function (event) {\r\n    const actionButton = event.target.closest('[data-action=\"product-click\"]');\r\n    if (actionButton) {\r\n      handleProductAction(actionButton);\r\n      return;\r\n    }\r\n\r\n    const retryButton = event.target.closest('[data-action=\"retry\"]');\r\n    if (retryButton) {\r\n      initializeCatalog();\r\n      return;\r\n    }\r\n\r\n    const resetButton = event.target.closest('[data-action=\"reset\"]');\r\n    if (resetButton) {\r\n      resetFilters();\r\n    }\r\n  });\r\n\r\n  pagination.addEventListener('click', function (event) {\r\n    const pageButton = event.target.closest('[data-page]');\r\n    if (!pageButton || pageButton.classList.contains('disabled')) return;\r\n\r\n    const nextPage = Number(pageButton.getAttribute('data-page'));\r\n    if (!Number.isFinite(nextPage) || nextPage < 1 || nextPage === state.page || nextPage > state.totalPages) return;\r\n\r\n    state.page = nextPage;\r\n    renderProducts();\r\n\r\n    root.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n  });\r\n\r\n  initializeCatalog();\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Vse kategorije Najnovej\u0161eCena: nara\u0161\u010dajo\u010deCena: padajo\u010dePo imenu Nalagam izdelke&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-461","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/simak-keramika.si\/it\/wp-json\/wp\/v2\/pages\/461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simak-keramika.si\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/simak-keramika.si\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/simak-keramika.si\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simak-keramika.si\/it\/wp-json\/wp\/v2\/comments?post=461"}],"version-history":[{"count":57,"href":"https:\/\/simak-keramika.si\/it\/wp-json\/wp\/v2\/pages\/461\/revisions"}],"predecessor-version":[{"id":8058,"href":"https:\/\/simak-keramika.si\/it\/wp-json\/wp\/v2\/pages\/461\/revisions\/8058"}],"wp:attachment":[{"href":"https:\/\/simak-keramika.si\/it\/wp-json\/wp\/v2\/media?parent=461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}