[i18n Ja] Added new translation for the e-commerce guide in Japanese

src/content/docs/ja/guides/ecommerce.mdx

@@ -0,0 +1,203 @@
+---
+title: E-commerce
+description: E-commerceをAstroサイトに追加する方法
+i18nReady: true
+---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import { Steps } from '@astrojs/starlight/components';
+import ReadMore from '~/components/ReadMore.astro';
+
+Astroでは決済APIからリンク決済まで様々なE-commerceのオプションを提供しています。
+
+## 決済処理オーバーレイ
+
+いくつかの決済サービス(例:[Lemon Squeezy](#lemon-squeezy)、 [Paddle](#paddle))などはウェブサイトから直接ユーザーが購入できる決済フォームを追加します。これらのフォームはウェブサイトに直接埋め込むかオーバーレイとして表示することができます。さらに、これらのフォームは細かなブランディングなどを提供し、ボタンや外部リンク、コードなどの形を通して使うこともできます。
+
+### Lemon Squeezy
+[Lemon Squeezy](https://www.lemonsqueezy.com/)は決済や国際的な通貨に対応したサブスクリプション、PayPalから国際的な税金の対応まで様々な機能が統合されたプラットフォームです。
+アカウントダッシュボードからデジタル商品やサービスを管理したり、商品/サービスURLを取得することができます。
+
+基礎的な[Lemon.js JavaScript ライブラリ](https://docs.lemonsqueezy.com/help/lemonjs/what-is-lemonjs)を使用することで商品を決済リンクから販売することができます。
+
+#### 基礎的な使用方法
+以下に記載している例は、Lemon Sqeezyで「購入ボタン」の要素をAstroページに追加する例です。ボタンをクリックすることでユーザーは単一の決済を行うことができます。
+
+<Steps>
+1. 下に記載されている`<script>`タグをページの`head`、または `body`要素に追加します:
+
+    ```html title="src/pages/my-product-page.astro"
+    <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
+    ```
+
+2. 商品URLに繋がるアンカータグをページに追加してください。また、クリック時に決済オーバーレイを表示するために`lemonsqueezy-button`クラスを適用してください。 
+
+    ```html title="src/pages/my-product-page.astro"
+    <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
+      購入する
+    </a>
+    ```
+</Steps>
+
+#### Lemon.js
+
+Lemon.jsは[オーバーレイの制御](https://docs.lemonsqueezy.com/help/lemonjs/opening-overlays)や[オーバーレイイベントの管理](https://docs.lemonsqueezy.com/help/lemonjs/handling-events)などの追加機能にも対応しています。
+
+<ReadMore>詳細は[Lemon Squeezy developer getting started guide](https://docs.lemonsqueezy.com/guides/developer-guide)を確認してください。</ReadMore>
+
+### Paddle
+
+[Paddle](https://www.paddle.com/)はデジタル製品およびサービスを請求するためのソルーションです。Paddleは決済、税金、そしてサブスクリプションの管理をオーバーレイまたはインラインチェックアウトを通じて処理します。
+
+[Paddle.js](https://developer.paddle.com/paddlejs/overview)はPaddleを使用して統合されたサブスクリプション請求体験を構築できる軽量なJavaScriptライブラリーです。
+
+#### 基礎的な使用方法
+
+以下のコードはPaddleで「購入ボタン」要素をAstroページに追加する例です。リンクをクリックすることで、ユーザーは単一の決済を行うことができます。
+決済リンクのドメインがPaddleによって承認された後はHTML属性を使用することで好きなページの要素を決済オーバーレイにすることができます。
+
+
+<Steps>
+1. `head`か`body`タグに以下の二つの`<script>`タグを追加します:
+
+    ```html title="src/pages/my-product-page.astro"
+    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
+    <script type="text/javascript">
+      Paddle.Setup({ 
+        token: '7d279f61a3499fed520f7cd8c08' // クライアントサイドトークンを追加する
+      });
+    </script>
+    ```
+
+2. 任意の要素をPaddleの決済ボタンに変えるために `paddle_button`クラスを適応します:
+
+    ```html title="src/pages/my-product-page.astro"
+    <a href="#" class="paddle_button">購入する</a>
+    ```
+
+3. Paddle上の商品の`priceId`と`quantity`を設定するために`data-items`属性を適応してください。任意で[サポートされているHTMLデータ属性](https://developer.paddle.com/paddlejs/html-data-attributes)をデータの自動入力や、決済成功時の管理、ボタンや決済オーバレイのスタイリングするために追加することもできます。
+
+    ```html title="src/pages/my-product-page.astro"
+    <a 
+      href="#"
+      class="paddle_button"
+      data-display-mode="overlay"
+      data-theme="light"
+      data-locale="en"
+      data-success-url="https://example.com/thankyou"
+      data-items='[
+        {
+          "priceId": "pri_01gs59hve0hrz6nyybj56z04eq", 
+          "quantity": 1
+        }
+      ]'
+    >
+      購入する
+    </a>
+    ```
+</Steps>
+
+#### Paddle.js
+
+HTMLデータ属性を渡す代わりに、JavaScriptを使用することで複数の属性を渡したりより一層カスタマイズをすることができます。 インラインチェックアウトを使用することでユーザーのアップグレードワークフローを作成することもできます。
+<ReadMore>詳しい情報は[ Paddle.jsを使用したインラインチェックアウトの方法](https://developer.paddle.com/build/checkout/build-branded-inline-checkout)を参照してください</ReadMore>
+
+
+## 完全なE-commerceソリューション
+サイトのショッピングシステムや決済システムの一層深くカスタマイズするためには、完全な金融サービスプロバイダー([Snipcart](#snipcart)など)を追加します。これらのプラットフォームは他のサードパーティーサービス(アカウントマネージメント、パーソライズ、アナリティクス)などと統合することもできます。
+
+### Snipcart
+
+[Snipcart](https://snipcart.com/)は強力なデベロッパーファーストのHTML/JavaScriptショッピングカートプラットフォームです。
+
+SnipCartは、輸送プロバイダー、ショッピングカートと他のシステムを繋げるウェブフックの有効化、支払い方法の選択(Paypal, Square, Stripe等)、Eメールテンプレート、そしてテスト環境を提供するサードパーティーサービスと統合させることもできます。
+
+:::tip
+完成済みのSnipCartソリューションが必要ですか？ SnipCartアカウントと連携するだけで使える機能的なAstroのコミュニティテンプレートの[`astro-snipcart`](https://astro-snipcart.vercel.app/)を確認してみてください。
+:::
+
+#### 基礎的な使用方法
+
+以下はSnipcart決済システムと「カートに追加する」「決済する」ボタンの追加方法の例です。この方法を使用することで、ユーザーは直接決済ページに行くのではなく、カートに商品を追加することができるようになります。
+
+<ReadMore>Snipcartストアのセットアップなどが含まれた完全なガイドが必要な場合[the Snipcartインストールドキュメント](https://docs.snipcart.com/v3/setup/installation)を確認してください。</ReadMore>
+
+<Steps>
+1. `body`要素の中に以下のスクリプトタグ[Snipcartインストールガイドを参照](https://docs.snipcart.com/v3/setup/installation)を追加します。
+    ```html title="src/pages/my-product-page.astro"
+    <body></body>
+    <script>
+      window.SnipcartSettings = {
+        publicApiKey: "YOUR_API_KEY",
+        loadStrategy: "on-user-interaction",
+      };
+
+      (function()...); // Snipcart ドキュメントから提供
+    </script>
+    ```
+
+2. `window.SnipcartSettings`をいずれかの[提供されているSnipcartの設定](https://docs.snipcart.com/v3/setup/installation#settings)を使用してショッピングカートの動作や見た目をカスタマイズします。
+
+    ```html title="src/pages/my-product-page.astro"
+    <script>
+      window.SnipcartSettings = {
+        publicApiKey: "YOUR_API_KEY",
+        loadStrategy: "manual",
+        version: "3.7.1",
+        addProductBehavior: "none",
+        modalStyle: "side",
+      };
+
+      (function()...); // Snipcard ドキュメントから参照
+    </script>
+    ```
+
+3. クリック時にカートに商品を追加するために`class="snipcart-add-item"`を任意のHTML要素(`<button>`要素など)に適応します。また、[一般的なSnipcart商品属性](https://docs.snipcart.com/v3/setup/products)から値段や説明、その他の項目を含めることもできます。
+
+    ```html title="src/pages/my-product-page.astro"
+    <button
+      class="snipcart-add-item"
+      data-item-id="astro-print"
+      data-item-price="39.99"
+      data-item-description="A framed print of the Astro logo."
+      data-item-image="/assets/images/astro-print.jpg"
+      data-item-name="Astro Print"
+      data-item-custom1-name="Frame color"
+      data-item-custom1-options="Brown|Silver[+10.00]|Gold[+20.00]"
+      data-item-custom2-name="Delivery instructions"
+      data-item-custom2-type="textarea"
+    >
+      カートに追加
+    </button>
+    ```
+
+4.  決済ポップアップを通じてユーザーが購入プロセスを完了するために`snipcart-checkout`クラスが適応されたSnipCart決済ボタンを追加します。
+
+    ```html title="src/pages/my-product-page.astro"
+    <button class="snipcart-checkout">クリックして決済</button>
+    ```
+</Steps>
+
+#### Snipcart JavaScript SDK
+
+[Snipcart JavaScript SDK](https://docs.snipcart.com/v3/sdk/basics)を使用することで、SnipcartのCartをプログラム上から設定やカスタマイズできます。
+
+SDKを使用することで以下のようなカスタマイズができます:
+
+- 現在のSnipcartの状態を入手し、カートに特定の操作を実行する。
+- イベントを待機してコールバックをダイナミックに発動させる。
+- 状態の変化があった場合のCartの完全な状態を入手する。
+
+<ReadMore>Astroプロジェクトと統合できる機能の詳しい情報を確認するためには[Snipcartドキュメント](https://docs.snipcart.com/v3/)を参照してください。</ReadMore>
+
+#### `astro-snipcart`
+
+Snipcartの利用を簡単にできる`astro-snipcart`コミュニティパッケージは2つあります。
+
+- [`@lloydjatkinson/astro-snipcart` Astro テンプレート](https://astro-snipcart.vercel.app/):このAstroテンプレートは追加で完全なe-commerceソルーションのためのデザインシステムが含まれています。詳細はAstroSnipcartのドキュメントをご覧ください。ドキュメントでは、Snipcart APIをAstroでネイティブに使用できる方法を提供することが[`astro-snipcart`を作成した動機](https://astro-snipcart.vercel.app/motivation)だったと説明されています。
+
+- [`@Adammatthiesen/astro-snipcart` インテグレーション](https://github.com/Adammatthiesen/astro-snipcart): このインテグレーションは`astro-snipcart`テーマから大きな影響を受けて作成されたインテグレーションです。使用することで、既存のプロジェクトに、商品を追加したりカートを管理することができるAstroコンポーネント(またはVueコンポーネント)を追加します。詳細は[完全なチュートリアル](https://matthiesen.xyz/blog/getting-started-with-my-astro-snipcart-addon)を確認してください。
+
+## コミュニティリソース
+
+- [AstroでE-commerceを作成する方法](https://crystallize.com/blog/building-ecommerce-with-astro)
+- [StripeとAstroで収益を集める方法](https://zellwk.com/blog/stripe-astro-recipe/)