{"id":14084,"date":"2022-08-03T15:59:28","date_gmt":"2022-08-03T15:59:28","guid":{"rendered":"https:\/\/themedemo.commercegurus.com\/shoptimizer-demodata\/?page_id=7105"},"modified":"2026-10-04T09:21:42","modified_gmt":"2026-10-04T09:21:42","slug":"home","status":"publish","type":"page","link":"https:\/\/hagasouvenir.se\/en\/","title":{"rendered":"Home page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14084\" class=\"elementor elementor-14084\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3222d84 e-flex e-con-boxed e-con e-parent\" data-id=\"3222d84\" 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-3dfce89 elementor-widget elementor-widget-html\" data-id=\"3dfce89\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\n HAGA SOUVENIR \u2014 HEADER + HERO\n L\u00e4gg \u00f6verst p\u00e5 Home i Elementor\n===================================================== -->\n\n<div id=\"haga-home-top\">\n\n  <!-- HEADER -->\n  <header class=\"haga-top-header\">\n\n    <div class=\"haga-top-container\">\n\n      <!-- LOGO -->\n      <a\n        href=\"\/\"\n        class=\"haga-logo-image\"\n        aria-label=\"Haga Souvenir\">\n\n        <!--\n        L\u00c4GG DIN RIKTIGA LOGOTYP H\u00c4R.\n\n        Byt URL nedan till URL:en fr\u00e5n\n        WordPress Media > din logotyp.\n\n        Exempel:\n        \/wp-content\/uploads\/2026\/09\/haga-souvenir-logo.png\n        -->\n\n        <img decoding=\"async\"\n          src=\"\/wp-content\/uploads\/2026\/03\/Logo-Swedish-Souvenir.png\"\n          alt=\"Haga Souvenir \u2013 svenska souvenirer fr\u00e5n G\u00f6teborg\">\n\n      <\/a>\n\n\n      <!-- NAVIGATION -->\n      <nav\n        class=\"haga-top-nav\"\n        aria-label=\"Huvudmeny\">\n\n        <a href=\"\/shop\/\">\n          Shop\n        <\/a>\n\n        <a href=\"\/product-category\/souvenirer\/\">\n          G\u00f6teborg\n        <\/a>\n\n        <a href=\"\/product-category\/souvenirer\/\">\n          Svenska souvenirer\n        <\/a>\n\n        <a href=\"\/shop\/\">\n          Presenter\n        <\/a>\n\n      <\/nav>\n\n\n      <!-- ACTIONS -->\n      <div class=\"haga-top-actions\">\n\n        <button\n          type=\"button\"\n          id=\"haga-home-search\"\n          aria-label=\"S\u00f6k\"\n          class=\"haga-top-search\">\n\n          \u2315\n\n        <\/button>\n\n\n        <a\n          href=\"\/my-account\/\"\n          aria-label=\"Favoriter\"\n          class=\"haga-top-icon\">\n\n          \u2661\n\n        <\/a>\n\n\n        <a\n          href=\"\/cart\/\"\n          aria-label=\"Varukorg\"\n          class=\"haga-top-cart\">\n\n          \ud83d\uded2\n\n          <span id=\"haga-home-cart-count\">\n            0\n          <\/span>\n\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- MOBILE SEARCH -->\n    <div\n      id=\"haga-home-search-box\"\n      class=\"haga-home-search-box\">\n\n      <div class=\"haga-top-container\">\n\n        <input\n          id=\"haga-home-search-input\"\n          type=\"search\"\n          placeholder=\"S\u00f6k souvenirer, G\u00f6teborg, presenter...\"\n          aria-label=\"S\u00f6k produkter\">\n\n      <\/div>\n\n    <\/div>\n\n  <\/header>\n\n\n\n  <!-- HERO -->\n  <main class=\"haga-home-hero\">\n\n    <div class=\"haga-home-hero-overlay\"><\/div>\n\n\n    <div class=\"haga-top-container\">\n\n      <div class=\"haga-home-hero-content\">\n\n        <span class=\"haga-home-eyebrow\">\n          G\u00d6TEBORG \u2022 HAGA\n        <\/span>\n\n\n        <h1>\n          Souvenirer fr\u00e5n G\u00f6teborg \u2013 Svenska presenter fr\u00e5n Haga\n        <\/h1>\n\n\n        <p>\n          Svenska souvenirer, presenter och sm\u00e5 favoriter\n          fr\u00e5n historiska Haga i G\u00f6teborg.\n        <\/p>\n\n\n        <div class=\"haga-home-buttons\">\n\n          <a\n            href=\"\/shop\/\"\n            class=\"haga-home-btn\">\n\n            Handla souvenirer\n\n          <\/a>\n\n\n          <a\n            href=\"\/product-category\/souvenirer\/\"\n            class=\"haga-home-btn-secondary\">\n\n            Uppt\u00e4ck G\u00f6teborg\n\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/main>\n\n<h2>Svenska souvenirer och G\u00f6teborgssouvenirer<\/h2>\n<p>V\u00e4lkommen till <strong>Haga Souvenir<\/strong> p\u00e5 Haga Nygata 18 i G\u00f6teborg. H\u00e4r hittar du <a href='\/product-category\/souvenirer\/'>svenska souvenirer<\/a>, G\u00f6teborgssouvenirer och presenter med motiv fr\u00e5n Haga och G\u00f6teborg. Bes\u00f6k v\u00e5r butik eller handla online.<\/p>\n<p>Vi erbjuder bland annat <a href='\/product-category\/souvenirer\/dalahastar\/'>Dalah\u00e4star<\/a>, <a href='\/product-category\/souvenirer\/magneter\/'>G\u00f6teborgsmagneter<\/a>, textilier, nyckelringar och gosedjur.<\/p>\n<h2>Om Haga Souvenir \u2013 svenskt hantverk sedan 2017<\/h2><p>Haga Souvenir har funnits p\u00e5 Haga Nygata 18 sedan 2017 och erbjuder svenska souvenirer och lokala produkter fr\u00e5n utvalda kreat\u00f6rer och leverant\u00f6rer.<\/p><p>Kan du inte bes\u00f6ka butiken? Du kan handla <strong>svenska souvenirer<\/strong> och G\u00f6teborgssouvenirer online.<\/p>\n\n\n\n  <!-- TRUST \/ BENEFITS -->\n  <section class=\"haga-home-benefits\">\n\n    <div class=\"haga-top-container\">\n\n      <div class=\"haga-home-benefits-grid\">\n\n\n        <div class=\"haga-home-benefit\">\n\n          <span class=\"haga-benefit-icon\">\n            \ud83d\ude9a\n          <\/span>\n\n          <div>\n\n            <strong>\n              Snabb leverans\n            <\/strong>\n\n            <span>\n              1\u20135 arbetsdagar\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"haga-home-benefit\">\n\n          <span class=\"haga-benefit-icon\">\n            \ud83d\udd12\n          <\/span>\n\n          <div>\n\n            <strong>\n              S\u00e4kra betalningar\n            <\/strong>\n\n            <span>\n              Kort, Klarna & Swish\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"haga-home-benefit\">\n\n          <span class=\"haga-benefit-icon\">\n            \ud83c\udf81\n          <\/span>\n\n          <div>\n\n            <strong>\n              Perfekt som present\n            <\/strong>\n\n            <span>\n              Handplockat fr\u00e5n Haga\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n<\/div>\n\n\n\n<style>\n\n\/* =====================================================\n   HAGA TOP\n===================================================== *\/\n\n#haga-home-top{\n\n  --haga-navy:#173a63;\n  --haga-blue:#0878bd;\n  --haga-yellow:#ffc400;\n  --haga-yellow-hover:#eab300;\n  --haga-light-blue:#eaf6fb;\n  --haga-white:#fff;\n\n  width:100%;\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Arial,\n    sans-serif;\n\n}\n\n\n\/* CONTAINER *\/\n\n#haga-home-top .haga-top-container{\n\n  width:min(\n    1280px,\n    calc(100% - 40px)\n  );\n\n  margin:0 auto;\n\n}\n\n\n\/* =====================================================\n   HEADER\n===================================================== *\/\n\n#haga-home-top .haga-top-header{\n\n  background:#fff;\n\n  position:relative;\n\n  z-index:100;\n\n}\n\n\n#haga-home-top .haga-top-container{\n\n  min-height:64px;\n\n  display:flex;\n\n  align-items:center;\n\n}\n\n\n#haga-home-top .haga-logo-image{\n\n  flex:0 0 auto;\n\n  display:flex;\n\n  align-items:center;\n\n  text-decoration:none!important;\n\n}\n\n\n#haga-home-top .haga-logo-image img{\n\n  width:auto;\n\n  max-width:220px;\n\n  max-height:48px;\n\n  display:block;\n\n  object-fit:contain;\n\n}\n\n\n\/* =====================================================\n   NAV\n===================================================== *\/\n\n#haga-home-top .haga-top-nav{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:35px;\n\n  margin-left:42px;\n\n  flex:1;\n\n}\n\n\n#haga-home-top .haga-top-nav a{\n\n  color:var(--haga-navy)!important;\n\n  font-size:16px;\n\n  font-weight:800;\n\n  text-decoration:none!important;\n\n  white-space:nowrap;\n\n}\n\n\n#haga-home-top .haga-top-nav a:hover{\n\n  color:var(--haga-blue)!important;\n\n}\n\n\n\/* =====================================================\n   ACTIONS\n===================================================== *\/\n\n#haga-home-top .haga-top-actions{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:9px;\n\n}\n\n\n#haga-home-top .haga-top-search,\n#haga-home-top .haga-top-icon,\n#haga-home-top .haga-top-cart{\n\n  width:42px;\n  height:42px;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  border:0;\n\n  border-radius:50%;\n\n  background:#fff;\n\n  color:var(--haga-navy)!important;\n\n  text-decoration:none!important;\n\n  font-size:20px;\n\n  cursor:pointer;\n\n}\n\n\n#haga-home-top .haga-top-search:hover,\n#haga-home-top .haga-top-icon:hover,\n#haga-home-top .haga-top-cart:hover{\n\n  background:var(--haga-light-blue);\n\n}\n\n\n#haga-home-top .haga-top-search{\n\n  background:var(--haga-yellow);\n\n}\n\n\n#haga-home-top .haga-top-search:hover{\n\n  background:var(--haga-yellow-hover);\n\n}\n\n\n#haga-home-top .haga-top-cart{\n\n  position:relative;\n\n}\n\n\n#haga-home-cart-count{\n\n  position:absolute;\n\n  top:-2px;\n\n  right:-2px;\n\n  min-width:18px;\n\n  height:18px;\n\n  padding:0 4px;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  border-radius:20px;\n\n  background:var(--haga-yellow);\n\n  color:var(--haga-navy);\n\n  font-size:9px;\n\n  font-weight:900;\n\n}\n\n\n\/* =====================================================\n   SEARCH\n===================================================== *\/\n\n.haga-home-search-box{\n\n  display:none;\n\n  padding:10px 0;\n\n  background:var(--haga-light-blue);\n\n}\n\n\n.haga-home-search-box.open{\n\n  display:block;\n\n}\n\n\n.haga-home-search-box input{\n\n  width:100%;\n\n  height:46px;\n\n  padding:0 15px;\n\n  border:1px solid #dce5ea;\n\n  border-radius:9px;\n\n  background:#fff;\n\n  color:var(--haga-navy);\n\n  outline:none;\n\n}\n\n\n\/* =====================================================\n   HERO\n===================================================== *\/\n\n#haga-home-top .haga-home-hero{\n\n  position:relative;\n\n  min-height:590px;\n\n  display:flex;\n\n  align-items:center;\n\n  overflow:hidden;\n\n  background-image:\n\n    url(\"\/wp-content\/uploads\/5.avif\");\n\n  background-size:cover;\n\n  background-position:center center;\n\n}\n\n\n#haga-home-top .haga-home-hero-overlay{\n\n  position:absolute;\n\n  inset:0;\n\n  background:\n\n    linear-gradient(\n      90deg,\n      rgba(23,58,99,.78) 0%,\n      rgba(23,58,99,.48) 42%,\n      rgba(23,58,99,.12) 100%\n    );\n\n}\n\n\n\/* CONTENT *\/\n\n#haga-home-top .haga-home-hero-content{\n\n  position:relative;\n\n  z-index:2;\n\n  max-width:720px;\n\n  padding:80px 0;\n\n}\n\n\n#haga-home-top .haga-home-eyebrow{\n\n  display:block;\n\n  margin-bottom:13px;\n\n  color:#ffffff;\n\n  font-size:13px;\n\n  font-weight:900;\n\n  letter-spacing:.15em;\n\n}\n\n\n#haga-home-top .haga-home-hero h1{\n\n  max-width:720px;\n\n  margin:0;\n\n  color:#fff!important;\n\n  font-size:\n    clamp(46px,6vw,76px);\n\n  line-height:.98;\n\n  letter-spacing:-.045em;\n\n  font-weight:900;\n\n}\n\n\n#haga-home-top .haga-home-hero p{\n\n  max-width:650px;\n\n  margin:25px 0 0;\n\n  color:#fff!important;\n\n  font-size:19px;\n\n  line-height:1.6;\n\n}\n\n\n\/* =====================================================\n   HERO BUTTONS\n===================================================== *\/\n\n#haga-home-top .haga-home-buttons{\n\n  display:flex;\n\n  flex-wrap:wrap;\n\n  gap:12px;\n\n  margin-top:30px;\n\n}\n\n\n#haga-home-top .haga-home-btn{\n\n  min-height:60px;\n\n  padding:0 30px;\n\n  display:inline-flex;\n\n  align-items:center;\n  justify-content:center;\n\n  border-radius:12px;\n\n  background:var(--haga-yellow);\n\n  color:var(--haga-navy)!important;\n\n  font-size:16px;\n\n  font-weight:900;\n\n  text-decoration:none!important;\n\n}\n\n\n#haga-home-top .haga-home-btn:hover{\n\n  background:var(--haga-yellow-hover);\n\n}\n\n\n#haga-home-top .haga-home-btn-secondary{\n\n  min-height:60px;\n\n  padding:0 25px;\n\n  display:inline-flex;\n\n  align-items:center;\n  justify-content:center;\n\n  color:#fff!important;\n\n  font-size:15px;\n\n  font-weight:800;\n\n  text-decoration:none!important;\n\n}\n\n\n\/* =====================================================\n   BENEFITS\n===================================================== *\/\n\n#haga-home-top .haga-home-benefits{\n\n  background:var(--haga-light-blue);\n\n}\n\n\n#haga-home-top .haga-home-benefits-grid{\n\n  min-height:120px;\n\n  display:grid;\n\n  grid-template-columns:\n    repeat(3,1fr);\n\n}\n\n\n#haga-home-top .haga-home-benefit{\n\n  display:flex;\n\n  align-items:center;\n\n  gap:14px;\n\n  padding:22px 30px;\n\n}\n\n\n#haga-home-top .haga-benefit-icon{\n\n  font-size:26px;\n\n}\n\n\n#haga-home-top .haga-home-benefit strong{\n\n  display:block;\n\n  color:var(--haga-navy);\n\n  font-size:17px;\n\n}\n\n\n#haga-home-top .haga-home-benefit span{\n\n  display:block;\n\n  margin-top:4px;\n\n  color:#74879a;\n\n  font-size:14px;\n\n}\n\n\n\/* =====================================================\n   TABLET\n===================================================== *\/\n\n@media(max-width:1000px){\n\n  #haga-home-top .haga-top-nav{\n\n    gap:17px;\n\n    margin-left:25px;\n\n  }\n\n\n  #haga-home-top .haga-top-nav a{\n\n    font-size:13px;\n\n  }\n\n\n  #haga-home-top .haga-home-hero{\n\n    min-height:520px;\n\n  }\n\n\n  #haga-home-top .haga-home-hero h1{\n\n    font-size:55px;\n\n  }\n\n}\n\n\n\/* =====================================================\n   MOBILE\n===================================================== *\/\n\n@media(max-width:767px){\n\n  #haga-home-top .haga-top-container{\n\n    width:\n      calc(100% - 28px);\n\n  }\n\n\n  #haga-home-top .haga-top-container{\n\n    min-height:62px;\n\n  }\n\n\n  #haga-home-top .haga-logo-image img{\n\n    max-width:155px;\n\n    max-height:40px;\n\n  }\n\n\n  #haga-home-top .haga-top-nav{\n\n    display:none;\n\n  }\n\n\n  #haga-home-top .haga-top-actions{\n\n    margin-left:auto;\n\n  }\n\n\n  #haga-home-top .haga-top-search,\n  #haga-home-top .haga-top-icon,\n  #haga-home-top .haga-top-cart{\n\n    width:37px;\n    height:37px;\n\n  }\n\n\n  #haga-home-top .haga-home-hero{\n\n    min-height:560px;\n\n    background-position:\n      62% center;\n\n  }\n\n\n  #haga-home-top .haga-home-hero-overlay{\n\n    background:\n\n      linear-gradient(\n        90deg,\n        rgba(23,58,99,.82),\n        rgba(23,58,99,.40)\n      );\n\n  }\n\n\n  #haga-home-top .haga-home-hero-content{\n\n    padding:60px 0;\n\n  }\n\n\n  #haga-home-top .haga-home-eyebrow{\n\n    font-size:11px;\n\n  }\n\n\n  #haga-home-top .haga-home-hero h1{\n\n    max-width:340px;\n\n    font-size:43px;\n\n    line-height:1;\n\n  }\n\n\n  #haga-home-top .haga-home-hero p{\n\n    max-width:350px;\n\n    font-size:16px;\n\n    line-height:1.5;\n\n  }\n\n\n  #haga-home-top .haga-home-buttons{\n\n    flex-direction:column;\n\n  }\n\n\n  #haga-home-top .haga-home-btn,\n  #haga-home-top .haga-home-btn-secondary{\n\n    width:100%;\n\n    min-height:52px;\n\n  }\n\n\n  #haga-home-top .haga-home-benefits-grid{\n\n    grid-template-columns:1fr;\n\n  }\n\n\n  #haga-home-top .haga-home-benefit{\n\n    min-height:75px;\n\n    padding:14px 0;\n\n  }\n\n\n  #haga-home-top .haga-home-benefit + .haga-home-benefit{\n\n    border-top:\n      1px solid rgba(23,58,99,.08);\n\n  }\n\n}\n\n\n\/* =====================================================\n   SMALL MOBILE\n===================================================== *\/\n\n@media(max-width:390px){\n\n  #haga-home-top .haga-logo-image img{\n\n    max-width:135px;\n\n  }\n\n\n  #haga-home-top .haga-home-hero h1{\n\n    font-size:38px;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function(){\n\n  const searchButton =\n    document.getElementById(\n      \"haga-home-search\"\n    );\n\n\n  const searchBox =\n    document.getElementById(\n      \"haga-home-search-box\"\n    );\n\n\n  const searchInput =\n    document.getElementById(\n      \"haga-home-search-input\"\n    );\n\n\n  if(searchButton){\n\n    searchButton.addEventListener(\n      \"click\",\n      function(){\n\n        searchBox.classList.toggle(\n          \"open\"\n        );\n\n\n        if(\n          searchBox.classList.contains(\n            \"open\"\n          )\n        ){\n\n          searchInput.focus();\n\n        }\n\n      }\n    );\n\n  }\n\n\n  if(searchInput){\n\n    searchInput.addEventListener(\n      \"keydown\",\n      function(event){\n\n        if(\n          event.key === \"Enter\"\n        ){\n\n          const value =\n            searchInput.value.trim();\n\n\n          if(value){\n\n            window.location.href =\n              \"\/shop\/?s=\" +\n              encodeURIComponent(\n                value\n              );\n\n          }\n\n        }\n\n      }\n    );\n\n  }\n\n\n  \/* CART COUNT *\/\n\n  fetch(\n    \"\/wp-json\/wc\/store\/v1\/cart\",\n    {\n      credentials:\"same-origin\"\n    }\n  )\n  .then(\n    response =>\n      response.ok\n      ? response.json()\n      : null\n  )\n  .then(\n    cart => {\n\n      if(!cart) return;\n\n\n      const count =\n        document.getElementById(\n          \"haga-home-cart-count\"\n        );\n\n\n      if(count){\n\n        count.textContent =\n          cart.items_count || 0;\n\n      }\n\n    }\n  )\n  .catch(\n    () => {}\n  );\n\n})();\n\n<\/script><!-- =========================================================\n HAGA SOUVENIR \u2014 FRONT PAGE SEARCH \/ FILTER SHOP\n L\u00e4gg hela detta block i Elementor HTML p\u00e5 startsidan.\n========================================================= -->\n\n<section id=\"haga-front-shop\">\n\n  <div class=\"haga-front-container\">\n\n    <!-- HEADER -->\n    <div class=\"haga-front-heading\">\n\n      <div>\n        <span class=\"haga-front-eyebrow\">\n          HAGA SOUVENIR\n        <\/span>\n\n        <h2>\n          Hitta din souvenir\n        <\/h2>\n\n        <p>\n          S\u00f6k bland svenska souvenirer, G\u00f6teborgsprodukter,\n          presenter och handplockade favoriter fr\u00e5n Haga.\n        <\/p>\n      <\/div>\n\n      <a\n        href=\"\/shop\/\"\n        class=\"haga-front-all\">\n        Visa hela shoppen \u2192\n      <\/a>\n\n    <\/div>\n\n\n    <!-- SEARCH BAR -->\n    <div class=\"haga-search-row\">\n\n      <div class=\"haga-search-box\">\n\n        <span class=\"haga-search-icon\">\n          \u2315\n        <\/span>\n\n        <input\n          id=\"haga-front-search\"\n          type=\"search\"\n          placeholder=\"S\u00f6k produkter...\"\n          autocomplete=\"off\"\n          aria-label=\"S\u00f6k produkter\">\n\n        <button\n          type=\"button\"\n          id=\"haga-clear-search\"\n          class=\"haga-clear\"\n          aria-label=\"Rensa s\u00f6kning\">\n          \u00d7\n        <\/button>\n\n      <\/div>\n\n\n      <button\n        type=\"button\"\n        id=\"haga-filter-toggle\"\n        class=\"haga-filter-button\">\n\n        <span>\u2637<\/span>\n        Filter\n\n      <\/button>\n\n\n      <div class=\"haga-sort-wrap\">\n\n        <span>\n          Sortera\n        <\/span>\n\n        <select\n          id=\"haga-front-sort\"\n          aria-label=\"Sortera produkter\">\n\n          <option value=\"recommended\">\n            Rekommenderat\n          <\/option>\n\n          <option value=\"date\">\n            Nyast\n          <\/option>\n\n          <option value=\"price\">\n            Pris: l\u00e4gst\n          <\/option>\n\n          <option value=\"price-desc\">\n            Pris: h\u00f6gst\n          <\/option>\n\n          <option value=\"title\">\n            Namn\n          <\/option>\n\n        <\/select>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- FILTERS -->\n    <div\n      id=\"haga-front-filters\"\n      class=\"haga-front-filters\">\n\n      <div class=\"haga-filter-group\">\n\n        <label for=\"haga-front-category\">\n          Kategori\n        <\/label>\n\n        <select\n          id=\"haga-front-category\">\n\n          <option value=\"\">\n            Alla kategorier\n          <\/option>\n\n        <\/select>\n\n      <\/div>\n\n\n      <div class=\"haga-filter-group\">\n\n        <label>\n          Pris\n        <\/label>\n\n        <div class=\"haga-price-buttons\">\n\n          <button\n            type=\"button\"\n            data-price=\"\">\n            Alla\n          <\/button>\n\n          <button\n            type=\"button\"\n            data-price=\"0-100\">\n            Under 100 kr\n          <\/button>\n\n          <button\n            type=\"button\"\n            data-price=\"100-250\">\n            100\u2013250 kr\n          <\/button>\n\n          <button\n            type=\"button\"\n            data-price=\"250-500\">\n            250\u2013500 kr\n          <\/button>\n\n          <button\n            type=\"button\"\n            data-price=\"500+\">\n            500+ kr\n          <\/button>\n\n        <\/div>\n\n      <\/div>\n\n\n      <button\n        type=\"button\"\n        id=\"haga-reset-filter\"\n        class=\"haga-reset\">\n\n        Rensa filter\n\n      <\/button>\n\n    <\/div>\n\n\n    <!-- ACTIVE FILTER INFO -->\n    <div\n      id=\"haga-filter-info\"\n      class=\"haga-filter-info\">\n\n      <span id=\"haga-result-count\">\n        H\u00e4mtar produkter...\n      <\/span>\n\n    <\/div>\n\n\n    <!-- PRODUCTS -->\n    <div\n      id=\"haga-front-products\"\n      class=\"haga-front-products\">\n\n      <div class=\"haga-front-loading\">\n        <div class=\"haga-spinner\"><\/div>\n        H\u00e4mtar produkter fr\u00e5n Haga...\n      <\/div>\n\n    <\/div>\n\n\n    <!-- LOAD MORE -->\n    <div class=\"haga-load-more-wrap\">\n\n      <button\n        type=\"button\"\n        id=\"haga-front-more\"\n        class=\"haga-load-more\">\n\n        Ladda fler produkter \u2193\n\n      <\/button>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   HAGA FRONT SHOP\n========================================================= *\/\n\n#haga-front-shop{\n\n  --haga-navy:#173a63;\n  --haga-blue:#0878bd;\n  --haga-blue-soft:#eaf6fb;\n  --haga-yellow:#ffc400;\n  --haga-yellow-hover:#eab300;\n  --haga-cream:#faf8f1;\n  --haga-text:#172b46;\n  --haga-muted:#6f7f8f;\n  --haga-border:#e4e9ed;\n\n  width:100%;\n  padding:60px 0;\n\n  background:#fff;\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Arial,\n    sans-serif;\n\n  color:var(--haga-text);\n\n}\n\n\n#haga-front-shop *{\n  box-sizing:border-box;\n}\n\n\n.haga-front-container{\n\n  width:min(\n    1280px,\n    calc(100% - 40px)\n  );\n\n  margin:0 auto;\n\n}\n\n\n\/* =========================================================\n   HEADING\n========================================================= *\/\n\n.haga-front-heading{\n\n  display:flex;\n\n  align-items:flex-end;\n\n  justify-content:space-between;\n\n  gap:30px;\n\n  margin-bottom:28px;\n\n}\n\n\n.haga-front-eyebrow{\n\n  display:block;\n\n  margin-bottom:8px;\n\n  color:#0878bd;\n\n  font-size:11px;\n\n  font-weight:900;\n\n  letter-spacing:.12em;\n\n}\n\n\n.haga-front-heading h2{\n\n  margin:0;\n\n  color:#173a63;\n\n  font-size:\n    clamp(28px,3vw,38px);\n\n  line-height:1.1;\n\n  font-weight:850;\n\n  letter-spacing:-.025em;\n\n}\n\n\n.haga-front-heading p{\n\n  max-width:650px;\n\n  margin:10px 0 0;\n\n  color:#6f7f8f;\n\n  font-size:15px;\n\n  line-height:1.65;\n\n}\n\n\n.haga-front-all{\n\n  flex:0 0 auto;\n\n  color:#0878bd!important;\n\n  font-size:13px;\n\n  font-weight:800;\n\n  text-decoration:none!important;\n\n  white-space:nowrap;\n\n}\n\n\n.haga-front-all:hover{\n\n  text-decoration:underline!important;\n\n}\n\n\n\/* =========================================================\n   SEARCH ROW\n========================================================= *\/\n\n.haga-search-row{\n\n  display:grid;\n\n  grid-template-columns:\n    minmax(250px,1fr)\n    auto\n    auto;\n\n  gap:9px;\n\n  padding:10px;\n\n  border:1px solid #e4e9ed;\n\n  border-radius:12px;\n\n  background:#fff;\n\n}\n\n\n.haga-search-box{\n\n  position:relative;\n\n  display:flex;\n\n  align-items:center;\n\n}\n\n\n.haga-search-icon{\n\n  position:absolute;\n\n  left:15px;\n\n  color:#7a8996;\n\n  font-size:19px;\n\n  pointer-events:none;\n\n}\n\n\n#haga-front-search{\n\n  width:100%;\n\n  height:46px;\n\n  padding:\n    0 40px 0 42px;\n\n  border:0;\n\n  outline:none;\n\n  background:#fff;\n\n  color:#173a63;\n\n  font-size:14px;\n\n}\n\n\n#haga-front-search::placeholder{\n\n  color:#8995a0;\n\n}\n\n\n.haga-clear{\n\n  position:absolute;\n\n  right:8px;\n\n  width:30px;\n  height:30px;\n\n  display:none;\n\n  align-items:center;\n  justify-content:center;\n\n  border:0;\n\n  border-radius:50%;\n\n  background:#f1f4f6;\n\n  color:#6f7f8f;\n\n  cursor:pointer;\n\n  font-size:18px;\n\n}\n\n\n.haga-clear.is-visible{\n\n  display:flex;\n\n}\n\n\n.haga-filter-button{\n\n  min-width:90px;\n\n  height:46px;\n\n  padding:0 16px;\n\n  border:1px solid #d8e0e5;\n\n  border-radius:9px;\n\n  background:#fff;\n\n  color:#173a63;\n\n  font-size:13px;\n\n  font-weight:750;\n\n  cursor:pointer;\n\n}\n\n\n.haga-filter-button:hover,\n.haga-filter-button.active{\n\n  background:#eaf6fb;\n\n  border-color:#0878bd;\n\n  color:#0878bd;\n\n}\n\n\n.haga-sort-wrap{\n\n  min-width:190px;\n\n  display:flex;\n\n  align-items:center;\n\n  gap:8px;\n\n}\n\n\n.haga-sort-wrap > span{\n\n  color:#6f7f8f;\n\n  font-size:12px;\n\n  white-space:nowrap;\n\n}\n\n\n#haga-front-sort{\n\n  width:100%;\n\n  height:46px;\n\n  padding:0 12px;\n\n  border:1px solid #e4e9ed;\n\n  border-radius:9px;\n\n  background:#fff;\n\n  color:#173a63;\n\n  font-size:13px;\n\n  outline:none;\n\n}\n\n\n\/* =========================================================\n   FILTER AREA\n========================================================= *\/\n\n.haga-front-filters{\n\n  display:none;\n\n  grid-template-columns:\n    minmax(200px,.7fr)\n    minmax(300px,1.5fr)\n    auto;\n\n  align-items:end;\n\n  gap:20px;\n\n  padding:20px;\n\n  margin-top:8px;\n\n  border:1px solid #e4e9ed;\n\n  border-radius:12px;\n\n  background:#faf8f1;\n\n}\n\n\n.haga-front-filters.open{\n\n  display:grid;\n\n}\n\n\n.haga-filter-group label{\n\n  display:block;\n\n  margin-bottom:7px;\n\n  color:#173a63;\n\n  font-size:12px;\n\n  font-weight:800;\n\n}\n\n\n#haga-front-category{\n\n  width:100%;\n\n  height:44px;\n\n  padding:0 12px;\n\n  border:1px solid #dfe5e9;\n\n  border-radius:8px;\n\n  background:#fff;\n\n  color:#173a63;\n\n  outline:none;\n\n}\n\n\n.haga-price-buttons{\n\n  display:flex;\n\n  flex-wrap:wrap;\n\n  gap:7px;\n\n}\n\n\n.haga-price-buttons button{\n\n  min-height:38px;\n\n  padding:7px 12px;\n\n  border:1px solid #dfe5e9;\n\n  border-radius:20px;\n\n  background:#fff;\n\n  color:#173a63;\n\n  font-size:12px;\n\n  font-weight:700;\n\n  cursor:pointer;\n\n}\n\n\n.haga-price-buttons button:hover,\n.haga-price-buttons button.active{\n\n  background:#ffc400;\n\n  border-color:#ffc400;\n\n  color:#173a63;\n\n}\n\n\n.haga-reset{\n\n  height:40px;\n\n  border:0;\n\n  background:transparent;\n\n  color:#6f7f8f;\n\n  font-size:12px;\n\n  font-weight:700;\n\n  text-decoration:underline;\n\n  cursor:pointer;\n\n}\n\n\n\/* =========================================================\n   RESULT INFO\n========================================================= *\/\n\n.haga-filter-info{\n\n  min-height:42px;\n\n  display:flex;\n\n  align-items:center;\n\n}\n\n\n#haga-result-count{\n\n  color:#6f7f8f;\n\n  font-size:12px;\n\n}\n\n\n\/* =========================================================\n   PRODUCTS\n========================================================= *\/\n\n.haga-front-products{\n\n  display:grid;\n\n  grid-template-columns:\n    repeat(4,minmax(0,1fr));\n\n  gap:18px;\n\n}\n\n\n.haga-front-card{\n\n  position:relative;\n\n  min-width:0;\n\n  padding:9px;\n\n  background:#fff;\n\n  border:1px solid #e4e9ed;\n\n  border-radius:16px;\n\n  overflow:hidden;\n\n  box-shadow:\n    0 5px 20px rgba(23,58,99,.07);\n\n  transition:\n    transform .2s ease,\n    box-shadow .2s ease;\n\n}\n\n\n.haga-front-card:hover{\n\n  transform:translateY(-3px);\n\n  box-shadow:\n    0 12px 30px rgba(23,58,99,.12);\n\n}\n\n\n.haga-front-image{\n\n  position:relative;\n\n  display:block;\n\n  aspect-ratio:1\/1;\n\n  overflow:hidden;\n\n  border-radius:10px;\n\n  background:#faf9f5;\n\n}\n\n\n.haga-front-image img{\n\n  width:100%;\n  height:100%;\n\n  display:block;\n\n  object-fit:contain;\n\n  transition:\n    transform .25s ease;\n\n}\n\n\n.haga-front-card:hover\n.haga-front-image img{\n\n  transform:scale(1.025);\n\n}\n\n\n.haga-front-new{\n\n  position:absolute;\n\n  top:8px;\n  left:8px;\n\n  z-index:2;\n\n  padding:4px 7px;\n\n  border-radius:5px;\n\n  background:#fff;\n\n  color:#0878bd;\n\n  font-size:9px;\n\n  font-weight:900;\n\n  text-transform:uppercase;\n\n  box-shadow:\n    0 2px 7px rgba(0,0,0,.08);\n\n}\n\n\n.haga-front-heart{\n\n  position:absolute;\n\n  top:8px;\n  right:8px;\n\n  z-index:3;\n\n  width:32px;\n  height:32px;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  border:0;\n\n  border-radius:50%;\n\n  background:#fff;\n\n  color:#173a63;\n\n  box-shadow:\n    0 2px 8px rgba(0,0,0,.10);\n\n  cursor:pointer;\n\n  font-size:17px;\n\n}\n\n\n.haga-front-card-info{\n\n  padding:12px 4px 4px;\n\n}\n\n\n.haga-front-card-category{\n\n  display:block;\n\n  width:100%;\n  min-width:0;\n  margin-bottom:4px;\n  overflow:hidden;\n  white-space:nowrap;\n  text-overflow:ellipsis;\n\n  color:#6f7f8f;\n\n  font-size:9px;\n  line-height:1.2;\n\n  font-weight:800;\n\n  letter-spacing:.06em;\n\n  text-transform:uppercase;\n\n}\n\n\n.haga-front-card-title{\n\n  height:38px;\n  min-height:38px;\n  margin:0 0 7px;\n  overflow:hidden;\n  display:-webkit-box;\n  -webkit-box-orient:vertical;\n  -webkit-line-clamp:2;\n\n  color:#173a63;\n\n  font-family:\n    Georgia,\n    \"Times New Roman\",\n    serif;\n\n  font-size:15px;\n\n  line-height:1.25;\n\n  font-weight:700;\n\n}\n\n\n.haga-front-card-title a{\n\n  color:inherit!important;\n\n  text-decoration:none!important;\n\n}\n\n\n.haga-front-card-price{\n\n  margin-bottom:10px;\n\n  color:#173a63;\n\n  font-size:16px;\n\n  font-weight:850;\n\n}\n\n\n.haga-front-card-buy{\n\n  width:100%;\n\n  min-height:40px;\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  border-radius:8px;\n\n  background:#ffc400;\n\n  color:#173a63!important;\n\n  font-size:11px;\n\n  font-weight:900;\n\n  text-decoration:none!important;\n\n}\n\n\n.haga-front-card-buy:hover{\n\n  background:#eab300;\n\n}\n\n\n\/* =========================================================\n   LOADING\n========================================================= *\/\n\n.haga-front-loading{\n\n  grid-column:1\/-1;\n\n  min-height:250px;\n\n  display:flex;\n\n  flex-direction:column;\n\n  align-items:center;\n  justify-content:center;\n\n  gap:12px;\n\n  color:#6f7f8f;\n\n  font-size:13px;\n\n}\n\n\n.haga-spinner{\n\n  width:30px;\n  height:30px;\n\n  border:3px solid #eaf6fb;\n\n  border-top-color:#0878bd;\n\n  border-radius:50%;\n\n  animation:\n    haga-spin .8s linear infinite;\n\n}\n\n\n@keyframes haga-spin{\n\n  to{\n    transform:rotate(360deg);\n  }\n\n}\n\n\n\/* =========================================================\n   LOAD MORE\n========================================================= *\/\n\n.haga-load-more-wrap{\n\n  display:flex;\n\n  justify-content:center;\n\n  margin-top:30px;\n\n}\n\n\n.haga-load-more{\n\n  min-height:46px;\n\n  padding:0 24px;\n\n  border:1px solid #dce3e7;\n\n  border-radius:10px;\n\n  background:#fff;\n\n  color:#173a63;\n\n  font-size:13px;\n\n  font-weight:800;\n\n  cursor:pointer;\n\n}\n\n\n.haga-load-more:hover{\n\n  background:#eaf6fb;\n\n  border-color:#0878bd;\n\n}\n\n\n.haga-load-more.hidden{\n\n  display:none;\n\n}\n\n\n\/* =========================================================\n   ERROR\n========================================================= *\/\n\n.haga-front-error{\n\n  grid-column:1\/-1;\n\n  padding:30px;\n\n  border:1px solid #efd0d2;\n\n  border-radius:12px;\n\n  background:#fff7f7;\n\n  color:#9b3038;\n\n  text-align:center;\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media(max-width:1000px){\n\n  .haga-front-products{\n\n    grid-template-columns:\n      repeat(3,minmax(0,1fr));\n\n  }\n\n\n  .haga-search-row{\n\n    grid-template-columns:\n      1fr auto;\n\n  }\n\n\n  .haga-sort-wrap{\n\n    grid-column:1\/-1;\n\n  }\n\n\n  .haga-front-filters{\n\n    grid-template-columns:1fr 1fr;\n\n  }\n\n\n  .haga-reset{\n\n    justify-self:start;\n\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media(max-width:767px){\n\n  #haga-front-shop{\n\n    padding:42px 0;\n\n  }\n\n\n  .haga-front-container{\n\n    width:\n      calc(100% - 28px);\n\n  }\n\n\n  .haga-front-heading{\n\n    flex-direction:column;\n\n    align-items:flex-start;\n\n    gap:12px;\n\n  }\n\n\n  .haga-front-heading h2{\n\n    font-size:29px;\n\n  }\n\n\n  .haga-front-heading p{\n\n    font-size:14px;\n\n  }\n\n\n  .haga-front-all{\n\n    display:none;\n\n  }\n\n\n  .haga-search-row{\n\n    display:grid;\n\n    grid-template-columns:\n      1fr auto;\n\n    padding:7px;\n\n  }\n\n\n  .haga-search-box{\n\n    grid-column:1\/-1;\n\n  }\n\n\n  .haga-filter-button{\n\n    width:100%;\n\n  }\n\n\n  .haga-sort-wrap{\n\n    grid-column:auto;\n\n    min-width:0;\n\n  }\n\n\n  .haga-sort-wrap > span{\n\n    display:none;\n\n  }\n\n\n  #haga-front-sort{\n\n    height:42px;\n\n  }\n\n\n  .haga-front-filters{\n\n  width:100%;\n  min-width:0;\n  max-width:100%;\n\n  grid-template-columns:minmax(0,1fr);\n\n    gap:15px;\n\n    padding:15px;\n\n  }\n\n\n  .haga-filter-group{\n\n    min-width:0;\n    width:100%;\n\n  }\n\n\n  #haga-front-category{\n\n    width:100%;\n    min-width:0;\n    max-width:100%;\n    font-size:14px;\n    line-height:1.2;\n\n  }\n\n\n  .haga-front-filters.open{\n\n    display:grid;\n\n  }\n\n\n  .haga-front-products{\n\n    grid-template-columns:\n      repeat(2,minmax(0,1fr));\n\n    gap:10px;\n\n  }\n\n\n  .haga-front-card{\n\n    padding:7px;\n\n    border-radius:13px;\n\n  }\n\n\n  .haga-front-card-info{\n\n    padding:9px 3px 3px;\n\n  }\n\n\n  .haga-front-card-category{\n\n    font-size:8px;\n\n  }\n\n\n  .haga-front-card-title{\n\n    min-height:38px;\n\n    font-size:12px;\n\n  }\n\n\n  .haga-front-card-price{\n\n    font-size:15px;\n\n  }\n\n\n  .haga-front-card-buy{\n\n    min-height:39px;\n\n    font-size:10px;\n\n  }\n\n\n  .haga-front-heart{\n\n    width:29px;\n    height:29px;\n\n    font-size:15px;\n\n  }\n\n\n  .haga-front-new{\n\n    font-size:8px;\n\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media(max-width:390px){\n\n  .haga-front-products{\n\n    gap:8px;\n\n  }\n\n\n  .haga-front-card-title{\n\n    font-size:11px;\n\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n(function(){\n\n\"use strict\";\n\n\n\/* =========================================================\n   CONFIG\n========================================================= *\/\n\nconst API =\n  \"\/wp-json\/wc\/store\/v1\";\n\n\nconst productsElement =\n  document.getElementById(\n    \"haga-front-products\"\n  );\n\n\nif(!productsElement) return;\n\n\nlet currentPage = 1;\n\nlet totalPages = 1;\n\nlet loading = false;\n\n\n\/* =========================================================\n   ELEMENTS\n========================================================= *\/\n\nconst searchInput =\n  document.getElementById(\n    \"haga-front-search\"\n  );\n\n\nconst clearButton =\n  document.getElementById(\n    \"haga-clear-search\"\n  );\n\n\nconst filterToggle =\n  document.getElementById(\n    \"haga-filter-toggle\"\n  );\n\n\nconst filters =\n  document.getElementById(\n    \"haga-front-filters\"\n  );\n\n\nconst categorySelect =\n  document.getElementById(\n    \"haga-front-category\"\n  );\n\n\nconst sortSelect =\n  document.getElementById(\n    \"haga-front-sort\"\n  );\n\n\nconst resetButton =\n  document.getElementById(\n    \"haga-reset-filter\"\n  );\n\n\nconst resultCount =\n  document.getElementById(\n    \"haga-result-count\"\n  );\n\n\nconst moreButton =\n  document.getElementById(\n    \"haga-front-more\"\n  );\n\n\nconst priceButtons =\n  document.querySelectorAll(\n    \"#haga-front-filters [data-price]\"\n  );\n\n\nlet selectedPrice = \"\";\n\n\n\/* =========================================================\n   ESCAPE\n========================================================= *\/\n\nfunction esc(value){\n\n  return String(\n    value ?? \"\"\n  )\n  .replace(\/&\/g,\"&amp;\")\n  .replace(\/<\/g,\"&lt;\")\n  .replace(\/>\/g,\"&gt;\")\n  .replace(\/\"\/g,\"&quot;\")\n  .replace(\/'\/g,\"&#039;\");\n\n}\n\n\n\/* =========================================================\n   PRICE\n========================================================= *\/\n\nfunction getProductPrice(product){\n\n  if(\n    !product ||\n    !product.prices ||\n    !product.prices.price\n  ){\n\n    return 0;\n\n  }\n\n\n  const decimals =\n    Number(\n      product.prices.currency_minor_unit ?? 2\n    );\n\n\n  return Number(\n    product.prices.price\n  ) \/ Math.pow(\n    10,\n    decimals\n  );\n\n}\n\n\nfunction formatPrice(product){\n\n  const price =\n    getProductPrice(product);\n\n\n  if(!price){\n\n    return \"\";\n\n  }\n\n\n  const currency =\n    product.prices.currency_symbol ||\n    \"kr\";\n\n\n  return new Intl.NumberFormat(\n    \"sv-SE\",\n    {\n      maximumFractionDigits:2\n    }\n  ).format(price)\n  + \" \"\n  + currency;\n\n}\n\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\nfunction getImage(product){\n\n  if(\n    product.images &&\n    product.images.length\n  ){\n\n    return product.images[0].src;\n\n  }\n\n\n  return \"\";\n\n}\n\n\n\/* =========================================================\n   CATEGORY\n========================================================= *\/\n\nfunction getCategory(product){\n\n  if(\n    product.categories &&\n    product.categories.length\n  ){\n\n    return product.categories[0].name;\n\n  }\n\n\n  return \"\";\n\n}\n\n\n\/* =========================================================\n   PRODUCT CARD\n========================================================= *\/\n\nfunction productCard(product){\n\n  const url =\n    product.permalink ||\n    (\n      \"\/product\/\" +\n      encodeURIComponent(\n        product.slug\n      ) +\n      \"\/\"\n    );\n\n\n  const img =\n    getImage(product);\n\n\n  const category =\n    getCategory(product);\n\n\n  return `\n\n    <article\n      class=\"haga-front-card\">\n\n      <a\n        href=\"${esc(url)}\"\n        class=\"haga-front-image\">\n\n        ${\n          img\n          ?\n          `<img decoding=\"async\"\n            src=\"${esc(img)}\"\n            alt=\"${esc(product.name)}\"\n            loading=\"lazy\">`\n          :\n          \"\"\n        }\n\n\n        ${\n          product.date_created && ((Date.now() - new Date(product.date_created).getTime()) < 30 * 24 * 60 * 60 * 1000)\n          ?\n          `<span class=\"haga-front-new\">\n            NY\n          <\/span>`\n          :\n          \"\"\n        }\n\n      <\/a>\n\n\n      <button\n        type=\"button\"\n        class=\"haga-front-heart\"\n        aria-label=\"L\u00e4gg till favorit\">\n\n        \u2661\n\n      <\/button>\n\n\n      <div class=\"haga-front-card-info\">\n\n        ${\n          category\n          ?\n          `\n          <span class=\"haga-front-card-category\">\n            ${esc(category)}\n          <\/span>\n          `\n          :\n          \"\"\n        }\n\n\n        <h3\n          class=\"haga-front-card-title\">\n\n          <a href=\"${esc(url)}\">\n\n            ${esc(product.name)}\n\n          <\/a>\n\n        <\/h3>\n\n\n        <div\n          class=\"haga-front-card-price\">\n\n          ${formatPrice(product)}\n\n        <\/div>\n\n\n        <a\n          href=\"${esc(url)}\"\n          class=\"haga-front-card-buy\">\n\n          Visa produkt\n\n        <\/a>\n\n      <\/div>\n\n    <\/article>\n\n  `;\n\n}\n\n\n\/* =========================================================\n   LOAD CATEGORIES\n========================================================= *\/\n\nasync function loadCategories(){\n\n  try{\n\n    const response =\n      await fetch(\n        API +\n        \"\/products\/categories?per_page=100\",\n        {\n          credentials:\"same-origin\"\n        }\n      );\n\n\n    if(!response.ok){\n\n      return;\n\n    }\n\n\n    const categories =\n      await response.json();\n\n\n    categories.filter(function(category){return Number(category.count)>0;}).forEach(\n      function(category){\n\n        const option =\n          document.createElement(\n            \"option\"\n          );\n\n\n        option.value =\n          category.id;\n\n\n        option.textContent =\n          String(category.name).replace(\/&amp;\/g,\"&\");\n\n\n        categorySelect.appendChild(\n          option\n        );\n\n      }\n    );\n\n\n  }catch(error){\n\n    console.warn(\n      \"Haga categories:\",\n      error\n    );\n\n  }\n\n}\n\n\n\/* =========================================================\n   PRICE QUERY\n========================================================= *\/\n\nfunction applyPriceFilter(products){\n\n  if(!selectedPrice){\n\n    return products;\n\n  }\n\n\n  return products.filter(\n    function(product){\n\n      const price =\n        getProductPrice(product);\n\n\n      if(\n        selectedPrice ===\n        \"0-100\"\n      ){\n\n        return price < 100;\n\n      }\n\n\n      if(\n        selectedPrice ===\n        \"100-250\"\n      ){\n\n        return (\n          price >= 100 &&\n          price <= 250\n        );\n\n      }\n\n\n      if(\n        selectedPrice ===\n        \"250-500\"\n      ){\n\n        return (\n          price > 250 &&\n          price <= 500\n        );\n\n      }\n\n\n      if(\n        selectedPrice ===\n        \"500+\"\n      ){\n\n        return price > 500;\n\n      }\n\n\n      return true;\n\n    }\n  );\n\n}\n\n\n\/* =========================================================\n   BUILD QUERY\n========================================================= *\/\n\nfunction buildQuery(){\n\n  const params =\n    new URLSearchParams();\n\n\n  params.set(\n    \"per_page\",\n    \"24\"\n  );\n\n\n  params.set(\n    \"page\",\n    currentPage\n  );\n\n\n  const search =\n    searchInput.value.trim();\n\n\n  if(search){\n\n    params.set(\n      \"search\",\n      search\n    );\n\n  }\n\n\n  if(categorySelect.value){\n\n    params.set(\n      \"category\",\n      categorySelect.value\n    );\n\n  }\n\n\n  switch(sortSelect.value){\n\n    case \"price\":\n\n      params.set(\n        \"orderby\",\n        \"price\"\n      );\n\n      params.set(\n        \"order\",\n        \"asc\"\n      );\n\n      break;\n\n\n    case \"price-desc\":\n\n      params.set(\n        \"orderby\",\n        \"price\"\n      );\n\n      params.set(\n        \"order\",\n        \"desc\"\n      );\n\n      break;\n\n\n    case \"title\":\n\n      params.set(\n        \"orderby\",\n        \"title\"\n      );\n\n      params.set(\n        \"order\",\n        \"asc\"\n      );\n\n      break;\n\n\n    case \"date\":\n\n      params.set(\n        \"orderby\",\n        \"date\"\n      );\n\n      params.set(\n        \"order\",\n        \"desc\"\n      );\n\n      break;\n\n\n    default:\n\n      \/*\n       Recommended:\n       WooCommerce popularity.\n      *\/\n\n      params.set(\n        \"orderby\",\n        \"popularity\"\n      );\n\n      params.set(\n        \"order\",\n        \"desc\"\n      );\n\n  }\n\n\n  return params.toString();\n\n}\n\n\n\/* =========================================================\n   LOAD PRODUCTS\n========================================================= *\/\n\nasync function loadProducts(\n  append=false\n){\n\n  if(loading){\n\n    return;\n\n  }\n\n\n  loading = true;\n\n\n  if(!append){\n\n    productsElement.innerHTML = `\n\n      <div class=\"haga-front-loading\">\n\n        <div class=\"haga-spinner\"><\/div>\n\n        H\u00e4mtar produkter fr\u00e5n Haga...\n\n      <\/div>\n\n    `;\n\n  }\n\n\n  try{\n\n    const response =\n      await fetch(\n        API +\n        \"\/products?\" +\n        buildQuery(),\n        {\n          credentials:\"same-origin\"\n        }\n      );\n\n\n    if(!response.ok){\n\n      throw new Error(\n        \"Produkt-API svarade inte.\"\n      );\n\n    }\n\n\n    const products =\n      await response.json();\n\n\n    totalPages =\n      Number(\n        response.headers.get(\n          \"X-WP-TotalPages\"\n        )\n      ) || 1;\n\n\n    const filtered =\n      applyPriceFilter(\n        products\n      );\n\n\n    if(!append){\n\n      productsElement.innerHTML = \"\";\n\n    }\n\n\n    if(!filtered.length && !append){\n\n      productsElement.innerHTML = `\n\n        <div class=\"haga-front-error\">\n\n          <strong>\n            Inga produkter hittades.\n          <\/strong>\n\n          <br>\n\n          Prova ett annat s\u00f6kord eller\n          rensa filtren.\n\n        <\/div>\n\n      `;\n\n    }\n\n    else{\n\n      productsElement.insertAdjacentHTML(\n        \"beforeend\",\n        filtered\n          .map(productCard)\n          .join(\"\")\n      );\n\n    }\n\n\n    resultCount.textContent =\n      filtered.length +\n      \" produkter visas\";\n\n\n    if(\n      currentPage >= totalPages\n    ){\n\n      moreButton.classList.add(\n        \"hidden\"\n      );\n\n    }\n    else{\n\n      moreButton.classList.remove(\n        \"hidden\"\n      );\n\n    }\n\n\n  }catch(error){\n\n    console.error(error);\n\n\n    productsElement.innerHTML = `\n\n      <div class=\"haga-front-error\">\n\n        Kunde inte h\u00e4mta produkterna.\n\n        <br><br>\n\n        <a\n          href=\"\/shop\/\"\n          class=\"haga-btn haga-btn-yellow\">\n\n          \u00d6ppna shoppen\n\n        <\/a>\n\n      <\/div>\n\n    `;\n\n  }\n\n\n  loading = false;\n\n}\n\n\n\/* =========================================================\n   NEW SEARCH\n========================================================= *\/\n\nfunction refreshProducts(){\n\n  currentPage = 1;\n\n  loadProducts(false);\n\n}\n\n\n\/* =========================================================\n   SEARCH\n========================================================= *\/\n\nlet searchTimer;\n\n\nsearchInput.addEventListener(\n  \"input\",\n  function(){\n\n    if(\n      searchInput.value.trim()\n    ){\n\n      clearButton.classList.add(\n        \"is-visible\"\n      );\n\n    }\n    else{\n\n      clearButton.classList.remove(\n        \"is-visible\"\n      );\n\n    }\n\n\n    clearTimeout(\n      searchTimer\n    );\n\n\n    searchTimer =\n      setTimeout(\n        refreshProducts,\n        350\n      );\n\n  }\n);\n\n\n\/* =========================================================\n   CLEAR SEARCH\n========================================================= *\/\n\nclearButton.addEventListener(\n  \"click\",\n  function(){\n\n    searchInput.value = \"\";\n\n    clearButton.classList.remove(\n      \"is-visible\"\n    );\n\n    refreshProducts();\n\n    searchInput.focus();\n\n  }\n);\n\n\n\/* =========================================================\n   FILTER BUTTON\n========================================================= *\/\n\nfilterToggle.addEventListener(\n  \"click\",\n  function(){\n\n    filters.classList.toggle(\n      \"open\"\n    );\n\n    filterToggle.classList.toggle(\n      \"active\"\n    );\n\n  }\n);\n\n\n\/* =========================================================\n   CATEGORY\n========================================================= *\/\n\ncategorySelect.addEventListener(\n  \"change\",\n  function(){\n\n    refreshProducts();\n\n  }\n);\n\n\n\/* =========================================================\n   SORT\n========================================================= *\/\n\nsortSelect.addEventListener(\n  \"change\",\n  function(){\n\n    refreshProducts();\n\n  }\n);\n\n\n\/* =========================================================\n   PRICE\n========================================================= *\/\n\npriceButtons.forEach(\n  function(button){\n\n    button.addEventListener(\n      \"click\",\n      function(){\n\n        priceButtons.forEach(\n          function(item){\n\n            item.classList.remove(\n              \"active\"\n            );\n\n          }\n        );\n\n\n        button.classList.add(\n          \"active\"\n        );\n\n\n        selectedPrice =\n          button.dataset.price ||\n          \"\";\n\n\n        refreshProducts();\n\n      }\n    );\n\n  }\n);\n\n\n\/* =========================================================\n   RESET\n========================================================= *\/\n\nresetButton.addEventListener(\n  \"click\",\n  function(){\n\n    searchInput.value = \"\";\n\n    categorySelect.value = \"\";\n\n    selectedPrice = \"\";\n\n    sortSelect.value =\n      \"recommended\";\n\n\n    priceButtons.forEach(\n      function(button){\n\n        button.classList.remove(\n          \"active\"\n        );\n\n      }\n    );\n\n\n    clearButton.classList.remove(\n      \"is-visible\"\n    );\n\n\n    refreshProducts();\n\n  }\n);\n\n\n\/* =========================================================\n   LOAD MORE\n========================================================= *\/\n\nmoreButton.addEventListener(\n  \"click\",\n  function(){\n\n    if(\n      currentPage >= totalPages ||\n      loading\n    ){\n\n      return;\n\n    }\n\n\n    currentPage++;\n\n    loadProducts(true);\n\n  }\n);\n\n\n\/* =========================================================\n   START\n========================================================= *\/\n\nloadCategories();\n\nloadProducts(false);\n\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\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>Shop G\u00f6teborg Svenska souvenirer Presenter \u2315 \u2661 \ud83d\uded2 0 G\u00d6TEBORG \u2022 HAGA Souvenirer fr\u00e5n G\u00f6teborg \u2013 Haga Souvenir Svenska souvenirer, presenter och sm\u00e5 favoriter fr\u00e5n historiska Haga i G\u00f6teborg. Handla souvenirer Uppt\u00e4ck G\u00f6teborg \ud83d\ude9a Snabb leverans 2\u20134 arbetsdagar \ud83d\udd12 S\u00e4kra betalningar Kortbetalning \ud83c\udf81 Perfekt som present Handplockat fr\u00e5n Haga HAGA SOUVENIR Hitta din souvenir S\u00f6k [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_yoast_wpseo_title":"Souvenir G\u00f6teborg | G\u00f6teborg Souvenir Shop | Haga Souvenir","_yoast_wpseo_metadesc":"Bes\u00f6k Haga Souvenir i G\u00f6teborg eller handla online. Hitta G\u00f6teborgssouvenirer, magneter, svenska presenter och sm\u00e5 minnen fr\u00e5n Haga.","_yoast_wpseo_focuskw":"souvenir g\u00f6teborg","rank_math_title":"Haga Souvenir Gothenburg | Swedish Gifts & Dala Horses","rank_math_description":"Shop Swedish souvenirs, hand-painted Dala horses, Gothenburg gifts and local crafts from Haga Souvenir in historic Haga, Gothenburg. Shop online or visit us in-store.","rank_math_focus_keyword":"Swedish gifts Gothenburg","_aioseop_title":"","_aioseop_description":""},"class_list":["post-14084","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hagasouvenir.se\/en\/wp-json\/wp\/v2\/pages\/14084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hagasouvenir.se\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hagasouvenir.se\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hagasouvenir.se\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hagasouvenir.se\/en\/wp-json\/wp\/v2\/comments?post=14084"}],"version-history":[{"count":224,"href":"https:\/\/hagasouvenir.se\/en\/wp-json\/wp\/v2\/pages\/14084\/revisions"}],"predecessor-version":[{"id":96519,"href":"https:\/\/hagasouvenir.se\/en\/wp-json\/wp\/v2\/pages\/14084\/revisions\/96519"}],"wp:attachment":[{"href":"https:\/\/hagasouvenir.se\/en\/wp-json\/wp\/v2\/media?parent=14084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}