[Target APIs content]: Examples and descriptions for 2024-01

[SteveSill]

[Admin UI Extensions 2024-01]: Add code examples for Target APIs

Summary

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

What's Changed

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

• Follows pattern established in POS UI Extensions (updated Dec 2024)
• Complements PR [Target APIs]: Description improvements for version 2026-01 #3770 (Target API descriptions for 2026-01)
• Part of ongoing Target APIs documentation improvement initiative

Checklist

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

[github-actions]

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.