¿Cómo guardar el estado de un editor de diseño de front end de jQuery UI Sortables?

Question

¿Cómo guardar el estado de un editor de diseño de front end de jQuery UI Sortables?

#1 de somatic (21 votos)
#2 de Geert (4 votos)

19

Estoy creando un editor de diseño de publicación de front-end utilizando jQuery UI Sortable .

Las publicaciones se presentan en cuadros de 300px por 250px sobre una imagen de fondo. Las publicaciones se crean y editan con el administrador de WordPress, pero quiero permitir que el administrador de sitios ajuste el orden de los cuadros mediante una interfaz de arrastrar y soltar en la parte delantera.

Tengo el trabajo de arrastrar y soltar, pero debo encontrar una forma de guardar el estado (orden) de las cajas. Idealmente, me gustaría poder guardar el estado como una opción y construirlo en la consulta.

La consulta para las publicaciones es un simple WP_Query que también obtiene datos de las meta cajas personalizadas para determinar el diseño de la caja individual:

$args= array(
      'meta_key' => 'c3m_shown_on',
       'meta_value'=> 'home' );
    $box_query = new WP_Query($args);  ?>
        <ul id="sortable">
            <?php
    while ($box_query->have_posts()) : $box_query->the_post(); global $post; global $prefix;           
    $box_size = c3m_get_field($prefix.'box_size', FALSE);
    $box_image = c3m_get_field($prefix.'post_box_image', FALSE);
    $overlay_class = c3m_get_field($prefix.'overlay_class', FALSE);

    if ( c3m_get_field($prefix.'external_link', FALSE) ) {
    $post_link = c3m_get_field($prefix.'external_link', FALSE);
    } else
            { $post_link = post_permalink(); 
    } ?>     
     <li class="<?php echo $box_size;?>  ui-state-default">
        <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
            <?php echo  '<a href="'.$post_link.'" ><img src="'.esc_url($box_image).'" alt="Image via xxxxx.com" /></a>'; ?>
                <div class="post-box <?php echo $overlay_class;?>">
                <?php if ( c3m_get_field( $prefix.'text_display', FALSE) ) { ?>     
                <h2><a href="<?php echo $post_link?>"><?php the_title();?></a></h2> 
                <p><?php echo substr($post->post_excerpt, 0, 90) . '...'; ?></p>            
                <?php } ?>               
                </div>
         </article>
     </li>              
    <?php endwhile; ?>
       </ul>
</section>

El javascript es solo las instrucciones clasificables predeterminadas básicas

jQuery(document).ready(function() {
    jQuery("#sortable").sortable();
  });

Hay métodos disponibles utilizando cookies para guardar el estado, pero también necesito deshabilitar el arrastrar y soltar ordenados para no usuarios de administrador, así que realmente necesito guardar en la base de datos.

Estoy buscando el método más creativo y utilizable y otorgaré una recompensa de 100 puntos a la mejor respuesta.

Actualización:

Obtuve la respuesta de somatic trabajando con un cambio menor.

ajaxurl no devuelve el valor en las páginas que no son de administración, así que utilicé wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); para definir el valor y cambié la línea de javascript bajo las opciones para:
url: MyAjax.ajaxurl,

Para limitar el acceso a la ordenación solo a los administradores, agregué un condicional a mi función wp_enqueue_script:

    function c3m_load_scripts() { 
    if ( current_user_can( 'edit_posts' ) ) {
        wp_enqueue_script( 'jquery-ui' );
        wp_enqueue_script( 'functions', get_bloginfo( 'stylesheet_directory' ) . '/_/js/functions.js', array( 'jquery', 'jquery-ui' ), false);
        wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
    }
}

Voy a hacer un poco más de pruebas y marcaré esta pregunta como resuelta y premiaré la recompensa.

jquery front-end jquery-ui

pregunta Chris_O 04.05.2011 - 16:12

2 respuestas

4

enlace

Lejos de haber terminado, pero la idea es enviar una solicitud ajax al arrastrar y soltar. También es posible que desee activar la solicitud ajax solo después de hacer clic en el botón "guardar" o algo así. Se enviaría una matriz con ID de publicación y un nuevo pedido.

Entonces tendrías que actualizar las publicaciones en la base de datos en el extremo del servidor. Finalmente, agregue un parámetro order a su bucle WP_Query .

Espero que esto te ayude a empezar. Cualquiera que se sienta libre de continuar jugando con él.

respondido por el Geert 04.05.2011 - 17:04

Lea otras preguntas en las etiquetas jquery front-end jquery-ui

API de configuración vs Personalizador de temas ¿Cómo exporto mi blog de WordPress como un libro? [cerrado]

score 21 · Accepted Answer

Brady tiene razón en que la mejor manera de manejar el guardado y la visualización de pedidos personalizados de tipo de publicación es mediante el uso de la propiedad menu_order

Aquí está el jquery para hacer que la lista se pueda ordenar y pasar los datos mediante ajax a wordpress:

jQuery(document).ready(function($) {        
    var itemList = $('#sortable');

    itemList.sortable({
        update: function(event, ui) {
            $('#loading-animation').show(); // Show the animate loading gif while waiting

            opts = {
                url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
                type: 'POST',
                async: true,
                cache: false,
                dataType: 'json',
                data:{
                    action: 'item_sort', // Tell WordPress how to handle this ajax request
                    order: itemList.sortable('toArray').toString() // Passes ID's of list items in  1,3,2 format
                },
                success: function(response) {
                    $('#loading-animation').hide(); // Hide the loading animation
                    return; 
                },
                error: function(xhr,textStatus,e) {  // This can be expanded to provide more information
                    alert(e);
                    // alert('There was an error saving the updates');
                    $('#loading-animation').hide(); // Hide the loading animation
                    return; 
                }
            };
            $.ajax(opts);
        }
    }); 
});

Aquí está la función de wordpress que escucha la devolución de llamada ajax y realiza los cambios en la base de datos:

function my_save_item_order() {
    global $wpdb;

    $order = explode(',', $_POST['order']);
    $counter = 0;
    foreach ($order as $item_id) {
        $wpdb->update($wpdb->posts, array( 'menu_order' => $counter ), array( 'ID' => $item_id) );
        $counter++;
    }
    die(1);
}
add_action('wp_ajax_item_sort', 'my_save_item_order');
add_action('wp_ajax_nopriv_item_sort', 'my_save_item_order');

La clave para mostrar las publicaciones en el orden que has guardado es agregar la propiedad menu_order a los argumentos de consulta:

$args= array(
    'meta_key' => 'c3m_shown_on',
    'meta_value'=> 'home'
    'orderby' => 'menu_order',
    'order' => 'ASC'
);

$box_query = new WP_Query($args);

Luego, ejecuta el bucle y genera cada elemento ... (la primera línea es la animación de carga principal de wp: querrás esconderlo inicialmente a través de css, y luego la función jquery se mostrará cuando se procese)

<img src="<?php bloginfo('url'); ?>/wp-admin/images/loading.gif" id="loading-animation" />
<ul id="sortable">
    <li id="{echo post ID here}">{echo title or other name here}</li>
</ul>

Código inspirado en el excelente tutorial .