Den Zweck des Ordners „web-src“ erkennen
- Themen:
- API-Mesh
- App Builder
- Erweiterbarkeit
Erstellt für:
- Einsteiger
- Fortgeschrittener
- Entwickler
Der Ordner „web-src“ für diese Beispielanwendung enthält viele JavaScript-Dateien und -Ordner. Dieser Ordner wird für Programme mit einer Benutzeroberfläche verwendet. Nicht alle Anwendungen verwenden diese Funktion. Beispielsweise erfordert eine Commerce-Integration mit einem externen Bestandsverwaltungssystem möglicherweise keine Frontend-Oberfläche und keinen Frontend-Code.
Für wen ist dieses Video bestimmt?
- Entwicklerinnen und Entwickler, die neu in Adobe Commerce sind und nur über eingeschränkte Erfahrung mit Adobe App Builder verfügen und mehr über den
web-src
und dessen Inhalte erfahren.
Videoinhalt
- Was ist der Hauptzweck des
web-src
Ordners? - Normalerweise eingeschlossene Dateien und Ordner
- Verwendung des
web-src
Ordners und der darin enthaltenen Inhalte im Beispielprogramm
Code-Beispiele
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
Angenommen, es besteht die Notwendigkeit, alle aktuellen Produkte von Adobe Commerce anzufordern. Die resultierende URL würde
{{base_url}}rest/V1/products?searchCriteria=all
ähneln. Je nach Größe des von zurückgegebenen Katalogs kann die JSON zu groß für App Builder sein. Verwenden Sie stattdessen Paginierung und stellen Sie einige Anfragen, um Response is not valid 'message/http'.
zu vermeidenIm folgenden Beispiel beschränkt das Codebeispiel not
die Anfrage. Um einen 400-Fehler zu vermeiden, reduzieren Sie die Größe der Antwort mithilfe von 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 }
}