Zonas de Despacho Interactivas<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Usamos la fuente Inter como fuente principal *\/\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n }\r\n \/* Peque\u00f1a animaci\u00f3n para la aparici\u00f3n de las tarjetas *\/\r\n .card-enter {\r\n animation: fadeIn 0.5s ease-out;\r\n }\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100 min-h-screen p-4 md:p-8\">\r\n\r\n <div class=\"container mx-auto max-w-6xl\">\r\n\r\n \r\n <div class=\"bg-white p-6 rounded-lg shadow-md mb-8\">\r\n <h1 class=\"text-3xl font-bold text-gray-800 text-center mb-4\">Zonas de Despacho<\/h1>\r\n <p class=\"text-center text-gray-600 mb-6\">Ingresa el nombre de tu comuna para ver el costo de despacho.<\/p>\r\n <div class=\"relative\">\r\n <input type=\"text\" id=\"searchInput\"\r\n class=\"w-full p-4 pl-12 text-lg border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n placeholder=\"Buscar comuna (ej: Maip\u00fa, Las Condes...)\">\r\n <svg class=\"w-6 h-6 text-gray-400 absolute left-4 top-1\/2 -translate-y-1\/2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" \/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"gridZonas\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n \r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ 1. Definimos los datos basados en tu imagen\r\n \/\/ Organic\u00e9 las comunas seg\u00fan los colores de tu mapa\r\n const datosZonas = [\r\n {\r\n zona: \"Poniente\",\r\n color: \"red-500\", \/\/ Color de la zona\r\n comunas: [\r\n { nombre: \"Quilicura\", precio: 3000 },\r\n { nombre: \"Renca\", precio: 3000 },\r\n { nombre: \"Cerro Navia\", precio: 2000 },\r\n { nombre: \"Pudahuel\", precio: 3000 },\r\n { nombre: \"Maip\u00fa\", precio: 4000 },\r\n { nombre: \"Lo Espejo\", precio: 4000 },\r\n { nombre: \"Cerrillos\", precio: 4000 },\r\n { nombre: \"PAC\", precio: 4000 },\r\n { nombre: \"Estaci\u00f3n Central\", precio: 4000 },\r\n { nombre: \"Lo Prado\", precio: 3000 },\r\n { nombre: \"Quinta Normal\", precio: 3000 }\r\n ]\r\n },\r\n {\r\n zona: \"Norte\",\r\n color: \"green-500\",\r\n comunas: [\r\n { nombre: \"Huechuraba\", precio: 4000 },\r\n { nombre: \"Conchal\u00ed\", precio: 3500 },\r\n { nombre: \"Recoleta\", precio: 3500 },\r\n { nombre: \"Independencia\", precio: 3500 }\r\n ]\r\n },\r\n {\r\n zona: \"Centro\",\r\n color: \"yellow-500\",\r\n comunas: [\r\n { nombre: \"Santiago\", precio: 4000 },\r\n { nombre: \"Providencia\", precio: 4000 },\r\n { nombre: \"\u00d1u\u00f1oa\", precio: 5000 },\r\n { nombre: \"Macul\", precio: 5000 },\r\n { nombre: \"San Joaqu\u00edn\", precio: 5000 },\r\n { nombre: \"San Miguel\", precio: 5000 }\r\n ]\r\n },\r\n {\r\n zona: \"Oriente\",\r\n color: \"blue-500\",\r\n comunas: [\r\n { nombre: \"Vitacura\", precio: 5000 },\r\n { nombre: \"Las Condes\", precio: 5000 },\r\n { nombre: \"La Reina\", precio: 5000 },\r\n { nombre: \"Pe\u00f1alol\u00e9n\", precio: 5000 }\r\n ]\r\n }\r\n ];\r\n\r\n \/\/ 2. Funci\u00f3n para formatear como moneda chilena\r\n function formatCurrency(value) {\r\n return new Intl.NumberFormat('es-CL', {\r\n style: 'currency',\r\n currency: 'CLP',\r\n minimumFractionDigits: 0\r\n }).format(value);\r\n }\r\n\r\n \/\/ 3. Funci\u00f3n para dibujar las zonas en la p\u00e1gina\r\n function renderZonas(filtro = '') {\r\n const container = document.getElementById('gridZonas');\r\n container.innerHTML = ''; \/\/ Limpiamos el contenedor\r\n const filtroMinusculas = filtro.toLowerCase().normalize(\"NFD\").replace(\/[\\u0300-\\u036f]\/g, \"\"); \/\/ Normalizamos tildes\r\n\r\n datosZonas.forEach(zona => {\r\n \/\/ Filtramos las comunas de esta zona\r\n const comunasFiltradas = zona.comunas.filter(comuna => {\r\n const nombreComuna = comuna.nombre.toLowerCase().normalize(\"NFD\").replace(\/[\\u0300-\\u036f]\/g, \"\");\r\n return nombreComuna.includes(filtroMinusculas);\r\n });\r\n\r\n \/\/ Si la zona tiene comunas que coinciden (o no hay filtro), la mostramos\r\n if (comunasFiltradas.length > 0) {\r\n const zonaCard = document.createElement('div');\r\n zonaCard.className = `bg-white rounded-lg shadow-lg overflow-hidden flex flex-col card-enter border-t-8 border-${zona.color}`;\r\n\r\n \/\/ Generamos el HTML para la lista de comunas\r\n const comunasHtml = comunasFiltradas.map(comuna => `\r\n <li class=\"flex justify-between items-center p-4 hover:bg-gray-50 transition duration-150 rounded-md\">\r\n <span class=\"font-medium text-gray-700\">${comuna.nombre}<\/span>\r\n <span class=\"font-semibold text-gray-900\">${formatCurrency(comuna.precio)}<\/span>\r\n <\/li>\r\n `).join('');\r\n\r\n zonaCard.innerHTML = `\r\n <div class=\"p-6\">\r\n <h2 class=\"text-2xl font-bold text-center text-${zona.color} mb-4\">${zona.zona}<\/h2>\r\n <\/div>\r\n <div class=\"p-4 pt-0 flex-grow\">\r\n <ul class=\"space-y-2\">\r\n ${comunasHtml}\r\n <\/ul>\r\n <\/div>\r\n `;\r\n container.appendChild(zonaCard);\r\n }\r\n });\r\n\r\n \/\/ Mensaje si no hay resultados\r\n if (container.innerHTML === '') {\r\n container.innerHTML = `\r\n <div class=\"col-span-full text-center p-10 bg-white rounded-lg shadow-md\">\r\n <h2 class=\"text-2xl font-semibold text-gray-700\">Sin resultados<\/h2>\r\n <p class=\"text-gray-500 mt-2\">No se encontraron comunas que coincidan con \"${filtro}\".<\/p>\r\n <\/div>\r\n `;\r\n }\r\n }\r\n\r\n \/\/ 4. Event Listener para la barra de b\u00fasqueda\r\n const searchInput = document.getElementById('searchInput');\r\n searchInput.addEventListener('keyup', (e) => {\r\n renderZonas(e.target.value);\r\n });\r\n\r\n \/\/ 5. Renderizado inicial al cargar la p\u00e1gina\r\n document.addEventListener('DOMContentLoaded', () => {\r\n renderZonas();\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>\u00bfC\u00f3mo agendar tu pedido? Puedes hacer tu pedido directo desde la web o mediante wsp. En caso de que quieras pedir por wsp, te recomendamos el siguiente paso a paso: 1.- Escoge tu producto 2.- Realiza tu pedido a trav\u00e9s de nuestros WhatsHApp +56927355939 3.- Selecciona delivery o retiro 4.- Env\u00edanos el nombre de qui\u00e9n […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_front_end_style_editor":"no","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","omw_enable_modal_window":"enable","footnotes":""},"class_list":["post-478","page","type-page","status-publish","hentry","entry","owp-thumbs-layout-horizontal","owp-btn-normal","owp-tabs-layout-horizontal","has-no-thumbnails","has-product-nav"],"_links":{"self":[{"href":"https:\/\/pasteleriaemanuel.cl\/index.php\/wp-json\/wp\/v2\/pages\/478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pasteleriaemanuel.cl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pasteleriaemanuel.cl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pasteleriaemanuel.cl\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pasteleriaemanuel.cl\/index.php\/wp-json\/wp\/v2\/comments?post=478"}],"version-history":[{"count":16,"href":"https:\/\/pasteleriaemanuel.cl\/index.php\/wp-json\/wp\/v2\/pages\/478\/revisions"}],"predecessor-version":[{"id":498,"href":"https:\/\/pasteleriaemanuel.cl\/index.php\/wp-json\/wp\/v2\/pages\/478\/revisions\/498"}],"wp:attachment":[{"href":"https:\/\/pasteleriaemanuel.cl\/index.php\/wp-json\/wp\/v2\/media?parent=478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}