Scoprire lo scopo della cartella web-src web-src-folder

La cartella web-src per questa app di esempio contiene molti file e cartelle JavaScript. Questa cartella viene utilizzata per le applicazioni che dispongono di un'interfaccia utente. Non tutte le applicazioni utilizzano questa funzione. Ad esempio, un’integrazione Commerce con un sistema esterno di gestione dell’inventario potrebbe non richiedere un’interfaccia e un codice front-end.

A chi serve questo video?

  • Sviluppatori senza esperienza di Adobe Commerce con esperienza limitata che utilizzano Adobe App Builder e che vengono a conoscenza della web-src cartella e il relativo contenuto.

Contenuto video

  • Qual è lo scopo principale del web-src cartella?
  • File e cartelle in genere inclusi
  • Come web-src e il contenuto all'interno vengono utilizzati nell'applicazione di esempio

Esempi di codice

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
Quando esegui chiamate API, accertati di utilizzare una sorta di searchCriteria. Puoi anche considerare l’utilizzo dell’impaginazione. Se il risultato di Adobe Commerce è troppo grande, la capacità di Adobe Developer App Builder potrebbe essere soddisfatta e causare una fine imprevista del file. Il risultato è un risultato di risposta non corretto come errore 400.
Supponiamo ad esempio che sia necessario richiedere ad Adobe Commerce tutti i prodotti correnti. L’URL risultante sarà simile a {{base_url}}rest/V1/products?searchCriteria=all. A seconda delle dimensioni del catalogo restituito, il codice JSON potrebbe essere troppo grande per essere utilizzato da App Builder. Utilizza invece l’impaginazione e fai alcune richieste per evitare Response is not valid 'message/http'.

Nell’esempio seguente, il codice di esempio è not limitazione della richiesta. Per evitare un errore 400, riduci la dimensione della risposta utilizzando 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 }
}

App Builder: creare le prime pagine correlate all’app

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