Construir un e-commerce con flutterflow como frontend y wordpress como
backend
1. Creamos un nuevo proyecto en flutterflow
2. Debemos importar los datos json desde nuestro wordpress, para ello
debemos permitir el uso del api rest de woocommerce. Antes de iniciar con
este proceso deben agregar al final de la url de sus sitios el siguiente texto
wp-json/wc/v3/products esto deberia verse de la siguiente manera
Ese mensaje nos da entender que no hemos autorizado el uso de woocommerce
como api
3. Deben ir al plugin de woocommerce pestaña ajustes -> avanzado -> apirest
-> añadir clave y generamos la llave
4. Ahora usamos esas credenciales en flutterflow api calls -> add -> create api group
En la parte name agregamos un nombre Woocommerce
Agregamos la url con el formato donde flutterflow consultara los datos (su url con
wp-json/wc/v3) que es la url predeterminada por wordpress
y agregamos un nuevo header
Para agregar el header debemos ir a chatgpt y pasarle los parametros que tenemos en
wordpress, pidiendole que nos construya el header del api call de flutterflow con la clave de
cliente y la clave secreta con basic authentication
y deberia generar algo asi, sin llaves o comillas… Luego boton save
Authorization: Basic
Y2tfYTkwNDQzYWNkOTZmNGIwMmU1ODAxZWVlMWFlMDAzZGI5ZDk5NjEyMjpjc181Mm
UxNTg3M2M1ZGQxZWJjMmUxODRlYWJjMjViMTIxZjU0MGUwMTNm
lo copiamos y lo pegamos en el campo header de flutterflow
y ahora generamos un api call en la parte lateral
y lo configuramos agregandoo products en api endpoint
y validamos que este funcionando en response & test y luego boton azul
y deberia generar algo asi
si no funcionana deben intentar con wordpress para que genere el header con esta
estructura
5. AHora debemos modificar el archivo [Link] para permitir el uso publico del api
Para ello debemos instalar el plugin wp file manager
Vamos a la parte donde dice wp-content -> themes -> en su caso astro (si no cambiaron la
plantilla)-> seleccionamos el archivo [Link](click derecho editor)
y pegamos al inicio después de los comentarios
add_filter( 'woocommerce_rest_check_permissions', function( $permission, $context,
$object_id, $post_type ) {
if ( $post_type === 'product' && $context === 'read' ) {
return true;
}
return $permission;
}, 10, 4 );
y le damos al botón save. Por ultimo verificamos que salgan los datos
y generamos nuevamente el test en flutterflow y deberia aparecer los datos del json. Si no
salen los datos como en la captura nada de lo siguiente que hagamos va a funcionar
6. Ahora creamos una pagina de carrito y una producto
DEBRIA VERSE ASI
Creamos un componente con dos botones que nos permita navegar entre pestañas
Agregamos dos botones dentro del componente y los agregamos los nombres
correspondientes
en homepage agregamos el componente que acabamos de crear
DEberia verse algo asi (modifique algunos detalles visuales puede que no se vea asi)
Ahora agregamos la navegación en el componente, seleccionamos el boton -> Action ->
Add Action -> navigation -> navigation to -> carrito y home respectivamente
y probamos en el test mode
Por ultimo agregamos el componente a la pagina de producto y carrito
7. mostramos los productos creados en wordpress en nuestra aplicacion
Agregamos un widget llamado Listview
y agregamos un ui template widget de producto
en el listview agregamos un backend query Add query -> Api call -> group (la q creamos)
y confirmamos (modifique el nombre original) que salgan los datos del grupo y del endpoint
que generamos en la parte del api call
Ahora agregamos generador dinamico de hijos en el mismo listview seleccionamos
losproductos response (o como ud lo nombraran ud debe tener response al final)
Ahora en los elementos de la card mostramos dinamicamente modificandolas variables de
cada elemento, en el caso de los textos seleccionamos el elemento y le damos al boton
naranja
y llenamos los campos de esta forma primero losproductositems (o como se llame en sus
proyectos debe tener item al final) y mostramos el campo name (correspondientes al
nombre del producto)
Deben hacer este paso con todos los textos, las variables que contienen el precio es
$.price, nombre $.name y descripcion corta $.short_description Estos datos estan en la
url de la imagen arriba
y si todo funciono al ejecutar el test veran que se modificaron los textos
Ahora debemos modificar la imagen debemos modificar el path de la imagen, boton naranja
y modificamos los datos como estan en la imagen
en mi caso cuando ejecuto el test no se ve la imagen y esto se debe a problema de cors del
hosting. Si a uds les funciona la imagen continuen al siguiente numeral
Para arreglar este problema en cada producto creado vamos a modificar el texto alternativo
de la imagen en wordpress. Vamos a utilizar un servicio llamado weserv que nos permite
pasar por otro servidor la imagen y de esta forma poderla utilizar. Vamos a cada producto y
seleccionamos la imagen.
Al dar click nos abre un panel en el que al final aparece la url de la imagen la copia y en un
bloc de notas la pegan
, le quitamos el https:// y pegamos al inicio de la url [Link] deberia
quedar algo asi
Ahora en el campo del texto alternativo pegamos la url modificada y guardamos
Por ultimo modificamos el path de la imagen para que llame el campo alt y confirmamos y
probamos en el test mode
8. Creamos la pagina de producto
Creamos una nueva pagina de donde copiaremos el diseño del producto (debimos hacer
antes cuando creamos la pagina, lo siento). Lo copiamos y pegamos. dentro de nuestra
página original. Si no logran hacer este paso Agreguen los elementos de widget como
imagenes y textos para llamarlos donde corresponde. NO SE PREOCUPEN POR EL
DISEÑO NO ES CALIFICABLE
Una vez tenemos el diseñodebemos agregar page paremeters para traer las variables del
producto que cliqueamos en el home. Un parametro por texto e imagen
para la imagen seleccionamos un imagepath y para textos strings y el precio es double,
deberia quedar asi segun mi diseño
Por ultimo definimos la variable que tiene el texto o image modificando el path con el page
parameter creado para este elemento
deben añadir un valor por defecto, deberia verse de esta forma el diseño
Volvemos a la pagina home y agregamos una accion al producto para enviar el parametro
AddAction -> ontap -> navigation -> navigation to -> la pagina de producto
En el boton verde nos permite agregar los parametros de la pagina de producto, con las
variables del formato json. Repetimos hasta completar todos los campos necesarios
image texto todos los parametros
importante aqui no deberian tener bugs
Ejecutamos el test y deberiamos poder ir a la pagina de producto al dar click a cada item
9. Añadimos el carrito de compra
Para ello debemos crear un objeto con dos parametros, titulo y precio. vamos al datatypes
-> create new data type -> damos nombre creamos -> add field
y deberia quedar asi
Vamos a appstate
y lo configuramos de la siguiente manera, con el objeto que acabamos de crear.
En la pagina de carrito de compra creamos un listview y creamos la siguiente estructura
seleccionamos el listview y vamos a la opcion de generate dynamic childs
y en el campo texto que acabamos de crear agregamos los datos
Por ultimo agregamos una accion al boton de producto
nombre
precio
Por último prueban en el test mode (no funciona en la epxortar como app ;( ni idea porque)
