shopify主题api创建主题

Question

关于开发，我是一个完全菜鸟，但我正在尝试在shopify上创建我的第一个应用程序。在应用程序中，我希望创建一个按钮，单击该按钮即可安装主题，它现在在shopify上的样子。但是，我对您的操作方式一无所知。

POST /admin/api/2020-01/themes.json
{
  "theme": {
    "name": "Lemongrass",
    "src": "http://themes.shopify.com/theme.zip",
    "role": "main"
  }
}

我如何做到这一点，当用户单击按钮时，主题将安装在他们的商店中。我正在使用node.js并做出响应以创建应用。

我在themedownload.js文件中包含此代码

const themeDownload = async (ctx, accessToken, shop) => {
  const query = JSON.stringify({
          "theme": {
            "name": "Lemongrass",
            "src": "https://codeload.github.com/Shopify/skeleton-theme/zip/master",
            "role": "unpublished"
            }
  });

  const response = await fetch(`https://${shop}/admin/api/2020-01/themes.json`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      "X-Shopify-Access-Token": accessToken,
    },
    body: query
  })

  const responseJson = await response.json();
};

module.exports = themeDownload;

[不确定这将如何工作，但是，我将如何在另一个文件中创建一个函数，因此当单击按钮时它将运行themedownload.js文件。我确实希望我要问/说的是有道理的。

反应页面结构

const themeDownload = require('../server/themeDownload');

import React, {useCallback, useState} from 'react';
import {
  Button,
  Card,
  Form,
  FormLayout,
  Layout,
  Page,
  SettingToggle,
  Stack,
  TextField,
  TextStyle,
  DisplayText,
SkeletonBodyText, SkeletonPage, Modal, TextContainer, Heading, Badge
} from '@shopify/polaris';



export default function ModalExample() {
  const [active, setActive] = useState(false);

  const handleChange = useCallback(() => setActive(!active), [active]);

  const themeDown = useCallback(
      () => themeDownload(), 
      [],
  );

  return (
    <div style={{height: '500px'}}>
      <SkeletonPage title="Theme Library">
          <Layout>
            <Layout.Section>
              <Card sectioned>
                <Stack>
                  <Stack.Item fill>
                    <Heading>Themes</Heading>
                  </Stack.Item>
                  <Stack.Item>
                    <Button primary onClick={handleChange}>Add theme</Button>
                  </Stack.Item>
                </Stack>
              </Card>
            </Layout.Section>
          </Layout>
        </SkeletonPage>
      <Modal
        open={active}
        onClose={handleChange}
        title="Add Debutle"
        primaryAction={{
          content: 'Add to theme library',
          onAction: themeDown,
        }}
      >
        <Modal.Section>
          <TextContainer>
            <p>
              When adding theme to library, the theme will be set as unpublished.
            </p>
          </TextContainer>
        </Modal.Section>
      </Modal>
    </div>
  );
}

Answer 1

坦白讲，这是一项非常复杂的任务。与Shopify一起工作我知道主题可能令人沮丧，因此我将首先编写一些伪代码。