Ninja Ciasteczka: Wtyczka do Zarządzania Cookies w WordPress

Jeśli prowadzisz stronę na WordPressie i chcesz zarządzać ciasteczkami w prosty sposób, mamy coś dla Ciebie! Nasza wtyczka “Ninja Ciasteczka” dodaje popup informujący użytkowników o ciasteczkach używanych na Twojej stronie. Wystarczy zainstalować wtyczkę, a skrypty i style same się załadują. Popup wyświetla się tylko użytkownikom, którzy jeszcze nie zaakceptowali ciasteczek. Możesz dostosować jego wygląd za pomocą CSS.

ninja-ciasteczka.php

<?php

/**

 * Plugin Name: Ninja Ciasteczka

 * Description: Dodaje popup o uzyciu ciasteczek

 * Author: Maciej Mateusz Sajan - Projekt Ninja

 */









function odpal_ninja_ciasteczka_js(){



   wp_enqueue_script('odpal_ninja_ciasteczka_js', plugins_url( '/ninja-ciasteczka.js', __FILE__ ), array('jquery'), null, true);

    

    wp_register_style('ninja_ciasteczka_style', plugins_url('ninja_ciasteczka.css',__FILE__ ));



    wp_enqueue_style('ninja_ciasteczka_style');

    

}

add_action('init', 'odpal_ninja_ciasteczka_js');



?>

ninja-ciasteczka.js

/* ################################################################################
################################################################################
################################################################################

Ciasteczka

################################################################################
################################################################################
################################################################################*/

var htmlCiasteczek = "";


/* Funckje pomocnicze */
function sajanSetCookie(cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    let expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function sajanGetCookie(cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

if (sajanGetCookie('ciasteczkoweCiasteczko') == 'true') {} else {
    wyswietlPopup();
}


function getDomainUrl() {
    const protocol = window.location.protocol;
    const host = window.location.hostname;
    const port = window.location.port;
    return `${protocol}//${host}${port ? ':' + port : ''}`;
}




function wyswietlPopup() {



    async function loadPluginHtml(filePath) {
        try {
            const response = await fetch(filePath);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const htmlCiasteczek = await response.text();
            return htmlCiasteczek;
        } catch (error) {
            console.error('Error loading the HTML file:', error);
        }
    }


    loadPluginHtml(getDomainUrl()+'/wp-content/plugins/ninja-ciasteczka/ninja-ciasteczka.html').then(htmlCiasteczek => {
        if (htmlCiasteczek) {
            // Do something with the HTML content
            console.log(htmlCiasteczek);

            // Example: insert the HTML into a specific element on your page
            jQuery('body').append(htmlCiasteczek);
            jQuery('#guzik-ciasteczka-popup').click(function () {
                //console.log('kliknieto guzior w popupie trhreth');
                jQuery('#ciasteczka-popup').remove();
                sajanSetCookie('ciasteczkoweCiasteczko', 'true', 999999);
            });
        }
    });




}

ninja-ciasteczka.html

<div id="ciasteczka-popup"><img alt="ikonka ciasteczka" src="https://gooddrut.pl/wp-content/uploads/cookies-badge-gooddrut.png">
    <h2>Drogi Użytkowniku!</h2>
    <p>Na niniejsze stronie dla Twojej wygody używamy ciasteczek (plików Cookies).<br>Są potrzebne by zapamiętać różne Twoje wybory i ustawienia i ułatwić Ci poruszanie się po witrynie.<br>Jeśli nie zgadzasz się na to, lub nie lubisz ciasteczek, opuść tę stronę, ale pewnie będziesz żałować.</p>
    <div id="guzik-ciasteczka-popup" class="guzik">Ok</div>
</div>

ninja-ciasteczka.css

/* Ciasteczka */

#ciasteczka-popup {
    background: rgb(0 0 0 / 95%);
    position: fixed;
    bottom: 0;
    z-index: 999999;
    width: 100%;
    border: dashed 3px #9b9b9b;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
}


#ciasteczka-popup img {
    width: 134px;
    margin: 35px;
}
#ciasteczka-popup h2 {
    margin: 0;
    margin-bottom: 15px;
}
#ciasteczka-popup p{
    text-align: center;
}
#ciasteczka-popup .guzik{
    margin-bottom: 20px;
    cursor: pointer;
}
@media(max-width:768px){
    #ciasteczka-popup {
        border: dashed 2px #9b9b9b;
    }
    #ciasteczka-popup img {
        width: 73px;
        margin: 13px;
    }
    #ciasteczka-popup p{
        line-height: 1.1rem;
    }
    
}
Wróć