MyFitness(英語)

💫 DemoSiteのアドレス

MyFitnessTopPage
GoogleMapAPIを使用したページ
SnipcartAPIを使用したカートページ
NetlifyFormsを使用したお問い合わせページ（確認画面付き）

💫 コード解説記事

GoogleMap のマーカーと、HTMLのリストデータの連動（Vanilla JavaScript)

外付けカート(snipcart）機能を追加しました

NetlifyForm（確認画面付き）作成しました。Gmail連携機能（オプション）もあります。

🧐 プログラム・フォルダ構成

シンプルにHTML/CSSで実装。 以下のページで外部APIを使用しています。

• Mapページ:Google Maps JavaScript API
• Cartページ:SnipcartAPI
• formページ:NetlifyForm+Zappier

index.html blog-post/ image/ style/ map/
　├ images/
　├ index.html
　├ location.json
　├ main.js
　└ style.css
cart/
　├ images/
　├ index.html
　├ products.json
　├ app.js
　└ style.css
form/
　├ index.html
　├ thankyou.html
　├ formScript.js
　└ formStyle.css

1. index.html: トップページ

2. blog-post: ブログポストファイル

3. image/: 画像ファイルを保存するフォルダ。

4. style/: CSSファイル

5. map/: GooleMap関連フォルダ

6. cart/: ショッピングカート関連フォルダ

7. form/: 問い合わせフォーム関連フォルダ

References

• Google Maps JavaScript API
• Snipcart Documentation
• Netlify Forms

🚀 Deploy

NetlifyをつかってDeployしています。