{"id":6,"date":"2026-09-09T21:21:30","date_gmt":"2026-09-09T21:21:30","guid":{"rendered":"https:\/\/firechoice.net\/?page_id=6"},"modified":"2026-09-09T21:23:33","modified_gmt":"2026-09-09T21:23:33","slug":"fireplace-builder","status":"publish","type":"page","link":"https:\/\/firechoice.net\/?page_id=6","title":{"rendered":"Fireplace Builder"},"content":{"rendered":"\n<div id=\"firechoice-builder\">\n\n  <div class=\"fc-card\">\n    <div class=\"fc-header\">\n      <h1>Fireplace Builder<\/h1>\n      <p>Select a manufacturer and product to begin building your fireplace package.<\/p>\n    <\/div>\n\n    <div class=\"fc-grid\">\n\n      <div class=\"fc-field\">\n        <label for=\"fc-manufacturer\">Manufacturer<\/label>\n        <select id=\"fc-manufacturer\">\n          <option value=\"\">Select Manufacturer<\/option>\n          <option value=\"jotul\">J\u00f8tul<\/option>\n          <option value=\"stuv\">St\u00fbv<\/option>\n          <option value=\"british-fires\">British Fires<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"fc-field\">\n        <label for=\"fc-product-type\">Product Type<\/label>\n        <select id=\"fc-product-type\" disabled>\n          <option value=\"\">Select Product Type<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"fc-field\">\n        <label for=\"fc-series\">Series<\/label>\n        <select id=\"fc-series\" disabled>\n          <option value=\"\">Select Series<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"fc-field\">\n        <label for=\"fc-model\">Model \/ Size<\/label>\n        <select id=\"fc-model\" disabled>\n          <option value=\"\">Select Model \/ Size<\/option>\n        <\/select>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"fc-result\">\n      <div>\n        <span class=\"fc-result-label\">Selected Product<\/span>\n        <strong id=\"fc-selection\">None selected<\/strong>\n      <\/div>\n\n      <div class=\"fc-price-box\">\n        <span>Product Price<\/span>\n        <strong id=\"fc-price\">$0.00<\/strong>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<style>\n#firechoice-builder {\n  max-width: 1000px;\n  margin: 40px auto;\n  padding: 0 20px;\n  font-family: Arial, Helvetica, sans-serif;\n  color: #222;\n}\n\n.fc-card {\n  background: #fff;\n  border: 1px solid #ddd;\n  border-radius: 12px;\n  padding: 32px;\n  box-shadow: 0 4px 18px rgba(0,0,0,.06);\n}\n\n.fc-header {\n  margin-bottom: 30px;\n}\n\n.fc-header h1 {\n  margin: 0 0 8px;\n  font-size: 32px;\n}\n\n.fc-header p {\n  margin: 0;\n  color: #666;\n  font-size: 16px;\n}\n\n.fc-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 22px;\n}\n\n.fc-field {\n  display: flex;\n  flex-direction: column;\n}\n\n.fc-field label {\n  font-weight: 600;\n  margin-bottom: 8px;\n}\n\n.fc-field select {\n  width: 100%;\n  padding: 13px 14px;\n  font-size: 16px;\n  border: 1px solid #bbb;\n  border-radius: 7px;\n  background: #fff;\n}\n\n.fc-field select:disabled {\n  background: #f3f3f3;\n  color: #999;\n}\n\n.fc-result {\n  margin-top: 30px;\n  padding-top: 24px;\n  border-top: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 25px;\n}\n\n.fc-result-label {\n  display: block;\n  color: #777;\n  font-size: 13px;\n  text-transform: uppercase;\n  letter-spacing: .04em;\n  margin-bottom: 5px;\n}\n\n.fc-price-box {\n  text-align: right;\n}\n\n.fc-price-box span {\n  display: block;\n  color: #777;\n  font-size: 13px;\n  margin-bottom: 4px;\n}\n\n.fc-price-box strong {\n  font-size: 28px;\n}\n\n@media (max-width: 700px) {\n  .fc-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .fc-result {\n    align-items: flex-start;\n    flex-direction: column;\n  }\n\n  .fc-price-box {\n    text-align: left;\n  }\n}\n<\/style>\n\n<script>\nconst fireplaceData = {\n  \"jotul\": {\n    name: \"J\u00f8tul\",\n    types: {\n      \"gas-fireplace\": {\n        name: \"Gas Fireplace\",\n        series: {\n          \"gi-series\": {\n            name: \"GI Series\",\n            models: {\n              \"gi-535\": {\n                name: \"GI 535\",\n                price: 4299\n              },\n              \"gi-635\": {\n                name: \"GI 635\",\n                price: 4899\n              }\n            }\n          }\n        }\n      }\n    }\n  },\n\n  \"stuv\": {\n    name: \"St\u00fbv\",\n    types: {\n      \"wood-fireplace\": {\n        name: \"Wood Fireplace\",\n        series: {\n          \"stuv-21\": {\n            name: \"St\u00fbv 21\",\n            models: {\n              \"21-75\": {\n                name: \"21-75\",\n                price: 6500\n              },\n              \"21-85\": {\n                name: \"21-85\",\n                price: 7200\n              }\n            }\n          }\n        }\n      }\n    }\n  },\n\n  \"british-fires\": {\n    name: \"British Fires\",\n    types: {\n      \"electric-fireplace\": {\n        name: \"Electric Fireplace\",\n        series: {\n          \"new-forest\": {\n            name: \"New Forest\",\n            models: {\n              \"new-forest-48\": {\n                name: \"New Forest 48\",\n                price: 2999\n              },\n              \"new-forest-63\": {\n                name: \"New Forest 63\",\n                price: 3599\n              },\n              \"new-forest-75\": {\n                name: \"New Forest 75\",\n                price: 4199\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n};\n\nconst manufacturerSelect = document.getElementById(\"fc-manufacturer\");\nconst typeSelect = document.getElementById(\"fc-product-type\");\nconst seriesSelect = document.getElementById(\"fc-series\");\nconst modelSelect = document.getElementById(\"fc-model\");\n\nconst selectionDisplay = document.getElementById(\"fc-selection\");\nconst priceDisplay = document.getElementById(\"fc-price\");\n\nfunction resetSelect(select, placeholder) {\n  select.innerHTML = `<option value=\"\">${placeholder}<\/option>`;\n  select.disabled = true;\n}\n\nfunction addOption(select, value, text) {\n  const option = document.createElement(\"option\");\n  option.value = value;\n  option.textContent = text;\n  select.appendChild(option);\n}\n\nfunction resetResult() {\n  selectionDisplay.textContent = \"None selected\";\n  priceDisplay.textContent = \"$0.00\";\n}\n\nmanufacturerSelect.addEventListener(\"change\", function() {\n  resetSelect(typeSelect, \"Select Product Type\");\n  resetSelect(seriesSelect, \"Select Series\");\n  resetSelect(modelSelect, \"Select Model \/ Size\");\n  resetResult();\n\n  const manufacturer = fireplaceData[this.value];\n\n  if (!manufacturer) return;\n\n  Object.entries(manufacturer.types).forEach(([key, item]) => {\n    addOption(typeSelect, key, item.name);\n  });\n\n  typeSelect.disabled = false;\n});\n\ntypeSelect.addEventListener(\"change\", function() {\n  resetSelect(seriesSelect, \"Select Series\");\n  resetSelect(modelSelect, \"Select Model \/ Size\");\n  resetResult();\n\n  const manufacturer = fireplaceData[manufacturerSelect.value];\n  if (!manufacturer) return;\n\n  const type = manufacturer.types[this.value];\n  if (!type) return;\n\n  Object.entries(type.series).forEach(([key, item]) => {\n    addOption(seriesSelect, key, item.name);\n  });\n\n  seriesSelect.disabled = false;\n});\n\nseriesSelect.addEventListener(\"change\", function() {\n  resetSelect(modelSelect, \"Select Model \/ Size\");\n  resetResult();\n\n  const manufacturer = fireplaceData[manufacturerSelect.value];\n  if (!manufacturer) return;\n\n  const type = manufacturer.types[typeSelect.value];\n  if (!type) return;\n\n  const series = type.series[this.value];\n  if (!series) return;\n\n  Object.entries(series.models).forEach(([key, item]) => {\n    addOption(modelSelect, key, item.name);\n  });\n\n  modelSelect.disabled = false;\n});\n\nmodelSelect.addEventListener(\"change\", function() {\n  const manufacturer = fireplaceData[manufacturerSelect.value];\n  if (!manufacturer) return;\n\n  const type = manufacturer.types[typeSelect.value];\n  if (!type) return;\n\n  const series = type.series[seriesSelect.value];\n  if (!series) return;\n\n  const model = series.models[this.value];\n  if (!model) {\n    resetResult();\n    return;\n  }\n\n  selectionDisplay.textContent =\n    manufacturer.name + \" \u2014 \" +\n    type.name + \" \u2014 \" +\n    series.name + \" \u2014 \" +\n    model.name;\n\n  priceDisplay.textContent =\n    model.price.toLocaleString(\"en-US\", {\n      style: \"currency\",\n      currency: \"USD\"\n    });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Fireplace Builder Select a manufacturer and product to begin building your fireplace package. Manufacturer Select ManufacturerJ\u00f8tulSt\u00fbvBritish Fires Product Type Select Product Type Series Select Series Model \/ Size Select Model \/ Size Selected Product None selected Product Price $0.00<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/firechoice.net\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/firechoice.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/firechoice.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/firechoice.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/firechoice.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":3,"href":"https:\/\/firechoice.net\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/firechoice.net\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/firechoice.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}