Découvrez l’objectif du dossier web-src web-src-folder

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.

Pour qui est cette vidéo ?

  • Les développeurs qui découvrent Adobe Commerce avec une expérience limitée de l’utilisation d’Adobe App Builder et qui découvrent les web-src et son contenu.

Contenu vidéo

  • Quel est l’objectif principal de la fonction web-src dossier ?
  • Fichiers et dossiers généralement inclus
  • Comment web-src Le dossier et le contenu à l’intérieur sont utilisés dans l’exemple d’application.

Exemples de code

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
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, le code exemple 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 }
}

Créateur d’applications : créez les pages relatives à votre première application.

recommendation-more-help
3a5f7e19-f383-4af8-8983-d01154c1402f