ファームショップ用のショッピング カート プロジェクト

HTML、CSS、バニラ JavaScript を使用して、フロントエンド ショッピング カート Web アプリの作成が完了しました。私は地元の食料品店で野菜を買うのが大好きなので、Finley's Farm Shop という農場ショップのアイデアを基にしました。

プロジェクトをクリックして移動するには、ライブ リンク: https://gabrielrowan.github.io/Finleys-Farm-Shop-FE/

このアプリを使用すると、次のことができます:

?ショップアイテムをカートに追加
?ショップアイテムの数量を変更する
?カート内のすべてのアイテムをトロリーモーダルで表示します
?カート内の全商品の合計金額を確認します
?カート内の商品数を確認します
?ページを更新したりタブを閉じて再度開いた場合でも、すべてのアイテムがカートに残ったままになります

このプロジェクトの背景

私はこれまで仕事で主にバックエンドアプリケーションに携わってきました。しかし、この夏、私はフロントエンドの設計と実装を含むフルスタック プロジェクトに取り組むことになりました。本当に楽しかったので、フロントエンドのスキルをもっと磨きたいと思いました。

CSS ライブラリを使用せずにこのプロジェクトを実行することに自分自身に挑戦したいと思いました。CSS ライブラリを使用することが悪いと考えているからではなく、フロントエンドでは Bootstrap のようなものを使用することが一般的だからです。

私はこれまで JavaScript でブラウザーのローカル ストレージを使用したことがなかったので、実際的な方法でそれについて学ぶにはプロジェクトを作成することが最善の方法であると判断しました。

プロジェクトに対する私の目標

このプロジェクトを最初に始めたとき、いくつかの目的を念頭に置いていました。これらは次のとおりです:

?応答性 - UI をモバイル、iPad、デスクトップのビューに適応させたいと考えました
? CSS ライブラリを使用せずにショッピング カート モーダルを作成するには
? JavaScript でのローカル ストレージの使用に慣れる

今後の目標

フロントエンドの作成は、このプロジェクトの計画のパート 1 です。 2 番目の部分は、Django を使用してこれをフルスタック アプリに変換し、ショップ アイテムが HTML にハードコーディングされるのではなくデータベースから取得されるようにすることです。

レスポンシブにする

グリッド

アプリをさまざまな画面サイズに適応できるようにするために、Kevin Powell のこのビデオのレスポンシブ グリッドのバージョンを使用しました。

の CSS私のプロジェクトのショップアイテムカードを含むものは次のとおりです:

.shop-items {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

魔法は、grid-template-columns 値にあります。それは本質的に次のことを意味します:
この親コンテナーには、最小サイズが 12rem、最大サイズが使用可能なスペースの 1 分の 1 の範囲で、できるだけ多くの列を収めます。

このグリッドを使用すると、追加のメディア クエリを記述することなく、広いデスクトップ ビューから狭いモバイル ビューに移行するときに、列の量 (ショップ アイテム カードの量で表される) を 4 から 1 に動的に減らすことができます。

バナーのフォントサイズ

バナー タイトル「Finley's Farm Shop」では、フォント サイズが自動的に拡大縮小できるように、clamp() を使用しました。これを行わないと、デスクトップでは適切に機能するフォント サイズがモバイルでは大きすぎることがわかりました。

.shop-items {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

これは、フォント サイズが 5vw (ビューポート幅 - 表示される画面の合計幅の 5%) を目指すことを意味します。

フォント サイズの最小値は 3.8rem であるため、5vw が 3.8rem 未満に相当する場合、フォント サイズは代わりに 3.8rem になります。

フォント サイズの最大値は 5.6rem に設定されているため、5vw が 5.6rem を超える場合は、フォント サイズは 5.6rem になります。

フォント サイズの最小値と最大値の間の勾配を正確に計算し、それを使用して好みの中間値を選択する方法はありますが、私はインスペクターを使用して目視で判断しました。

ここでは、代わりに正確なグラデーションを計算するための CSS トリックの記事を紹介します。

モーダルの作成

さまざまな画面サイズ

トロリーについては、デスクトップの画面の右側から表示されるモーダルが必要でした。

モバイル表示では、全画面サイズを使用する必要があると判断しました:

カート項目のグリッド領域

私の時間のほとんどは、カート項目がカートに追加されたときの CSS に費やされました。グリッド テンプレート エリアを使用して、カート項目のさまざまな部分 (項目タイトル、つまり「Apple」、価格、項目数量、画像) が、計画した割り当てスペースを占めるようにしました。

.banner-title {
    font-size: clamp(3.8rem, 5vw, 5.6rem);
}

JavaScript

モーダル JavaScript の場合、次のことを目指していました:

• カートアイコンをクリックしたときにモーダルを非表示にします
• 閉じるアイコンをクリックするとモーダルを閉じます
• モーダルが開いているときにショップアイテムのメインページを下にスクロールできないように、ページスクロールを無効にします

これを実現するために、関数 toggleModal を呼び出すイベント リスナーを両方のアイコンに追加しました。これにより、.active というクラスがモーダル要素にまだ追加されていない場合は追加され、すでに存在する場合は削除されます。

CSS で、モーダルがデフォルトで非表示になるように設定し、.active クラスがモーダルを表示するように設定しました。

CSS の設定:

.shop-items {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

クラスを切り替えてモーダルを表示/非表示にします。

.banner-title {
    font-size: clamp(3.8rem, 5vw, 5.6rem);
}

これは、閉じるアイコンとカート アイコンのイベント リスナーが同じ機能を再利用できることを意味します。モーダルがまだ表示されていない場合は表示し、すでに開いている場合は非表示にするためです。

ローカルストレージの使用

ローカル ストレージについては、Web Dev Simplified のこのビデオ「JavaScript Cookies vs. Local Storage vs. Session Storage」が特に役に立ちます。データを保存するこれら 3 つの方法の違い、開発ツールの [アプリケーション] タブでデータを表示する方法、および各データ ストレージ タイプの項目を追加および削除する方法について説明します。

カートに 2 つのアイテムを追加した後のプロジェクトの [アプリケーション] タブは次のようになります:

関心の分離

DOM の変更 (要素の追加、要素の削除、要素の編集) に関連する機能を、ローカル ストレージに関連する機能から分離することにしました。たとえば、removeCartItemFromLocalStorage 関数があります。これは、缶に書かれていることを実行しますが、モーダルからショップ アイテムの HTML を削除する RemoveCartItemFromModalDOM とは異なります。

.cart-item {
    display: grid;
    grid-template-areas: "image description description"
        "image price quantity";
    grid-template-columns: min-content 1fr 1fr;
    grid-template-rows: 2.5rem 3.5rem;
}

これらは両方とも、ショップアイテムがカートから削除されたときに呼び出す必要があります。これらを別個の関数として持つことで、プロセスの必要な部分を両方とも完了したことを確認するのに役立ちました。 DOM から HTML を削除しないと、Web ページには商品がカートから削除されたことが視覚的に反映されません。ローカル ストレージから項目を削除しないと、ページが更新されたとき、またはタブが閉じられたときに変更を保持できなくなります。

問題に遭遇する

JavaScript でローカル ストレージ関数に取り組んでいたときに、非常に困惑する問題に遭遇しました。これまでに行った手順は次のとおりです:

• 最初のページ読み込み時にローカル ストレージを空の配列に設定します
• ショップアイテムの「追加」ボタンをクリックすると、次の関数が呼び出されます。
  • アイテムがローカル ストレージに追加されました
  • カート項目の HTML がトロリーモーダルに追加されます
• ローカル ストレージ配列内の各製品の数量 * 価格として合計価格を取得します
• 価格要素の innerText をローカル ストレージから取得した価格に設定します

いくつかクリックしてみましたが、見た目も素晴らしかったです。 ...ページを更新するまでは。その後、価格は以前と同じ合計に設定されましたが、DOM は最初のページ読み込み時の状態に完全に戻りました。視覚的には、カートには商品が入っていないように見えましたが (数量入力コントロールの代わりに追加ボタンが表示されました)、合計金額は £0 を超えていました。

カートに追加された商品と追加されていない商品の違い

これは私を本当に混乱させ、理解するまでに時間がかかりました。結局、分かりました。はい、アイテムをローカル ストレージに追加していました。しかし、ページがリロードされて DOMContentLoaded イベント リスナーが起動されたとき、ローカル ストレージの内容に基づいて DOM をレンダリングしていませんでした。実際、この段階ではローカルストレージに何があるか全くチェックしていませんでした。

これに気づいた後、ローカル ストレージ内の製品配列内のすべての製品をループし、各製品の ID を見つけて、関連する製品の HTML 要素を更新して、追加されたものを表示する DOMContentLoaded で呼び出される関数を作成しました。カートへ。

関数の短縮版は次のとおりです:

constloadCartState = () =>
{
    const cart = JSON.parse(localStorage.getItem("cart"));
    場合 (!カート)
    {
        カート = [];
        localStorage.setItem("カート", JSON.stringify(カート));
    }

    カート.forEach(製品=>
    {
         const shopItem = document.querySelector(`.shop-item[data- 
        >



<h2>
  
  
  導入
</h2>

<p>このアプリは Github Pages を使用してデプロイしました。これまでデプロイメントに使用したことはありませんでしたが、プロセスは非常に簡単であることがわかりました。私が遭遇した唯一の問題は、最初は画像がまったく表示されなかったことです。これは大文字と小文字の区別が原因であることがわかりました。私の画像フォルダーは Img という名前ですが、HTML 内の画像パスは img/ でした。この問題が修正され、キャッシュがクリアされた後、Web サイトは期待どおりに表示されました。 </p>

<h2>
  
  
  結論
</h2>

<p>このプロジェクトから、特に CSS グリッドと JavaScript でのローカル ストレージの使用について多くのことを学びました。さらにページを追加して、完全なフロントエンド e コマース アプリにしたいという誘惑に駆られましたが、今は MVP のままにし、Django アプリにしてフックする次の段階に集中できるようにすることにしました。データベースまで?</p>


          

以上がファームショップ用のショッピング カート プロジェクトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。