Using AJax var to insert shortcodes by country

  • Hey Benjamin.

    Thanks for the great plugin. Hope You are doing alright.

    I’ve been struggling for a couple days trying to implement some ajax for a simple task. I’m not so familiar with JS so it’s been a TASK.

    The goal: insert a shortcode to display an affiliate product offer into posts content, diferent code for DE, US and FR. Simple.

    The problem: Site is using cache (WP Fastest Cache plugin). So using shortcodes won’t work. Disabling cache on sites with geolocation will end disabling the cache on the whole site since this offers are site-wide.

    The approach: I’ve been trying to implement modified ajax from the documentation examples, ie:

    jQuery(document).ready(function($) {
  geoip_detect.get_info().then(function(record) {
    if (record.error()) {
      console.error('WARNING Geodata Error:' + record.error() );
      $('.geo-error').text(record.error());
    }
    
    // some vars
    var country = record.get('country.iso_code');
    var thecode = 'default-shortcode';
    
    // asign the shortcode
    if (country == 'DE') {
        thecode = 'shortcode-for-DE';
    } else if (country == 'FR') {
        thecode = 'shortcode-for-FR';
    } else if (country == 'US'){
        thecode = 'shortcode-for-US';
    }
    
    // kept for test purpose
    $('.geo-ip').text(record.get('traits.ip_address'));
    
  }); 
});

    this code works as far as detecting the country and setting the variable value. I don’t know if this is the right or cleanest way to accomplish the goal, but is all I got by this time.

    The issue: Is it possible to retrieve “thecode” variable value from the jsQuery into a php snippet? So, I could just call an execute an specific shortcode via:

    echo do_shortcode( sprintf( '["%"]', $thecode ) );

    Thanks. Hope You can shed some light here

Viewing 1 replies (of 1 total)
  • Plugin Author Benjamin Pick

    (@benjamin4)

    Hm, yes I’m a bit sorry AJAX and shortcodes do not work together yet …
    For now, the easiest way is to enable the CSS body classes (and AJAX) and add the different content in divs with different classes (e.g. by writing custom html in the block editor, or by using the paragraph blocks and adding the classes in the advanced section of the block:

    https://github.com/yellowtree/geoip-detect/wiki/API-Usage-Examples#css-use

    ———–

    Changing “thecode” via PHP is possible, but a bit more complex, because shortcodes cannot be called in JS. So it has to be prepared in PHP first, then used in JS:

    
function _geoip_detect_register_javascript_thecode() {
wp_localize_script('geoip-detect-js', 'thecode', [ 'de' => 'hallo', 'fr' => 'bonjour', 'default' => 'hi' ] );
}
add_action('wp_enqueue_scripts', '_geoip_detect_register_javascript_thecode', 11);

    The tricky part here is to generate the array using the shortcodes that have executed. You will need a global variable to track the content of the shortcodes, and make sure the shortcodes are really executed before wp_enqueue_scripts.

    And then you can access the variable “thecode” in JS:

    
var output = thecode.default;
    if (country == 'DE') {
        thecode = thecode.de;
    } else if (country == 'FR') {
        thecode = thecode.fr;
    } else if (country == 'US'){
        thecode = thecode.us;
    }
Viewing 1 replies (of 1 total)
  • The topic ‘Using AJax var to insert shortcodes by country’ is closed to new replies.

Tags