Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update product-configuration template #73

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Update product-configuration template #73

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1e614b
Update product-configuration template
siddhantbajaj Dec 7, 2023
3a2e74d
Use fragment with map
siddhantbajaj Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 63 additions & 18 deletions product-configuration-extension/src/ProductDetailsConfigurationExtension.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,84 @@
{%- if flavor contains "react" -%}
import {
reactExtension,
useApi,
Text,
render,
BlockStack,
Icon,
InlineStack,
Box,
Divider
} from '@shopify/ui-extensions-react/admin';

// Define the bundle components
const bundleComponents = ['Burger', 'Fries'];

// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
{% if flavor contains "typescript" %}
export default reactExtension<any>('admin.product-details.configuration.render', () => <App />);
{% else %}
export default reactExtension('admin.product-details.configuration.render', () => <App />);
{% endif %}
render('admin.product-details.configuration.render', () => <App />);

// The main App component
function App() {
// Uncomment the following line if you need to access the API
{% if flavor contains "typescript" %}
const {extension: {target}, i18n} = useApi<'admin.product-details.configuration.render'>();
// const {extension: {target}, i18n} = useApi<'admin.product-details.configuration.render'>();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to comment this out?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

linter might complain about unused variables?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm... if we leave this commented out, we ALSO need to comment out 2 lines below (the non-typescript version)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I missed commenting that out.

{% else %}
const {extension: {target}, i18n} = useApi();
{% endif %}

// Render the bundle components
return (
<Text>
{i18n.translate('welcome', {target})}
</Text>
<BlockStack gap="small">
{bundleComponents.flatMap((component, index) => [
<InlineStack gap key={component}>
<Box padding="none" inlineSize="10%">
<Icon name="ImageMajor" size="fill" />
</Box>
<Box padding="large none">
<BlockStack gap="none" padding="none">
<Text fontWeight="bold-200">
{component}
</Text>
</BlockStack>
</Box>
</InlineStack>,
index < bundleComponents.length - 1 && <Divider key={`divider-${index}`} />
])}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of using flatMap (which works :D) it is more common to use map with a Fragment

Suggested change
{bundleComponents.flatMap((component, index) => [
<InlineStack gap key={component}>
<Box padding="none" inlineSize="10%">
<Icon name="ImageMajor" size="fill" />
</Box>
<Box padding="large none">
<BlockStack gap="none" padding="none">
<Text fontWeight="bold-200">
{component}
</Text>
</BlockStack>
</Box>
</InlineStack>,
index < bundleComponents.length - 1 && <Divider key={`divider-${index}`} />
])}
{bundleComponents.map((component, index) =>
<React.Fragment key={component}>
<InlineStack gap>
<Box padding="none" inlineSize="10%">
<Icon name="ImageMajor" size="fill" />
</Box>
<Box padding="large none">
<BlockStack gap="none" padding="none">
<Text fontWeight="bold-200">
{component}
</Text>
</BlockStack>
</Box>
</InlineStack>
{index < bundleComponents.length - 1 && <Divider />}
</React.Fragment>
)}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated. I also had to add an import for react:

import React = require('react');

Let me know If I'm doing something wrong.

</BlockStack>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use <ResourceList /> and <ResourceItem /> components? It would simplify the markup here and I think they are available in the ui-extensions-react library.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, they are available, and are what we actually have in the standard card.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't look like it exists there - https://shopify.slack.com/archives/C04K7BZDH3N/p1702483564729509?thread_ts=1702483485.885719&cid=C04K7BZDH3N

);
}

{%- else -%}
import { extend, Banner } from "@shopify/ui-extensions/admin";
import { extend, Text, BlockStack, Icon, InlineStack, Box, Divider } from "@shopify/ui-extensions/admin";

// Define the bundle components
const bundleComponents = ['Burger', 'Fries'];

extend("admin.product-details.configuration.render", (root, { extension: {target}, i18n }) => {
root.appendChild(
root.createComponent(
Text,
{},
i18n.translate('welcome', {target})
)
);
// Create the main BlockStack
const blockStack = root.createComponent(BlockStack, {gap: "small"});

// For each bundle component, create an InlineStack and append it to the BlockStack
bundleComponents.forEach((component, index) => {
const inlineStack = root.createComponent(InlineStack, {gap: true}, [
root.createComponent(Box, {padding: "none", inlineSize: "10%"}, [
root.createComponent(Icon, {name: "ImageMajor", size: "fill"})
]),
root.createComponent(Box, {padding: "large none"}, [
root.createComponent(BlockStack, {gap: "none", padding: "none"}, [
root.createComponent(Text, {fontWeight: "bold-200"}, component)
])
])
]);

blockStack.appendChild(inlineStack);

// If this is not the last component, append a Divider
if (index < bundleComponents.length - 1) {
blockStack.appendChild(root.createComponent(Divider));
}
});

// Append the main BlockStack to the root
root.appendChild(blockStack);
});
{%- endif -%}
81 changes: 63 additions & 18 deletions product-configuration-extension/src/ProductVariantDetailsConfigurationExtension.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,84 @@
{%- if flavor contains "react" -%}
import {
reactExtension,
useApi,
Text,
render,
BlockStack,
Icon,
InlineStack,
Box,
Divider
} from '@shopify/ui-extensions-react/admin';

// Define the bundle components
const bundleComponents = ['Burger', 'Fries'];

// The target used here must match the target used in the extension's toml file (./shopify.extension.toml)
{% if flavor contains "typescript" %}
export default reactExtension<any>('admin.product-variant-details.configuration.render', () => <App />);
{% else %}
export default reactExtension('admin.product-variant-details.configuration.render', () => <App />);
{% endif %}
render('admin.product-variant-details.configuration.render', () => <App />);

// The main App component
function App() {
// Uncomment the following line if you need to access the API
{% if flavor contains "typescript" %}
const {extension: {target}, i18n} = useApi<'admin.product-variant-details.configuration.render'>();
// const {extension: {target}, i18n} = useApi<'admin.product-variant-details.configuration.render'>();
{% else %}
const {extension: {target}, i18n} = useApi();
{% endif %}

// Render the bundle components
return (
<Text>
{i18n.translate('welcome', {target})}
</Text>
<BlockStack gap="small">
{bundleComponents.flatMap((component, index) => [
<InlineStack gap key={component}>
<Box padding="none" inlineSize="10%">
<Icon name="ImageMajor" size="fill" />
</Box>
<Box padding="large none">
<BlockStack gap="none" padding="none">
<Text fontWeight="bold-200">
{component}
</Text>
</BlockStack>
</Box>
</InlineStack>,
index < bundleComponents.length - 1 && <Divider key={`divider-${index}`} />
])}
</BlockStack>
);
}

{%- else -%}
import { extend, Banner } from "@shopify/ui-extensions/admin";
import { extend, Text, BlockStack, Icon, InlineStack, Box, Divider } from "@shopify/ui-extensions/admin";

// Define the bundle components
const bundleComponents = ['Burger', 'Fries'];

extend("admin.product-variant-details.configuration.render", (root, { extension: {target}, i18n }) => {
root.appendChild(
root.createComponent(
Text,
{},
i18n.translate('welcome', {target})
)
);
// Create the main BlockStack
const blockStack = root.createComponent(BlockStack, {gap: "small"});

// For each bundle component, create an InlineStack and append it to the BlockStack
bundleComponents.forEach((component, index) => {
const inlineStack = root.createComponent(InlineStack, {gap: true}, [
root.createComponent(Box, {padding: "none", inlineSize: "10%"}, [
root.createComponent(Icon, {name: "ImageMajor", size: "fill"})
]),
root.createComponent(Box, {padding: "large none"}, [
root.createComponent(BlockStack, {gap: "none", padding: "none"}, [
root.createComponent(Text, {fontWeight: "bold-200"}, component)
])
])
]);

blockStack.appendChild(inlineStack);

// If this is not the last component, append a Divider
if (index < bundleComponents.length - 1) {
blockStack.appendChild(root.createComponent(Divider));
}
});

// Append the main BlockStack to the root
root.appendChild(blockStack);
});
{%- endif -%}