Thank you John! I managed to figure this out myself after some trial and error. My solution for anyone else who may be trying to get started with this:
Step 1: create a message field for the product buy link and add an empty element to hold the text. In my case I used <code id="course--checkout_link"></code>
Step 2: Add the following code to your functions.php file
add_action(‘acf/input/admin_footer’, ‘my_acf_input_admin_footer’);
function my_acf_input_admin_footer() {
// Only output this for my_courses
if ( ‘my_courses’ == get_post_type() ) {
?>
<script type=”text/javascript”>
(function($) {
// Get the site URL
var origin = window.location.origin; // Returns base URL (https://example.com)
// Print the URL on page load
acf.add_action(‘ready’, function( $el ){
// Get select value
var currentOption = $(‘select#acf-field_5e69a22520434-field_5e69a28620436’).children(“option:selected”).val();
$(‘#course–checkout_link’).text( origin + ‘/checkout/?add-to-cart=’ + currentOption );
});
// Update the URL when a new option is selected
$(‘select#acf-field_5e69a22520434-field_5e69a28620436’).change(function(){
var selectedOption = $(this).children(“option:selected”).val();
$(‘#course–checkout_link’).text( origin + ‘/checkout/?add-to-cart=’ + selectedOption );
});
})(jQuery);
</script>
<?php
}
}
