• User Newbie

    Far avviare il codice dopo che wordpress ha caricato la libreria

    Ciao a tutti. Ho caricato il plugin Modaal (humaan.com/modaal/?fbclid=IwAR0rDRJWorrX_8a_-3DXZXL2Nk3HkzYgnEGKotvzYtSvq8fYON5F_vRLCh0) inserendo i file css e js nelle rispettive cartelle del tema child e nel file function.php (sempre del tema child) ho integrato i files nel seguente modo:

    function add_modaal_style() {
    
    
    wp_enqueue_style( 'modaal-style', get_template_directory_uri(). '/css/modaal.css', 'all' );
    
    
    }
    
    
    add_action( 'wp_enqueue_scripts', 'add_modaal_style' ); 
    
    
    
    
    function add_modaal_min_script() {
        
        wp_enqueue_script( 'modaal-script', get_template_directory_uri(). '/js/modaal.min.js', array('jquery'),'', true );
            
    }
    
    
    add_action( 'wp_enqueue_scripts', 'add_modaal_min_script' );
    
    
    
    
    

    Successivamente ho aperto footer.php (sempre del tema child) ed ho inserito il seguente codice (preso dal sito del plugin stesso che ho inserito prima) :

    $('.iframe').modaal({
        type: 'iframe',
        width: 700,
        height: 500
    });
    
    

    In tutto questo non so cosa ho sbagliato dal momento che, come mostra l'esempio del sito modaal, si dovrebbe aprire la pagina web in popup, mentre il risultato che ho ottenuto io è che appena clicco su "Privacy Policy" cambia pagina andando sul link indicato. Esattamente come se avessi inserito solo il codice per il collegamento ipertestuale.

    Controllando la console con l'inspector di Chrome, il js mi dà errore 503 e il css 404.

    Non capisco quale sia il problema. In ogni caso penso dovrei togliere lo script dall'html, perchè è probabile che venga avviato prima che la libreria venga caricata.
    Se possibile, vorrei sapere dove inserire il codice per essere sicura che che il codice si avvii dopo aver caricato la libreria e se qualcuno ha qualche altra indicazione da fornirmi per poter risolvere quegli errori che mi spuntano.
    Grazie anticipatamente.


  • User Attivo

    La console ti indica che il css non riesce a trovarlo in quanto hai indicato un percorso errato, oppure il file non esiste.

    Per quanto riguarda il js bisognerebbe vedere l'errore.

    Lo script lo puoi anche lasciare, ma dovresti racchiuderlo dentro document.ready

    
    $(document).ready(function(){
        // codice
    });
    
    

    Ovviamente do per scontato che utilizzi JQuery altrimenti non puoi usare quel plugin


  • User Newbie

    Ciao, grazie per la risposta e scusa se sto rispondendo in ritardo. Si, già ho sistemato l'errore della console del percorso errato. In functions.php ho inserito questo codice:

    [CODE]/add jquery/
    function italystrap_add_jquery() {
    wp_enqueue_script('jquery');
    }

    add_action('wp_enqueue_scripts', 'italystrap_add_jquery');

    /*Enqueues Modaal plugin popup style*/
    

    function add_modaal_style() {

    wp_enqueue_style( 'modaal-style', get_stylesheet_directory_uri () . '/css/modaal.css', array('jquery'), 'all' );

    }

    add_action( 'wp_enqueue_scripts', 'add_modaal_style' );

    /Enqueues Modaal plugin popup script/
    function add_modaal_min_script() {

    wp_enqueue_script( 'modaal-script',  get_stylesheet_directory_uri () . '/js/modaal.min.js', array('jquery'), true );
    

    }

    add_action( 'wp_enqueue_scripts', 'add_modaal_min_script' );

    function add_modaal_script() {

    wp_enqueue_script( 'modaal-script',  get_stylesheet_directory_uri () . '/js/modaal.js', array('jquery'), true );
    

    }

    add_action( 'wp_enqueue_scripts', 'add_modaal_script' );[CODE]

    Quindi ora jquery dovrebbe leggerlo. Ho inserito il codice che mi hai consigliato tu e la console mi restituisce questo errore: Uncaught TypeError: $ is not a function.

    Quindi ci sarà un problema di conflitto con il simbolo $. Ho inserito allora questo codice:

    [CODE] var $j = jQuery.noConflict();

    $j(document).ready(function(){

    $j('.iframe').modaal({
    type: 'iframe',
    width: 700,
    height: 500
    

    });
    }); [CODE]

    Così la console non mi dà più errori, solo che l'effetto del popup non c'è. Praticamente clicco su Privacy Policy e sotto al footer si crea dello spazio bianco in cui in alto a sinistra appare un quadratino con quello che dovrebbe essere il contenuto del popup. Non so proprio come risolvere il problema.


  • User Attivo

    Difficile aiutarti senza vedere il codice, puoi postare il sito?