Code samples
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
When performing API calls, ensure that some sort of searchCriteria is used. You might also consider using pagination. If the result from Adobe Commerce is too large, the Adobe Developer App Builder capacity may be met and cause an unexpected end to the file. The result is a malformed response result as a 400 error.
For example, suppose There is a need to request all the current products from Adobe Commerce. The resulting URL would resemble
For example, suppose There is a need to request all the current products from Adobe Commerce. The resulting URL would resemble
{{base_url}}rest/V1/products?searchCriteria=all
. Depending on the size of the catalog the returned, the json may be too large for App Builder to consume. Instead use pagination and make a few requests to avoid Response is not valid 'message/http'.
In the example below, the code sample is not
limiting the request. To avoid a 400 error, reduce the size of the response by using 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 - Build your First App related pages
Previous pageLearn about the test folder
Next pageTesting locally
Commerce
- Commerce Tutorials
- Adobe Commerce Cloud
- Getting Started
- Global Reference Architecture
- Help and support
- Edge Delivery Services
- Webinars and events
- GraphQL and REST
- Adobe Developer App Builder
- Store Administration
- Customer Management
- Catalog Management
- Content Management
- Marketing Tools
- Orders and Fulfillment
- B2B for Adobe Commerce
- Tools and External services
- Commerce Intelligence
- Commerce Upgrades
- Back-end Development
- Native Front-end Luma Development
- Headless Architecture