web-dev-qa-db-fra.com

wp_enqueue JavaScript dans le thème enfant (ReferenceError) avec l'aide de Search & Go

Ceci est mon premier post ici, donc j’espère que j’ai bien collé le code et que vous interpréterez le problème.

J'ai désenregistré et mis en file d'attente deux scripts dans mon childtheme. Lorsque vous supprimez et ajoutez uniquement le premier script (listing.js), tout fonctionne correctement, pas de problème. Mais lorsque je supprime et ajoute également un script, la page devient dysfonctionnelle et des erreurs de référence se produisent.

Voici une capture d'écran de ce que me donne mon plugin de débogage

Voici la partie pertinente de mon functions.php dans childtheme:

    function remove_script() {
    wp_deregister_script( 'search_and_go_elated_listings' );
    wp_dequeue_script(  'search_and_go_elated_listings' );

    wp_deregister_script( 'search_and_go_elated_third_party' );
    wp_dequeue_script(  'search_and_go_elated_third_party' );

    wp_deregister_script( 'search_and_go_elated_modules' );
    wp_dequeue_script(  'search_and_go_elated_modules' );

    wp_deregister_script( 'search_and_go_elated_blog' );
    wp_dequeue_script(  'search_and_go_elated_blog' );

    wp_deregister_script( 'eltd-like' );
    wp_dequeue_script(  'eltd-like' );
}
add_action( 'wp_print_scripts', 'remove_script', 20 );

function add_script() {
    wp_enqueue_script( 'bijles_search_and_go_elated_listings', get_stylesheet_directory_uri() . '/assets/js/listings.js', array('jquery', 'underscore', 'jquery-ui-autocomplete'), false, true );
    wp_enqueue_script( 'bijles_search_and_go_elated_third_party', get_stylesheet_directory_uri() . '/assets/js/third-party.min.js', array('jquery'), false, true  );
    wp_enqueue_script( 'bijles_search_and_go_elated_modules', get_stylesheet_directory_uri() . '/assets/js/modules.js', array('jquery'), false, true  );
    wp_enqueue_script( 'bijles_search_and_go_elated_blog', get_stylesheet_directory_uri() . '/assets/js/blog.min.js', array('jquery'), false, true  );
    wp_enqueue_script( 'bijles_eltd-like', get_stylesheet_directory_uri() . '/assets/js/like.min.js', array(), false, true  );
};
add_action( 'wp_enqueue_scripts', 'add_script', 100);

Des questions similaires mais sans réponse peuvent être trouvées ici :

J'espère que vous pourrez tous m'aider. J'ai appris mais je n'arrive pas à comprendre cela moi-même!

AJOUTÉ (29/06/2016):

C'est ce que j'ai trouvé en cherchant "search_and_go_elated_listings" dans le thème parent. functions.php:

if ( ! function_exists( 'search_and_go_elated_listing_assets' ) ) {

    function search_and_go_elated_listing_assets() {

        wp_enqueue_style( 'search_and_go_elated_listings', ELATED_ASSETS_ROOT.'/css/listings.min.css' );
        wp_enqueue_script( 'search_and_go_elated_listings', ELATED_ASSETS_ROOT.'/js/listings.min.js', array('jquery', 'underscore', 'jquery-ui-autocomplete'), false, true );

        if(search_and_go_elated_is_responsive_on()) {
            wp_enqueue_style( 'search_and_go_elated_listings_responsive', ELATED_ASSETS_ROOT.'/css/listings-responsive.min.css' );
        }

    }

    add_action( 'wp_enqueue_scripts', 'search_and_go_elated_listing_assets' );

}

C'est ce que j'ai trouvé en cherchant "search_and_go_elated_modules" dans le thème parent:

wp_enqueue_script('search_and_go_elated_modules', ELATED_ASSETS_ROOT.'/js/modules.min.js', array('jquery'), false, true);

Outre wp_enqueue_script, j'ai également trouvé quelques instances de wp_localize_script pour ce descripteur.

J'espère que cela t'aides!

AJOUTÉ (30-6-2016):

En parent, wp_localize_script est utilisé 6 fois dans un cadre appartenant au thème, que je ne publierai pas pour le moment. Il est utilisé deux fois dans functions.php. Nous avons également vu "eltdGlobalVars", qui est mentionné dans l'une des erreurs. S'il vous plaît voir ci-dessous:

if(!function_exists('search_and_go_elated_get_global_variables')) {
    /**
     * Function that generates global variables and put them in array so they could be used in the theme
     */
    function search_and_go_elated_get_global_variables() {

        $global_variables = array();
        $element_appear_amount = -150;

        $global_variables['eltdAddForAdminBar'] = is_admin_bar_showing() ? 32 : 0;
        $global_variables['eltdElementAppearAmount'] = search_and_go_elated_options()->getOptionValue('element_appear_amount') !== '' ? search_and_go_elated_options()->getOptionValue('element_appear_amount') : $element_appear_amount;
        $global_variables['eltdFinishedMessage'] = esc_html__('No more posts', 'search-and-go');
        $global_variables['eltdMessage'] = esc_html__('Loading new posts...', 'search-and-go');

        $global_variables = apply_filters('search_and_go_elated_js_global_variables', $global_variables);

        wp_localize_script('search_and_go_elated_modules', 'eltdGlobalVars', array(
            'vars' => $global_variables
        ));

    }

    add_action('wp_enqueue_scripts', 'search_and_go_elated_get_global_variables');
}

if(!function_exists('search_and_go_elated_per_page_js_variables')) {
    /**
     * Outputs global JS variable that holds page settings
     */
    function search_and_go_elated_per_page_js_variables() {
        $per_page_js_vars = apply_filters('search_and_go_elated_per_page_js_vars', array());

        wp_localize_script('search_and_go_elated_modules', 'eltdPerPageVars', array(
            'vars' => $per_page_js_vars
        ));
    }

    add_action('wp_enqueue_scripts', 'search_and_go_elated_per_page_js_variables');
}

AJOUTÉ (1-7-2016):

Plusieurs recherches pour la définition de eltd.modules.listings à la ligne 4 mais rien trouvé. 10 premières lignes de listings.js:

(function ($) {
    'use strict';
    var listings = {};
    eltd.modules.listings = listings;

    listings.eltdOnDocumentReady = eltdOnDocumentReady;
    listings.eltdOnWindowLoad = eltdOnWindowLoad;
    listings.eltdOnWindowResize = eltdOnWindowResize;
functionsjavascriptchild-theme
1
Pim Heijden

J'ai mis en file d'attente le script enfant dans le bon sens et j'ai fait disparaître la première erreur de référence (eltdGlobalVars) comme suit:

Dans functions.php dans l’enfant, j’ai supprimé les lignes qui retirent le script "search_and_go_elated_listing". Ensuite, je l'ai mis en file d'attente en utilisant une copie de la fonction portant le même nom que la fonction pluggable dans le parent: "search_and_go_elated_listing_assets". Dans cette copie, j'ai modifié l'emplacement du script en un emplacement dans childtheme et je me suis assuré de reconnaître le descripteur en y ajoutant "child_".

Cela ressemble à ceci:

function search_and_go_elated_listing_assets() {

    wp_enqueue_style( 'search_and_go_elated_listings', ELATED_ASSETS_ROOT.'/css/listings.css' );
    wp_enqueue_script( 'child_search_and_go_elated_listings', get_stylesheet_directory_uri() . '/assets/js/listings.js', array('jquery', 'underscore', 'jquery-ui-autocomplete'), false, true );

    if(search_and_go_elated_is_responsive_on()) {
        wp_enqueue_style( 'search_and_go_elated_listings_responsive', ELATED_ASSETS_ROOT.'/css/listings-responsive.min.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'search_and_go_elated_listing_assets' );

Ensuite, j'ai également copié les éléments de script où "search_and_go_elated_lising" est mentionné, en changeant son identificateur en "child_search_and_go_elated_lising". Dans l'exemple ci-dessous en combinaison avec la variable GlobalVars, mentionnée dans l'erreur d'origine:

function search_and_go_elated_get_global_variables() {

    $global_variables = array();
    $element_appear_amount = -150;

    $global_variables['eltdAddForAdminBar'] = is_admin_bar_showing() ? 32 : 0;
    $global_variables['eltdElementAppearAmount'] = search_and_go_elated_options()->getOptionValue('element_appear_amount') !== '' ? search_and_go_elated_options()->getOptionValue('element_appear_amount') : $element_appear_amount;
    $global_variables['eltdFinishedMessage'] = esc_html__('No more posts', 'search-and-go');
    $global_variables['eltdMessage'] = esc_html__('Loading new posts...', 'search-and-go');

    $global_variables = apply_filters('search_and_go_elated_js_global_variables', $global_variables);

    wp_localize_script('child_search_and_go_elated_modules', 'eltdGlobalVars', array(
        'vars' => $global_variables
    ));

}

add_action('wp_enqueue_scripts', 'search_and_go_elated_get_global_variables');

La deuxième erreur de référence (eltd) est résolue en hiérarchisant correctement les actions ajoutant les scripts. Ceci est évident maintenant je le comprends: Assurez-vous que les variables sont définies avant qu’elles soient référencées!

Comme je mets en file d'attente plusieurs scripts dans functions.php, le second a peut-être été modifié par rapport au parent. Donc, afin de résoudre l’erreur de référence dans listings.js, j’ai veillé à ce qu’il soit mis en file d'attente plus tard que les autres scripts (plus tard que modules.js pour être spécifique).

0
Pim Heijden