Scoprire lo scopo della cartella web-src web-src-folder
La cartella web-src per questa app di esempio contiene molti file e cartelle di 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 che non hanno mai utilizzato Adobe Commerce con un'esperienza limitata utilizzando Adobe App Builder e che stanno imparando a conoscere la cartella
web-src
e il suo contenuto.
Contenuto video
- Qual è lo scopo principale della cartella
web-src
? - File e cartelle in genere inclusi
- Utilizzo della cartella
web-src
e del contenuto all'interno 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
Supponiamo ad esempio che sia necessario richiedere ad Adobe Commerce tutti i prodotti correnti. L'URL risultante sarà
{{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 la paginazione e effettua alcune richieste per evitare Response is not valid 'message/http'.
Nell'esempio seguente, l'esempio di codice è not
che limita la richiesta. Per evitare un errore 400, ridurre 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 }
}