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();
}
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();
}
- I realised, that it must have something to do with the AJAX call vs the first shortcode. If i remove the first shortcode on page load, the AJAX works fine. The issue is that the AJAx call adds the new content after the initial shortcode instead of replacing it, what could this be due to? – Eliott Commented Oct 22, 2020 at 11:25
1 Answer
Reset to default 0Actually figured it out, it was due to the way I printed the data in the main function. Instead of simply outputting it, I placed it in a variable using ob_start and ob_get_clean. It's all fixed and the code now becomes:
//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'] );
ob_start(); ?>
<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
$html = ob_get_clean();
return $html;
}
}
add_shortcode( 'add_product', 'add_product_display' );