Consumir el API de Prestashop desde React usando Axios

Para poder acceder a la API que ofrece Prestashop antes que nada debemos ir a nuestro backoffice y generar una llave de acceso. Para poder crear un nuevo key o llave iremos a parámetros avanzados > webservice y nos aseguraremos que la opción de activar el servicio web está activada.

Una vez activado, procederemos a crear una key que usaremos desde nuestra app de react.

Veamos ahora que debemos hacer en nuestro componente de react. Para consumir la api usaremos axios, así que si no lo tienes instalado lo puedes hacer ejecutando el siguiente comando:

npm install axios --save # si usas npm
yarn add axios # si usas yarn

No olvides importar axios en tu component para poder usarlo

import axios from 'axios'
import axios from 'axios'

class App extends React.Component {
constructor (props) {
super(props)
this.state = {
key: 'TU_KEY_QUE_HAS_GENERADO_EN_PRESTASHOP',
}
}
componentDidMount () {
const key = this.state.key
const category = 19;
axios.get(`/api/products?ws_key=${key}&output_format=JSON&display=full&filter[id_category_default]=${category}`)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
}
render () {
... el código de tu component de react
}
}

De esta manera optendríamos los productos de la categoría 19, por poner un ejemplo.

Be the first to comment

Leave a Reply

Your email address will not be published.


*