Skip to content

[Target APIs content]: Examples and descriptions for 2025-04#3808

Open
SteveSill wants to merge 9 commits into2025-04from
admin-ui-examples-2025-04
Open

[Target APIs content]: Examples and descriptions for 2025-04#3808
SteveSill wants to merge 9 commits into2025-04from
admin-ui-examples-2025-04

Conversation

@SteveSill
Copy link

@SteveSill SteveSill commented Feb 3, 2026

[Admin UI Extensions 2025-04]: Add code examples for Target APIs

Summary

This PR adds comprehensive code examples for all Admin UI Extension Target APIs in the 2025-04 version. All examples follow the modern Preact pattern established in POS UI Extensions, using .jsx files with the global shopify object.

What's Changed

image

New Examples Created (36 files)

Added working code examples for 8 APIs that previously had none:

Core APIs:

  • Action Extension API (3 examples)
  • Block Extension API (3 examples)
  • Print Action Extension API (3 examples)
  • Standard API (3 examples)

Contextual APIs:

  • Customer Segment Template Extension API (3 examples)
  • Discount Function Settings API (3 examples)
  • Validation Settings API (3 examples)
  • Order Routing Rule API (3 examples)
  • Product Details Configuration API (3 examples)
  • Product Variant Details Configuration API (3 examples)
  • Purchase Options Card Configuration API (3 examples)

Utility APIs:

  • Should Render API (3 examples)

Existing Examples Updated (26 files)

Updated all Intents API examples to follow the new pattern:

  • Converted from .js to .jsx
  • Added full Preact rendering with UI components
  • Updated to use global shopify object
  • Improved example titles and descriptions

Updated 11 existing .doc.ts files with:

  • Example sections with meaningful descriptions
  • Correct API categorization (category: 'Target APIs', proper subCategory)
  • Fixed API names (added " API" suffix where needed)
  • Action-oriented example titles
  • Proper backticks for code terms in descriptions
  • Links to GraphQL Admin API documentation

Technical Details

Example Pattern

All examples now follow the POS UI Extensions pattern:

import {render} from 'preact';
import {useState} from 'preact/hooks';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  const {data} = shopify;
  
  // Use shopify.query(), shopify.close(), etc.
  
  return <s-admin-block>...</s-admin-block>;
}

Key Changes

  1. Global shopify object - Changed from useApi(TARGET) to global shopify for consistency with POS
  2. Full Preact components - All examples include complete UI rendering, not just API calls
  3. Real-world scenarios - Examples demonstrate practical use cases with error handling, loading states, and user feedback
  4. Runnable extensions - Customer Segment Template and Should Render return data without UI rendering

Related

Checklist

  • I have 🎩'd these changes
  • I have updated relevant documentation

@SteveSill SteveSill changed the base branch from 2026-04-rc to 2025-04 February 3, 2026 08:04
@SteveSill SteveSill changed the title Admin UI examples 2025 04 [Target APIs content]: Examples and descriptions for 2025-04 Feb 3, 2026
@SteveSill SteveSill self-assigned this Feb 3, 2026
@SteveSill SteveSill marked this pull request as ready for review February 4, 2026 18:47
@github-actions
Copy link
Contributor

github-actions bot commented Feb 4, 2026

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset directory. If the changes are user-facing and should cause a version bump, run yarn changeset to track your changes and include them in the next release CHANGELOG. If you are making simple updates to repo configuration, examples, or documentation, you do not need to add a changeset.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant