Headless WordPress: User Registration with ReactJS & WPGraphQL

How I built the user registration form in a ReactJS app using WordPress and WPGraphQL

  1. Headless WordPress: Cookie Based Login using GraphQL
  2. Headless WordPress: Log-out using GraphQL & ReactJS
  3. Headless WordPress: Password Reset with ReactJS & WPGraphQL
  4. Headless WordPress: User Registration with ReactJS & WPGraphQL

Our account system is taking shape now that we have login, logout, and password reset implemented. Next we need to handle user registrations!

Lucky for us, WPGraphQL provides us with a user registration mutation we can use out of the box.

Continue reading “Headless WordPress: User Registration with ReactJS & WPGraphQL”

Headless WordPress: Password Reset with ReactJS & WPGraphQL

How I built the password reset system in a ReactJS app using WordPress and WP GraphQL

  1. Headless WordPress: Cookie Based Login using GraphQL
  2. Headless WordPress: Log-out using GraphQL & ReactJS
  3. Headless WordPress: Password Reset with ReactJS & WPGraphQL
  4. Headless WordPress: User Registration with ReactJS & WPGraphQL

Previously I demonstrated how we can log in to a WordPress site from a headless app using cookies, and how to handle logging out—this also covered setting up Apollo Client with React. In this post I’ll show how to build a password reset form!

Continue reading “Headless WordPress: Password Reset with ReactJS & WPGraphQL”

Headless WordPress: Log-out using GraphQL & ReactJS

Creating a logout system for a ReactJS app using WordPress and WP GraphQL

  1. Headless WordPress: Cookie Based Login using GraphQL
  2. Headless WordPress: Log-out using GraphQL & ReactJS
  3. Headless WordPress: Password Reset with ReactJS & WPGraphQL
  4. Headless WordPress: User Registration with ReactJS & WPGraphQL

In my last post I showed how we can log into a WordPress site from a headless app using GraphQL and cookies.

In this post we’ll create a log-out mutation in GraphQL, and a custom React Hook to utilise it. I’ll be using Apollo Client to make the actual API calls.

Continue reading “Headless WordPress: Log-out using GraphQL & ReactJS”

Headless WordPress: Cookie Based Login using GraphQL

How I created a login system for a ReactJS app using WordPress and WP GraphQL

  1. Headless WordPress: Cookie Based Login using GraphQL
  2. Headless WordPress: Log-out using GraphQL & ReactJS
  3. Headless WordPress: Password Reset with ReactJS & WPGraphQL
  4. Headless WordPress: User Registration with ReactJS & WPGraphQL

For a fun learning & experimentation project, I’ve been building a Dungeons and Dragons character generator. The frontend is built using React JS and deployed to Netlify, and the backend is powered by WordPress and WP GraphQL.

I could have tried using a serverless database such as FaunaDB, but I chose WordPress because of familiarity, what it gives you for free, and it’s flexibility when combined with WP GraphQL. I did however need to build a login system. To do this I created a GraphQL login endpoint, and handled user sessions using Cookies.

Continue reading “Headless WordPress: Cookie Based Login using GraphQL”

Switching from Vagrant to Docker

I've been experimenting with Docker as an alternative to Vagrant (and VVV) for WordPress development.

I had looked into Docker in the past, but given how easy Vagrant and VVV were, I was in no hurry to switch. VVV still is awesome (there is an excellent getting started guide here), but since settling on Vagrant, the tools and ecosystem around Docker have significantly improved.

Mainly to satisfy my own curiosity, but also hoping to use less system resources (since I currently code on a Macbook Air) I finally gave Docker a fair chance. I wanted to share some of the things I’ve learned over the past week whilst switching.

Continue reading “Switching from Vagrant to Docker”

Building a cross-browser compatible, multi-handle range slider

Range Inputs are HTML elements which let users select a numeric value between a specified minimum and maximum value. They support single values by default.

As part of the WooCommerce Blocks project we’ve been working on converting WooCommerce widgets to Gutenberg blocks. One of those happens to be a price slider which currently uses jQuery UI. For blocks we’re using React.

Rather than use a library, we were really keen to use native range inputs to keep our dependencies to a minimum, and so the range inputs were semantic and keyboard accessible. Our idea was to overlay 2 range sliders to form a single component. I’d like to share some of my findings.

Continue reading “Building a cross-browser compatible, multi-handle range slider”

Debugging “unexpected token” in WooCommerce 2.4+

When the WooCommerce checkout is processed it requires that gateways return an array (which is then converted into JSON) telling the checkout whether or not it was successful. It’s been this way since v1. Here is a basic example from the PayPal gateway:

return array(
    'result'   => 'success',
    'redirect' => $paypal_request->get_request_url( $order, $this->testmode )
);

The above for example returns a successful response and tells the checkout to redirect the user to the URL provided.

In 2.4+ this was made more strict in that the response must be valid JSON. Anything else in the response (such as HTML, notices or whitespace) will invalidate this JSON and you may see an error along the lines of:

SyntaxError: Unexpected token

WooThemes own gateways have all been tested for 2.4, however, we’ve seen some less-supported gateways break due to returning invalid content.

I’ve seen a few vocal users complaining about this recently on the forums (some even feeling the need to attack me personally, thanks guys) and thought it best to post a few steps on how you can narrow down the issue.

First off its always best to rule out your plugins and theme by disabling them, even though a lot of users seem to ignore this step. It is only temporary and helps narrow down the issue. Much better than shouting at me on WordPress.org.

Lets assume this does not narrow down the issue for a moment. How would you know if content is being output? The answer is in your browser console.

Lets simulate an error. In the paypal gateway, just before the array is returned I’ll add:

trigger_error( 'Uh oh' );

This triggers the error as expected:

2015-11-12 at 16.29

Now lets try to debug this like someone who does not know where the error is coming from.

In Chrome, go to View > Developer > Javascript Console whilst viewing the checkout.

Now trigger the error again.

After the error is shown, in the console go to the Network tab and click XHR:

2015-11-12 at 16.31

In the list you’re see one which looks like this: ?wc-ajax=checkout. Click on that and go to the response tab:

2015-11-12 at 16.32

Notice in my above example, there is the notice. This invalidates the JSON.

A valid JSON response {starts and ends with a bracket} – if there is an error, white space or content before or after those brackets, that is your issue.

In some cases the error will be obvious and allow you to patch or disable the cause.

Hopefully that helps.

Handling EU VAT on WPJobManager.com with WooCommerce

eu

Ah the EU. Always with their bright ideas. If you haven’t heard about the upcoming changes surrounding EU VAT, first off, where have you been hiding?

To put it simply, essentially they require everyone selling digital products to customers in the EU to charge EU Tax based on the customer location, regardless of where your business is based. You can read more about the changes in the blog post I wrote on WooThemes.com here.

Being based in the UK, and selling plugins on WPJobManager.com, I am affected by these changes and so I’ve been doing a lot of research, speaking to accountants, and preparing my site for the changes.

In this post I’ll explain what I’m doing and hopefully this may give you some ideas/resources if you’re struggling with compliance.

Continue reading “Handling EU VAT on WPJobManager.com with WooCommerce”

Loading...