jarthex

I’ve solved my problem with RELATED VIDEOS. I set a large value in the Limit-per-page parameter to display the complete list of RELATED VIDEOS. I then remove videos from this list that don’t have the same category as the video in the PLAYER. I also remove the pagination, which is now unnecessary.

I updated to the latest version. I created the MEDIAS/VIDEOS CATALOGUE page and added this page in Advanced → Pages & Permalinks → Permalinks & Archive Settings. It works (for example, http://budokai-metz-aikido.test/medias/videos-catalogue/jo-kihon), but if I edit the /MEDIAS/VIDEO CATALOGUE page (with Elementor), these changes don’t appear (??).

Regarding related videos, I have videos with the same tag but different categories. I assume there’s no way to select only related categories. I can do this selection in my code. To do this, I’ll modify my function.php to retrieve the category for each ID. Any thoughts?

FUNCTION.PHP
=============
add_action('wp_ajax_get_all_video_slugs', 'ajax_get_all_video_slugs');
add_action('wp_ajax_nopriv_get_all_video_slugs', 'ajax_get_all_video_slugs');

function ajax_get_all_video_slugs() {
    $args = array(
        'post_type'      => 'aiovg_videos',
        'posts_per_page' => -1, // <--- Le "-1" magique qui récupère TOUS les éléments d'un coup
        'post_status'    => 'publish',
        'fields'         => 'ids', // Performance : on ne demande d'abord que les IDs pour alléger la requête
    );

    $video_ids = get_posts($args);
    $results = array();

    if (!empty($video_ids)) {
        foreach ($video_ids as $id) {
            $results[] = array(
                'id'   => $id,
                'slug' => get_post_field('post_name', $id)
            );
        }
    }

    if (!empty($results)) {
        wp_send_json_success($results);
    } else {
        wp_send_json_error('Aucune vidéo trouvée');
    }
}

Here is my website https://metz-aikido.fr/

In the menu click on MEDIAS and VIDEOS CATALOGUE.

for each VIDEO. Click on 🔗 display /videos-catalogue/ for this VIDEO
Result by example
https://metz-aikido.fr/videos-catalogue/les-kumijo-1-5-de-saito

To view the HTML code (right-click and inspect), click on SHIMASU in the footer and reload the page.

HERE IS MY CODE

FUNCTION.PHP
============
add_action('wp_ajax_get_all_video_slugs', 'ajax_get_all_video_slugs');
add_action('wp_ajax_nopriv_get_all_video_slugs', 'ajax_get_all_video_slugs');

function ajax_get_all_video_slugs() {
    $args = array(
        'post_type'      => 'aiovg_videos',
        'posts_per_page' => -1, // <--- Le "-1" magique qui récupère TOUS les éléments d'un coup
        'post_status'    => 'publish',
        'fields'         => 'ids', // Performance : on ne demande d'abord que les IDs pour alléger la requête
    );

    $video_ids = get_posts($args);
    $results = array();

    if (!empty($video_ids)) {
        foreach ($video_ids as $id) {
            $results[] = array(
                'id'   => $id,
                'slug' => get_post_field('post_name', $id)
            );
        }
    }

    if (!empty($results)) {
        wp_send_json_success($results);
    } else {
        wp_send_json_error('Aucune vidéo trouvée');
    }
}    


@SLUG HTML TEMPLATE TO SET WITH gCo_ns_C.Array_SLUG ({id:,slug:})
==========================================================
GLB_ns_H.VIDEO_DIV_YOUTUBE_AIOVG_Template =
<br> <div class="gj-video-div gj-video-div-aiovg"><br>        <p class="gj-video-icones"><br>            <a title="Afficher en pleine page"<br>                class="gj-link gj-video-full-page"<br>                href="${GLB_ns_C.Youtube_Embed}/@URL"<br>                data-id="@SLUG"<br>                target="_blank"<br>            ><br>            <a title="Catalogue"<br>                class="gj-link gj-video-catalogue"<br>                href="${/${GLB_ns_C.Obj_Pages.Videos_Catalogue}/}@SLUG"<br>            ><br>            </a><br>            <a class="aiovg gj-video-expand gj-video-expand-extend" title="Etendre la video"<br>                data-id="@SLUG"<br>            ><br>            </a><br>        </p><br>        ${GLB_ns_H.VIDEO_IMAGE_Template}<br> </div><br>
;


SET HTML WITH THE TABLE gCo_ns_C.Array_SLUG ({id:,slug:})
======================================================
const _laiovg_item_videoCLASS = $('.aiovg-item-video');
    if (Fnative.length(_laiovg_item_videoCLASS)) {

        gCo_ns_X.Maiovg.Set_aiovg_item_video();
        gCo_ns_X.Maiovg.Get_AllVideos_SLUG();
        // Attente gCo_ns_C.Array_SLUG {id:,slug:}
        // soit rempli par gCo_ns_X.Maiovg.Get_AllVideos_SLUG()
        let ltimer = 0;
        let laiovg_CheckState =
	setInterval(() => {
            ++ltimer;
            // STOP
            if (ltimer > GLB_ns_C.Obj_Psite.Timer_Interval_Max) {
                Fnative.console_color({
		message: \n${gCo_ns_C.From} STOP INTERVAL laiovg_CheckState pour gCo_ns_C.Array_SLUG\n,
                    important: true
                });
                clearInterval(laiovg_CheckState);
            }
            if (Fnative.length(gCo_ns_C.Array_SLUG) > 0) {
                clearInterval(laiovg_CheckState);
                // Tri par id
                gCo_ns_C.Array_SLUG.sort((a, b) => a.id - b.id);
                // Html @SLUG
                gCo_ns_X.Maiovg.Set_aiovg_item_video_SLUG();
            }
        // END setInterval
        }, 100);
    }

FUNCTION Get_AllVideos_SLUG CREATION OF THE TABLE gCo_ns_C.Array_SLUG ({id:,slug:})
==================================================================================
Get_AllVideos_SLUG: async () => {
    // console.log('Get_AllVideos_SLUG');
    try {
        const response = await $.ajax({
            url: '/wp-admin/admin-ajax.php',
            method: 'POST',
            data: { action: 'get_all_video_slugs' }
        });
        if (!response.success) {
            throw new Error(response.data);
        }
        // On stocke DIRECTEMENT le résultat dans votre tableau global
        gCo_ns_C.Array_SLUG = response.data;
        // console.log('Tableau "SLUG_Array" mis à jour ! Nombre d\'éléments :', gCo_ns_C.Array_SLUG.length);
    } catch (erreur) {
        // Le .fail() est remplacé par ce catch qui attrape toutes les erreurs (AJAX ou PHP)
        console.error('Erreur lors de la récupération des slugs :', erreur);
    }
},

 
FUNCTION Set_aiovg_item_video_SLUG (replace @SLUG from gCo_ns_C.Array_SLUG) 
==========================================================================
Set_aiovg_item_video_SLUG: () => {
    console.log('Set_aiovg_item_video_SLUG');
    // console.log('gCo_ns_C.Array_SLUG : '+JSON.stringify(gCo_ns_C.Array_SLUG));
    let lID;
    let lfound;
    let lfoundindex;
    let lindex;
    let lhtml;
    const _laiovg_item_videos = $('.aiovg-item-video');
    let _lvideos_icones;
    let llength = Fnative.length(gCo_ns_C.Array_SLUG);
    for (const lelement of _laiovg_item_videos) {

        _lvideos_icones = $(lelement).find('.gj-video-icones');
        lID = Fjquery._attr({type:'get', element:lelement, attr:['data-id']});
        lfound = gCo_ns_C.Array_SLUG.find(el => el.id === Number(lID));
        lhtml = Fjquery._html({type:'get',element:_lvideos_icones});
        lhtml =
            Fnative.replace(
                lhtml,
                ['@SLUG', lfound.slug, 1]
            );
        Fjquery._html({type:'set',element:_lvideos_icones,html:lhtml});
    }
},

I managed to implement this function and it works well. I just had to modify functions.php to avoid a 401 error. Thanks again 🙂

Thanks. I’ll test that.

Another question. Always in JavaScript (or jQuery preferably). How can I retrieve the list of all slugs?

Ok, checked.
Thanks for the reply