Я полный нуб, когда дело доходит до разработки, но я пытаюсь создать свое первое приложение на shopify. В приложении я sh создаю кнопку, которая при нажатии устанавливает тему о том, как она сейчас работает. Тем не менее, я совершенно заблудился от того, как вы это делаете.
POST /admin/api/2020-01/themes.json
{
"theme": {
"name": "Lemongrass",
"src": "http://themes.shopify.com/theme.zip",
"role": "main"
}
}
Как мне сделать так, чтобы, когда пользователь нажимает кнопку, тема устанавливается в его магазине. Я использую node.js и реагирую на создание приложения.
У меня есть этот код внутри загрузки тем. js file
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>
);
}