{"id":5147,"date":"2025-02-16T13:23:37","date_gmt":"2025-02-16T12:23:37","guid":{"rendered":"https:\/\/aquafunmogan.es\/first-step-cart\/"},"modified":"2026-03-24T21:32:58","modified_gmt":"2026-03-24T20:32:58","slug":"first-step-cart","status":"publish","type":"page","link":"https:\/\/aquafunmogan.es\/en\/first-step-cart\/","title":{"rendered":"Booking"},"content":{"rendered":"\n<div class=\"afm-checkout-wrap\" id=\"afm-checkout\" data-lang=\"en\">\n  <div class=\"afm-steps-bar\">\n    <div class=\"afm-step-dot active\" data-step=\"1\">1<\/div>\n    <div class=\"afm-step-line\"><\/div>\n    <div class=\"afm-step-dot\" data-step=\"2\">2<\/div>\n    <div class=\"afm-step-line\"><\/div>\n    <div class=\"afm-step-dot\" data-step=\"3\">3<\/div>\n  <\/div>\n  <div class=\"afm-form-step active\" id=\"afm-step-1\">\n    <h2 id=\"afm-s1-title\">Paso 1: Datos de contacto<\/h2>\n    <div class=\"afm-field\">\n      <label for=\"afm-name\" id=\"afm-lbl-name\">Nombre completo<\/label>\n      <input type=\"text\" id=\"afm-name\" autocomplete=\"name\" required>\n      <div class=\"afm-error\" id=\"afm-err-name\">Este campo es obligatorio<\/div>\n    <\/div>\n    <div class=\"afm-field\">\n      <label for=\"afm-phone\" id=\"afm-lbl-phone\">Telefono<\/label>\n      <div class=\"afm-phone-row\">\n        <select id=\"afm-prefix\">\n          <option value=\"+34\">+34 ES<\/option>\n          <option value=\"+44\">+44 UK<\/option>\n          <option value=\"+49\">+49 DE<\/option>\n          <option value=\"+33\">+33 FR<\/option>\n          <option value=\"+39\">+39 IT<\/option>\n          <option value=\"+45\">+45 DK<\/option>\n          <option value=\"+351\">+351 PT<\/option>\n          <option value=\"+31\">+31 NL<\/option>\n          <option value=\"+46\">+46 SE<\/option>\n          <option value=\"+47\">+47 NO<\/option>\n          <option value=\"+48\">+48 PL<\/option>\n          <option value=\"+32\">+32 BE<\/option>\n          <option value=\"+41\">+41 CH<\/option>\n          <option value=\"+43\">+43 AT<\/option>\n          <option value=\"+353\">+353 IE<\/option>\n          <option value=\"+1\">+1 US<\/option>\n        <\/select>\n        <input type=\"tel\" id=\"afm-phone\" autocomplete=\"tel\" required>\n      <\/div>\n      <div class=\"afm-error\" id=\"afm-err-phone\">Este campo es obligatorio<\/div>\n    <\/div>\n    <button type=\"button\" class=\"afm-btn\" id=\"afm-btn-step1\">Siguiente<\/button>\n  <\/div>\n  <div class=\"afm-form-step\" id=\"afm-step-2\">\n    <h2 id=\"afm-s2-title\">Paso 2: Fecha y hora<\/h2>\n    <div class=\"afm-field\">\n      <label for=\"afm-email\" id=\"afm-lbl-email\">Correo electronico<\/label>\n      <input type=\"email\" id=\"afm-email\" autocomplete=\"email\" required>\n      <div class=\"afm-error\" id=\"afm-err-email\">Email no valido<\/div>\n    <\/div>\n    <div class=\"afm-field\">\n      <label for=\"afm-date\" id=\"afm-lbl-date\">Fecha<\/label>\n      <input type=\"date\" id=\"afm-date\" required>\n      <div class=\"afm-error\" id=\"afm-err-date\">Este campo es obligatorio<\/div>\n    <\/div>\n    <div class=\"afm-field\">\n      <label id=\"afm-lbl-time\">Hora<\/label>\n      <div class=\"afm-time-grid\" id=\"afm-time-grid\"><\/div>\n      <div class=\"afm-error\" id=\"afm-err-time\">Selecciona una hora<\/div>\n    <\/div>\n    <button type=\"button\" class=\"afm-btn\" id=\"afm-btn-step2\">Confirmar reserva<\/button>\n  <\/div>\n  <div class=\"afm-form-step\" id=\"afm-step-3\">\n    <div class=\"afm-thank\">\n      <div class=\"afm-check-icon\">&#10003;<\/div>\n      <h2 id=\"afm-s3-title\">Gracias por tu reserva<\/h2>\n      <p id=\"afm-s3-msg\">Nos pondremos en contacto contigo en breve para confirmar todos los detalles.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  var wrap = document.getElementById('afm-checkout');\n  if (!wrap) return;\n  \/\/ Apply translations from PHP\n  if (typeof afm_checkout !== 'undefined' && afm_checkout.t) {\n    var t = afm_checkout.t;\n    var el = function(id) { return document.getElementById(id); };\n    if (t.step1_title && el('afm-s1-title')) el('afm-s1-title').textContent = t.step1_title;\n    if (t.step2_title && el('afm-s2-title')) el('afm-s2-title').textContent = t.step2_title;\n    if (t.thank_title && el('afm-s3-title')) el('afm-s3-title').textContent = t.thank_title;\n    if (t.thank_msg && el('afm-s3-msg')) el('afm-s3-msg').textContent = t.thank_msg;\n    if (t.name && el('afm-lbl-name')) el('afm-lbl-name').textContent = t.name;\n    if (t.phone && el('afm-lbl-phone')) el('afm-lbl-phone').textContent = t.phone;\n    if (t.email && el('afm-lbl-email')) el('afm-lbl-email').textContent = t.email;\n    if (t.date && el('afm-lbl-date')) el('afm-lbl-date').textContent = t.date;\n    if (t.time && el('afm-lbl-time')) el('afm-lbl-time').textContent = t.time;\n    if (t.next && el('afm-btn-step1')) el('afm-btn-step1').textContent = t.next;\n    if (t.confirm && el('afm-btn-step2')) el('afm-btn-step2').textContent = t.confirm;\n    if (t.required && el('afm-err-name')) el('afm-err-name').textContent = t.required;\n    if (t.required && el('afm-err-phone')) el('afm-err-phone').textContent = t.required;\n    if (t.invalid_email && el('afm-err-email')) el('afm-err-email').textContent = t.invalid_email;\n    if (t.required && el('afm-err-date')) el('afm-err-date').textContent = t.required;\n    if (t.select_time && el('afm-err-time')) el('afm-err-time').textContent = t.select_time;\n    lang = afm_checkout.lang || lang;\n  }\n  var lang = wrap.getAttribute('data-lang') || 'es';\n  var selectedTime = '';\n  var formData = {};\n  var dateInput = document.getElementById('afm-date');\n  var tomorrow = new Date();\n  tomorrow.setDate(tomorrow.getDate() + 1);\n  dateInput.min = tomorrow.toISOString().split('T')[0];\n  var timeGrid = document.getElementById('afm-time-grid');\n  for (var h = 9; h <= 19; h++) {\n    var btn = document.createElement('div');\n    btn.className = 'afm-time-btn';\n    btn.textContent = (h < 10 ? '0' : '') + h + ':00';\n    btn.setAttribute('data-time', (h < 10 ? '0' : '') + h + ':00');\n    btn.addEventListener('click', function() {\n      document.querySelectorAll('.afm-time-btn').forEach(function(b) { b.classList.remove('selected'); });\n      this.classList.add('selected');\n      selectedTime = this.getAttribute('data-time');\n      var errTime = document.getElementById('afm-err-time');\n      if (errTime) { errTime.style.display = 'none'; errTime.parentElement.classList.remove('has-error'); }\n    });\n    timeGrid.appendChild(btn);\n  }\n  function goToStep(n) {\n    document.querySelectorAll('.afm-form-step').forEach(function(s) { s.classList.remove('active'); });\n    document.getElementById('afm-step-' + n).classList.add('active');\n    document.querySelectorAll('.afm-step-dot').forEach(function(d) {\n      var ds = parseInt(d.getAttribute('data-step'));\n      d.classList.remove('active', 'done');\n      if (ds < n) d.classList.add('done');\n      if (ds === n) d.classList.add('active');\n    });\n    document.querySelectorAll('.afm-step-line').forEach(function(l, i) {\n      l.classList.toggle('done', i < n - 1);\n    });\n    wrap.scrollIntoView({behavior: 'smooth', block: 'start'});\n  }\n  function showError(fieldId, errId) {\n    var field = document.getElementById(fieldId);\n    var err = document.getElementById(errId);\n    if (field) field.closest('.afm-field').classList.add('has-error');\n    if (err) err.style.display = 'block';\n  }\n  function clearErrors() {\n    document.querySelectorAll('.afm-field').forEach(function(f) { f.classList.remove('has-error'); });\n    document.querySelectorAll('.afm-error').forEach(function(e) { e.style.display = 'none'; });\n  }\n  document.getElementById('afm-btn-step1').addEventListener('click', function() {\n    clearErrors();\n    var name = document.getElementById('afm-name').value.trim();\n    var phone = document.getElementById('afm-phone').value.trim();\n    var prefix = document.getElementById('afm-prefix').value;\n    var valid = true;\n    if (!name) { showError('afm-name', 'afm-err-name'); valid = false; }\n    if (!phone) { showError('afm-phone', 'afm-err-phone'); valid = false; }\n    if (!valid) return;\n    formData.name = name;\n    formData.phone = prefix + ' ' + phone;\n    var btn = this;\n    btn.disabled = true;\n    var origText = btn.textContent;\n    btn.textContent = '...';\n    var fd = new FormData();\n    fd.append('action', 'afm_step1');\n    fd.append('nonce', (typeof afm_checkout !== 'undefined') ? afm_checkout.nonce : '');\n    fd.append('name', name);\n    fd.append('phone', prefix + ' ' + phone);\n    fd.append('lang', lang);\n    var ajaxUrl = (typeof afm_checkout !== 'undefined') ? afm_checkout.ajax_url : '\/wp-admin\/admin-ajax.php';\n    fetch(ajaxUrl, { method: 'POST', body: fd })\n      .then(function(r) { return r.json(); })\n      .then(function() { btn.disabled = false; btn.textContent = origText; goToStep(2); })\n      .catch(function() { btn.disabled = false; btn.textContent = origText; goToStep(2); });\n  });\n  document.getElementById('afm-btn-step2').addEventListener('click', function() {\n    clearErrors();\n    var email = document.getElementById('afm-email').value.trim();\n    var date = document.getElementById('afm-date').value;\n    var valid = true;\n    var emailRe = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n    if (!email || !emailRe.test(email)) { showError('afm-email', 'afm-err-email'); valid = false; }\n    if (!date) { showError('afm-date', 'afm-err-date'); valid = false; }\n    if (!selectedTime) { document.getElementById('afm-err-time').style.display = 'block'; document.getElementById('afm-err-time').parentElement.classList.add('has-error'); valid = false; }\n    if (!valid) return;\n    var btn = this;\n    btn.disabled = true;\n    btn.textContent = '...';\n    var fd = new FormData();\n    fd.append('action', 'afm_step2');\n    fd.append('nonce', (typeof afm_checkout !== 'undefined') ? afm_checkout.nonce : '');\n    fd.append('name', formData.name);\n    fd.append('phone', formData.phone);\n    fd.append('email', email);\n    fd.append('date', date);\n    fd.append('time', selectedTime);\n    fd.append('lang', lang);\n    var ajaxUrl = (typeof afm_checkout !== 'undefined') ? afm_checkout.ajax_url : '\/wp-admin\/admin-ajax.php';\n    fetch(ajaxUrl, { method: 'POST', body: fd })\n      .then(function(r) { return r.json(); })\n      .then(function() { goToStep(3); })\n      .catch(function() { goToStep(3); });\n  });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>1 2 3 Paso 1: Datos de contacto Nombre completo Este campo es obligatorio Telefono +34 ES+44 UK+49 DE+33 FR+39 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5147","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aquafunmogan.es\/en\/wp-json\/wp\/v2\/pages\/5147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aquafunmogan.es\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aquafunmogan.es\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aquafunmogan.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aquafunmogan.es\/en\/wp-json\/wp\/v2\/comments?post=5147"}],"version-history":[{"count":2,"href":"https:\/\/aquafunmogan.es\/en\/wp-json\/wp\/v2\/pages\/5147\/revisions"}],"predecessor-version":[{"id":7473,"href":"https:\/\/aquafunmogan.es\/en\/wp-json\/wp\/v2\/pages\/5147\/revisions\/7473"}],"wp:attachment":[{"href":"https:\/\/aquafunmogan.es\/en\/wp-json\/wp\/v2\/media?parent=5147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}