I tried to add a shortcode to render checkbox and display the agreement and policies page on the same page, namely the checkout page. But when I tried to see the results, the content of the agreement and policies page showed some codes that were not rendered like this
I added a shortcode for the checkbox to the function.php file in the theme builder with the Divi theme. Here is the code
add_action( 'woocommerce_review_order_before_submit', 'add_custom_agreement_checkbox', 9 );
function add_custom_agreement_checkbox() {
?>
<!-- Wrapper for Agreements and Policies -->
<div id="agreements-wrapper" class="woocommerce-agreements-and-policies-wrapper" style="max-height: 200px; overflow: auto; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; margin-bottom: 20px; display: none;">
<!-- Konten dari halaman agreements-policies akan muncul di sini melalui AJAX -->
</div>
<!-- Checkbox untuk Agreements and Policies -->
<p class="form-row terms">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="custom_agreement_checkbox" id="custom_agreement_checkbox" />
<span>Saya sudah membaca dan menyetujui <a href="javascript:void(0);" id="load-agreement-content">Green Camp Agreement and Policies</a></span> <span class="required">*</span>
</label>
</p>
<?php
}
// AJAX handler untuk mengambil konten dari halaman "agreements-policies"
add_action( 'wp_ajax_load_agreement_content', 'load_agreement_content' );
add_action( 'wp_ajax_nopriv_load_agreement_content', 'load_agreement_content' );
function load_agreement_content() {
$agreements_page = get_page_by_path('agreements-policies');
if ( $agreements_page ) {
$content = $agreements_page->post_content;
$content = do_shortcode( $content ); // Proses shortcodes
wp_send_json_success( $content );
} else {
wp_send_json_error( 'Sorry, the Agreements and Policies page content is not available.' );
}
wp_die();
}
// Validate if the custom checkbox is checked
add_action( 'woocommerce_checkout_process', 'validate_custom_agreement_checkbox' );
function validate_custom_agreement_checkbox() {
if ( ! isset( $_POST['custom_agreement_checkbox'] ) ) {
wc_add_notice( __( 'Please agree to the Green Camp Agreement and Policies to proceed.' ), 'error' );
}
}
// Function untuk enqueue script AJAX
function enqueue_custom_ajax_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Delegasi event untuk menangani klik pada link "Green Camp Agreement and Policies"
$(document).on('click', '#load-agreement-content', function(e) {
e.preventDefault();
// Ajax request untuk mengambil konten halaman agreement
$.ajax({
url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
type: 'POST',
data: {
action: 'load_agreement_content'
},
beforeSend: function() {
// Bisa tambahkan loader di sini jika diinginkan
},
success: function(response) {
if (response.success) {
// Tampilkan konten di dalam wrapper dan munculkan wrapper
$('#agreements-wrapper').html(response.data).slideDown();
} else {
// Tampilkan pesan error jika konten gagal dimuat
$('#agreements-wrapper').html('<p>' + response.data + '</p>').slideDown();
}
},
error: function() {
// Tampilkan pesan jika terjadi error
$('#agreements-wrapper').html('<p>There was an error loading the content.</p>').slideDown();
}
});
});
});
</script>
<?php
}
add_action( 'wp_footer', 'enqueue_custom_ajax_script' );
is there something wrong with my code? or i put the custom code in the wrong place ?
