0

I know this question has been asked before, but I can't find a substantial answer for my specific use case.

Overview

I've been working developing a Wordpress based website using the REST API and Vue.js as the front end framework. I have no issue fetching posts, displaying data, etc.

Issue

Since Vue.js runs in the client side, I'm having some issues when working with plugins/shortcodes that require to be rendered server side within the php. I'm looking for a solution to render a shortcode in a php function and send the rendered data to my front end, to ultimately display it using Vue.js.

JS

var http = new XMLHttpRequest();
var url = '/wp-admin/admin-ajax.php';
var data = { action: 'my_ajax_shortcode' };
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
        // response......
    }
};
http.send(data);

PHP

add_action('wp_ajax_my_ajax_shortcode', 'my_ajax_shortcode()');
add_action('wp_ajax_nopriv_my_ajax_shortcode', 'my_ajax_shortcode()');
function my_ajax_shortcode() {
    echo do_shortcode('[contact-form-7 id="98" title="Contact Test"]');
    die;
}

Results

I'm not very familiar with the Ajax communication in the context of Wordpress, so maybe somebody can help me or give me some direction. My responses usually log '0' when I run this code. Although I'm using Contact Form 7 for this example, I'm just trying to grasp the general flow of this operation, so I can apply it to other cases.

Thanks! Any help or pointers would be useful to help me understand this problem.

  • Your JS is a bit off. Make sure you're using jQuery, then follow the example JS in this tutorial: codex.wordpress.org/AJAX_in_Plugins – scott Jul 6 '17 at 20:54
  • @scott Thank you for the link. I'm actually trying to avoid using jQuery and do pure JavaScript! – mmarquez Jul 7 '17 at 14:18
1

My solution was simpler than I thought....

Since I'm just trying to execute shortcodes in the frontend, I can just localize the script and pass the shortcodes as variables:

functions.php

wp_localize_script( 'BUILD-script', 'sharedData',
  array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'mailchimpForm' => do_shortcode('[mc4wp_form id="100"]'),
        'contactForm' => do_shortcode('[contact-form-7 id="98" title="Contact form 1"]')
    )
);

Basically I'm jus assigning the shortcodes to two variables and make them available in my main js bundle.

build.js

So now I can access those shortcodes, rendered, in my components.

export default {
    name: 'my-component',
    data() {
        return {
            mailchimp: '',
            contact: ''
        };
    },
    mounted() {
        this.mailchimp = sharedData.mailchimpForm;
        this.contact = sharedData.contactForm;
    }
}; 

And rendered by simply using the Vue v-html directive:

<div id="mailchimp" class="chimp--container" v-html="mailchimp"></div>
<div id="contact" class="contact--container" v-html="contact"></div>

Hopefully this will help somebody!

  • @mmaruez I'm doing the same thing Vue app. Did you have any problems with conditional logic? I'm get this error conditional_logic.min.js?ver=2.3.3:1 Uncaught TypeError: Cannot read property '1' of undefined at gf_do_field_action (conditional_logic.min.js?ver=2.3.3:1) at gf_apply_field_rule (conditional_logic.min.js?ver=2.3.3:1) at gf_apply_rules (conditional_logic.min.js?ver=2.3.3:1) at HTMLSelectElement.onchange (aconcagua-360-5?lang=en:1) I have enqueued to gfrom scripts using gravity_form_enqueue_scripts( 1, false ); Any ideas? Thanks in advance. – Joe Dooley Aug 12 '18 at 17:50
  • @JoeDooley hmm it's been a while but I haven't experienced that error! Is conditional_logic.min.js a dependency of Gravity Forms? Not familiar with it, my use case for this project required Contact Form 7. I think it just depends on the plugin/library -- but I haven't had any issues doing shortcodes this way – mmarquez Aug 14 '18 at 2:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.