JetEngine Listing Grid: Custom Post Types, Query Posts, and Products ,Drag-and-Drop Functionality on the Frontend

gistfile1.txt

Video Tutorials here:
https://www.youtube.com/watch?v=hJhc90ETv0A
https://www.youtube.com/watch?v=ao8tlJ09Tc8
https://www.youtube.com/watch?v=BF7eernlAFA


function enqueue_drag_drop_script() {
    if ( current_user_can( 'administrator' ) ) {
        wp_enqueue_script('jquery-ui-sortable');

        // Localize script for AJAX URL and nonce
        wp_localize_script('jquery-ui-sortable', 'ajax_object', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('drag_drop_nonce')
        ));

        add_action('wp_footer', 'print_drag_drop_script');
    }
}

function print_drag_drop_script() {
    ?>

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var listingGrid = $('#listing_1 .jet-listing-grid__items, #listing_2 .jet-listing-grid__items');
            var postsPerPage = 6; // Adjust this to match your actual posts per page setting

            function getCurrentPage() {
                // Adjust this selector to match your pagination element
                var currentPage = $('.jet-filters-pagination__current').text();
                return parseInt(currentPage) || 1;
            }

            listingGrid.sortable({
                helper: 'clone',
                cursor: 'move',
                update: function(event, ui) {
                    var currentPage = getCurrentPage();
                    var globalIndexOffset = (currentPage - 1) * postsPerPage;
                    var sortedIDs = $(this).sortable('toArray', {attribute: 'data-post-id'});

                    var adjustedOrder = sortedIDs.map(function(id, index) {
                        return { id: id, global_menu_order: globalIndexOffset + index + 1 };
                    });

                    $.ajax({
                        url: ajax_object.ajax_url,
                        type: 'POST',
                        data: {
                            action: 'update_listing_grid_order',
                            listing_grid_order: JSON.stringify(adjustedOrder),
                            nonce: ajax_object.nonce
                        },
                        success: function(response) {
                            alert('Order updated!');
                        },
                        error: function(xhr, status, error) {
                            console.error('AJAX error:', status, error);
                        }
                    });
                }
            });
        });
    </script>
    <?php
}
add_action('wp_enqueue_scripts', 'enqueue_drag_drop_script');




// AJAX handler for updating the post order
add_action('wp_ajax_update_listing_grid_order', 'handle_update_listing_grid_order');
function handle_update_listing_grid_order() {
    // Verify nonce for security
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'drag_drop_nonce')) {
        wp_die('Nonce verification failed');
    }

    // Check for admin privileges
    if (!current_user_can('manage_options')) {
        wp_die('Insufficient permissions');
    }

    // Decode the received JSON string to get the array of post IDs and their menu orders
    $new_order = json_decode(stripslashes($_POST['listing_grid_order']), true);

    // Update the order of 'listing_grid'
foreach ($new_order as $item) {
    $result = wp_update_post(array(
        'ID' => $item['id'],
        'menu_order' => $item['global_menu_order']
    ), true);

    if (is_wp_error($result)) {
        error_log('Error updating post: ' . $result->get_error_message());
    }


        if (is_wp_error($result)) {
            // Handle the error, log it, or return it in the AJAX response
            // For example, you can log the error:
            error_log('Failed to update post order: ' . $result->get_error_message());
            // Or return an error response:
            wp_send_json_error('Failed to update post order: ' . $result->get_error_message());
        }
    }

    wp_send_json_success('Order updated successfully');
}

Hi, Does it work on Mobile devices? iOS or Android

Hi, Does it work on Mobile devices? iOS or Android

Try it and see :)

Hi, Does it work on Mobile devices? iOS or Android

Try it and see :)

Ha Ha! ok, i'll let you know :)