How we’ve built Dog Heroes using WooCommerce and React

How we took advantage of WooCommerce's solidity and React's dynamism to develop a better shopping experience.

Michele Giorgi

Michele Giorgi

Designer & Developer

Giacomo Alonzi

Giacomo Alonzi

Developer

Dog Heroes is a startup that sells fresh dog food online. This is a specific service whereby each customer buys a product tailor-made for their pet, after providing information on characteristics such as weight and breed.

At the beginning of the project, when we found ourselves designing the technological solution, we identified the fundamental tools as WordPress and WooCommerce: the former for its powerful Block Editor and the latter for its solid e-commerce features.

However, Dog Heroes is not a regular e-commerce site. Since the product is generated in a customised way, we needed to create a highly dynamic and interactive component designed to lead users through the purchase process.

React seemed the right solution because it uses the single-page application paradigm: more powerful than a traditional multi-page approach, because it dynamically updates the page’s content using JavaScript, minimising resource usage in favour of a faster response speed.

Architecture

We wanted WooCommerce and React to coexist so we could make the most of each technology’s features. We chose to render the main pages, for example the home page and checkout page, by creating a custom WordPress theme based on the Sage starter theme, which enables a professional workflow.

Architecture

In the funnel section, conversely, we initiated a React app, designed to dynamically collect information about the customer’s dog in a rapid succession of steps.

<div id=”root”></div>
const rootElement = document.getElementById(“root”)
if (rootElement) {
  ReactDOM.render(<App />, rootElement)
}

💬 React ↔ WooCommerce

When developing the project, we needed to make the React component dialogue with the one for WooCommerce. First, we wanted to help the registered user complete the purchase funnel by pre-filling fields with information that is already known. Second, we wanted the React app and the one based on WordPress and WooCommerce to be localised by sharing the same language file – so as to have a single source of information for translated strings and labels.

To share this information between the React application and WooCommerce, we transferred a JavaScript object starting from the PHP code – placed within the WordPress theme – to the React application initialised in the purchase funnel.

Since the purchase funnel is divided into progressive steps, each with a URL generated dynamically via JavaScript, we had to prevent WordPress from detecting a 404 error for the pages managed by React.

To do this, we implemented a customised rewrite of the WordPress endpoints, using the add_rewrite_endpoint function to delegate the management of certain sub-routes to React.

add_action('init', function() {
  $allowed_subroutes = array(“step1”, “step2”, … );
  foreach($allowed_subroutes as $allowed_subroute) {
    add_rewrite_endpoint( $allowed_subroute, EP_PERMALINK | EP_PAGES );
  }
});

In this way we managed to populate the user information, greatly simplifying the purchase funnel. This assisted completion feature is also activated for an anonymous visitor who abandons the funnel but returns to complete it later. In this case, the partial information is stored in the browser’s local memory, so the process of providing the information is faster and more immediate.

Generation of the customised product and checkout

Once the user has answered questions about their dog, the list of customised products is displayed. React transfers information about the dog’s characteristics to the server. These are processed by an ad hoc algorithm, used to generate the product based on the animal’s calorie needs. The customised product information is then returned to React. This bidirectional communication between the React application and WooCommerce was achieved through asynchronous HTTP calls to dedicated endpoints.

add_action( 'rest_api_init', function () {
  register_rest_route('website/v1', '/dog/create/',
    array(
      'methods' => 'POST',
      'callback' => function() {
        $response = \Website\createDog($_POST);
        header('Content-type: application/json');
        echo json_encode($response);
        exit;
      }
    )
  );
});

When the user chooses a recipe, they end their journey in the React app by being redirected to the checkout page served by WooCommerce.

Conclusions

In this project, we wanted to experiment with combining the potential of a solid solution like WooCommerce – without limiting ourselves to its traditional use – and that of a React application used to manage the dynamic component of the purchase funnel.

By creating the Dog Heroes e-commerce site, we have proven that even “traditional” technological solutions, usually considered useful for creating simple websites with limited e-commerce functions, can be highly flexible and reveal great potential for those seeking to develop advanced solutions, thereby building highly customised user experiences.





Press ENTER

Proceed

press ENTER

Thank You

We'll be in touch soon.