Adding AJAX support for adding to cart

jet-woo-builder-ajax-add-to-cart-with-variation-swatches.php

<?php
 	add_filter( 'jet-woo-builder/template-functions/product-add-to-cart-settings', 'wvs_pro_archive_variation_button_args', 999, 2 ); 
	
	function wvs_pro_archive_variation_button_args( $args, $product ) { 

		$ajax_add_to_cart_enabled = 'yes' === get_option( 'woocommerce_enable_ajax_add_to_cart' );

		if ( 'variable' === $product->get_type() ) {
			$classname         = WC_Product_Factory::get_classname_from_product_type( 'simple' );
			$as_single_product = new $classname( $product->get_id() );

			$args['attributes']['data-add-to-cart']    = htmlspecialchars( wp_kses_post( apply_filters( 'woo_variation_swatches_archive_add_to_cart_text', apply_filters( 'woo_variation_swatches_archive_add_to_cart_button_text', apply_filters( 'add_to_cart_text', $as_single_product->add_to_cart_text() ), $product ), $product, $as_single_product ) ) );
			$args['attributes']['data-select-options'] = htmlspecialchars( wp_kses_post( apply_filters( 'woo_variation_swatches_archive_add_to_cart_select_options', apply_filters( 'woo_variation_swatches_archive_add_to_cart_button_text', apply_filters( 'variable_add_to_cart_text', $product->add_to_cart_text() ), $product ), $product, $as_single_product ) ) );


			$args['class'] .= ' wvs_add_to_cart_button  wvs-add-to-cart-button';
			
			if ( $ajax_add_to_cart_enabled ) {
				$args['class'] .= ' wvs_ajax_add_to_cart';
			} else {
				$args[ 'attributes' ][ 'data-product_permalink' ] = $product->add_to_cart_url();
				$args['attributes']['data-add_to_cart_url'] = $product->is_purchasable() && $product->is_in_stock() ? wvs_pro_get_current_url() : get_permalink( $product->get_id() );
			}

			$args[ 'attributes' ][ 'data-variation_id' ] = "";
			$args[ 'attributes' ][ 'data-variation' ]    = "";
		}

		return $args;
		
	}

Hi there,
i can't figure out
how to use the code to show swatches at the front end?
Can you give me some advice?
Thank You.

https://crocoblock.com/troubleshooting/articles/how-to-add-attractive-variation-swatches-to-woocommerce-archive-page/

(Ajax button loading infinite)
Something is wrong with this code i think. Probably it must be updated? How do you think, can you fix this:

-.-.24.January.2022.mp4

In developer mode i see an error after hittin button "Form has no variations in "data-product_variations" attribute. / woocommerce.min.js?ver=1.1.4:1"

And what about quantity with variations?

(Ajax button loading infinite)
Something is wrong with this code i think. Probably it must be updated? How do you think, can you fix this. In developer mode i see an error after hittin button "Form has no variations in "data-product_variations" attribute. / woocommerce.min.js?ver=1.1.4:1"

We didn't face this issue while testing and everything works proper. Perhaps this is related to your site. Please try to contact our support team.

And what about quantity with variations?

We just implement functionality to our plugin and that's all, so in this case you will no be able to use quantity input.

Hi there. I've found there was a problem. This code not working with Яндекс Метрика plugin.
https://wordpress.org/plugins/wp-yandex-metrika/

Just to let you know. Maybe this info will save time to someone. Just get rid of this plugin.

We just implement functionality to our plugin and that's all, so in this case you will no be able to use quantity input.

Quantity input for products with variations would be a great feature. This may take usabilty of web store to the next level. It will save a lot of time for the customers. Please add this in future updates!

I am interested that when clicking the add to cart button, instead of adding to the cart, go to the product page with the selected attributes, that is, remove the parameters:

&add-to-cart=1964&variation_id=1973

It can?

Yes, sorry for late reply! Thats what i meant.

Np, we will check this.

Hey there - is there a way to add this to the JetListing Grid? I saw on the tutorial article this > "Alternatively, you can add Variation Swatches everywhere where the price is displayed. To do so, follow the next steps. " but I think the code is missing there.