How to use React.js in PrestaShop 1.7

In the world of e-commerce, delivering a seamless and interactive shopping experience is paramount. One way to achieve this is by integrating React.js into your PrestaShop store.

In this tutorial, we’ll guide you through the process of integrating React.js to create a dynamic product management system, allowing you to add new products without the need to reload the page.

Prerequisites:

• Basic understanding of HTML, CSS, and JavaScript
• Make sure you have Node.js and npm (Node Package Manager) installed on your machine.
• Familiarity with PrestaShop and its templates

Step 1: Setting Up the Environment: Begin by creating a new directory in <prestashop_root_dir>/themes/<your_current_theme>/ folder for your project and navigating into it:

mkdir prestashop-react-integration
cd prestashop-react-integration

Step 2: Initializing the React App:

Generate a new React app within your project directory <prestashop_root_dir>/themes/<your_current_theme>/:

npx create-react-app my-prestashop-react-app
cd my-prestashop-react-app

Step 3: Developing React Components:

Inside the src folder of your React app, open App.js and replace the default code with the following:

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  state = {
    products: [],
    newProductName: '',
  };

  componentDidMount() {
    this.fetchProducts();
  }

  fetchProducts() {
    axios.get('/api-products.php') // Replace with your API endpoint
      .then(response => {
        this.setState({ products: response.data });
      })
      .catch(error => {
        console.error(error);
      });
  }

  handleProductNameChange = event => {
    this.setState({ newProductName: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();

    axios.post('/api-add-product.php', {
      name: this.state.newProductName,
    })
      .then(() => {
        this.setState({ newProductName: '' });
        this.fetchProducts();
      })
      .catch(error => {
        console.error(error);
      });
  };

  render() {
    return (
      <div>
        <h1>Featured Products</h1>
        <ul>
          {this.state.products.map(product => (
            <li key={product.id}>{product.name}</li>
          ))}
        </ul>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            placeholder="Product name"
            value={this.state.newProductName}
            onChange={this.handleProductNameChange}
          />
          <button type="submit">Add Product</button>
        </form>
      </div>
    );
  }
}

export default App;

In this code, we’re using axios to fetch and send data to the API endpoints.

Use axios or another HTTP library to fetch data from your PrestaShop backend and display it in your React components.

Step 4: Building the React App:

Build the React app using:

npm install axios
npm run build

Step 5: Integrating the React App into PrestaShop: Copy the contents of the build directory to a new folder within your PrestaShop project, such as react-app.

Step 6: Mounting the React App: In your PrestaShop template file (e.g., index.tpl), insert the following code where you want the React app to appear:

<div id="react-app"></div>
<script src="path/to/react-app/static/js/main.{hash}.js"></script>

The folder structure of the React app is given in the screenshot: –

Step 7: Implementing Dynamic Product Management: Create an API endpoint in your PrestaShop project (e.g., api-products.php) to provide product data. Another API endpoint (e.g., api-add-product.php) should handle adding new products.

Step 8: Fetching Updated Product List: After adding a new product using the form, the component will automatically fetch the updated product list from the API.

By integrating React.js into your PrestaShop store, you’ve empowered it with dynamic product management capabilities.

Customers can now enjoy a modern shopping experience where they can add products seamlessly without reloading the page.

This tutorial provides a foundation for integrating React.js with PrestaShop, allowing you to build further upon this concept to meet your unique requirements

Also, note that there is no official support for React.js by PrestaShop, however, you can use it at your own risk.

That’s all about this blog.

If any issues or doubts please feel free to mention them in the comment section.

I would be happy to help.

Also, you can explore our PrestaShop Development Services & a large range of quality PrestaShop Modules.