または

<div id="注文追跡アプリ"></div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;

関数 OrderTrackingApp() {
const [trackingNumber, setTrackingNumber] = useState('');
const [orderNumber, setOrderNumber] = useState('');
const [trackingDetails、setTrackingDetails] = useState(null);
const [error, setError] = useState('');
const [ロード中、setLoading] = useState(false);

const fetchData = async (url) => {
読み込みを true に設定します。
エラーを設定します。
トラッキングの詳細を設定します(null);

const shopUrl = Shopify.shop;
const fullUrl = `https://${shopUrl}/apps/proxy${url}`;

試す {
const response = await fetch(fullUrl, {
ヘッダー: {
'ngrok-skip-browser-warning': '69420',
「承認」: 「application/json」,
'X-Requested-With': 'XMLHttpRequest'
}
});
応答がOKの場合
新しいエラーをスローします(`HTTP エラー! ステータス: ${response.status}`);
}
const data = response.json() を待機します。
if (データエラー) {
setError(data.error);
} それ以外 {
トラッキングの詳細を設定します(データ);
}
} キャッチ (エラー) {
console.error('フェッチエラー:', err);
setError('情報の取得中にエラーが発生しました。もう一度お試しください。');
} ついに {
Loading を false に設定します。
}
};

const handleSubmit = async (e, type) => {
e.preventDefault();
const value = type === 'tracking' ?trackingNumber: orderNumber;
if (!value.trim()) {
setError(`有効な ${type === 'tracking' ? 'tracking' : 'order'} 番号を入力してください。`);
戻る;
}
const エンコードされた値 = encodeURIComponent(値);
fetchData を待機します(`/${type === 'tracking' ? 'checkstatus' : 'orderTracking'}/${encodedValue}`);
};

戻る （
<div className="max-w-2xl mx-auto p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl shadow-lg">
<h1 className="text-4xl font-extrabold text-center text-indigo-800 mb-8">注文追跡</h1>
<div className="space-y-6">
<form onSubmit={(e) => handleSubmit(e, 'tracking')} className="flex flex-col sm:flex-row gap-4">
<入力
タイプ="テキスト"
値={追跡番号}
onChange={(e) => setTrackingNumber(e.target.value)}
placeholder="追跡番号を入力"
className="flex-1 p-3 border border-indigo-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
/>
<button type="submit" className="w-full sm:w-auto bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition duration-300 ease-in-out transform hover:-translate-y-1">
追跡ごとに追跡
</ボタン>
</フォーム>
<form onSubmit={(e) => handleSubmit(e, 'order')} className="flex flex-col sm:flex-row gap-4">
<入力
タイプ="テキスト"
値={注文番号}
onChange={(e) => setOrderNumber(e.target.value)}
placeholder="注文番号を入力してください"
className="flex-1 p-3 border border-indigo-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
/>
<button type="submit" className="w-full sm:w-auto bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition duration-300 ease-in-out transform hover:-translate-y-1">
注文を追跡する
</ボタン>
</フォーム>
</div>
{loading && <p className="text-center text-indigo-600 mt-6 animate-pulse">読み込み中...</p>}
{エラー && <p className="text-center text-red-600 mt-6 bg-red-100 p-3 rounded-lg">{エラー } }
{追跡詳細 && (
<div className="mt-8 bg-white p-6 rounded-xl shadow-md border border-indigo-100">
<h2 className="text-2xl font-bold mb-4 pb-2 border-b-2 border-indigo-200 text-indigo-800">追跡詳細</h2>
<div className="グリッド グリッド列 1 md:グリッド列 2 ギャップ 4">
<p><span className="font-semibold text-indigo-700">ステータス:</span> <span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded">{trackingDetails.stage}</span></p>
<p><span className="font-semibold text-indigo-700">説明:</span> {trackingDetails.description</p>
<p><span className="font-semibold text-indigo-700">最終更新日:</span> {new Date(trackingDetails.time_utc).toLocaleString()}</p>
{追跡詳細.追跡ID?(
<p><span className="font-semibold text-indigo-700">トラッキングID:</span> {trackingDetails.tracking_id</p>
) : (
<p><span className="font-semibold text-indigo-700">注文番号:</span> {trackingDetails.order_number</p>
)}
<p><span className="font-semibold text-indigo-700">運送業者:</span> {trackingDetails.carrier || 'N/A'</p>
{trackingDetails.tracking_url && (
<p className="col-span-full">
<span className="font-semibold text-indigo-700">トラッキングURL:</span>
<a href={trackingDetails.tracking_url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline ml-1 inline-flex items-center">
詳細な追跡を表示
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</p>
)}
</div>
</div>
)}
</div>
）;
}

ReactDOM.render(<OrderTrackingApp />, document.getElementById('order-tracking-app'));
</スクリプト>