カスタムブロック & AI
アプリに必要なら、作れます。
既に使用しているエディタとAIサブスクリプションで、ライブのShopifyデータに対して実際のReact Nativeブロックを書きましょう。独自のAIなし、マークアップなし、ロックインなし。
01import { useCart } from '@evlop/shopify';02import { View, Pressable } from 'react-native';0304export function StorefrontHeader() {05 const cart = useCart();06 return <HeaderShell>07 <PredictiveSearch />08 <AccountButton />09 <CartButton count={cart.lines?.length ?? 0} />10 </HeaderShell>;11}
置換 とStorefrontHeader.tsx
あなたのエディタ + あなたのAI
“置き換え用アプリヘッダーを作成し、予測検索、アカウントアクセス、ライブカート数を表示します。”
既存のサブスクリプションをご利用ください · Evlopからの追加AI料金はかかりません ライブプレビューが接続されましたアプリヘッダーの置き換えの準備ができましたiOS + Android
作成。割り当て。置き換え。
カスタムブロック。
React Nativeで新しいカスタムブロックを作成します。セクションとして追加するか、アプリの組み込みヘッダー、サイドメニュー、商品カード、コレクションカード、またはフッターの置き換えに割り当てます。
INSERT とNewArrivalsSection.tsx
配置対象カスタムセクションこの画面に新しいブロックが挿入されました
新しいセクションブロックNewArrivalsSection.tsx新規カスタムブロック · React Native
新しいセクションブロックを作成し、任意の画面に配置します。
セクションを再利用可能な React Native ブロックとして構築し、必要なデータと動作を接続した上で、アプリ内の適切な場所に挿入します。
01新しいブロックを作成→02画面にブロックを追加
商品コレクションメタフィールド
接続した AI アシスタントを使用新しいエディトリアル到着セクションを作成し、ショッピング可能な商品レールを配置します。
01import { useProducts } from '@evlop/shopify';02import { View } from 'react-native';0304export function NewArrivalsSection() {05 const products = useProducts({06 query: 'tag:new-arrival'07 });0809 return <EditorialRail products={products} />;10}
ストアがランタイムです
Shopify のデータを任意のインターフェースへ
カスタムブロックはライブコマースや購入者コンテキストを読み取り、ネイティブアクションを呼び出し、追加の Storefront API データをクエリできます。その結果、装飾だけでなく実用的なカスタム UI が実現します。
公式パッケージ@evlop/shopify型付きデータ · ネイティブアクション · ライブ更新
01import {02 useCart, useProducts, useMetaobjects,03 useStorefrontQuery04} from '@evlop/shopify';0506const cart = useCart();07const products = useProducts({ query: 'tag:editorial' });08const customer = useStorefrontQuery(CUSTOMER_QUERY);09const stories = useMetaobjects({ metaobjectType: 'story' });
ライブデータ
他に必要なものはありますか？任意の Storefront API フィールドをクエリするか、承認済みの外部サービスと接続できます。
お好みのエディタと AI を持ち込む
AI ワークフローを使用し、すでに信頼している
Custom Blocks のコードワークスペースを好みのエディタに接続し、すでにお持ちの AI コーディングアシスタントとサブスクリプションを利用してください。Evlop はモデルをプロキシせず、AI トークンを計測せず、ブロックを特定のプロバイダーにロックしません。
Custom Blocks のコードワークスペースを、チームがすでに使用しているエディタに接続します。
すでにお持ちのコーディングアシスタントと AI アカウントを使用してください — Evlop は独自のモデルを必要としません。
EvlopはAIトークンを計測せず、プランに別途AI利用料を加算しません。
エディタやAIプロバイダーを変更しても、Evlopでのカスタムブロックの動作は変わりません。
予測検索、顧客向け挨拶、ライブカート数を備えた置き換えヘッダーを作成
React NativeShopify データアプリテーマ
あなたのAIビルド→
01import { useCart } from '@evlop/shopify';02import { View, Pressable } from 'react-native';0304export function StorefrontHeader() {05 const cart = useCart();06 return <HeaderShell>07 <PredictiveSearch />08 <CustomerGreeting />09 <CartButton count={cart.lines?.length ?? 0} />10 </HeaderShell>;11}
お好みの開発環境でカスタムブロックのワークスペースを開く。
既存のAIコーディングアカウントとサブスクリプションを利用できます—Evlopからの追加AI料金はかかりません。
実際のデバイスでライブ Shopify データとブロックを確認・調整します。
組み込みのサーフェスを置き換えるか、新しいブロックを画面に挿入します。
本番向けに構築
無限の自由、下層プラットフォーム
カスタムは切り離しではありません。すべてのブロックは同じネイティブアプリ、コマースランタイム、デザインシステム、プレビュー、公開ワークフローの一部です。
本格的な React Native
カスタムブロックはウェブ埋め込みではなくネイティブの React コンポーネントです。レイアウト、インタラクション、パフォーマンスは iOS と Android で自然に機能します。
デフォルトで Shopify 対応
Evlop の Shopify パッケージと Storefront クエリを使用して、商品、コレクション、カート、顧客コンテキスト、メタフィールド、メタオブジェクトなどを任意のブロックに取り込むことができます。
アプリシステムに接続済み
アプリのカラー、タイポグラフィ、テーマ、ローカリゼーション、ナビゲーション、ネイティブアクションを再利用し、基盤を再構築する必要はありません。
すぐにプレビューして公開
実機テストデバイスで変更を実行し、体験を洗練させ、アプリストアの新規審査を待たずに公開できます。
一般的なクエリ
よくある質問。
Custom Block の構築、動作、プレビュー、公開に関する実践的な回答。
新しいブロックを作成し、セクションとして追加するか、アプリの標準ヘッダー、サイドメニュー、商品カード、コレクションカード、フッターのいずれかと置き換えるよう割り当てます。また、アカウント体験、カートインターフェース、キャンペーンモジュール、その他目的別の機能も作成できます。