{"id":31697,"date":"2026-10-29T11:15:53","date_gmt":"2026-10-29T11:15:53","guid":{"rendered":"https:\/\/wrap.net.za\/?page_id=31697"},"modified":"2026-11-02T06:53:43","modified_gmt":"2026-11-02T06:53:43","slug":"choose-an-age","status":"publish","type":"page","link":"https:\/\/wrap.net.za\/af\/choose-an-age\/","title":{"rendered":"Choose an age"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"31697\" class=\"elementor elementor-31697\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65f743cc e-flex e-con-boxed e-con e-parent\" data-id=\"65f743cc\" 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-494f70ef elementor-widget elementor-widget-heading\" data-id=\"494f70ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Vir watse ouderdom?<br>(Stap 3 van 4)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-207312ff elementor-widget elementor-widget-heading\" data-id=\"207312ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Kies een of verskeie ouderdomme, of gaan voort sonder 'n keuse <\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-450d29c7 e-flex e-con-boxed e-con e-parent\" data-id=\"450d29c7\" 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-4758b426 elementor-widget elementor-widget-html\" data-id=\"4758b426\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"wrap-age-selector\">\n\n  <div class=\"wrap-age-scene\">\n    <img decoding=\"async\"\n      class=\"wrap-age-shelf\"\n      src=\"https:\/\/wrap.net.za\/wp-content\/uploads\/2026\/10\/AdobeStock_2385506-scaled.jpeg\"\n      alt=\"Books arranged on a library shelf\"\n    >\n\n    <div class=\"wrap-age-grid\">\n\n      <label class=\"wrap-age-choice\">\n        <input type=\"checkbox\" value=\"0-3-years\">\n        <img decoding=\"async\" src=\"https:\/\/wrap.net.za\/wp-content\/uploads\/2026\/10\/WRAP-Shelves.png\" alt=\"\">\n        <span>0-3 Jaar<\/span>\n      <\/label>\n\n      <label class=\"wrap-age-choice\">\n        <input type=\"checkbox\" value=\"3-6-years\">\n        <img decoding=\"async\" src=\"https:\/\/wrap.net.za\/wp-content\/uploads\/2026\/10\/WRAP-Shelves-1.png\" alt=\"\">\n        <span>3-6 Jaar<\/span>\n      <\/label>\n\n      <label class=\"wrap-age-choice\">\n        <input type=\"checkbox\" value=\"6-9-years\">\n        <img decoding=\"async\" src=\"https:\/\/wrap.net.za\/wp-content\/uploads\/2026\/10\/WRAP-Shelves-2.png\" alt=\"\">\n        <span>6-9 Jaar<\/span>\n      <\/label>\n\n      <label class=\"wrap-age-choice\">\n        <input type=\"checkbox\" value=\"10-14-years\">\n        <img decoding=\"async\" src=\"https:\/\/wrap.net.za\/wp-content\/uploads\/2026\/10\/WRAP-Shelves-3.png\" alt=\"\">\n        <span>10-14 Jaar<\/span>\n      <\/label>\n\n      <label class=\"wrap-age-choice\">\n        <input type=\"checkbox\" value=\"15-plus-years\">\n        <img decoding=\"async\" src=\"https:\/\/wrap.net.za\/wp-content\/uploads\/2026\/10\/WRAP-Shelves-4.png\" alt=\"\">\n        <span>15+ Jaar<\/span>\n      <\/label>\n\n    <\/div>\n  <\/div>\n\n  <div class=\"wrap-age-footer\">\n    <p id=\"wrap-age-count\" aria-live=\"polite\">No specific ages selected<\/p>\n\n    <div class=\"wrap-age-actions\">\n      <button id=\"wrap-any-age\" type=\"button\">Enige Ouderdom<\/button>\n      <button id=\"wrap-age-continue\" type=\"button\">\n        Gaan voort na Taal\n      <\/button>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<style>\n#wrap-age-selector {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n  font-family: inherit;\n}\n\n#wrap-age-selector .wrap-age-scene {\n  position: relative;\n  overflow: hidden;\n  border-radius: 12px;\n}\n\n#wrap-age-selector .wrap-age-shelf {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n#wrap-age-selector .wrap-age-grid {\n  position: absolute;\n  right: 4%;\n  bottom: 7%;\n  left: 4%;\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 14px;\n  align-items: end;\n}\n\n#wrap-age-selector .wrap-age-choice {\n  position: relative;\n  display: flex;\n  min-width: 0;\n  padding: 12px 8px;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 8px;\n  border: 3px solid rgba(255, 255, 255, 0.8);\n  border-radius: 12px;\n  background: rgba(242, 234, 225, 0.9);\n  cursor: pointer;\n  text-align: center;\n  transition:\n    border-color 0.2s ease,\n    background 0.2s ease,\n    transform 0.2s ease,\n    box-shadow 0.2s ease;\n}\n\n#wrap-age-selector .wrap-age-choice:hover {\n  border-color: #00BFB8;\n  transform: translateY(-3px);\n}\n\n#wrap-age-selector .wrap-age-choice input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n#wrap-age-selector .wrap-age-choice img {\n  display: block;\n  width: 90px;\n  max-width: 80%;\n  height: 90px;\n  object-fit: contain;\n}\n\n#wrap-age-selector .wrap-age-choice span {\n  color: #002C77;\n  font-size: 15px;\n  font-weight: 700;\n}\n\n#wrap-age-selector .wrap-age-choice.is-selected {\n  border-color: #00BFB8;\n  background: rgba(0, 191, 184, 0.9);\n  box-shadow: 0 0 0 4px rgba(0, 44, 119, 0.24);\n  transform: translateY(-5px);\n}\n\n#wrap-age-selector .wrap-age-choice.is-selected::after {\n  content: \"\u2713\";\n  position: absolute;\n  top: 7px;\n  right: 7px;\n  display: grid;\n  width: 29px;\n  height: 29px;\n  place-items: center;\n  border-radius: 50%;\n  color: #fff;\n  background: #002C77;\n  font-size: 18px;\n  font-weight: 700;\n}\n\n#wrap-age-selector .wrap-age-choice.is-selected span {\n  color: #002C77;\n}\n\n#wrap-age-selector .wrap-age-footer {\n  margin-top: 26px;\n  text-align: center;\n}\n\n#wrap-age-selector #wrap-age-count {\n  margin-bottom: 14px;\n  color: #002C77;\n  font-weight: 700;\n}\n\n#wrap-age-selector .wrap-age-actions {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n#wrap-age-selector .wrap-age-actions button {\n  min-width: 180px;\n  min-height: 48px;\n  padding: 12px 22px;\n  border: 2px solid #002C77;\n  border-radius: 6px;\n  cursor: pointer;\n  font: inherit;\n  font-weight: 700;\n}\n\n#wrap-age-selector #wrap-any-age {\n  color: #002C77;\n  background: #fff;\n}\n\n#wrap-age-selector #wrap-age-continue {\n  color: #fff;\n  background: #002C77;\n}\n\n#wrap-age-selector #wrap-age-continue:hover {\n  border-color: #00BFB8;\n  background: #00BFB8;\n}\n\n@media (max-width: 767px) {\n  #wrap-age-selector .wrap-age-scene {\n    overflow: visible;\n  }\n\n  #wrap-age-selector .wrap-age-grid {\n    position: static;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n    margin-top: 16px;\n  }\n\n  #wrap-age-selector .wrap-age-choice {\n    min-height: 150px;\n    background: #F2EAE1;\n  }\n\n  #wrap-age-selector .wrap-age-actions button {\n    width: 100%;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n  const selector = document.getElementById('wrap-age-selector');\n  if (!selector) return;\n\n  const checkboxes = selector.querySelectorAll(\n    '.wrap-age-choice input'\n  );\n\n  const count = selector.querySelector('#wrap-age-count');\n  const clearButton = selector.querySelector('#wrap-any-age');\n  const continueButton = selector.querySelector(\n    '#wrap-age-continue'\n  );\n\n  function updateSelection() {\n    const selected = selector.querySelectorAll(\n      '.wrap-age-choice input:checked'\n    );\n\n    checkboxes.forEach(function (checkbox) {\n      checkbox.closest('.wrap-age-choice')\n        .classList.toggle('is-selected', checkbox.checked);\n    });\n\n    count.textContent = selected.length\n      ? selected.length +\n        (selected.length === 1\n          ? ' age selected'\n          : ' ages selected')\n      : 'No specific ages selected';\n  }\n\n  checkboxes.forEach(function (checkbox) {\n    checkbox.addEventListener('change', updateSelection);\n  });\n\n  clearButton.addEventListener('click', function () {\n    checkboxes.forEach(function (checkbox) {\n      checkbox.checked = false;\n    });\n\n    updateSelection();\n  });\n\n  continueButton.addEventListener('click', function () {\n    const selected = Array.from(\n      selector.querySelectorAll(\n        '.wrap-age-choice input:checked'\n      )\n    ).map(function (checkbox) {\n      return checkbox.value;\n    });\n\n    const parameters = new URLSearchParams(\n      window.location.search\n    );\n\n    if (selected.length) {\n      parameters.set('filter_age', selected.join(','));\n    } else {\n      parameters.delete('filter_age');\n    }\n\n    const destination = new URL(\n      '..\/choose-a-language\/',\n      window.location.href\n    );\n\n    destination.search = parameters.toString();\n    window.location.href = destination.toString();\n  });\n\n  const existing = new URLSearchParams(\n    window.location.search\n  ).get('filter_age');\n\n  if (existing) {\n    const existingAges = existing.split(',');\n\n    checkboxes.forEach(function (checkbox) {\n      checkbox.checked = existingAges.includes(\n        checkbox.value\n      );\n    });\n  }\n\n  updateSelection();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>What age are you shopping for?(step 3 of 4) Choose any or multiple ages, or continue without a selection 0\u20133 Years 3\u20136 Years 6\u20139 Years&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-31697","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wrap.net.za\/af\/wp-json\/wp\/v2\/pages\/31697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wrap.net.za\/af\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wrap.net.za\/af\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wrap.net.za\/af\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wrap.net.za\/af\/wp-json\/wp\/v2\/comments?post=31697"}],"version-history":[{"count":7,"href":"https:\/\/wrap.net.za\/af\/wp-json\/wp\/v2\/pages\/31697\/revisions"}],"predecessor-version":[{"id":31722,"href":"https:\/\/wrap.net.za\/af\/wp-json\/wp\/v2\/pages\/31697\/revisions\/31722"}],"wp:attachment":[{"href":"https:\/\/wrap.net.za\/af\/wp-json\/wp\/v2\/media?parent=31697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}