カスタムアプリにpostをしたい
@nomin 様
興味があり調査してみました。
※専門家ではないため、より詳しい方からの回答をお待ちいただいた方が良いかもしれません。
> カスタムアプリへのpostってそもそも可能なのでしょうか？
可能かと思います。
下記のチュートリアルをベースにされていると思いますので、その前提で回答いたします。
https://shopify.dev/docs/apps/getting-started/create
プロジェクトディレクトの中の /app/routes/ ディレクトリの直下に、例えば、text.jsxというファイルを作ります。
test.jsxの内容を下記のようにします。
/** @typedef {import("@remix-run/node").ActionArgs} ActionArgs */
import { json } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";
export
/**
* @param {request} ActionArgs
* @returns {FunctionResult}
*/
async function action({ request }) {
const body = await request.formData();
const name = body.get("visitorsName");
return json({ message: `Hello, ${name}` });
}
export default function Test() {
const data = /** @type {action} */ useActionData();
return (
<Form method="post">
<p>
<label>
What is your name?
<input type="text" name="visitorsName" />
</label>
</p>
<p>{data ? data.message : "Waiting..."}</p>
</Form>
);
}このコードはRemixのチュートリアルから拝借して少し調整したものです。
https://remix.run/docs/en/main/hooks/use-action-data
そうしましたら、
npm run dev を実行し、
パートナーダッシュボードのアプリ管理より、
今回作成したカスタムアプリの設定画面にアクセスします。
メニューから「アプリ設定」にアクセスし、
アプリURLを取得します。
取得したアプリURLにtestとつけアクセスします。
URLは下記のようになるはずです。
https://xxxxxxxxxx-xxxxxxx-xxxxxxxxx.trycloudflare.com/test
そうしますと、
下図のような画面が表示されるはずです。
"What is your name?" に、例えば "hoge" と入れて、Enterを押せば、そのデータが自分自身にPOSTされます。
すると、"Waiting..." の箇所に、"Hello, hoge" と表示されるはずです。
あとは、最初に貼ったコードをご希望の形になるように編集いただけば、
目的を達成できるのではないかと思います。
なお、顧客自身に会員情報を変更させることについては、
下記のアプリでも実現できます。
https://apps.shopify.com/customr?locale=ja
ご予算に余裕があればご検討いただいても良いかもしれません。
ご参考まで。
(キュー田辺)
@nomin 様
興味があり調査してみました。
※専門家ではないため、より詳しい方からの回答をお待ちいただいた方が良いかもしれません。
> カスタムアプリへのpostってそもそも可能なのでしょうか？
可能かと思います。
下記のチュートリアルをベースにされていると思いますので、その前提で回答いたします。
https://shopify.dev/docs/apps/getting-started/create
プロジェクトディレクトの中の /app/routes/ ディレクトリの直下に、例えば、text.jsxというファイルを作ります。
test.jsxの内容を下記のようにします。
/** @typedef {import("@remix-run/node").ActionArgs} ActionArgs */
import { json } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";
export
/**
* @param {request} ActionArgs
* @returns {FunctionResult}
*/
async function action({ request }) {
const body = await request.formData();
const name = body.get("visitorsName");
return json({ message: `Hello, ${name}` });
}
export default function Test() {
const data = /** @type {action} */ useActionData();
return (
<Form method="post">
<p>
<label>
What is your name?
<input type="text" name="visitorsName" />
</label>
</p>
<p>{data ? data.message : "Waiting..."}</p>
</Form>
);
}このコードはRemixのチュートリアルから拝借して少し調整したものです。
https://remix.run/docs/en/main/hooks/use-action-data
そうしましたら、
npm run dev を実行し、
パートナーダッシュボードのアプリ管理より、
今回作成したカスタムアプリの設定画面にアクセスします。
メニューから「アプリ設定」にアクセスし、
アプリURLを取得します。
取得したアプリURLにtestとつけアクセスします。
URLは下記のようになるはずです。
https://xxxxxxxxxx-xxxxxxx-xxxxxxxxx.trycloudflare.com/test
そうしますと、
下図のような画面が表示されるはずです。
"What is your name?" に、例えば "hoge" と入れて、Enterを押せば、そのデータが自分自身にPOSTされます。
すると、"Waiting..." の箇所に、"Hello, hoge" と表示されるはずです。
あとは、最初に貼ったコードをご希望の形になるように編集いただけば、
目的を達成できるのではないかと思います。
なお、顧客自身に会員情報を変更させることについては、
下記のアプリでも実現できます。
https://apps.shopify.com/customr?locale=ja
ご予算に余裕があればご検討いただいても良いかもしれません。
ご参考まで。
(キュー田辺)
コミュニティ・ブログ記事
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024
2023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024
概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー（BFCM）は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024