探索web-src資料夾的用途 web-src-folder
此範例應用程式的web-src資料夾包含許多JavaScript檔案和資料夾。 此資料夾用於具有使用者介面的應用程式。 並非所有應用程式都使用此功能。 例如,Commerce與外部清查管理系統的整合可能不需要前端介面和程式碼。
這部影片是給誰看的?
- 剛開始使用Adobe Commerce但使用AdobeApp Builder經驗有限的開發人員,他們正瞭解
web-src
資料夾及其內容。
視訊內容
web-src
資料夾的主要用途為何?- 通常包含檔案和資料夾
- 如何在範例應用程式中使用
web-src
資料夾及其內容
程式碼範例
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
執行API呼叫時,請確定已使用某種searchCriteria。 您也可以考慮使用分頁。 如果Adobe Commerce的結果太大,可能會符合Adobe Developer App Builder容量,並導致檔案意外結束。 這會導致400錯誤的回應結果。
例如,假設需要向Adobe Commerce請求所有目前產品。 產生的URL類似於
例如,假設需要向Adobe Commerce請求所有目前產品。 產生的URL類似於
{{base_url}}rest/V1/products?searchCriteria=all
。 根據傳回的目錄大小,json可能太大,App Builder無法取用。 改為使用分頁功能,並提出一些要求以避免Response is not valid 'message/http'.
在以下範例中,程式碼範例是限制請求的not
。 若要避免400錯誤,請使用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 — 建立您的第一個應用程式相關頁面
recommendation-more-help
3a5f7e19-f383-4af8-8983-d01154c1402f