{"id":82,"date":"2021-12-15T13:27:47","date_gmt":"2021-12-15T13:27:47","guid":{"rendered":"https:\/\/startersites.io\/blocksy\/garderobe\/?page_id=82"},"modified":"2025-07-10T04:52:50","modified_gmt":"2025-07-10T04:52:50","slug":"cart","status":"publish","type":"page","link":"https:\/\/mayafundraising.com\/en\/cart\/","title":{"rendered":"Cart"},"content":{"rendered":"<!-- 1. Font Awesome -->\n<link\n  rel=\"stylesheet\"\n  href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\"\n\/>\n\n<!-- 2. Estilos del Floating Social -->\n<style>\n  .floating-social {\n    position: fixed;\n    bottom: 5px;\n    right: 20px;\n    z-index: 9999;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n  }\n\n  \/* Bot\u00f3n principal WhatsApp *\/\n  .floating-social a.whatsapp {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 56px;\n    height: 56px;\n    background-color: #25D366;\n    color: #fff;\n    border-radius: 50%;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n    font-size: 28px;\n    cursor: pointer;\n    animation: float 3s ease-in-out infinite;\n    text-decoration: none;\n  }\n\n  \/* Redes ocultas inicialmente *\/\n  .floating-social .social-links {\n    display: none;\n    flex-direction: column;\n    gap: 12px;\n    margin-bottom: 12px;\n  }\n\n  \/* Al hacer click en WhatsApp, mostramos los enlaces en cascada *\/\n  .floating-social.open .social-links {\n    display: flex;\n  }\n  .floating-social.open .social-links a {\n    opacity: 0;\n    transform: translateY(20px) scale(0.5);\n    animation: drop 0.4s forwards ease-out;\n  }\n  .floating-social.open .social-links a:nth-child(1) { animation-delay: 0.08s; }\n  .floating-social.open .social-links a:nth-child(2) { animation-delay: 0.16s; }\n  .floating-social.open .social-links a:nth-child(3) { animation-delay: 0.24s; }\n\n  \/* \u00cdconos secundarios (igual tama\u00f1o que WhatsApp) *\/\n  .floating-social .social-links a {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n    font-size: 28px;\n    transition: transform 0.2s;\n    text-decoration: none;\n  }\n  .floating-social .social-links a:hover {\n    transform: scale(1.1);\n  }\n\n  \/* Colores de cada red *\/\n  .floating-social .social-links a.instagram {\n    background: radial-gradient(\n      circle at 30% 107%,\n      #fdf497 0%,\n      #fd5949 45%,\n      #d6249f 60%,\n      #285AEB 90%\n    );\n    color: #fff;\n  }\n  .floating-social .social-links a.tiktok {\n    background-color: #000;\n    color: #fff;\n  }\n  .floating-social .social-links a.facebook {\n    background-color: #1877F2;\n    color: #fff;\n  }\n\n  \/* Animaci\u00f3n \u201cdrop\u201d *\/\n  @keyframes drop {\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  \/* Animaci\u00f3n flotante del bot\u00f3n *\/\n  @keyframes float {\n    0%, 100% { transform: translateY(0); }\n    50%      { transform: translateY(-6px); }\n  }\n\n  \/* Burbuja de chat *\/\n  .floating-social .chat-bubble {\n    position: absolute;\n    bottom: 75px;\n    right: 0;\n    background-color: #25D366;\n    color: #fff;\n    border-radius: 12px;\n    padding: 8px 12px;\n    font-size: 14px;\n    white-space: nowrap;\n    opacity: 0;\n    transform: translateY(10px);\n    transition: opacity 0.3s ease, transform 0.3s ease;\n    pointer-events: none;\n  }\n  .floating-social.show-bubble .chat-bubble {\n    opacity: 1;\n    transform: translateY(0);\n  }\n<\/style>\n\n<!-- 3. Estructura HTML -->\n<div class=\"floating-social\" id=\"floating-social\">\n  <!-- Redes ocultas -->\n  <div class=\"social-links\" id=\"social-links\">\n    <a\n      href=\"https:\/\/www.instagram.com\"\n      class=\"instagram\"\n      target=\"_blank\"\n      rel=\"noopener\"\n    >\n      <i class=\"fab fa-instagram\"><\/i>\n    <\/a>\n    <a\n      href=\"https:\/\/www.tiktok.com\"\n      class=\"tiktok\"\n      target=\"_blank\"\n      rel=\"noopener\"\n    >\n      <i class=\"fab fa-tiktok\"><\/i>\n    <\/a>\n    <a\n      href=\"https:\/\/www.facebook.com\"\n      class=\"facebook\"\n      target=\"_blank\"\n      rel=\"noopener\"\n    >\n      <i class=\"fab fa-facebook-f\"><\/i>\n    <\/a>\n  <\/div>\n\n  <!-- Burbuja de mensaje -->\n  <div class=\"chat-bubble\" id=\"chat-bubble\">\n    Chat with us!\n  <\/div>\n\n  <!-- Bot\u00f3n principal WhatsApp -->\n  <a\n    href=\"https:\/\/wa.me\/50230132432?text=\u00a1Hola!%20Quisiera%20saber%20m\u00e1s%20info\"\n    class=\"whatsapp\"\n    id=\"whatsapp-btn\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <i class=\"fab fa-whatsapp\"><\/i>\n  <\/a>\n<\/div>\n\n<!-- 4. JavaScript -->\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    const container = document.getElementById(\"floating-social\");\n    const whatsappBtn = document.getElementById(\"whatsapp-btn\");\n    const bubbleInterval = 10000;   \/\/ cada 10 segundos\n    const bubbleDuration = 3000;    \/\/ dura 3 segundos\n\n    \/\/ Al hacer click en WhatsApp (abrimos o desplegamos redes)\n    whatsappBtn.addEventListener(\"click\", function (e) {\n      e.preventDefault();\n      e.stopPropagation();\n      container.classList.toggle(\"open\");\n      \/\/ Si se cierra el men\u00fa, abrimos directamente WhatsApp en nueva pesta\u00f1a\n      if (!container.classList.contains(\"open\")) {\n        window.open(this.href, \"_blank\");\n      }\n    });\n\n    \/\/ Evitar que click en las redes cierre el men\u00fa\n    document.getElementById(\"social-links\")\n      .addEventListener(\"click\", e => e.stopPropagation());\n    \/\/ Si el usuario hace click fuera, cerramos el men\u00fa\n    document.addEventListener(\"click\", () => {\n      container.classList.remove(\"open\");\n    });\n\n    \/\/ Funci\u00f3n para mostrar la burbuja de chat de forma intermitente\n    function showBubble() {\n      if (container.classList.contains(\"open\")) return;\n      container.classList.add(\"show-bubble\");\n      setTimeout(() => container.classList.remove(\"show-bubble\"), bubbleDuration);\n    }\n\n    \/\/ Iniciamos la burbuja tras 2 segundos y luego cada 10 segundos\n    setTimeout(() => {\n      showBubble();\n      setInterval(showBubble, bubbleInterval);\n    }, 2000);\n  });\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Chat with us!<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-82","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/mayafundraising.com\/en\/wp-json\/wp\/v2\/pages\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mayafundraising.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mayafundraising.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mayafundraising.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mayafundraising.com\/en\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":3,"href":"https:\/\/mayafundraising.com\/en\/wp-json\/wp\/v2\/pages\/82\/revisions"}],"predecessor-version":[{"id":760,"href":"https:\/\/mayafundraising.com\/en\/wp-json\/wp\/v2\/pages\/82\/revisions\/760"}],"wp:attachment":[{"href":"https:\/\/mayafundraising.com\/en\/wp-json\/wp\/v2\/media?parent=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}