1

シナリオは次のとおりです。

  • カテゴリには複数の製品があります (製品とは、特定のカテゴリの投稿を意味します)
  • 各製品（投稿）にはいくつかの画像があります（カスタムフィールドを追加して管理しました）
  • フロントエンドでは、商品がまとめて表示されます
  • そのページのフッターに画像スライダーがあります
  • 各商品名をクリックすると、クリックした商品に応じてスライダー画像が変わります

必要なのは、クリックした製品に対応するカスタム フィールドの値を取得することだけです。AJAXリクエストを使用してこれを行うことは可能ですか? ポストバックなしでこのすべてのプロセスを管理できるように。

ありがとう。

4

2 に答える 2

2

私はワードプレスの経験はありませんが、AJAXの例をお見せすることができます。

私の知る限り、関連する投稿またはこのような製品をクリックするだけでajax関数を呼び出す必要があります。

<script>
  jQuery(document).ready(function () {

    jQuery("#PRODCUTID").click(function () {
      jQuery.ajax({
         type : "POST"
         ,url :"YOUR_URL_ON_WHICH_YOU_PUT_LOGIC_TO_FETCH_IDS_FOR_SLIDER"
         ,data :"CLICKED_PRODUCT_ID="+CLICKED_PRODUCT_ID // this the variable which will be posted and will find it (particular URL which you passed) on the controller action or in view file
         ,success : function(data){               
            //YOUR CODE HERE WHICH IS REPLACING PRODUCT ID  
         }
         ,beforeSend: function(html){
          //some kind of loader or text mean while data is waiting for the response
                },
          });
      })
})
</script>

これがお役に立てば幸いです。AJAxのリクエストについては、お気軽にお問い合わせください。

于 2012-08-22T12:57:29.207 に答える
1

とても簡単です。もちろん、ajaxの助けをくれたRajatModiに感謝します。どうぞ ：

これをテンプレートファイルのfunctions.phpに追加します。

wp_enqueue_script( 'ajax-script', get_stylesheet_directory_uri().'/js/myajax.js', array('jquery'), 1.0 ); // jQuery will be included automatically
    // get_template_directory_uri() . '/js/script.js'; // Inside a parent theme
    // get_stylesheet_directory_uri() . '/js/script.js'; // Inside a child theme
    // plugins_url( '/js/script.js', __FILE__ ); // Inside a plugin
    wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl

    add_action( 'wp_ajax_ajax_action', 'ajax_action_stuff' ); // ajax for logged in users
    add_action( 'wp_ajax_nopriv_ajax_action', 'ajax_action_stuff' ); // ajax for not logged in users
    function ajax_action_stuff() 
    {
        $post_id = $_POST['post_id']; // getting variables from ajax post
        // doing ajax stuff
        $custom_fields = get_post_custom($post_id);
        $imageurlset = $custom_fields['images'];
        $urlstring = $imageurlset[0];
        $imageurl = explode(',', $urlstring);
        //update_post_meta($post_id, 'post_key', 'meta_value');
        exit(json_encode($imageurl)); // stop executing script
    }

次のコードを作成して「/js/script.js」に追加します。

$(document).ready(
    function() {
        $('.prduct_name').click(function () {
        $('.spcl_content').find('.prduct_name').removeClass("selected");
        $(this).addClass("selected");
        var ithis = $(this);
        $.post(ajax_object.ajaxurl, {
            action: 'ajax_action',
            post_id: ithis.attr("id")
        }, function(data) {
            var number_of_images = data.length;
            //console.log(data);
            var image_link="";

            for(var i=0; i<number_of_images; i++)
                {
                     var image_url = data[i];
                     image_link = image_link+'<li><a href="'+image_url+'" rel="scroller" target="temp_win"><img src="'+image_url+'"/></a></li>'


                }

            //console.log(image_link); // alerts 'ajax submitted'
            var starting='<div class="wt-scroller"><div class="prev-btn"></div><div class="slides"><ul class="slider_mania">';
            var ending='</ul></div><div class="next-btn"></div><div class="lower-panel"></div></div>';
            var total=starting+image_link+ending;
            //console.log(total);
            $(".container_carol").html(total).fadeIn("slow");

        },"json");

    return false;

    });

私はそれが今はっきりしていることを望みます。友達の返事をありがとう。すてきな一日を。:)

于 2012-08-23T10:06:36.317 に答える