Descubra el propósito de la carpeta web-src web-src-folder

La carpeta web-src de esta aplicación de ejemplo contiene muchos archivos y carpetas JavaScript. Esta carpeta se utiliza para aplicaciones que tienen una interfaz de usuario. No todas las aplicaciones utilizan esta característica. Por ejemplo, una integración de Commerce con un sistema de administración de inventario externo puede no requerir una interfaz de front-end y código.

¿Para quién es este vídeo?

  • Desarrolladores nuevos en Adobe Commerce con experiencia limitada que utilizan el Generador de aplicaciones de Adobe y que están aprendiendo acerca de web-src y su contenido.

Contenido de vídeo

  • ¿Cuál es el propósito principal de? web-src carpeta?
  • Archivos y carpetas incluidos normalmente
  • ¿Cómo? web-src y el contenido dentro de se utilizan en la aplicación de ejemplo

Muestras de código

web-src/src/components/Orders.js

/*
 * Copyright 2023 Adobe
 * All Rights Reserved.
 *
 * NOTICE: All information contained herein is, and remains
 * the property of Adobe and its suppliers, if any. The intellectual
 * and technical concepts contained herein are proprietary to Adobe
 * and its suppliers and are protected by all applicable intellectual
 * property laws, including trade secret and copyright laws.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe.
 */
import {
    Content,
    Heading,
    IllustratedMessage,
    TableView,
    TableHeader,
    TableBody,
    Column,
    Row,
    Cell,
    View,
    Flex,
    ProgressCircle
} from '@adobe/react-spectrum'
import {useCommerceOrders} from '../hooks/useCommerceOrders'

export const Orders = props => {

    const {isLoadingCommerceOrders, commerceOrders} = useCommerceOrders(props)

    const ordersColumns = [
        {name: 'Order Id', uid: 'increment_id'},
        {name: 'Status', uid: 'status'},
        {name: 'Store Name', uid: 'store_name'},
        {name: 'Total Item Count', uid: 'total_item_count'},
        {name: 'Total Quantity', uid: 'total_qty_ordered'},
        {name: 'Total Due', uid: 'total_due'},
        {name: 'Tax', uid: 'tax_amount'},
        {name: 'Created At', uid: 'created_at'}
    ]

    function renderEmptyState() {
        return (
            <IllustratedMessage>
                <Content>No data available</Content>
            </IllustratedMessage>
        )
    }

    return (

        <View>
            {isLoadingCommerceOrders ? (
                <Flex alignItems="center" justifyContent="center" height="100vh">
                    <ProgressCircle size="L" aria-label="Loading…" isIndeterminate/>
                </Flex>
            ) : (
                <View margin={10}>
                    <Heading level={1}>Fetched orders from Adobe Commerce</Heading>
                    <TableView
                        overflowMode="wrap"
                        aria-label="orders table"
                        flex
                        renderEmptyState={renderEmptyState}
                        height="static-size-1000"
                    >
                        <TableHeader columns={ordersColumns}>
                            {column => <Column key={column.uid}>{column.name}</Column>}
                        </TableHeader>
                        <TableBody items={commerceOrders}>
                            {order => (
                                <Row key={order['increment_id']}>{columnKey => <Cell>{order[columnKey]}</Cell>}</Row>
                            )}
                        </TableBody>
                    </TableView>
                </View>
            )}
        </View>
    )
}

web-src/src/hooks/useCommerceOrders.js

CAUTION
Al realizar llamadas a la API, asegúrese de que se utiliza algún tipo de searchCriteria. También puede considerar el uso de la paginación. Si el resultado de Adobe Commerce es demasiado grande, es posible que se cumpla la capacidad del Generador de aplicaciones de Adobe Developer y se produzca un final inesperado del archivo. El resultado es un resultado de respuesta mal formado como un error 400.
Por ejemplo, supongamos que es necesario solicitar todos los productos actuales a Adobe Commerce. La URL resultante sería similar a {{base_url}}rest/V1/products?searchCriteria=all. Según el tamaño del catálogo que devuelva, el json puede ser demasiado grande para que el Generador de aplicaciones lo consuma. En su lugar, utilice la paginación y realice algunas solicitudes para evitar Response is not valid 'message/http'.

En el ejemplo siguiente, la muestra de código es not limitar la solicitud. Para evitar un error 400, reduzca el tamaño de la respuesta utilizando searchCriteria.

?searchCriteria[filter_groups][0][filters][0][field]=created_at&searchCriteria[filter_groups][0][filters][0][value]=2022-12-01&searchCriteria[filter_groups][0][filters][0][condition_type]=gt

/*
 * Copyright 2023 Adobe
 * All Rights Reserved.
 *
 * NOTICE: All information contained herein is, and remains
 * the property of Adobe and its suppliers, if any. The intellectual
 * and technical concepts contained herein are proprietary to Adobe
 * and its suppliers and are protected by all applicable intellectual
 * property laws, including trade secret and copyright laws.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe.
 */
import { useEffect, useState } from 'react'
import { callAction } from '../utils'

export const useCommerceOrders = props => {
    const [isLoadingCommerceOrders, setIsLoadingCommerceOrders] = useState(true)
    const [commerceOrders, setCommerceOrders] = useState([])

    const fetchCommerceOrders = async () => {
        const commerceOrdersResponse = await callAction(
            props,
            'commerce-rest-get',
            'orders?searchCriteria=all'
        )
        setCommerceOrders(commerceOrdersResponse.error ? [] : commerceOrdersResponse.items)
    }

    useEffect(() => {
        fetchCommerceOrders().then(() => setIsLoadingCommerceOrders(false))
    }, [])

    return { isLoadingCommerceOrders, commerceOrders }
}

Generador de aplicaciones: cree sus primeras páginas relacionadas con la aplicación

recommendation-more-help
3a5f7e19-f383-4af8-8983-d01154c1402f