Skip to content
  • Ghost User @ghost ·

    Đây là code file app._index.jsx ạ . Anh có thể xem qua giao diện của em xem chuẩn chưa ạ .

    ` import { useEffect } from "react"; import { json } from "@remix-run/node"; import { useFetcher, useLoaderData } from "@remix-run/react"; import { Page, Layout, Text, Card, Button, BlockStack, Box, List, Link, InlineStack, } from "@shopify/polaris"; import { TitleBar, useAppBridge } from "@shopify/app-bridge-react"; import { authenticate } from "../shopify.server"; import ProductList from "./product";

    export const loader = async ({ request }) => { const { admin } = await authenticate.admin(request);

    const response = await admin.graphql( #graphql query getAllProducts { products(first: 10) { edges { node { id totalInventory title handle featuredImage { id } images(first:10) { edges { node { transformedSrc } } } status variants(first: 10) { edges { node { id price barcode createdAt } } } } } } } ); const responseJson = await response.json();

    return json({ products: responseJson.data.products.edges }); };

    export const action = async ({ request }) => { const { admin } = await authenticate.admin(request);

    const color = ["Red", "Orange", "Yellow", "Green"][ Math.floor(Math.random() * 4) ]; const response = await admin.graphql( #graphql mutation populateProduct($input: ProductInput!) { productCreate(input: $input) { product { id title totalInventory handle status images(first:1) { edges { node { transformedSrc } } } variants(first: 10) { edges { node { totalInventory id price barcode createdAt } } } } } }, { variables: { input: { title: ${color} Snowboard, }, }, }, ); const responseJson = await response.json(); const variantId = responseJson.data.productCreate.product.variants.edges[0].node.id; const variantResponse = await admin.graphql( #graphql mutation shopifyRemixTemplateUpdateVariant($input: ProductVariantInput!) { productVariantUpdate(input: $input) { productVariant { id price barcode createdAt } } }, { variables: { input: { id: variantId, price: Math.random() * 100, }, }, }, ); const variantResponseJson = await variantResponse.json();

    return json({ product: responseJson.data.productCreate.product, variant: variantResponseJson.data.productVariantUpdate.productVariant, }); };

    export default function Index() { const fetcher = useFetcher(); const shopify = useAppBridge(); const products = useLoaderData().products; const isLoading = ["loading", "submitting"].includes(fetcher.state) && fetcher.formMethod === "POST"; const productId = fetcher.data?.product?.id.replace( "gid://shopify/Product/", "", );

    useEffect(() => { if (productId) { shopify.toast.show("Product created"); } }, [productId, shopify]);

    const generateProduct = () => fetcher.submit({}, { method: "POST" });

    return ( Generate a product <Layout.Section> Congrats on creating a new Shopify app 🎉 This embedded app template uses{" "} App Bridge {" "} interface examples like an{" "} additional page in the app nav , as well as an{" "} Admin GraphQL {" "} mutation demo, to provide a starting point for app development. Get started with products Generate a product with GraphQL and get the JSON output for that product. Learn more about the{" "} productCreate {" "} mutation in our API references. Generate a product {fetcher.data?.product && ( <Button url={shopify:admin/products/${productId}} target="_blank" variant="plain" > View product )} {fetcher.data?.product && ( <> productCreate mutation <pre style={{ margin: 0 }}> {JSON.stringify(fetcher.data.product, null, 2)} productVariantUpdate mutation <pre style={{ margin: 0 }}> {JSON.stringify(fetcher.data.variant, null, 2)} </> )} </Layout.Section> <Layout.Section variant="oneThird"> App template specs Framework Remix Database Prisma Interface Polaris {", "} App Bridge API GraphQL API Next steps <List.Item> Build an{" "} {" "} example app {" "} to get started </List.Item> <List.Item> Explore Shopify’s API with{" "} GraphiQL </List.Item> </Layout.Section> <Layout.Section> Quản lí hàng trong kho {products && ( // <Box // padding="400" // background="bg-surface-active" // borderWidth="025" // borderRadius="200" // borderColor="border" // overflowX="scroll" // > // <pre style={{ margin: 0 }}> // {JSON.stringify(products, null, 2)} // // )} </Layout.Section> {/* <Layout.Section> All Products {products && ( <pre style={{ margin: 0 }}> {JSON.stringify(products, null, 2)} 

                )}
          </BlockStack>
        </Card>
      </Layout.Section> */}
    </Layout>
  </BlockStack>
</Page>

    ); }`

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment