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

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

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

バナーのフォントサイズ

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

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

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

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

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

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

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

モーダルの作成

さまざまな畫面サイズ

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

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

カート項(xiàng)目のグリッド領(lǐng)域

私の時(shí)間のほとんどは、カート項(xiàng)目がカートに追加されたときの CSS に費(fèi)やされました。グリッド テンプレート エリアを使用して、カート項(xiàng)目のさまざまな部分 (項(xiàng)目タイトル、つまり「Apple」、価格、項(xiàng)目數(shù)量、畫像) が、計(jì)畫した割り當(dāng)てスペースを占めるようにしました。

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

JavaScript

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

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

これを?qū)g現(xiàn)するために、関數(shù) toggleModal を呼び出すイベント リスナーを両方のアイコンに追加しました。これにより、.active というクラスがモーダル要素にまだ追加されていない場(chǎng)合は追加され、すでに存在する場(chǎng)合は削除されます。

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

CSS の設(shè)定:

.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);
}

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

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

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

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

関心の分離

DOM の変更 (要素の追加、要素の削除、要素の編集) に関連する機(jī)能を、ローカル ストレージに関連する機(jī)能から分離することにしました。たとえば、removeCartItemFromLocalStorage 関數(shù)があります。これは、缶に書かれていることを?qū)g行しますが、モーダルからショップ アイテムの 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;
}

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

問題に遭遇する

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

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

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

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

これは私を本當(dāng)に混亂させ、理解するまでに時(shí)間がかかりました。結(jié)局、分かりました。はい、アイテムをローカル ストレージに追加していました。しかし、ページがリロードされて DOMContentLoaded イベント リスナーが起動(dòng)されたとき、ローカル ストレージの內(nèi)容に基づいて DOM をレンダリングしていませんでした。実際、この段階ではローカルストレージに何があるか全くチェックしていませんでした。

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

関數(shù)の短縮版は次のとおりです:

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

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



<h2>
  
  
  導(dǎo)入
</h2>

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

<h2>
  
  
  結(jié)論
</h2>

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