I’m looking to implement an ajax solution utilizing the [woocommerce_my_account] shortcode based on the code snippet posted here:
https://github.com/woocommerce/woocommerce/issues/43755
Is it possible to also complete the login or registration without reloading the page?
Or is it possible to pass a variable back to the browser on reload that could be used in javascript to display content based on the state of the page at the time the login or registration was submitted?
I’ve tested different WordPress ajax login plugins, and they all either redirect or reload on login and on registration.
Here’s the code posted to github on ajaxifying the wooCommerce my account page endpoints:
AJAX URL Script to support WooCommerce End Point loads:
function enqueue_ajax_url_script() {
?>
<script>
var ajaxurl = '<?php echo esc_url(admin_url('admin-ajax.php', 'https')); ?>';
</script>
<?php
}
add_action('wp_footer', 'enqueue_ajax_url_script');
JavaScript to enable woocommerce ajax endpoints:
// JavaScript
jQuery(document).ready(function($) {
// Attach click event to tabs
$('body').on('click', '.woocommerce-MyAccount-navigation-link', function(e) {
e.preventDefault();
// Get the endpoint and anchor from the tab link
var endpointWithAnchor = $(this).attr('href').replace('#', '');
// Extract the endpoint and anchor separately
var endpoint = endpointWithAnchor.split('#')[0];
var anchor = endpointWithAnchor.split('#')[1];
// Trigger AJAX request
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'load_account_tab_content',
endpoint: endpoint,
},
success: function(response) {
// Update the tab content with the response
$('#your-tab-content-container').html(response);
// Scroll to the anchor if available
if (anchor) {
$('html, body').animate({
scrollTop: $('#' + anchor).offset().top
}, 500);
}
},
});
});
});