{"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-09-16T10:58:10","modified_gmt":"2026-09-16T10:58:10","slug":"home","status":"publish","type":"page","link":"https:\/\/hagasouvenir.se\/it\/","title":{"rendered":"Home"},"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>G\u00f6teborgssouvenirer, magneter och Dalah\u00e4star<\/h2>\n<p>V\u00e4lkommen till <strong>Haga Souvenir<\/strong>, en souvenirbutik i hj\u00e4rtat av G\u00f6teborg. P\u00e5 Haga Nygata 18 hittar du ett handplockat sortiment av <a href='\/product-category\/souvenirer\/'>svenska souvenirer<\/a>, presenter och lokala G\u00f6teborgsminnen. Bes\u00f6k v\u00e5r fysiska butik i den historiska stadsdelen Haga eller handla online och ta med dig en bit av G\u00f6teborg och Sverige hem. <a href='\/gothenburg-souvenirs\/'>Looking for a Gothenburg souvenir shop in English? Read our guide here.<\/a><\/p>\n<p>Letar du efter en present eller ett minne fr\u00e5n G\u00f6teborg? Hos Haga Souvenir hittar du bland annat handm\u00e5lade <a href='\/product-category\/souvenirer\/dalahastar\/'>Dalah\u00e4star<\/a>, <a href='\/product-category\/souvenirer\/magneter\/'>G\u00f6teborgsmagneter<\/a> med motiv fr\u00e5n Haga, Liseberg och stadens sp\u00e5rvagnar, samt svenska textilier, nyckelringar, gosedjur och andra presenter. Sortimentet \u00e4r utvalt med fokus p\u00e5 svensk design, hantverk och klassiska motiv fr\u00e5n G\u00f6teborg.<\/p>\n<h2>Handla svenska souvenirer online<\/h2>\n<p>Kan du inte bes\u00f6ka v\u00e5r butik p\u00e5 Haga Nygata? I v\u00e5r webbshop kan du enkelt best\u00e4lla <strong>svenska souvenirer<\/strong> och presenter online med s\u00e4ker betalning och leverans direkt hem till dig. Uppt\u00e4ck produkter inspirerade av G\u00f6teborg, Haga och svensk kultur och hitta ett fint minne fr\u00e5n ditt bes\u00f6k \u2013 oavsett om det \u00e4r till dig sj\u00e4lv eller som present.<\/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 Kort, Klarna &#038; Swish \ud83c\udf81 Perfekt som present Handplockat fr\u00e5n Haga HAGA SOUVENIR Hitta [&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":"Souvenir G\u00f6teborg | G\u00f6teborg Souvenir Shop | Haga Souvenir","rank_math_description":"Bes\u00f6k Haga Souvenir i G\u00f6teborg eller handla online. Hitta G\u00f6teborgssouvenirer, magneter, svenska presenter och sm\u00e5 minnen fr\u00e5n Haga.","rank_math_focus_keyword":"souvenir g\u00f6teborg","_aioseop_title":"","_aioseop_description":""},"class_list":["post-14084","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hagasouvenir.se\/it\/wp-json\/wp\/v2\/pages\/14084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hagasouvenir.se\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hagasouvenir.se\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hagasouvenir.se\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hagasouvenir.se\/it\/wp-json\/wp\/v2\/comments?post=14084"}],"version-history":[{"count":223,"href":"https:\/\/hagasouvenir.se\/it\/wp-json\/wp\/v2\/pages\/14084\/revisions"}],"predecessor-version":[{"id":96310,"href":"https:\/\/hagasouvenir.se\/it\/wp-json\/wp\/v2\/pages\/14084\/revisions\/96310"}],"wp:attachment":[{"href":"https:\/\/hagasouvenir.se\/it\/wp-json\/wp\/v2\/media?parent=14084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}