Le dossier web-src de cet exemple d’application contient de nombreux fichiers et dossiers JavaScript. Ce dossier est utilisé pour les applications disposant d’une interface utilisateur. Toutes les applications n’utilisent pas cette fonctionnalité. Par exemple, une intégration Commerce avec un système de gestion d’inventaire externe peut ne pas nécessiter d’interface frontale et de code.
web-src
et son contenu.web-src
dossier ?web-src
Le dossier et le contenu à l’intérieur sont utilisés dans l’exemple d’application.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
Lors de l’exécution d’appels API, assurez-vous qu’un certain type de critères de recherche est utilisé. Vous pouvez également envisager d’utiliser la pagination. Si le résultat d’Adobe Commerce est trop important, la capacité du générateur d’applications Adobe Developer peut être atteinte et la fin du fichier peut être inattendue. Le résultat est un résultat de réponse incorrect sous la forme d’une erreur 400.
Par exemple, supposons qu’il soit nécessaire de demander tous les produits actuels à Adobe Commerce. L’URL résultante ressemble à {{base_url}}rest/V1/products?searchCriteria=all
. Selon la taille du catalogue renvoyé, le fichier json peut être trop volumineux pour être utilisé par App Builder. Utilisez plutôt la pagination et effectuez quelques requêtes pour éviter Response is not valid 'message/http'.
Dans l’exemple ci-dessous, l’exemple de code est not
limitation de la requête. Pour éviter une erreur 400, réduisez la taille de la réponse en utilisant 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 }
}