@shopify/ui-extensions 2025.10.13 → 2025.10.14

package/src/surfaces/admin/api/purchase-options-card/examples/validate-selling-plan.jsx

@@ -0,0 +1,47 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {data} = shopify;
+  const [plan, setPlan] = useState(null);
+
+  const {sellingPlanId} = data.selected[0];
+
+  const handleValidate = async () => {
+    const {data: planData} = await shopify.query(
+      `query GetSellingPlan($id: ID!) {
+        sellingPlanGroup(id: $id) {
+          sellingPlans(first: 1) {
+            edges {
+              node {
+                id
+                name
+                options
+              }
+            }
+          }
+        }
+      }`,
+      {variables: {id: sellingPlanId}},
+    );
+
+    setPlan(planData.sellingPlanGroup.sellingPlans.edges[0]?.node);
+    setTimeout(() => shopify.close(), 2000);
+  };
+
+  return (
+    <s-admin-action title="Validate Selling Plan">
+      <s-button onClick={handleValidate}>Check Plan Details</s-button>
+      {plan && (
+        <>
+          <s-text>Plan: {plan.name}</s-text>
+          <s-text>Options: {plan.options.length}</s-text>
+        </>
+      )}
+    </s-admin-action>
+  );
+}

package/src/surfaces/admin/api/purchase-options-card-action.ts

@@ -1,10 +1,20 @@
 import {ActionExtensionApi} from './action/action';
 import type {ExtensionTarget as AnyExtensionTarget} from '../extension-targets';
 
+/**
+ * The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.
+ */
 export interface PurchaseOptionsCardConfigurationApi<
   ExtensionTarget extends AnyExtensionTarget,
 > extends ActionExtensionApi<ExtensionTarget> {
+  /** Selected purchase option data including product and selling plan identifiers. */
   data: {
-    selected: {id: string; sellingPlanId?: string}[];
+    /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */
+    selected: {
+      /** The product or variant identifier. */
+      id: string;
+      /** The associated selling plan identifier, if a subscription option is selected. */
+      sellingPlanId?: string;
+    }[];
   };
 }

package/src/surfaces/admin/api/resource-picker/examples/action.jsx

@@ -0,0 +1,25 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({
+      type: 'product',
+      action: 'add',
+    });
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Products</s-button>
+      {selected && <s-text>{selected.length} products selected</s-text>}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/resource-picker/examples/collection-picker.jsx

@@ -0,0 +1,22 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({type: 'collection'});
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Collections</s-button>
+      {selected && <s-text>{selected.length} collections selected</s-text>}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/resource-picker/examples/filter-query.jsx

@@ -0,0 +1,22 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({type: 'product'});
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Products</s-button>
+      {selected && <s-text>{selected.length} products selected</s-text>}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/resource-picker/examples/filters.jsx

@@ -0,0 +1,27 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({
+      type: 'product',
+      filter: {
+        published_status: 'published',
+      },
+    });
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Published Products</s-button>
+      {selected && <s-text>{selected.length} products selected</s-text>}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/resource-picker/examples/multiple-limited.jsx

@@ -0,0 +1,25 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({
+      type: 'product',
+      multiple: 5,
+    });
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Products</s-button>
+      {selected && <s-text>{selected.length} products selected</s-text>}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/resource-picker/examples/multiple-unlimited.jsx

@@ -0,0 +1,25 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({
+      type: 'product',
+      multiple: true,
+    });
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Products</s-button>
+      {selected && <s-text>{selected.length} products selected</s-text>}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/resource-picker/examples/product-picker.jsx

@@ -0,0 +1,22 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({type: 'product'});
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Products</s-button>
+      {selected && <s-text>{selected.length} products selected</s-text>}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/resource-picker/examples/product-variant-picker.jsx

@@ -0,0 +1,22 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({type: 'variant'});
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Variants</s-button>
+      {selected && <s-text>{selected.length} variants selected</s-text>}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/resource-picker/examples/query.jsx

@@ -0,0 +1,25 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({
+      type: 'product',
+      query: 'shirt',
+    });
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Products</s-button>
+      {selected && <s-text>{selected.length} products selected</s-text>}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/resource-picker/examples/selection-ids.jsx

@@ -0,0 +1,28 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({
+      type: 'product',
+      selectionIds: [
+        'gid://shopify/Product/123',
+        'gid://shopify/Product/456',
+      ],
+    });
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Products</s-button>
+      {selected && <s-text>{selected.length} products selected</s-text>}
+    </s-admin-block>
+  );
+}

package/src/surfaces/admin/api/resource-picker/examples/selection.jsx

@@ -0,0 +1,22 @@
+import {render} from 'preact';
+import {useState} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const [selected, setSelected] = useState(null);
+
+  const handlePick = async () => {
+    const result = await shopify.resourcePicker({type: 'product'});
+    setSelected(result);
+  };
+
+  return (
+    <s-admin-block heading="Resource Picker">
+      <s-button onClick={handlePick}>Select Products</s-button>
+      {selected && <s-text>{selected.length} products selected</s-text>}
+    </s-admin-block>
+  );
+}