アストロ+スニペット

TLドクターライブデモhere、またはチェックアウトする場合は、GitHub Repoにリダイファントを懇願勇敢なダイビングを感じている!

序文
電子商取引プロジェクトのための技術スタックを設計するとき、競合する優先順位のウェブはM. C. Escher絵のように感じ始めることができます.
オンラインストアは直接自分のサイトを介して収益率を駆動する、変換率を最優先する.それはしばしばリアルタイム追跡とユーザ固有の製品推奨の必要性につながります.クール!我々は、フロントエンドのリアルタイムデータを供給するバックエンドを必要とすることを知っています.
しかし、あなたのマーケティングキャンペーンは、ウイルスやサイトのトラフィックは、ロケットのようにオフに行くときに何が起こる?つ目を待つので、これはクラウドベースのオートスケーリングに到達することになっているときですか?またはServerlessな解決策?

Jamstackの利点
静的サイトは、1つのサイズがすべての解決にフィットしていません、しかし、彼らはより小さなスケールで特に若干の非常に本当の利益を持ちます.しかし、オンラインストアのための静的サイトを使用することは狂っているようです.正しい?
私は、彼らが静的セットアップに変わるならば、オンライン店の大部分が巨大な利益を見ることができると主張します.彼らの店は常に利用可能で、速く、そして容易にGoogleによって索引付けされる.最も重要なことは、彼らの次のInstagram Postがウイルスになるならば、買い物客の急増は彼らのサイトを下げて、それらの潜在的販売を捨てることはありません.

入力する
我々はSnipcartを含む、長年にわたってかなりの数のプロジェクトにKamflyを使用しており、結果に非常に満足していた.
SnipCartショッピングカートソリューションのサブスクリプションとデジタルグッズのサポートを完了するドロップです.彼らの管理ダッシュボードは、お客様と製品の分析、在庫管理への容易なアクセスを提供し、カートの再参加キャンペーンを放棄し、さらに複数の通貨と税金のソリューションをサポートしています.
さらに良い、スニペットは、右のHTMLからあなたの製品の詳細を検出します.あなたは、製品の価格やオプションとスニペットのようなものを定義242479142属性が含まれて残りを処理します.そして、心配しないでください、snipcartは、面白いビジネスがなかったことを確認するために注文を受け入れる前にすべての製品の詳細を検証します.

静電気電子商取引
十分なだけで、解決策を得ることができます!公平な警告、このデモはKamfly's demoからかなり直接的なポートです.そのプロジェクトはもともとJavaScriptのファンのための優れた開発者の経験を提供する11ty、別の静的サイトジェネレータで書かれていました.
デモメニューのUIのデザインは、これを読んであなたのいくつかに精通して見えることがあります.大学からの私の最初の仕事は、Microsoftでテスト(Sdet)でソフトウェア開発エンジニアとしてありました.私は、Windowsの電話7 - 10の責任のUIチームに取り組んで、常に地下鉄に触発されたデザインに部分的だった!

メニューデータの読み込み
私はあまりにも元の11 tyプロジェクトからあまりにも迷走したくないし、すべてのメニューのデータをローカルJSONファイルに格納することを意味した.
in GitHubの詳細を見ることができますが、ここでの基本的な解決策はglob importsを利用します.

import.meta.glob("../data/menus/*.json");

上記のコードは、一度に複数のファイルをロードするためにglob patternを使用することができるインポートマジックのビットです.data-で、結果はファイルをロードするAsync関数にファイル名からのマッピングです.場合は、すぐにすべてのデータをロードする場合は、import.meta.globあなたの親友になります.

ショッピングカートボタンの追加
snipcartこれは非常に簡単になります.

<button class="header__cartbtn snipcart-checkout">
  <img class="header__cart" src="/icons/cart.svg" alt="open cart" />
  <span class="snipcart-items-count header__cartcount">0</span>
</button>

それはすべてそこにある!snipcart特定のクラスのページをチェックします.この場合、import.meta.globEagerはsnipcartに指示します、これはクリックされるときショッピングカートを開くべきであるボタンです.snipcart-checkoutのスパンは、Snipcartにカート内の現在のアイテム数でこのスパンを更新するように指示する別の特別なクラスです.

カートに製品を追加する
SnipCartはあなたのサイト、.snipcart-items-countの製品を発見する別の特別なクラスを探します.

<button
    class="menuitem__cartbtn snipcart-add-item"
    data-item-id={item.slug}
    data-item-name={item.display_title || item.title}
    data-item-price={item.price}
    data-item-url={url}
    data-item-image={item.image}
    {...modifiersMap}
>

これのほとんどはかなりまっすぐにする必要があります、我々は製品が何であるかをsnipcartに言うためにsnipcart-add-itemプロパティを加えています.しかし、そのdata-itemものについてはどうですか?

カスタムフィールド
SnipCartでは、製品にカスタムオプションを追加するには、modifiersMapまたはsize: Mediumのドロップダウンを考えることができます.これを行うにはAPIはcustom fieldsをサポートします.
カスタムフィールドの文字列の書式設定は一見一目で混乱することができますが、それは非常に強力です.だけでなく、どのようなオプションが利用可能ですsnipcart教えても、特定のオプションの追加料金を定義することができます.

<button
  ...
  data-item-custom1-name="Frame color"
  data-item-custom1-options="Black|Brown[+100.00]|Gold[+300.00]"
>
  ...
</button>

この場合、snipcartはユーザーに「フレームカラー」のためにdropdownオプションを与えます.カラーブラックは無料で、ブラウンにアップグレードは、製品の価格に100ドルを追加し、金にアップグレード300ドルを追加します.

でのカスタムフィールドの追加
この1つは最初に把握するために少しトリッキーだった、うまくいけば、私はここでいくつかの時間を節約するために役立つでしょう.
私は、color: Grayオペレーターが私の友人であるということをかなり速く理解しました.AstroがJavaScript (およびTypesScript !)を許すのでテンプレートの{...spread}のフェンスの中で、それは実際にオブジェクトに製品オプションをマッサージするだけの問題です.

const modifierMap = {
    "data-item-custom1-name": "Sauce",
    "data-item-custom1-options": "None|BBQ|Buffalo",
    "data-item-custom2-name": "Side",
    "data-item-custom2-options": "Fries|Onion Rings[+1.50]"
}

Githubでfull implementationをチェックするためにあなたにそれを任せます.しかし、一旦我々にオプションの特性の地図があるならば、それはアストロで---にそれらの特性を{...spread}として本当に単純です.

結論
ここでは、SnipcartとAstroチームの両方に、大きな感謝がここにあります.私は完全に静的なレストランの注文サイトを構築するために一緒に2つの優れたプロジェクトを結ぶの簡単な仕事をした!