Tutorial App Delivery – React Native + API – Part 5: Cart

Hoy voy a ensenar como hacer un carrito de productos.
This containt show how to build food cart .

AsyncStorage

AsyncStorage es un sistema de almacenamiento de clave-valor no cifrado, asíncrono, persistente y global para la aplicación. Debe usarse en lugar de LocalStorage.

npm install --save @react-native-community/async-storage

Run android

react-native run-android

Clean cache

react-native start --reset-cache

Button in Food.js

import

// import AsyncStorage
import AsyncStorage from '@react-native-community/async-storage';
// import icons
import Icon from 'react-native-vector-icons/Ionicons';

Button

<TouchableOpacity
            onPress={()=>this.onClickAddCart(item)}
            style={{
              width:(width/2)-40,
              backgroundColor:'#33c37d',
              flexDirection:'row',
              alignItems:'center',
              justifyContent:"center",
              borderRadius:5,
              padding:4
            }}>
            <Text style={{fontSize:18, color:"white", fontWeight:"bold"}}>Add Cart</Text>
            <View style={{width:10}} />
            <Icon name="ios-add-circle" size={30} color={"white"} />
          </TouchableOpacity>

Function for Button

  onClickAddCart(data){

   const itemcart = {
     food: data,
     quantity:  1,
     price: data.price
   }

   AsyncStorage.getItem('cart').then((datacart)=>{
       if (datacart !== null) {
         // We have data!!
         const cart = JSON.parse(datacart)
         cart.push(itemcart)
         AsyncStorage.setItem('cart',JSON.stringify(cart));
       }
       else{
         const cart  = []
         cart.push(itemcart)
         AsyncStorage.setItem('cart',JSON.stringify(cart));
       }
       alert("Add Cart")
     })
     .catch((err)=>{
       alert(err)
     })
 }

Cart

import

import React, { Component } from 'react';
import { Text, View, TextInput, Image, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
var { width } = Dimensions.get("window")
// import icons
import Icon from 'react-native-vector-icons/Ionicons';

render

render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <View style={{height:20}} />
         <Text style={{fontSize:28, color:"gray"}}>Cart food</Text>
         <View style={{height:10}} />

         <View style={{flex:1}}>

           <View style={{width:width-20,margin:10,backgroundColor:'transparent', flexDirection:'row', borderBottomWidth:2, borderColor:"#cccccc", paddingBottom:10}}>
             <Image resizeMode={"contain"} style={{width:width/3,height:width/3}} source={{uri: "http://tutofox.com/foodapp/food/pizza/pizza-1.png"}} />
             <View style={{flex:1, backgroundColor:'transparent', padding:10, justifyContent:"space-between"}}>
               <View>
                 <Text style={{fontWeight:"bold", fontSize:20}}>Titulo de producto</Text>
                 <Text>Descripcion de food</Text>
               </View>
               <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                 <Text style={{fontWeight:'bold',color:"#9fd236",fontSize:20}}>$565</Text>
                 <View style={{flexDirection:'row', alignItems:'center'}}>
                   <TouchableOpacity>
                     <Icon name="ios-remove-circle" size={30} color={"#9fd236"} />
                   </TouchableOpacity>
                   <Text style={{paddingHorizontal:8, fontWeight:'bold'}}>5</Text>
                   <TouchableOpacity>
                     <Icon name="ios-add-circle" size={30} color={"#9fd236"} />
                   </TouchableOpacity>
                 </View>
               </View>
             </View>
           </View>

         </View>

         <View style={{height:20}} />

       <TouchableOpacity style={{
           backgroundColor:"#9fd236",
           width:width-40,
           alignItems:'center',
           padding:10,
           borderRadius:5
         }}>
         <Text style={{
             fontSize:24,
             fontWeight:"bold",
             color:'white'
           }}>
           CHECKOUT
         </Text>
       </TouchableOpacity>

       <View style={{height:20}} />


      </View>
    );
  }

Cart Part 2 : Render cart from asyncstorage

import

import AsyncStorage from '@react-native-community/async-storage';

state

  constructor(props) {
     super(props);
     this.state = {
       dataCart:[],
     };
  }

componentDidMount

  componentDidMount()
  {
    AsyncStorage.getItem('cart').then((cart)=>{
      if (cart !== null) {
        // We have data!!
        const cartfood = JSON.parse(cart)
        this.setState({dataCart:cartfood})
      }
    })
    .catch((err)=>{
      alert(err)
    })
  }

render

render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <View style={{height:20}} />
         <Text style={{fontSize:32,fontWeight:"bold",color:"#33c37d"}}>Cart food</Text>
         <View style={{height:10}} />

         <View style={{flex:1}}>

           <ScrollView>

             {
               this.state.dataCart.map((item)=>{
                 return(
                   <View style={{width:width-20,margin:10,backgroundColor:'transparent', flexDirection:'row', borderBottomWidth:2, borderColor:"#cccccc", paddingBottom:10}}>
                     <Image resizeMode={"contain"} style={{width:width/3,height:width/3}} source={{uri: item.food.image}} />
                     <View style={{flex:1, backgroundColor:'trangraysparent', padding:10, justifyContent:"space-between"}}>
                       <View>
                         <Text style={{fontWeight:"bold", fontSize:20}}>{item.food.name}</Text>
                         <Text>Lorem Ipsum de food</Text>
                       </View>
                       <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                         <Text style={{fontWeight:'bold',color:"#33c37d",fontSize:20}}>${item.price*item.quantity}</Text>
                         <View style={{flexDirection:'row', alignItems:'center'}}>
                           <TouchableOpacity>
                             <Icon name="ios-remove-circle" size={35} color={"#33c37d"} />
                           </TouchableOpacity>
                           <Text style={{paddingHorizontal:8, fontWeight:'bold', fontSize:18}}>5</Text>
                           <TouchableOpacity>
                             <Icon name="ios-add-circle" size={35} color={"#33c37d"} />
                           </TouchableOpacity>
                         </View>
                       </View>
                     </View>
                   </View>
                 )
               })
             }

             <View style={{height:20}} />

             <TouchableOpacity style={{
                 backgroundColor:"#33c37d",
                 width:width-40,
                 alignItems:'center',
                 padding:10,
                 borderRadius:5,
                 margin:20
               }}>
               <Text style={{
                   fontSize:24,
                   fontWeight:"bold",
                   color:'white'
                 }}>
                 CHECKOUT
               </Text>
             </TouchableOpacity>

             <View style={{height:20}} />
           </ScrollView>
         </View>
         
      </View>
    );
  }

_

Cart Part 3 : Button Quantity

render

render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <View style={{height:20}} />
         <Text style={{fontSize:32,fontWeight:"bold",color:"#33c37d"}}>Cart food</Text>
         <View style={{height:10}} />

         <View style={{flex:1}}>

           <ScrollView>

             {
               this.state.dataCart.map((item,i)=>{
                 return(
                   <View style={{width:width-20,margin:10,backgroundColor:'transparent', flexDirection:'row', borderBottomWidth:2, borderColor:"#cccccc", paddingBottom:10}}>
                     <Image resizeMode={"contain"} style={{width:width/3,height:width/3}} source={{uri: item.food.image}} />
                     <View style={{flex:1, backgroundColor:'trangraysparent', padding:10, justifyContent:"space-between"}}>
                       <View>
                         <Text style={{fontWeight:"bold", fontSize:20}}>{item.food.name}</Text>
                         <Text>Lorem Ipsum de food</Text>
                       </View>
                       <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                         <Text style={{fontWeight:'bold',color:"#33c37d",fontSize:20}}>${item.price*item.quantity}</Text>
                         <View style={{flexDirection:'row', alignItems:'center'}}>
                           <TouchableOpacity onPress={()=>this.onChangeQual(i,false)}>
                             <Icon name="ios-remove-circle" size={35} color={"#33c37d"} />
                           </TouchableOpacity>
                           <Text style={{paddingHorizontal:8, fontWeight:'bold', fontSize:18}}>{item.quantity}</Text>
                           <TouchableOpacity onPress={()=>this.onChangeQual(i,true)}>
                             <Icon name="ios-add-circle" size={35} color={"#33c37d"} />
                           </TouchableOpacity>
                         </View>
                       </View>
                     </View>
                   </View>
                 )
               })
             }

             <View style={{height:20}} />

             <TouchableOpacity style={{
                 backgroundColor:"#33c37d",
                 width:width-40,
                 alignItems:'center',
                 padding:10,
                 borderRadius:5,
                 margin:20
               }}>
               <Text style={{
                   fontSize:24,
                   fontWeight:"bold",
                   color:'white'
                 }}>
                 CHECKOUT
               </Text>
             </TouchableOpacity>

             <View style={{height:20}} />
           </ScrollView>

         </View>

      </View>
    );
  }

Function for change Quantity

  onChangeQual(i,type)
  {
    const dataCar = this.state.dataCart
    let cantd = dataCar[i].quantity;

    if (type) {
     cantd = cantd + 1
     dataCar[i].quantity = cantd
     this.setState({dataCart:dataCar})
    }
    else if (type==false&&cantd>=2){
     cantd = cantd - 1
     dataCar[i].quantity = cantd
     this.setState({dataCart:dataCar})
    }
    else if (type==false&&cantd==1){
     dataCar.splice(i,1)
     this.setState({dataCart:dataCar})
    } 
  }

Cart.js Descarga

5 comentarios sobre “Tutorial App Delivery – React Native + API – Part 5: Cart”

Moayad dice:

28 marzo, 2020 a las 1:38 pm

Hello bro,
When we use to add or remove button the quantity changed correctly, but when we navigate to another screen then back to cart or refresh the app even, the quantity does not change and appears to last change from food.js.
Can you make a function to use AsyncStorage to add or remove from it, please!
Thanks!

Responder
1. Artyom dice:
  
  29 marzo, 2020 a las 11:41 pm
  
  You should update the cart in AsyncStorage
  
  Responder
  1. Moayad dice:
    
    30 marzo, 2020 a las 6:08 pm
    
    I am new on React Native…
    How can I update the AsyncStorage and wherein the code?
    Thanks for responding!
    
    Responder
2. 62 dice:
  
  3 octubre, 2020 a las 5:21 pm
  
  AsyncStorage.removeItem(‘cart’);
  AsyncStorage.setItem(‘cart’, JSON.stringify(dataCar));
  
  Responder
Peter dice:

25 julio, 2020 a las 3:21 am

Nice tutorial, thanks!

I’m getting this error on my onChangeQual function:

React-native: undefined is not an object (evaluating ‘_this3.state)

Mind to help me?

onChangeQual = (i, type) => {
const dataCar = this.state.dataCart
let cantd = dataCar[i].quantity;

if (type) {
cantd = cantd + 1
dataCar[i].quantity = cantd
this.setState({dataCart: dataCar})
}
else if (type == false && cantd >= 2){
cantd = cantd – 1
dataCar[i].quantity = cantd
this.setState({dataCart: dataCar})
}
else if (type == false && cantd == 1){
dataCar.splice(i, 1)
this.setState({dataCart: dataCar})
}
}

Responder

Tutorial App Delivery – React Native + API – Part 5: Cart

AsyncStorage

Run android

Clean cache

Button in Food.js

import

Button

Function for Button

Cart

import

render

Cart Part 2 : Render cart from asyncstorage

import

state

componentDidMount

render

_

Cart Part 3 : Button Quantity

render

Function for change Quantity

Acerca de Artyom

5 comentarios sobre “Tutorial App Delivery – React Native + API – Part 5: Cart”

Deja una respuesta Cancelar la respuesta

AsyncStorage

Run android

Clean cache

Button in Food.js

import

Button

Function for Button

Cart

import

render

Cart Part 2 : Render cart from asyncstorage

import

state

componentDidMount

render

_

Cart Part 3 : Button Quantity

render

Function for change Quantity

Artículos relacionados

Laravel websockets + Pusher + React.js

Laravel websockets + Pusher + Vue.js

Tutorial App Delivery – React Native + API – Part 7: Login Facebook

Acerca de Artyom

5 comentarios sobre “Tutorial App Delivery – React Native + API – Part 5: Cart”

Deja una respuesta Cancelar la respuesta