S
S
Stanislav Shabalin2020-05-18 15:34:23
WordPress
Stanislav Shabalin, 2020-05-18 15:34:23

How to update the variation display script when changing the Woocommerce product card via ajax?

The following problem arose: I switch between product cards through the ajax handler and found that the prices of variations do not appear, or rather, even the entire container

<div class="woocommerce-variation single_variation"></div>
remains empty. There is a feeling that the woocommerce script (add-to-cart-variation.js) does not work. If so, how can I force it to run? I note that there are no questions with simple goods - the price appears, but there the script is not needed, in fact.

This is what the page looks like after the transition:
5ec280c789b3a752985198.jpeg

Initial data:

functions.php
add_action( 'wp_ajax_post_loading', 'post_loading_callback' );
add_action( 'wp_ajax_nopriv_post_loading', 'post_loading_callback' );
function post_loading_callback() {

  $post_object = get_post($_POST['id']);
  setup_postdata($GLOBALS['post'] =& $post_object);

  get_template_part( 'content-single-product' );

  wp_die();
}


I found that the output of this data is registered in variation.php, but how can I make the script work out this piece of code?
<script type="text/template" id="tmpl-variation-template">
  <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>
  <div class="woocommerce-variation-price">{{{ data.variation.price_html }}}</div>
  <div class="woocommerce-variation-availability">{{{ data.variation.availability_html }}}</div>
</script>


Help, pliz, can already someone solved similar?
I can also give a link to my site for clarity: https://artservice43.ru/mouldings/c230-cornice-mou...

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Stanislav Shabalin, 2020-05-26
@Starck43

I found the solution myself, since no one answered about it. The casket opened easily, but did not immediately guess where to press).
In general, it was necessary to reload the scripts responsible for displaying variations using the jQuery getScript() function . In my case, these are the scripts of two plugins: Woocommerce and Variation Swatches

return $.ajax({
      url:  '/wp-admin/admin-ajax.php',
      data: data,
      cache: true,
      beforeSend: function(xhr) {
        $('.content').css('opacity', 0);
      },
      complete: function(response) {
        $.getScript(add_to_cart_js_url); //переменная с URL  скрипта объявлена в functions.php
        $.getScript(variation_swatches_js_url);  //переменная с URL скрипта объявлена в functions.php
        $('.content').css('opacity', 1);
      },
      success: function(data) {
        $('.content').html(data);
      },
    });

Functions.php:
<?php
add_action('wp_footer', function (){
  ?>
  <script type="text/javascript">
    var add_to_cart_js_url = '<?=plugins_url("/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");?>';
    var variation_swatches_js_url = '<?=plugins_url("/variation-swatches-for-woocommerce/assets/js/frontend.js");?>';
  </script>
  <?php
  }
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question