Woocommerce Question posted in
The official Woocommerce documentation can be found here.

making a custom woocommerce post in a custom page for using ajax

im trying to make an ajax call for displaying some of the post content in my main page and i have everything setup, but the problem is that i cant get the required hooks of the woocommerce in ajax action file because i cant get the current posts id and loop to use the hooks.
so im kind of clueless what i should do

add_action("wp_ajax_product_ajax", "product_ajax");
add_action("wp_ajax_nopriv_product_ajax", "product_ajax");
function product_ajax()  {
defined( 'ABSPATH' ) || exit;
global $product;
?>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                    <div class="container">
                        <div class="modal-main">
                            <div class="row">
                                <div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', 
$product ); ?>>
                                    <div class="col-md-6">
                                        <div class="description-prodact-modal">
                                            <?php woocommerce_template_single_title(); ?>
                                            <p>
</p>
                                            <div class="prise-modal">
                                                <p></p>
                                            </div>

                                            <div class="cart-modal">
                                                <form action="">
                                                    <div class="columns">
                                                        <div class="favorite-modal">
                                                            <button><i class="lar la-heart"></i></button>
                                                        </div>
                                                        <div class="add-to-cart">
                                                            <button><i class="las la-shopping-cart"></i>افزودن به سبد خرید</button>
                                                        </div>
                                                        <div class="number-prodact">
                                                            <input type="button" name="" id="" value="+">
                                                            <input type="text" value="1">
                                                            <input type="button" name="" id="" value="-">
                                                        </div>
                                                    </div>
                                                </form>   
                                            </div>
                                            <hr>
                                            <div class="prodact-meta">
                                                <span class="category-prodact">دسته بندی:
                                                    <a href="#">لوازم منزل</a>
                                                </span>
                                                <span class="tag-prodact">برچسب:
                                                    <a href="#">صندلی , میز</a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="gallery-prodact">
                                            <div class="gallery-cr owl-carousel
                                                owl-theme">
                                                <div class="item"><img
                                                        src="assets/img/1-12-433x516.jpg"
                                                        alt="image"></div>
                                                <div class="item"><img
                                                        src="assets/img/1-17-433x516.jpg"
                                                        alt="image"></div>
                                                <div class="item"><img
                                                        src="assets/img/1-19-433x516.jpg"
                                                        alt="image"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
<?php
wp_die();

}

and i have this in another page :

<script>
            jQuery(document).ready(function () {
                jQuery('.main_ajax_loader').hide();
                jQuery(".ajax_link").click(function (e) {
                    e.preventDefault();
                    var ajax_url = "<?php echo esc_js(admin_url('admin-ajax.php')); ?>";
                    
                    jQuery.ajax({
                        url: ajax_url,
                        type: "post",
                        data: {action: "product_ajax"},
                        
                        success: function (response) {
                            jQuery('.main_ajax_loader').show()
                            jQuery(".ajax_content").html(response);
                            jQuery('.main_ajax_loader').hide();

                        },
                        error: function (response) {
                        }
                    })
                })
            });
        </script>

so how should i use woocommerce hooks in this page ?

Tags:

2

Answers


  1. 0

    Depending on what you want to achieve I have a few ideas. I assume you are specifically looking for a single product ID given you are working with content-product.php.

    In the first code example you have the $product variable. If that is not empty you would probably be able to get the ID with $product->get_id().

    If you need to pass the ID via AJAX in your second code example you would probably change data: {action: "product_ajax"} to data: {action: "product_ajax", product_id: "<?php echo $product->get_id();?>"}.

    Then you can get the value in your first code example doing something along the lines of this:

    if ( ! empty( $_POST['product_id'] ) {
    $product_id = intval( $_POST['product_id'] );
    $product = wc_get_product( $product_id );

    // Do something with $product
}

    If you are on a normal WordPress page you could do like this:

    data: {action: "product_ajax", post_id: "<?php echo get_the_ID();?>"}.

    Login or Signup to reply.
  2. 0

    make a new hidden input in source page

    <input type="hidden" name="my_product_id_ajax" class="my_product_id_ajax" value="<?php echo $product_id; ?>" />

    then pass input value in ajax call :

    $product_id = $_POST['parameter_name'];

    parameter name is name of variable that you send in ajax call ;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search