Crea la vista de productos de tu carrito

Clase 10 de 15 • Curso de App Mobile utilizando Woocommerce

David Rangel

student••

Estilos ProductInCart.jsx

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginVertical: 8,
    marginHorizontal: 16,
  },
  itemImage: {
    width: (Dimensions.get('window').width / 100) * 15,
    height: (Dimensions.get('window').width / 100) * 15,
    borderRadius: 8,
    overflow: 'hidden',
  },
  itemTitle: {
    width: (Dimensions.get('window').width / 100) * 45,
    marginHorizontal: (Dimensions.get('window').width / 100) * 5,
    fontWeight: '300',
  },
  itemPrice: {
    width: (Dimensions.get('window').width / 100) * 15,
    fontWeight: 'bold',
  },
  itemRemoveContainer: {
    width: (Dimensions.get('window').width / 100) * 5,
  },
  itemRemove: {
    color: colors.grey,
    fontSize: 20,
    fontWeight: 'bold',
  },
});

David Rangel

student••

0.0

const styles = StyleSheet.create({
  productsContainer: {
    height:
      Platform.OS === 'ios'
        ? Dimensions.get('window').height - sizes.headerHeight - 160 - 50
        : Dimensions.get('window').height - sizes.headerHeight - 160,
  },
  resumeContainer: {
    height: sizes.ctaButton,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'space-between',
    backgroundColor: colors.lightGrey,
    marginVertical: 8,
    marginHorizontal: 16,
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  resumeText: {
    color: colors.darkGrey,
  },
  resumePrice: {
    color: colors.darkGrey,
    fontWeight: 'bold',
  },
  buttonCheckout: {
    height: sizes.ctaButton,
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'center',
    backgroundColor: colors.green,
    marginVertical: 8,
    marginHorizontal: 16,
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  textCheckout: {
    color: colors.lightGrey,
    fontSize: 20,
    fontWeight: 'bold',
  },
});

David Rangel

student•

Para que estén más tranquilos con las importaciones, pueden activar IntelliSense de VSCode. Solito detecta y te da sugerencias de qué importar, entre otras sugerencias.

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginVertical: 8,
    marginHorizontal: 16,
  },
  itemImage: {
    width: (Dimensions.get('window').width / 100) * 15,
    height: (Dimensions.get('window').width / 100) * 15,
    borderRadius: 8,
    overflow: 'hidden',
  },
  itemTitle: {
    width: (Dimensions.get('window').width / 100) * 45,
    marginHorizontal: (Dimensions.get('window').width / 100) * 5,
    fontWeight: '300',
  },
  itemPrice: {
    width: (Dimensions.get('window').width / 100) * 15,
    fontWeight: 'bold',
  },
  itemRemoveContainer: {
    width: (Dimensions.get('window').width / 100) * 5,
  },
  itemRemove: {
    color: colors.grey,
    fontSize: 20,
    fontWeight: 'bold',
  },
});

const styles = StyleSheet.create({
  productsContainer: {
    height:
      Platform.OS === 'ios'
        ? Dimensions.get('window').height - sizes.headerHeight - 160 - 50
        : Dimensions.get('window').height - sizes.headerHeight - 160,
  },
  resumeContainer: {
    height: sizes.ctaButton,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'space-between',
    backgroundColor: colors.lightGrey,
    marginVertical: 8,
    marginHorizontal: 16,
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  resumeText: {
    color: colors.darkGrey,
  },
  resumePrice: {
    color: colors.darkGrey,
    fontWeight: 'bold',
  },
  buttonCheckout: {
    height: sizes.ctaButton,
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'center',
    backgroundColor: colors.green,
    marginVertical: 8,
    marginHorizontal: 16,
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  textCheckout: {
    color: colors.lightGrey,
    fontSize: 20,
    fontWeight: 'bold',
  },
});

Crea la vista de productos de tu carrito

Presentación

Bienvenida y presentación

Preparando el proyecto

Análisis del proyecto y conexión con la API de WooCommerce

¿Cómo puedo comenzar un proyecto con React Native?

Creando tu app

Planifica y crea el estado global de tu app

Crea la pantalla de productos

Crea la vista de productos en la pantalla principal

Aprende a crear la navegación de tu app

Crea la pantalla de detalles de productos

¿Cómo agregar el carrito a tu app?

Crea la vista de productos de tu carrito

Implementa cambios visuales basados en el carrito

Comprende cómo funcionan los payment gateways para tu app

Crea la pantalla de checkout

Guarda los pedidos de tu app

Conclusiones

¿Por dónde puedes seguir tu ruta?