{"id":2782,"date":"2026-03-17T02:50:02","date_gmt":"2026-03-17T02:50:02","guid":{"rendered":"https:\/\/saiweiglass.com\/?page_id=2782"},"modified":"2026-03-17T02:52:42","modified_gmt":"2026-03-17T02:52:42","slug":"order-configurator","status":"publish","type":"page","link":"https:\/\/saiweiglass.com\/es\/industries\/smart-home\/order-configurator\/","title":{"rendered":"configurador de pedidos"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-c24cb5b\" data-block-id=\"c24cb5b\"><style>.stk-c24cb5b {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-c24cb5b-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-3871304\" data-v=\"4\" data-block-id=\"3871304\"><style>.stk-3871304-container{margin-top:var(--stk--preset--spacing--60, 2.25rem) !important;margin-right:var(--stk--preset--spacing--60, 2.25rem) !important;margin-bottom:var(--stk--preset--spacing--60, 2.25rem) !important;margin-left:var(--stk--preset--spacing--60, 2.25rem) !important;}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-3871304-container stk--no-background stk--no-padding\"><div class=\"has-text-align-center stk-block-content stk-inner-blocks stk-3871304-inner-blocks\"><div class=\"ct-breadcrumbs\" data-source=\"rankmath\" ><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Home<\/span><\/p><\/nav><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-2289bdb\" data-block-id=\"2289bdb\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-2289bdb-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-d7c2f66\" data-v=\"4\" data-block-id=\"d7c2f66\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-d7c2f66-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-d7c2f66-inner-blocks\">\n<section id=\"bx-order-configurator-v1\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@400;600&#038;display=swap\" rel=\"stylesheet\">\n<style>\n#bx-order-configurator-v1 {\n  max-width: 1000px;\n  margin: 0 auto;\n  padding: 10px 24px;\n  font-family: inherit;\n  color: #1a1a2e;\n  box-sizing: border-box;\n}\n#bx-order-configurator-v1 *, #bx-order-configurator-v1 *::before, #bx-order-configurator-v1 *::after {\n  box-sizing: border-box;\n}\n#bx-order-configurator-v1 h2 {\n  font-family: inherit !important;\n  font-weight: 700 !important;\n  text-align: center;\n  color: #304890;\n  margin: 0 0 8px 0;\n}\n#bx-order-configurator-v1 .bx-subtitle {\n  text-align: center;\n  color: #555;\n  margin: 0 0 36px 0;\n  font-size: 15px;\n  line-height: 1.5;\n}\n\/* Progress bar *\/\n#bx-order-configurator-v1 .bx-progress {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0;\n  margin-bottom: 36px;\n}\n#bx-order-configurator-v1 .bx-step-dot {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: #e2e6ef;\n  color: #888;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'IBM Plex Mono', monospace;\n  font-weight: 600;\n  font-size: 14px;\n  transition: all 0.3s;\n  flex-shrink: 0;\n}\n#bx-order-configurator-v1 .bx-step-dot.active {\n  background: #304890;\n  color: #fff;\n}\n#bx-order-configurator-v1 .bx-step-dot.done {\n  background: #2e7d32;\n  color: #fff;\n}\n#bx-order-configurator-v1 .bx-step-line {\n  width: 40px;\n  height: 3px;\n  background: #e2e6ef;\n  transition: background 0.3s;\n}\n#bx-order-configurator-v1 .bx-step-line.done {\n  background: #2e7d32;\n}\n\/* Step panels *\/\n#bx-order-configurator-v1 .bx-step-panel {\n  display: none;\n  max-width: 600px;\n  margin: 0 auto;\n}\n#bx-order-configurator-v1 .bx-step-panel.active {\n  display: block;\n}\n#bx-order-configurator-v1 .bx-step-title {\n  font-family: inherit !important;\n  font-weight: 700 !important;\n  font-size: 18px;\n  color: #304890;\n  margin: 0 0 20px 0;\n  text-align: center;\n}\n\/* Form elements *\/\n#bx-order-configurator-v1 label.bx-field-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 8px;\n  font-size: 14px;\n  color: #333;\n}\n#bx-order-configurator-v1 select {\n  width: 100%;\n  height: 44px;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 2px solid #d0d5e0;\n  border-radius: 8px;\n  padding: 0 40px 0 16px;\n  font-size: 15px;\n  color: #1a1a2e;\n  background: #fff url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23304890' stroke-width='2' fill='none'\/%3E%3C\/svg%3E\") no-repeat right 14px center;\n  cursor: pointer;\n  transition: border-color 0.2s;\n  margin-bottom: 16px;\n}\n#bx-order-configurator-v1 select:focus {\n  outline: none;\n  border-color: #304890;\n}\n#bx-order-configurator-v1 select option {\n  color: #000018;\n  background: #FFFFFF;\n}\n#bx-order-configurator-v1 .bx-input-row {\n  display: flex;\n  gap: 12px;\n  margin-bottom: 16px;\n}\n#bx-order-configurator-v1 .bx-input-group {\n  flex: 1;\n}\n#bx-order-configurator-v1 input[type=\"number\"] {\n  width: 100%;\n  height: 44px;\n  border: 2px solid #d0d5e0;\n  border-radius: 8px;\n  padding: 0 16px;\n  font-size: 15px;\n  font-family: 'IBM Plex Mono', monospace;\n  color: #1a1a2e;\n  transition: border-color 0.2s;\n}\n#bx-order-configurator-v1 input[type=\"number\"]:focus {\n  outline: none;\n  border-color: #304890;\n}\n\/* Radio group as cards *\/\n#bx-order-configurator-v1 .bx-radio-group {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n#bx-order-configurator-v1 .bx-radio-card {\n  position: relative;\n}\n#bx-order-configurator-v1 .bx-radio-card input[type=\"radio\"] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n#bx-order-configurator-v1 .bx-radio-label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 14px 16px;\n  border: 2px solid #d0d5e0;\n  border-radius: 8px;\n  cursor: pointer;\n  font-weight: 600;\n  font-size: 14px;\n  color: #444;\n  background: #fff;\n  transition: all 0.2s;\n  text-align: center;\n}\n#bx-order-configurator-v1 .bx-radio-card input:checked + .bx-radio-label {\n  border-color: #304890;\n  background: #eef1f8;\n  color: #304890;\n}\n#bx-order-configurator-v1 .bx-radio-label:hover {\n  border-color: #304890;\n}\n\/* Buttons *\/\n#bx-order-configurator-v1 .bx-btn-row {\n  display: flex;\n  gap: 12px;\n  justify-content: center;\n  margin-top: 28px;\n}\n#bx-order-configurator-v1 .bx-btn {\n  padding: 12px 32px;\n  border-radius: 8px;\n  font-weight: 700;\n  font-size: 15px;\n  cursor: pointer;\n  border: none;\n  transition: all 0.2s;\n}\n#bx-order-configurator-v1 .bx-btn-primary {\n  background: #304890;\n  color: #fff;\n}\n#bx-order-configurator-v1 .bx-btn-primary:hover {\n  background: #253a73;\n}\n#bx-order-configurator-v1 .bx-btn-secondary {\n  background: #e2e6ef;\n  color: #304890;\n}\n#bx-order-configurator-v1 .bx-btn-secondary:hover {\n  background: #d0d5e0;\n}\n#bx-order-configurator-v1 .bx-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\/* Summary card *\/\n#bx-order-configurator-v1 .bx-summary-card {\n  border: 2px solid #e2e6ef;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 4px 20px rgba(48,72,144,0.08);\n}\n#bx-order-configurator-v1 .bx-summary-header {\n  background: #304890;\n  color: #fff;\n  padding: 20px 28px;\n  text-align: center;\n}\n#bx-order-configurator-v1 .bx-summary-header h3 {\n  font-family: inherit !important;\n  font-weight: 700 !important;\n  margin: 0;\n  font-size: 20px;\n}\n#bx-order-configurator-v1 .bx-summary-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0;\n}\n#bx-order-configurator-v1 .bx-sum-item {\n  padding: 16px 24px;\n  border-bottom: 1px solid #eef0f5;\n}\n#bx-order-configurator-v1 .bx-sum-item:nth-child(odd) {\n  border-right: 1px solid #eef0f5;\n}\n#bx-order-configurator-v1 .bx-sum-label {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #888;\n  margin-bottom: 4px;\n  font-weight: 600;\n}\n#bx-order-configurator-v1 .bx-sum-value {\n  font-size: 15px;\n  font-weight: 600;\n  color: #1a1a2e;\n}\n#bx-order-configurator-v1 .bx-sum-value .bx-num {\n  font-family: 'IBM Plex Mono', monospace;\n}\n#bx-order-configurator-v1 .bx-sum-footer {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  background: #f7f8fb;\n  border-top: 2px solid #e2e6ef;\n}\n#bx-order-configurator-v1 .bx-sum-footer .bx-sum-item {\n  border-bottom: none;\n  text-align: center;\n  border-right: 1px solid #eef0f5;\n}\n#bx-order-configurator-v1 .bx-sum-footer .bx-sum-item:last-child {\n  border-right: none;\n}\n#bx-order-configurator-v1 .bx-sum-cta {\n  text-align: center;\n  padding: 24px;\n  border-top: 1px solid #eef0f5;\n}\n#bx-order-configurator-v1 .bx-cta-btn {\n  display: inline-block;\n  background: #304890;\n  color: #fff;\n  text-decoration: none;\n  padding: 14px 44px;\n  border-radius: 8px;\n  font-weight: 700;\n  font-size: 16px;\n  transition: background 0.2s, transform 0.15s;\n}\n#bx-order-configurator-v1 .bx-cta-btn:hover {\n  background: #253a73;\n  transform: translateY(-1px);\n}\n#bx-order-configurator-v1 .bx-error {\n  color: #c62828;\n  font-size: 13px;\n  margin-top: -8px;\n  margin-bottom: 12px;\n  display: none;\n}\n@media (max-width: 860px) {\n  #bx-order-configurator-v1 { padding: 28px 16px; }\n  #bx-order-configurator-v1 .bx-radio-group { grid-template-columns: 1fr 1fr; }\n  #bx-order-configurator-v1 .bx-summary-grid { grid-template-columns: 1fr; }\n  #bx-order-configurator-v1 .bx-sum-item:nth-child(odd) { border-right: none; }\n  #bx-order-configurator-v1 .bx-sum-footer { grid-template-columns: 1fr; }\n  #bx-order-configurator-v1 .bx-sum-footer .bx-sum-item { border-right: none; border-bottom: 1px solid #eef0f5; }\n  #bx-order-configurator-v1 .bx-step-line { width: 24px; }\n  #bx-order-configurator-v1 .bx-input-row { flex-direction: column; gap: 0; }\n}\n<\/style>\n\n<h2>Custom Order Configurator<\/h2>\n<p class=\"bx-subtitle\">Configure your glass panel in 4 easy steps and get an instant project estimate.<\/p>\n\n<div class=\"bx-progress\" id=\"bx-progress\">\n  <div class=\"bx-step-dot active\" data-step=\"1\">1<\/div>\n  <div class=\"bx-step-line\"><\/div>\n  <div class=\"bx-step-dot\" data-step=\"2\">2<\/div>\n  <div class=\"bx-step-line\"><\/div>\n  <div class=\"bx-step-dot\" data-step=\"3\">3<\/div>\n  <div class=\"bx-step-line\"><\/div>\n  <div class=\"bx-step-dot\" data-step=\"4\">4<\/div>\n  <div class=\"bx-step-line\"><\/div>\n  <div class=\"bx-step-dot\" data-step=\"5\">5<\/div>\n<\/div>\n\n<!-- Step 1: Shape & Dimensions -->\n<div class=\"bx-step-panel active\" id=\"bx-panel-1\">\n  <h3 class=\"bx-step-title\">Step 1: Shape &#038; Dimensions<\/h3>\n  <label class=\"bx-field-label\">Panel Shape<\/label>\n  <div class=\"bx-radio-group\" id=\"bx-shape-group\">\n    <label class=\"bx-radio-card\"><input type=\"radio\" name=\"bx-shape\" value=\"rectangle\"><span class=\"bx-radio-label\">Rectangle<\/span><\/label>\n    <label class=\"bx-radio-card\"><input type=\"radio\" name=\"bx-shape\" value=\"square\"><span class=\"bx-radio-label\">Square<\/span><\/label>\n    <label class=\"bx-radio-card\"><input type=\"radio\" name=\"bx-shape\" value=\"circle\"><span class=\"bx-radio-label\">Circle<\/span><\/label>\n    <label class=\"bx-radio-card\"><input type=\"radio\" name=\"bx-shape\" value=\"custom\"><span class=\"bx-radio-label\">Custom Shape<\/span><\/label>\n  <\/div>\n  <div id=\"bx-dim-rect\" style=\"display:none;\">\n    <label class=\"bx-field-label\">Dimensions (mm)<\/label>\n    <div class=\"bx-input-row\">\n      <div class=\"bx-input-group\">\n        <input type=\"number\" id=\"bx-width\" placeholder=\"Width\" min=\"10\" max=\"2000\">\n      <\/div>\n      <div class=\"bx-input-group\">\n        <input type=\"number\" id=\"bx-height\" placeholder=\"Height\" min=\"10\" max=\"2000\">\n      <\/div>\n    <\/div>\n  <\/div>\n  <div id=\"bx-dim-circle\" style=\"display:none;\">\n    <label class=\"bx-field-label\">Diameter (mm)<\/label>\n    <div class=\"bx-input-row\">\n      <div class=\"bx-input-group\">\n        <input type=\"number\" id=\"bx-diameter\" placeholder=\"Diameter\" min=\"10\" max=\"2000\">\n      <\/div>\n    <\/div>\n  <\/div>\n  <div id=\"bx-dim-custom\" style=\"display:none;\">\n    <label class=\"bx-field-label\">Approximate max dimensions (mm)<\/label>\n    <div class=\"bx-input-row\">\n      <div class=\"bx-input-group\">\n        <input type=\"number\" id=\"bx-cust-w\" placeholder=\"Max width\" min=\"10\" max=\"2000\">\n      <\/div>\n      <div class=\"bx-input-group\">\n        <input type=\"number\" id=\"bx-cust-h\" placeholder=\"Max height\" min=\"10\" max=\"2000\">\n      <\/div>\n    <\/div>\n    <p style=\"font-size:13px;color:#888;margin-top:0;\">You can upload a CAD drawing after requesting a quote.<\/p>\n  <\/div>\n  <p class=\"bx-error\" id=\"bx-err-1\">Please select a shape and enter dimensions.<\/p>\n  <div class=\"bx-btn-row\">\n    <button type=\"button\" class=\"bx-btn bx-btn-primary\" id=\"bx-next-1\">Next<\/button>\n  <\/div>\n<\/div>\n\n<!-- Step 2: Glass Type & Thickness -->\n<div class=\"bx-step-panel\" id=\"bx-panel-2\">\n  <h3 class=\"bx-step-title\">Step 2: Glass Type &#038; Thickness<\/h3>\n  <label class=\"bx-field-label\">Glass Type<\/label>\n  <select id=\"bx-glass-type\">\n    <option value=\"\">\u2014 Select glass type \u2014<\/option>\n    <option value=\"tempered\">Tempered Soda-Lime ($)<\/option>\n    <option value=\"chemical\">Chemically Strengthened ($$$)<\/option>\n    <option value=\"ito\">ITO-Coated ($$$$)<\/option>\n    <option value=\"ceramic\">Ceramic Frit Printed ($$)<\/option>\n    <option value=\"deadfront\">Dead Front ($$\u2013$$$)<\/option>\n  <\/select>\n  <label class=\"bx-field-label\">Thickness<\/label>\n  <select id=\"bx-thickness\">\n    <option value=\"\">\u2014 Select thickness \u2014<\/option>\n  <\/select>\n  <p class=\"bx-error\" id=\"bx-err-2\">Please select a glass type and thickness.<\/p>\n  <div class=\"bx-btn-row\">\n    <button type=\"button\" class=\"bx-btn bx-btn-secondary\" id=\"bx-back-2\">Back<\/button>\n    <button type=\"button\" class=\"bx-btn bx-btn-primary\" id=\"bx-next-2\">Next<\/button>\n  <\/div>\n<\/div>\n\n<!-- Step 3: Printing -->\n<div class=\"bx-step-panel\" id=\"bx-panel-3\">\n  <h3 class=\"bx-step-title\">Step 3: Printing Options<\/h3>\n  <label class=\"bx-field-label\">Number of Print Colors<\/label>\n  <select id=\"bx-colors\">\n    <option value=\"1\">1 color<\/option>\n    <option value=\"2\">2 colors<\/option>\n    <option value=\"3\">3 colors<\/option>\n    <option value=\"4\">4 colors<\/option>\n    <option value=\"5\">5 colors<\/option>\n    <option value=\"6\">6 colors<\/option>\n  <\/select>\n  <label class=\"bx-field-label\">Dead Front Effect<\/label>\n  <div class=\"bx-radio-group\">\n    <label class=\"bx-radio-card\"><input type=\"radio\" name=\"bx-deadfront\" value=\"yes\"><span class=\"bx-radio-label\">Yes<\/span><\/label>\n    <label class=\"bx-radio-card\"><input type=\"radio\" name=\"bx-deadfront\" value=\"no\" checked><span class=\"bx-radio-label\">No<\/span><\/label>\n  <\/div>\n  <p style=\"font-size:13px;color:#888;margin-top:4px;\">Print registration accuracy: &pm;0.1mm between passes.<\/p>\n  <div class=\"bx-btn-row\">\n    <button type=\"button\" class=\"bx-btn bx-btn-secondary\" id=\"bx-back-3\">Back<\/button>\n    <button type=\"button\" class=\"bx-btn bx-btn-primary\" id=\"bx-next-3\">Next<\/button>\n  <\/div>\n<\/div>\n\n<!-- Step 4: Surface Treatment -->\n<div class=\"bx-step-panel\" id=\"bx-panel-4\">\n  <h3 class=\"bx-step-title\">Step 4: Surface Treatment<\/h3>\n  <label class=\"bx-field-label\">Treatment Type<\/label>\n  <div class=\"bx-radio-group\">\n    <label class=\"bx-radio-card\"><input type=\"radio\" name=\"bx-treatment\" value=\"AF\"><span class=\"bx-radio-label\">Anti-Fingerprint (AF)<\/span><\/label>\n    <label class=\"bx-radio-card\"><input type=\"radio\" name=\"bx-treatment\" value=\"AG\"><span class=\"bx-radio-label\">Anti-Glare (AG)<\/span><\/label>\n    <label class=\"bx-radio-card\"><input type=\"radio\" name=\"bx-treatment\" value=\"AR\"><span class=\"bx-radio-label\">Anti-Reflective (AR)<\/span><\/label>\n    <label class=\"bx-radio-card\"><input type=\"radio\" name=\"bx-treatment\" value=\"None\" checked><span class=\"bx-radio-label\">None<\/span><\/label>\n  <\/div>\n  <div class=\"bx-btn-row\">\n    <button type=\"button\" class=\"bx-btn bx-btn-secondary\" id=\"bx-back-4\">Back<\/button>\n    <button type=\"button\" class=\"bx-btn bx-btn-primary\" id=\"bx-next-4\">View Summary<\/button>\n  <\/div>\n<\/div>\n\n<!-- Step 5: Summary -->\n<div class=\"bx-step-panel\" id=\"bx-panel-5\">\n  <div class=\"bx-summary-card\">\n    <div class=\"bx-summary-header\">\n      <h3>Your Configuration Summary<\/h3>\n    <\/div>\n    <div class=\"bx-summary-grid\">\n      <div class=\"bx-sum-item\">\n        <div class=\"bx-sum-label\">Shape<\/div>\n        <div class=\"bx-sum-value\" id=\"bx-s-shape\"><\/div>\n      <\/div>\n      <div class=\"bx-sum-item\">\n        <div class=\"bx-sum-label\">Dimensions<\/div>\n        <div class=\"bx-sum-value\" id=\"bx-s-dims\"><\/div>\n      <\/div>\n      <div class=\"bx-sum-item\">\n        <div class=\"bx-sum-label\">Glass Type<\/div>\n        <div class=\"bx-sum-value\" id=\"bx-s-glass\"><\/div>\n      <\/div>\n      <div class=\"bx-sum-item\">\n        <div class=\"bx-sum-label\">Thickness<\/div>\n        <div class=\"bx-sum-value\" id=\"bx-s-thick\"><\/div>\n      <\/div>\n      <div class=\"bx-sum-item\">\n        <div class=\"bx-sum-label\">Printing<\/div>\n        <div class=\"bx-sum-value\" id=\"bx-s-print\"><\/div>\n      <\/div>\n      <div class=\"bx-sum-item\">\n        <div class=\"bx-sum-label\">Surface Treatment<\/div>\n        <div class=\"bx-sum-value\" id=\"bx-s-treat\"><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"bx-sum-footer\">\n      <div class=\"bx-sum-item\">\n        <div class=\"bx-sum-label\">Est. MOQ<\/div>\n        <div class=\"bx-sum-value\" id=\"bx-s-moq\"><\/div>\n      <\/div>\n      <div class=\"bx-sum-item\">\n        <div class=\"bx-sum-label\">Prototype Lead Time<\/div>\n        <div class=\"bx-sum-value\"><span class=\"bx-num\">7<\/span>\\u2013<span class=\"bx-num\">10<\/span> working days<\/div>\n      <\/div>\n      <div class=\"bx-sum-item\">\n        <div class=\"bx-sum-label\">Production Lead Time<\/div>\n        <div class=\"bx-sum-value\"><span class=\"bx-num\">15<\/span>\\u2013<span class=\"bx-num\">25<\/span> working days<\/div>\n      <\/div>\n    <\/div>\n    <div class=\"bx-sum-cta\">\n      <a class=\"bx-cta-btn\" href=\"#ct-popup-787\">Get Quote<\/a>\n    <\/div>\n  <\/div>\n  <div class=\"bx-btn-row\" style=\"margin-top:20px;\">\n    <button type=\"button\" class=\"bx-btn bx-btn-secondary\" id=\"bx-back-5\">Edit Configuration<\/button>\n    <button type=\"button\" class=\"bx-btn bx-btn-secondary\" id=\"bx-restart\">Start Over<\/button>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var currentStep = 1;\n  var totalSteps = 5;\n\n  var thicknessOptions = {\n    tempered:  [\"2mm\",\"3mm\",\"4mm\",\"5mm\",\"6mm\"],\n    chemical:  [\"0.7mm\",\"0.85mm\",\"1.0mm\",\"1.1mm\",\"1.5mm\",\"2.0mm\"],\n    ito:       [\"0.7mm\",\"1.0mm\",\"1.1mm\",\"1.5mm\",\"2.0mm\"],\n    ceramic:   [\"3mm\",\"4mm\",\"5mm\",\"6mm\"],\n    deadfront: [\"2mm\",\"3mm\",\"4mm\"]\n  };\n\n  var glassNames = {\n    tempered: \"Tempered Soda-Lime\",\n    chemical: \"Chemically Strengthened\",\n    ito: \"ITO-Coated\",\n    ceramic: \"Ceramic Frit Printed\",\n    deadfront: \"Dead Front\"\n  };\n\n  function goToStep(n) {\n    currentStep = n;\n    for (var i = 1; i <= totalSteps; i++) {\n      var panel = document.getElementById('bx-panel-' + i);\n      panel.classList.toggle('active', i === n);\n    }\n    \/\/ update progress\n    var dots = document.querySelectorAll('#bx-order-configurator-v1 .bx-step-dot');\n    var lines = document.querySelectorAll('#bx-order-configurator-v1 .bx-step-line');\n    dots.forEach(function(d, idx) {\n      var s = idx + 1;\n      d.classList.remove('active', 'done');\n      if (s === n) d.classList.add('active');\n      else if (s < n) d.classList.add('done');\n    });\n    lines.forEach(function(l, idx) {\n      l.classList.toggle('done', idx + 1 < n);\n    });\n  }\n\n  \/\/ Step 1: shape toggling\n  var shapeRadios = document.querySelectorAll('input[name=\"bx-shape\"]');\n  shapeRadios.forEach(function(r) {\n    r.addEventListener('change', function() {\n      var v = this.value;\n      document.getElementById('bx-dim-rect').style.display = (v === 'rectangle' || v === 'square') ? 'block' : 'none';\n      document.getElementById('bx-dim-circle').style.display = v === 'circle' ? 'block' : 'none';\n      document.getElementById('bx-dim-custom').style.display = v === 'custom' ? 'block' : 'none';\n    });\n  });\n\n  \/\/ Step 2: populate thickness on glass change\n  document.getElementById('bx-glass-type').addEventListener('change', function() {\n    var sel = document.getElementById('bx-thickness');\n    sel.innerHTML = '<option value=\"\">\u2014 Select thickness \u2014<\/option>';\n    var opts = thicknessOptions[this.value];\n    if (opts) {\n      opts.forEach(function(o) {\n        var op = document.createElement('option');\n        op.value = o;\n        op.textContent = o;\n        sel.appendChild(op);\n      });\n    }\n  });\n\n  function getShape() {\n    var r = document.querySelector('input[name=\"bx-shape\"]:checked');\n    return r ? r.value : '';\n  }\n\n  function validateStep1() {\n    var shape = getShape();\n    if (!shape) return false;\n    if (shape === 'rectangle') {\n      return document.getElementById('bx-width').value && document.getElementById('bx-height').value;\n    }\n    if (shape === 'square') {\n      return document.getElementById('bx-width').value;\n    }\n    if (shape === 'circle') {\n      return document.getElementById('bx-diameter').value;\n    }\n    if (shape === 'custom') {\n      return document.getElementById('bx-cust-w').value && document.getElementById('bx-cust-h').value;\n    }\n    return false;\n  }\n\n  function validateStep2() {\n    return document.getElementById('bx-glass-type').value && document.getElementById('bx-thickness').value;\n  }\n\n  function buildSummary() {\n    var shape = getShape();\n    var shapeLabel = shape.charAt(0).toUpperCase() + shape.slice(1);\n    document.getElementById('bx-s-shape').textContent = shapeLabel;\n\n    var dims = '';\n    if (shape === 'rectangle') {\n      dims = document.getElementById('bx-width').value + ' \\u00d7 ' + document.getElementById('bx-height').value + ' mm';\n    } else if (shape === 'square') {\n      var s = document.getElementById('bx-width').value;\n      dims = s + ' \\u00d7 ' + s + ' mm';\n    } else if (shape === 'circle') {\n      dims = '\\u00d8' + document.getElementById('bx-diameter').value + ' mm';\n    } else {\n      dims = document.getElementById('bx-cust-w').value + ' \\u00d7 ' + document.getElementById('bx-cust-h').value + ' mm (approx)';\n    }\n    document.getElementById('bx-s-dims').innerHTML = '<span class=\"bx-num\">' + dims.replace(\/(\\d+)\/g, '<\/span>$1<span class=\"bx-num\">') + '<\/span>';\n    \/\/ simpler approach for dims\n    document.getElementById('bx-s-dims').textContent = dims;\n\n    var gt = document.getElementById('bx-glass-type').value;\n    document.getElementById('bx-s-glass').textContent = glassNames[gt] || gt;\n    document.getElementById('bx-s-thick').textContent = document.getElementById('bx-thickness').value;\n\n    var colors = document.getElementById('bx-colors').value;\n    var df = document.querySelector('input[name=\"bx-deadfront\"]:checked');\n    var dfVal = df ? df.value : 'no';\n    var printText = colors + ' color' + (colors > 1 ? 's' : '');\n    if (dfVal === 'yes') printText += ' + Dead Front effect';\n    document.getElementById('bx-s-print').textContent = printText;\n\n    var treat = document.querySelector('input[name=\"bx-treatment\"]:checked');\n    document.getElementById('bx-s-treat').textContent = treat ? treat.value : 'None';\n\n    \/\/ MOQ logic: custom shape or deadfront = 1000, else 500\n    var isCustom = (shape === 'custom' || dfVal === 'yes' || gt === 'ito');\n    var moq = isCustom ? '1,000 pcs' : '500 pcs';\n    document.getElementById('bx-s-moq').innerHTML = '<span class=\"bx-num\">' + moq.replace(\/[^0-9,]\/g, '') + '<\/span> pcs';\n    document.getElementById('bx-s-moq').textContent = moq;\n  }\n\n  \/\/ Next buttons\n  document.getElementById('bx-next-1').addEventListener('click', function() {\n    if (!validateStep1()) {\n      document.getElementById('bx-err-1').style.display = 'block';\n      return;\n    }\n    document.getElementById('bx-err-1').style.display = 'none';\n    goToStep(2);\n  });\n\n  document.getElementById('bx-next-2').addEventListener('click', function() {\n    if (!validateStep2()) {\n      document.getElementById('bx-err-2').style.display = 'block';\n      return;\n    }\n    document.getElementById('bx-err-2').style.display = 'none';\n    goToStep(3);\n  });\n\n  document.getElementById('bx-next-3').addEventListener('click', function() {\n    goToStep(4);\n  });\n\n  document.getElementById('bx-next-4').addEventListener('click', function() {\n    buildSummary();\n    goToStep(5);\n  });\n\n  \/\/ Back buttons\n  document.getElementById('bx-back-2').addEventListener('click', function(){ goToStep(1); });\n  document.getElementById('bx-back-3').addEventListener('click', function(){ goToStep(2); });\n  document.getElementById('bx-back-4').addEventListener('click', function(){ goToStep(3); });\n  document.getElementById('bx-back-5').addEventListener('click', function(){ goToStep(4); });\n\n  document.getElementById('bx-restart').addEventListener('click', function(){\n    \/\/ reset form\n    document.querySelectorAll('#bx-order-configurator-v1 select').forEach(function(s){ s.selectedIndex = 0; });\n    document.querySelectorAll('#bx-order-configurator-v1 input[type=\"number\"]').forEach(function(i){ i.value = ''; });\n    document.querySelectorAll('#bx-order-configurator-v1 input[type=\"radio\"]').forEach(function(r){ r.checked = false; });\n    document.getElementById('bx-dim-rect').style.display = 'none';\n    document.getElementById('bx-dim-circle').style.display = 'none';\n    document.getElementById('bx-dim-custom').style.display = 'none';\n    \/\/ reset default radio states\n    document.querySelector('input[name=\"bx-deadfront\"][value=\"no\"]').checked = true;\n    document.querySelector('input[name=\"bx-treatment\"][value=\"None\"]').checked = true;\n    goToStep(1);\n  });\n})();\n<\/script>\n<\/section>\n\n<\/div><\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Custom Order Configurator Configure your glass panel in 4 easy steps and get an instant project estimate. 1 2 3 4 5 Step 1: Shape &#038; Dimensions Panel Shape Rectangle Square Circle Custom Shape Dimensions (mm) Diameter (mm) Approximate max dimensions (mm) You can upload a CAD drawing after requesting a quote. Please select a [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":2514,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-2782","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/saiweiglass.com\/es\/wp-json\/wp\/v2\/pages\/2782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saiweiglass.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saiweiglass.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saiweiglass.com\/es\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/saiweiglass.com\/es\/wp-json\/wp\/v2\/comments?post=2782"}],"version-history":[{"count":0,"href":"https:\/\/saiweiglass.com\/es\/wp-json\/wp\/v2\/pages\/2782\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/saiweiglass.com\/es\/wp-json\/wp\/v2\/pages\/2514"}],"wp:attachment":[{"href":"https:\/\/saiweiglass.com\/es\/wp-json\/wp\/v2\/media?parent=2782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}