Modal edad - Bsale-IO/template-docs GitHub Wiki

Componente por defecto en los templates

Código Componente Modal Edad 
<!-- Variables de configuración del modal de edad --->

{% assign titulo = "Bienvenidos a" -%}
{% assign pagina = "pagina.com" -%}
{% assign text_conf_edad = "¿Eres mayor de Edad?" -%}
{% assign url_condiciones = "/article/terminos" -%}

<style>
.modal_age {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1000000;
}

.modal_age .modal {
    display: block !important;
}

.btn.modal_age_no, .btn.modal_age_yes {
    width: 100px;
}

.text-titulo, .text-pagina {
    text-align:center;
}

.text-edad {
    color: red;
    font-size: 19px;
    text-align:center;
}

.text-condiciones {
    color: grey;
    font-size: 12px;
    padding-top: 12px;
    text-align:center;
}

.text-condiciones a {
    color:var(--primary-color);
}
.text-condiciones a:hover {
    color:var(--primary-hover-color);
}

</style>

{% unless current_url contains url_condiciones %}
<div id="modal_age">
    <div class="modal show">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="d-flex justify-content-center">
                        <a class="mt-3" title="{{site.name}}">
                            <img 
                                class="img-fluid pb-3"
                                {{site.logo | img_tag_attributes:'S'}}"
                            >
                        </a>
                    </div>
                    <h4 class="text-titulo">{{titulo}}</h4>
                    <h1 class="text-pagina">{{pagina}}</h1>
                    <h4 class="text-edad">{{text_conf_edad}}</h4>
                    <p class="text-condiciones">
                        Al confirmar ser mayor de edad manifiesta su conformidad con los 
                        <a href="{{url_condiciones}}">términos y condiciones</a>
                    </p>
                </div>
                <div class="modal-footer justify-content-center align-items-center">
                    <button class="btn btn-secondary modal_age_no">NO</button>
                    <button class="btn btn-primary modal_age_yes">SI</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
if (!localStorage.getItem("adult")) {
    document.getElementById("modal_age").classList.add("modal_age");
    document.body.style.overflow = "hidden";
}
</script>

<script>
(function () {
    if (!localStorage.getItem("adult")) {
        var modal = document.getElementById("modal_age");
        modal.querySelector(".modal_age_no").onclick = function () {
            location.assign("{{url_condiciones}}");
        };
        modal.querySelector(".modal_age_yes").onclick = function () {
            document.body.style.overflow = "initial";
            document.body.removeChild(modal);
            localStorage.setItem("adult", "true");
        };
    }
})();
</script>
{% endunless %}

Instrucciones de Instalación

El componente Modal esta incorporado en todos los template base, sin embargo para poder activarlo, se deberá llamar en el componente 🟢BODY

{{'Modal edad'| get_component }}

Instrucciones de su configuración

EL principio del componente tiene sus variables de configuración la cual son las siguientes:

{% assign titulo = "Bienvenidos a" -%}
{% assign pagina = "pagina.com" -%}
{% assign text_conf_edad = "¿Eres mayor de Edad?" -%}
{% assign url_condiciones = "/article/terminos" -%}
  1. titulo : Titulo del modal que deseas
  2. Pagina : La pagina web de tu sitio
  3. text_conf_edad: Esta variable es la pregunta que uno realiza
  4. url_condiciones: Es url del sitio que va a ir asociado cuando pinche en NO

Important

La validación de edad en este código se almacena en el navegador usando localStorage. Esto significa que, una vez que el usuario confirme ser mayor de edad, el valor "adult": "true" se guarda en el almacenamiento local del navegador.

Duración del almacenamiento localStorage mantiene los datos de forma indefinida en el navegador, incluso si el usuario cierra el navegador o reinicia el dispositivo. La validación permanecerá guardada hasta que el usuario borre los datos de su navegador manualmente (borrando el almacenamiento local o los datos de navegación).

⚠️ **GitHub.com Fallback** ⚠️