Full E-Commerce Integration of Snipcart with WordPress

Even though an exponential amount of online tools keep popping up, WordPress remains a domineering web behemoth. More than 25% of active sites run on the famous CMS. Quite a chunk of the whole world wide web.

On the other hand, with the rise of vertical, third party solutions, we see developers adopting more and more a modular approach in their workflow.

Many front-end developers I've met and talked to enjoy working with a lean, quick e-commerce solution like Snipcart. But, they also want to give more autonomy in familiar CMS to their merchant clients. Since many of them use WordPress, I thought I'd write this article to provide them with a useful resource.

We also need to load Snipcart's scripts. Since we need to add a data-api-key attribute to the src tag, we can't use wp_enqueue_script. Instead, we will copy the Twenty Sixteen footer.php and add <script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key="YOU-PUBLIC_KEY" id="snipcart"></script> just before the closing body tag.

For easier e-commerce operations management, let's decrease products inventory using Snipcart webhooks. To do so, we will register a webhook in Snipcart's merchant dashboard to call our WordPress site when an order is completed.

With the Snipcart product ID (a product custom field), we can query the WordPress post ID of the product. Then, we get the current item inventory and decrease it by the quantity registered in the order.

We need to set Authorization: Basic SNIPCART_SECRET_KEY: header to allow Snipcart to recognize us. Since we do not want the secret key to be versioned, we put it in a secret.txt (gitignored) file at the root of the theme.

This function use php_curl, so your PHP version needs to be compiled with Curl.

Now, we need to verify that Snipcart really sent a webhook before processing it. At the beginning of snipcart_endpoint, add:

$token=$_SERVER["HTTP_X_SNIPCART_REQUESTTOKEN"];$resp=call_snipcart_api('/requestvalidation/'.$token);if(strpos($resp->resource,'wp-admin/admin-ajax.php?action=snipcart_endpoint')===false){echo"Caller is not snipcart";wp_die();}

We used the call_snipcart_api function defined earlier to get all orders and display them in a table. To keep things simple, we used echo to render the table, but on a real website, you could make it cleaner!

We iterate over the order list returned by Snipcart, which is converted from JSON to PHP objects in call_snipcart_api. You can view all available fields in the API doc.

Note that we include a JavaScript file at the end of the page. We will come back on that later.

If you go to the Snipcart page in the admin, you should now have the order list!

This way, we simply listen for changes on the dropdown and call, via ajax, the action defined earlier. On success we display an alert and reload the page. Of course, it should be handled more gracefully in a real website.

If you made it this far: congrats! I'm aware this full integration can seem like a lot of work. But if you get comfortable with WP & Snipcart, you should be able to pull it off in a day of focused coding.

Following these steps will result in a solid e-commerce set up. You'll end up with a deep shopping cart integration that provides more autonomy to your merchants.

Of course, I'd love to know your thoughts about the whole thing. So if you have questions, suggestions, feedback: hit the comments! And don't hesitate to share the post on Twitter if you found it valuable. :)