Dynamic posts per page adjustment for JetEngine Query Builder's Posts Query based on device type

gistfile1.txt

As we know, JetEngine Query Builder's Posts Query Posts Per Page doesn’t have an option to set different posts per page 
based on the device, like tablet and phone. Now we have developed a custom code to achieve it, allowing dynamic 
adjustments based on the user’s device type.

The code only works for Posts Query and must be implemented correctly within 
JetEngine Query Builder, it works whether the Cache Query toggle is on or off.

How to do it:

1. Go to Query Builder, create a new query, and select Query Type: Posts Query.
2. Then go to Pagination and enter: desktop:6, tablet:4, phone:2 
( It is important that you do not remove the text, such as "desktop," "tablet," etc. You only change the numbers. )
The numbers you see here can be freely adjusted to any value you want to display per page.

Copy the following PHP code and create a PHP snippet using your snippet plugins. 
Paste the code into the plugin and save it.
___________________________________

//JetEngine Query Builder posts_per_page dynamically
add_filter( 'jet-engine/query-builder/types/posts-query/args', function( $args, $query_instance ) {
    // Default posts per page if no value is provided
    $default_posts_per_page = 6;

    // Check if the `posts_per_page` field contains a custom syntax
    if ( isset( $args['posts_per_page'] ) && is_string( $args['posts_per_page'] ) ) {
        $posts_per_page = $args['posts_per_page'];
        $device_settings = [];

        // Parse the custom syntax into an associative array
        $pairs = explode( ',', $posts_per_page );
        foreach ( $pairs as $pair ) {
            $pair = trim( $pair );
            if ( strpos( $pair, ':' ) !== false ) {
                list( $device, $value ) = array_map( 'trim', explode( ':', $pair ) );
                $device_settings[ strtolower( $device ) ] = (int) $value;
            }
        }

        // Ensure that a desktop value is always set as a fallback
        if ( empty( $device_settings['desktop'] ) ) {
            $device_settings['desktop'] = $default_posts_per_page;
        }

        // Determine the posts_per_page value based on device type
        if ( wp_doing_ajax() && isset( $_POST['device_type'] ) ) {
            $device_type = sanitize_text_field( $_POST['device_type'] );
            $args['posts_per_page'] = isset( $device_settings[ $device_type ] ) ? $device_settings[ $device_type ] : $device_settings['desktop'];
        } else {
            // Detect device type based on viewport width or user agent
            $is_mobile = wp_is_mobile();
            $is_tablet = isset( $_SERVER['HTTP_USER_AGENT'] ) && 
                         ( strpos( strtolower( $_SERVER['HTTP_USER_AGENT'] ), 'ipad' ) !== false || 
                           ( strpos( strtolower( $_SERVER['HTTP_USER_AGENT'] ), 'android' ) !== false && strpos( strtolower( $_SERVER['HTTP_USER_AGENT'] ), 'mobile' ) === false ) );

            if ( $is_mobile && ! $is_tablet ) {
                $args['posts_per_page'] = $device_settings['phone'] ?? $device_settings['tablet'] ?? $device_settings['desktop'];
            } elseif ( $is_tablet ) {
                $args['posts_per_page'] = $device_settings['tablet'] ?? $device_settings['desktop'];
            } else {
                $args['posts_per_page'] = $device_settings['desktop'];
            }
        }
    } else {
        $args['posts_per_page'] = $default_posts_per_page; 
    }

    return $args;
}, 10, 2 );

// Add inline JavaScript for device detection and full-page reload on breakpoint change
add_action( 'wp_footer', function() {
    // Detect if we're in a page editor (Elementor, Bricks, etc.)
    if ( is_admin() || isset( $_GET['elementor-preview'] ) || isset( $_GET['bricks'] ) ) {
        return; 
    }
    ?>
    <script>
        (function($) {
            // Function to detect device type based on viewport width
            function getDeviceType() {
                const width = window.innerWidth;

                if (width <= 767) {
                    return 'phone';
                } else if (width >= 768 && width <= 1024) {
                    return 'tablet';
                } else {
                    return 'desktop';
                }
            }

            // Store the initial device type in sessionStorage
            let previousDeviceType = sessionStorage.getItem('deviceType') || getDeviceType();

            // Function to check and reload page when device type changes
            function checkDeviceChange() {
                const currentDeviceType = getDeviceType();
                if (currentDeviceType !== previousDeviceType) {
                    sessionStorage.setItem('deviceType', currentDeviceType);
                    location.reload(); // Full page reload when breakpoint changes
                }
            }

            // Trigger full-page reload on resize or orientation change
            let resizeTimer;
            $(window).on('resize orientationchange', function() {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(checkDeviceChange, 300); 
            });

            // Ensure device type is stored and page reloads when necessary
            $(document).ready(function() {
                checkDeviceChange();
            });

        })(jQuery);
    </script>
    <?php
});

// Handle AJAX requests to refresh posts_per_page
add_action( 'wp_ajax_update_posts_per_page', 'update_posts_per_page' );
add_action( 'wp_ajax_nopriv_update_posts_per_page', 'update_posts_per_page' );

function update_posts_per_page() {
    // Verify nonce for security
    check_ajax_referer( 'update_posts_per_page_nonce', 'security' );

    $device_type = sanitize_text_field( $_POST['device_type'] ?? 'desktop' );

    // Respond with the device type
    wp_send_json_success([
        'device_type' => $device_type,
    ]);
}