保存自定义表单数据并使用Node.js和React在Shopify的店面中使用它

编程问答 2022-06-12

问题描述

我仍在学习shopify应用开发，

我遵循了THIS教程，并通过检查shopify文档创建了一个简单的应用设置页面。

现在我的“应用程序”页面如下所示

enter image description here

现在，我要保存此数据，并使用该数据在结帐时对购物车总计进行一些更改。因此，目前我所关心的是，如何存储数据？

一旦存储了数据，如果这两个字段均已填写，如何在结帐页面上创建自定义字段？

我的code与上面的教程中的解释完全相同，而我当前的Index类如下所示。

import { EmptyState,Page,Layout,Formlayout,Card,TextField } from "@shopify/polaris";

function Index() {
    return (
        <Page
        title="App Settings"
        subtitle="All App related settings will go here"
        primaryAction={{content: 'Save'}}>
            <Layout>
                <Layout.AnnotatedSection
                title="API Settings"
                description="Get API Key and API secret.">
                <Card title="API Key and API secret" sectioned>
                <Formlayout>
                    <TextField label="API Key" onChange={() => {}} />
                    <TextField label="API Secret" onChange={() => {}} />
                </Formlayout>
                </Card>
                </Layout.AnnotatedSection>
            </Layout>
        </Page>
    )
};

export default Index;

我的项目结构如下。

enter image description here

自最近两天以来，我一直在努力解决这个问题，但是在此学习阶段，我没有找到任何有用的资源可供参考。

如果可以的话，请提供有用的资源/教程/链接/代码。

解决方法

显示购物车页面上的运费。您需要做的是 将this site

之类的Google Map集成到您的购物车页面
  • 整合地图后，您需要明智地获取地区名称/国家/地区。
  • 然后，您需要调用此Shopify Shipping Zone API并获取在Shopify运费设置中配置的可用运费。
  • 在API的响应中，根据购物车页面中输入的位置匹配区域/国家/地区，并显示运费。

Reference（不完全相同，仅作为示例）

polarisreactjsreactjsreactjsreactjsshopifyshopifyshopify-app