0

在开发方面，我是一个完全的菜鸟，但我正在尝试在 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>
  );
}
4

1 回答 1

0

老实说，这是一项相当复杂的任务。使用 Shopify 我知道主题是多么令人沮丧，我会从编写一些伪代码开始。

User clicks button, post request gets sent, app catches request, themes gets installed, configuration.

我将从按钮开始并修改您自己的主题。@hat 代码你有吗？

于 2020-02-19T20:38:24.643 回答