Add the purchase option extensions template #142
Conversation
Yes, we have an epic with what need to be shipped first. |
JulienHe
changed the title
| "dependencies": { | ||
| "react": "^18.0.0", | ||
| "@shopify/ui-extensions": "unstable", | ||
| "@shopify/ui-extensions-react": "unstable" |
There was a problem hiding this comment.
These should be pointing to the latest stable calver (10-24) not to unstable
| extend(PRODUCT_TARGET, (root, {i18n, close, data}) => { | ||
| PurchaseOptionsAction(root, {i18n, close, data}); | ||
| }); | ||
|
|
||
| extend(PRODUCT_VARIANT_TARGET, (root, {i18n, close, data}) => { | ||
| PurchaseOptionsAction(root, {i18n, close, data}); | ||
| }); |
There was a problem hiding this comment.
These should be extension instead of extend (many of the other templates are wrong and will be updated soon)
Also the export default and separate file comment applies here too
There was a problem hiding this comment.
Thanks for giving all these insight, I changed the templates :)
| reactExtension(PRODUCT_TARGET, () => ( | ||
| <AdminSubsAction extension={PRODUCT_TARGET} /> | ||
| )); | ||
|
|
||
| reactExtension(PRODUCT_VARIANT_TARGET, () => ( | ||
| <AdminSubsAction extension={PRODUCT_VARIANT_TARGET} /> | ||
| )); |
There was a problem hiding this comment.
I am checking on this but I think We need two separate files, each with an export default reactExtension.... They can both import and share a third file with the actual component if you like.
Why -- because we have a future change to our build system that uses the default export from the source files to create named exports in the build files.
There was a problem hiding this comment.
Changed the templates, thanks for catching it!
| "license": "UNLICENSED", | ||
| "dependencies": { | ||
| "react": "^18.0.0", | ||
| "@shopify/ui-extensions": "2024.10.x", |
There was a problem hiding this comment.
I think this has to be set to unstable as the new targets weren't part of the 2024-10 release
| import {reactExtension} from '@shopify/ui-extensions-react/admin'; | ||
| import PurchaseOptionsActionExtension from './PurchaseOptionsActionExtension'; | ||
|
|
||
| reactExtension('admin.product-purchase-option.action.render', () => ( |
There was a problem hiding this comment.
| reactExtension('admin.product-purchase-option.action.render', () => ( | |
| export default reactExtension('admin.product-purchase-option.action.render', () => ( |
| import {extension} from '@shopify/ui-extensions/admin'; | ||
| import PurchaseOptionsActionExtension from './PurchaseOptionsActionExtension'; | ||
|
|
||
| extension( |
There was a problem hiding this comment.
| extension( | |
| export default extension( |
| import {reactExtension} from '@shopify/ui-extensions-react/admin'; | ||
| import PurchaseOptionsActionExtension from './PurchaseOptionsActionExtension'; | ||
|
|
||
| reactExtension('admin.product-variant-purchase-option.action.render', () => ( |
There was a problem hiding this comment.
| reactExtension('admin.product-variant-purchase-option.action.render', () => ( | |
| export default reactExtension('admin.product-variant-purchase-option.action.render', () => ( |
| import {extension} from '@shopify/ui-extensions/admin'; | ||
| import PurchaseOptionsActionExtension from './PurchaseOptionsActionExtension'; | ||
|
|
||
| extension( |
There was a problem hiding this comment.
| extension( | |
| export default extension( |
| }; | ||
|
|
||
| function handleSave() { | ||
| // This is where you can use the sellingPlanGroupsCreate and sellingPlanGroupsUpdate mutations |
There was a problem hiding this comment.
Will running this for products or variants change how a dev would call these mutations? If so, should we have an example of how to tell which one we're rendering?
There was a problem hiding this comment.
I think the sellingPlanGroupsUpdate mutation doesn't need to know about product vs variant. You make a good point that this example isn't enough though. We'd need to actually call the mutations for adding variants and products correctly and those are different. Could we add a complete example @JulienHe ?
I wrote some pseudo code here where the extension passes in the right mutation to use.
Background
The selling strategies is introducing 2 new admin action:
admin.product-purchase-option.action.renderadmin.product-variant-purchase-option.action.renderWe are shipping a new template so apps partners can use it and have a first starter when they want to work with these new extensions
Solution
We are adding the new extensions to the available templates.
Checklist