I am trying to create a product page where selecting a field defines a product and this triggers an AJAX call to display the woocommerce deposit form and add to cart submit button that correspond to the relevant product id.
The form that contains the deposit selection fields and submit button is displayed by using a shortcode which is called on page load with the default product.
Then, zhen clicking on the field that corresponds to the product you want to change to, I use an AJAX request to execute that shortcode again. I then try to replace the old form by the new form with innerhtml in Javascript, however for some reason the new form is always added after the old one. I can't seem to replace that innerhtml content. Here is the code:
This is contained on the page:
//div to be filled with product deposit and add to cart form
<div id="adddepositsection">[add_product id="17364"]</div>
//AJAX call on field click to execute the shortcode and replace the innerhtml
jQuery('#product2').on('click', function(){
document.getElementById("product1").className = "unselectedbox";
document.getElementById("product2").className = "selectedbox";
document.getElementById("product3").className = "unselectedbox";
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: {
action: 'addfunctionshortcode',
// add your parameters here
productid: "17372"
},
success: function (output) {
document.getElementById("adddepositsection").innerHTML = output;
}
});
});
Shortcode function to display the deposit and add to cart button as well as function to execute that shortcode via AJAX in functions.php:
//Display deposit choice and add to cart shortcode
function add_product_display( $atts ) {
$atts = shortcode_atts( array(
'id' => null,
), $atts, 'bartag' );
if( intval( $atts['id'] ) > 0 && function_exists( 'wc_get_product' ) ){
$product = wc_get_product( $atts['id'] );
?>
<form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
<div class="wc-deposits-wrapper <?php echo WC_Deposits_Product_Manager::deposits_forced( $product->get_id() ) ? 'wc-deposits-forced' : 'wc-deposits-optional'; ?>">
<?php if ( ! WC_Deposits_Product_Manager::deposits_forced( $product->get_id() ) ) : ?>
<ul class="wc-deposits-option">
<li>
<input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit" <?php checked( $default_selected_type, 'deposit' ); ?> />
<label for="wc-option-pay-deposit">
<?php esc_html_e( 'Pay Deposit', 'woocommerce-deposits' ); ?>
</label>
</li>
<li>
<input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" <?php checked( $default_selected_type, 'full' ); ?> />
<label for="wc-option-pay-full">
<?php esc_html_e( 'Pay in Full', 'woocommerce-deposits' ); ?>
</label>
</li>
</ul>
<?php endif; ?>
</div>
<div class="addcartcontainer">
<?php if ( $product->is_in_stock() ) {
if (pll_current_language() == "en" ) { ?>
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">BUY NOW</button> <?php
}
elseif (pll_current_language() == "fr"){ ?>
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">ACHETER MAINTENANT</button> <?php
}
elseif (pll_current_language() == "it"){ ?>
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">ACQUISTA ORA</button> <?php
}
}
else {
if (pll_current_language() == "en" ) { ?>
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">SOLD OUT</button> <?php
}
elseif (pll_current_language() == "fr"){ ?>
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">EPUISE</button> <?php
}
elseif (pll_current_language() == "it"){ ?>
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="addtocartsubmit">SOLD OUT</button> <?php
}
} ?>
</div>
</form>
<?php
}
}
add_shortcode( 'add_product', 'add_product_display' );
//Function called by AJAX to execute shortcode
// register the ajax action for authenticated users
add_action('wp_ajax_addfunctionshortcode', 'addfunctionshortcode');
// register the ajax action for unauthenticated users
add_action('wp_ajax_nopriv_addfunctionshortcode', 'addfunctionshortcode');
// handle the ajax request
function addfunctionshortcode() {
$atts['id'] = $_REQUEST['productid'];
echo add_product_display( $atts );
die();
}
