Introduction

You’ve probably seen a lot of talking about WordPress and Airtable around here.

But how about if you would want to integrate them with each other? I have to say, it’s a complex task because it requires some PHP programming.

But in this guide, you’re going to learn how to integrate Airtable with WordPress step by step using a coupon assignment system as our example use case.

Video Tutorial

Step 1 – Create your Airtable object

In order for you to have any Airtable data inside your WordPress site you need to build some functionality that will access your Airtable base to get that data and then pass it to WordPress.

Before that we need to know our Airtable base structure. Here are the fields we need to have for this use case:

Default Airtable Field – As the name says this is the default required field from Airtable. Usually, it’s called “name”.

Code – Single Line Text field

User_ID – Single Line Text field – Default = null

Assign_Status – Single Line Text field – Default – 0

User_Email – Single Line Text field

Partner – Single Line Text field

Here is the object that I built for this use case. I’ll explain all the methods below as well.

But before explaining I need to specify that this code has to be added into a custom plugin. If you don’t know how to create your own custom pluign here is a link to WordPress codex.

php

<?php

/**
 * The main Airtable object
 */

class mf_airtable
{
    private $mf_airtableApiKey = 'YOUR API KEY';
    private $mf_endPoint = 'https://api.airtable.com/v0/';
    private $mf_airtableBase = 'YOUR AIRTABLE BASE';


    /**
     * Check if the user has a code
     * @return bool;
     */

    public function mf_userHasCode($user_id_raw, $partner)
    {
        $user_id = strval($user_id_raw);
        $request = 'Master%20Tracker?maxRecords=3&view=Grid%20view&filterByFormula=IF(AND(User_ID='.$user_id.',Partner='.$partner.'),TRUE())';
        $con = curl_init();
        curl_setopt_array($con, array(
            CURLOPT_URL => $this->mf_endPoint . $this->mf_airtableBase .$request,
            CURLOPT_HTTPHEADER => array(
                "authorization: Bearer $this->mf_airtableApiKey",
            ),
            CURLOPT_RETURNTRANSFER => true
        ));

        $exec = curl_exec($con);
        $error = curl_error($con);
        curl_close($con);

        if ($error){
            die('cURL error:'.$error);
        }

        $response = json_decode($exec);

        if (empty($response->records)){
            return false;
        }else{
            return true;
        }
    }

    /**
     * Assign a code to the user if the user doesn't have one
     */

    public function mf_assignCode($user_id_raw, $partner, $email){
        $user_id = strval($user_id_raw);
        if ($this->mf_userHasCode($user_id,$partner) == false){
            $request = 'Master%20Tracker?maxRecords=3&view=Grid%20view&filterByFormula=AND(Partner='.$partner.',Assign_Status=0)';
            $con = curl_init();
            curl_setopt_array($con, array(
                CURLOPT_URL => $this->mf_endPoint . $this->mf_airtableBase .$request,
                CURLOPT_HTTPHEADER => array(
                    "authorization: Bearer $this->mf_airtableApiKey",
                ),
                CURLOPT_RETURNTRANSFER => true
            ));

            $exec = curl_exec($con);
            $error = curl_error($con);
            curl_close($con);

            if ($error){
                die('cURL error:'.$error);
            }

            $response = json_decode($exec);
            if (!empty($response->records[0])) {

                $notAssignedCode = $response->records[0]->id;
                $request = 'Master%20Tracker/';
                $con = curl_init();
                $data['fields']['User_ID'] = $user_id;
                $data['fields']['User_Email'] = $email;
                $data['fields']['Assign_Status'] = "1";
                $jsonData = json_encode($data);
                curl_setopt_array($con, array(
                    CURLOPT_URL => $this->mf_endPoint . $this->mf_airtableBase . $request . $notAssignedCode,
                    CURLOPT_HTTPHEADER => array(
                        "authorization: Bearer $this->mf_airtableApiKey",
                        "Content-Type: application/json"
                    ),
                    CURLOPT_RETURNTRANSFER => true,
                    CURLOPT_CUSTOMREQUEST => 'PATCH',
                    CURLOPT_POSTFIELDS => $jsonData
                ));

                $exec = curl_exec($con);
                $error = curl_error($con);
                curl_close($con);
            }else{
                return false;
            }
        }
    }

    /**
     * Return user's code if the user has a code
     * @return string
     */

    public function mf_getUsersCode($user_id_raw,$partner){
        $user_id = strval($user_id_raw);
        if ($this->mf_userHasCode($user_id,$partner) == true) {
            $request = 'Master%20Tracker?maxRecords=3&view=Grid%20view&filterByFormula=AND(User_ID=' . $user_id . ',Partner=' . $partner . ')';
            $con = curl_init();
            curl_setopt_array($con, array(
                CURLOPT_URL => $this->mf_endPoint . $this->mf_airtableBase . $request,
                CURLOPT_HTTPHEADER => array(
                    "authorization: Bearer $this->mf_airtableApiKey",
                ),
                CURLOPT_RETURNTRANSFER => true
            ));

            $exec = curl_exec($con);
            $error = curl_error($con);
            curl_close($con);

            if ($error) {
                die('cURL error:' . $error);
            }

            $response = json_decode($exec, true);
            return $response['records'][0]['fields']['Code'];
        }else{
            return false;
        }
    }
}

Pretty complex, huh? Let’s explain everything.

php

private $mf_airtableApiKey = 'YOUR API KEY';
private $mf_endPoint = 'https://api.airtable.com/v0/';
private $mf_airtableBase = 'YOUR AIRTABLE BASE';

The 3 private properties in the code snippet above keep the data that you need to login to the Airtable API.

$mf_airtableApiKey – As the name says, this stands for your API access key. Here is how you can find it.

$mf_endPoint – In my example, you can see that I added a default value for that. Because it’s unlikely for that to change until they update their API.

$mf_airtableBase – This is the base ID. Here is how you can find that:

1 – Access the Airtable API page

2 – Now click “MASTER TRACKER TABLE”

3 – Click “List Records”

4 – There you go, you have the base ID in the right console. In my screenshot it’s blurred for security reasons.

php

public function mf_userHasCode($user_id_raw, $partner)
{
$user_id = strval($user_id_raw);
$request = 'Master%20Tracker?maxRecords=3&view=Grid%20view&filterByFormula=IF(AND(User_ID='.$user_id.',Partner='.$partner.'),TRUE())';
$con = curl_init();
curl_setopt_array($con, array(
CURLOPT_URL => $this->mf_endPoint . $this->mf_airtableBase .$request,
CURLOPT_HTTPHEADER => array(
"authorization: Bearer $this->mf_airtableApiKey",
),
CURLOPT_RETURNTRANSFER => true
));

$exec = curl_exec($con);
$error = curl_error($con);
curl_close($con);

if ($error){
die('cURL error:'.$error);
}

$response = json_decode($exec);

if (empty($response->records)){
return false;
}else{
return true;
}
}

The method in the code snippet above checks if the current user has a coupon code assigned. It does that by sending a CURL request to Airtable and then checking if the response has results or not. And it returns a boolean (true or false) value based on that.

php

public function mf_assignCode($user_id_raw, $partner, $email){
$user_id = strval($user_id_raw);
if ($this->mf_userHasCode($user_id,$partner) == false){
$request = 'Master%20Tracker?maxRecords=3&view=Grid%20view&filterByFormula=AND(Partner='.$partner.',Assign_Status=0)';
$con = curl_init();
curl_setopt_array($con, array(
CURLOPT_URL => $this->mf_endPoint . $this->mf_airtableBase .$request,
CURLOPT_HTTPHEADER => array(
"authorization: Bearer $this->mf_airtableApiKey",
),
CURLOPT_RETURNTRANSFER => true
));

$exec = curl_exec($con);
$error = curl_error($con);
curl_close($con);

if ($error){
die('cURL error:'.$error);
}

$response = json_decode($exec);
if (!empty($response->records[0])) {

$notAssignedCode = $response->records[0]->id;
$request = 'Master%20Tracker/';
$con = curl_init();
$data['fields']['User_ID'] = $user_id;
$data['fields']['User_Email'] = $email;
$data['fields']['Assign_Status'] = "1";
$jsonData = json_encode($data);
curl_setopt_array($con, array(
CURLOPT_URL => $this->mf_endPoint . $this->mf_airtableBase . $request . $notAssignedCode,
CURLOPT_HTTPHEADER => array(
"authorization: Bearer $this->mf_airtableApiKey",
"Content-Type: application/json"
),
CURLOPT_RETURNTRANSFER => true,
CURLOPT_CUSTOMREQUEST => 'PATCH',
CURLOPT_POSTFIELDS => $jsonData
));

$exec = curl_exec($con);
$error = curl_error($con);
curl_close($con);
}else{
return false;
}
}
}

Then, as shown in the code snippet above, it sends a CURL request to Airtable to assign to the current user a coupon code. And it also changes the values of the other fields in the template. Of course, there is some validation to see whether or not the coupon code is already assigned to somebody else.

php

public function mf_getUsersCode($user_id_raw,$partner){
$user_id = strval($user_id_raw);
if ($this->mf_userHasCode($user_id,$partner) == true) {
$request = 'Master%20Tracker?maxRecords=3&view=Grid%20view&filterByFormula=AND(User_ID=' . $user_id . ',Partner=' . $partner . ')';
$con = curl_init();
curl_setopt_array($con, array(
CURLOPT_URL => $this->mf_endPoint . $this->mf_airtableBase . $request,
CURLOPT_HTTPHEADER => array(
"authorization: Bearer $this->mf_airtableApiKey",
),
CURLOPT_RETURNTRANSFER => true
));

$exec = curl_exec($con);
$error = curl_error($con);
curl_close($con);

if ($error) {
die('cURL error:' . $error);
}

$response = json_decode($exec, true);
return $response['records'][0]['fields']['Code'];
}else{
return false;
}
}

As the name of the function in the first line of the code snippet above hints, this piece of code retrieves the coupon code for the current user, and returns it as a string.

Creating your WordPress helper

Like before, I’ll put the whole code here and will explain everything.

php

<?php

/**
 * Registers the short code for the coupon code
 */

function mf_add_code($atts){
    $atts = shortcode_atts(array(
        'partner'=>'No Partner',
    ),$atts,'mf_airtable_code');
    $mf_airtable = new mf_airtable();
    $mf_userid = get_current_user_id();
    $current_code = $mf_airtable->mf_getUsersCode($mf_userid,'"'.$atts['partner'].'"');
    //Check if the user is logged in and if has a code
    if (is_user_logged_in()){
        if (strlen($current_code) >= 1){
            return '<input id="mf_coupon_code" type="text" value="'.$mf_airtable->mf_getUsersCode($mf_userid,'"'.$atts['partner'].'"').'"><button onclick="mfCopytoClipboard()" class="infostak-btn light-blue-btn">Copy to Clipboard</button>';
        }
    }
}
add_shortcode('mf_airtable_code','mf_add_code');

/**
 * WP AJAX handlers
 */

function mf_assign_ajax(){
    $partner = '"'.$_POST['data'].'"';

    // Check if the user is logged in
    if (is_user_logged_in()){
        $mf_currentUser = wp_get_current_user();
        $mf_airtable = new mf_airtable();
        $mf_userid = $mf_currentUser->ID;
        $mf_userEmail = $mf_currentUser->user_email;

        //Assign the code
        $mf_airtable->mf_assignCode($mf_userid,$partner,$mf_userEmail);

    }else{
        return 'You need to be logged in to redeem a code';
    }
}
add_action( 'wp_ajax_mf_assign_ajax', 'mf_assign_ajax' );
add_action( 'wp_ajax_nopriv_mf_assign_ajax', 'mf_assign_ajax' );

function mf_assign_button($atts){
    $atts = shortcode_atts(array(
        'partner'=>'No Partner'
    ),$atts,'mf_assign_code');
    $mf_airtable = new mf_airtable();
    $mf_userid = get_current_user_id();
    $current_code = $mf_airtable->mf_getUsersCode($mf_userid,'"'.$atts['partner'].'"');

    if (strlen($current_code) <= 1) {
        return '<a class="mf-btn light-blue-btn" partner="' . $atts["partner"] . '" href="javascript:void(0)" id="mf-assign-code">Assign Code</a> <img id="mf-loader" style="width:50px; display:none;" src="' . plugin_dir_url(__FILE__) . '../assets/img/loader.gif' . '">';
    }
}
add_shortcode('mf_assign_code','mf_assign_button');

Again, pretty complex, huh?

What the code snippet above does is it displays a button that assigns the coupon code to the current user. It also displays the code for the current user if he has one.

Of course, only one of the options will display. So that basically means that this code snippet checks if the user has a coupon code or not, and shows one of the options based on the result.

php

function mf_add_code($atts){
$atts = shortcode_atts(array(
'partner'=>'No Partner',
),$atts,'mf_airtable_code');
$mf_airtable = new mf_airtable();
$mf_userid = get_current_user_id();
$current_code = $mf_airtable->mf_getUsersCode($mf_userid,'"'.$atts['partner'].'"');
//Check if the user is logged in and if has a code
if (is_user_logged_in()){
if (strlen($current_code) >= 1){
return '<input id="mf_coupon_code" type="text" value="'.$mf_airtable->mf_getUsersCode($mf_userid,'"'.$atts['partner'].'"').'"><button onclick="mfCopytoClipboard()" class="infostak-btn light-blue-btn">Copy to Clipboard</button>';
}
}
}
add_shortcode('mf_airtable_code','mf_add_code');

Next, the function in the code snippet above creates a shortcode that we will use inside of WordPress. This shortcode passes partner data so our Airtable object will know which partner the code comes from.

php

function mf_assign_ajax(){
    $partner = '"'.$_POST['data'].'"';

    // Check if the user is logged in
    if (is_user_logged_in()){
        $mf_currentUser = wp_get_current_user();
        $mf_airtable = new mf_airtable();
        $mf_userid = $mf_currentUser->ID;
        $mf_userEmail = $mf_currentUser->user_email;

        //Assign the code
        $mf_airtable->mf_assignCode($mf_userid,$partner,$mf_userEmail);

    }else{
        return 'You need to be logged in to redeem a code';
    }
}
add_action( 'wp_ajax_mf_assign_ajax', 'mf_assign_ajax' );
add_action( 'wp_ajax_nopriv_mf_assign_ajax', 'mf_assign_ajax' );

function mf_assign_button($atts){
    $atts = shortcode_atts(array(
        'partner'=>'No Partner'
    ),$atts,'mf_assign_code');
    $mf_airtable = new mf_airtable();
    $mf_userid = get_current_user_id();
    $current_code = $mf_airtable->mf_getUsersCode($mf_userid,'"'.$atts['partner'].'"');

    if (strlen($current_code) <= 1) {
        return '<a class="mf-btn light-blue-btn" partner="' . $atts["partner"] . '" href="javascript:void(0)" id="mf-assign-code">Assign Code</a> <img id="mf-loader" style="width:50px; display:none;" src="' . plugin_dir_url(__FILE__) . '../assets/img/loader.gif' . '">';
    }
}
add_shortcode('mf_assign_code','mf_assign_button');

Next, one of the functions from the code snippet above creates a shortcode that will display the assignment button. The other one handles all the data passing through AJAX.

Speaking of AJAX, here is the javascript code behind that:

js

jQuery(document).ready(function(){
jQuery('#mf-assign-code').click(function () {
jQuery('#mf-assign-code').hide();
jQuery('#mf-loader').css('display','block');
jQuery.post(
ajaxurl,
{
'action': 'mf_assign_ajax',
'data':jQuery('#mf-assign-code').attr('partner')
},
function(){
document.location.reload(true);
}
);
});
});

function mfCopytoClipboard() {
/* Get the text field */
var copyText = document.getElementById("mf_coupon_code");

/* Select the text field */
copyText.select();

/* Copy the text inside the text field */
document.execCommand("copy");
}

This javascript code sends the data from the front end to the back end through AJAX and also adds some copy/paste functionality to the code form.

Adding the functionality to your website

Since you have 2 shortcodes that are displaying our data in the front-end you have to use them in your pages. In our case, our shortcode would look like this:

[mf_airtable_code partner=”MemberFix”] – Shows the current code of the user if the user has one

[mf_assign_code partner=”MemberFix”] – Shows the “Assign” button 

Final Result

All done! 😉

R

Now let’s hear from you!

What kind of coupon codes are you offering through this integration?

Tell us in the comments section below.

User Review
0 (0 votes)
Comments Rating 0 (0 reviews)
Share This