神奇之處在於 grid-template-columns 值。它的本質(zhì)意思是：
在此父容器中容納盡可能多的列，最小尺寸為 12rem，最大尺寸為可用空間的 1 分之一。

使用此網(wǎng)格，當(dāng)從更寬的桌面視圖到更窄的移動視圖時，列數(shù)（以商店商品卡的數(shù)量表示）可以動態(tài)地從4 減少到1，而無需編寫額外的媒體查詢。

橫幅字體大小

對於橫幅標(biāo)題“Finley's Farm Shop”，我使用了clamp()，以便字體大小能夠自動縮放。如果不這樣做，我發(fā)現(xiàn)適用於桌面的字體大小對於行動裝置來說太大了。

這表示字體大小的目標(biāo)是 5vw（視口寬度 - 又稱為總可見螢?zāi)粚挾鹊?5%）。

字體大小的最小值為 3.8rem，因此如果 5vw 等於小於 3.8rem，則字體大小將為 3.8rem。

字體大小的最大值可以設(shè)定為 5.6rem，因此如果 5vw 相當(dāng)於大於 5.6rem，則字體大小將為 5.6rem。

有多種方法可以精確計算最小和最大字體大小之間的漸變，並使用它來選擇您喜歡的中間值，但我使用檢查器來觀察它？

這裡有一篇關(guān)於計算精確漸變的 CSS 技巧文章。

建立模態(tài)

不同的螢?zāi)怀叽?

對於手推車，我想要一個會從桌面螢?zāi)挥覀?cè)出現(xiàn)的模式：

在移動視圖上，我決定它應(yīng)該佔據(jù)全螢?zāi)怀叽纾?/p>

購物車項目網(wǎng)格區(qū)域

當(dāng)購物車專案被加入購物車時，我大部分的時間都花在了 CSS 上。我使用網(wǎng)格模板區(qū)域，以便購物車項目的不同部分（項目標(biāo)題，即“Apple”、價格、項目數(shù)量和圖像）佔用我為它們計劃的分配空間。

JavaScript

對於模態(tài) JavaScript，我的目標(biāo)是：

• 點選購物車圖示時隱藏模式
• 點選關(guān)閉圖示時關(guān)閉模式
• 停用頁面捲動，以便在模式開啟時無法向下捲動商店商品的主頁

為了實現(xiàn)這一點，我為兩個圖示新增了事件監(jiān)聽器，呼叫了函數(shù)toggleModal。如果尚未將其新增至模態(tài)元素中，則會新增名為 .active 的類別；如果已存在，則將其刪除。

在CSS中，我將模態(tài)框設(shè)定為預(yù)設(shè)隱藏，並將.active類別設(shè)定為顯示它。

設(shè)定CSS：

切換類別以顯示/隱藏模式：

這表示關(guān)閉圖示和購物車圖示上的事件偵聽器可以重複使用相同的功能，因為如果尚未顯示，它將顯示模態(tài)，如果已經(jīng)打開，它將隱藏它。

使用本地儲存

對於本地存儲，我發(fā)現(xiàn) Web Dev Simplified 的視頻“JavaScript Cookies vs. Local Storage vs. Session Storage”特別有幫助。它討論了這三種儲存資料方式之間的差異、如何在開發(fā)工具的「應(yīng)用程式」標(biāo)籤中查看資料以及如何為每種資料儲存類型新增和刪除項目。

這是我將 2 件商品添加到購物車後專案的「應(yīng)用程式」標(biāo)籤的樣子：

關(guān)注點分離

我決定將與修改 DOM（新增元素、刪除元素、編輯元素）相關(guān)的函數(shù)與與本機(jī)儲存相關(guān)的函數(shù)分開。例如，我有一個函數(shù)removeCartItemFromLocalStorage，它的功能與上面所說的一樣，並且與removeCartItemFromModalDOM不同，它從模態(tài)中刪除商店項目html。

當(dāng)商店商品從購物車中移除時，需要調(diào)用這兩個函數(shù)，將它們作為單獨的函數(shù)可以幫助我檢查是否已完成該過程的兩個所需部分。如果沒有從 DOM 中刪除 html，網(wǎng)頁將不會直觀地反映出該商品已從購物車中刪除。如果不從本機(jī)儲存空間中刪除該項目，刷新頁面或關(guān)閉選項卡時變更將無法保留。

遇到問題

當(dāng)我在研究 JavaScript 中的本機(jī)儲存功能時，我遇到了一個讓我非常困惑的問題。到目前為止我完成的步驟是：

• 在初始頁面載入時將本機(jī)儲存設(shè)定為空數(shù)組
• 點擊商店商品上的「新增」按鈕時，將會呼叫以下函數(shù)：
  • 項目已新增至本機(jī)儲存
  • 購物車商品的 HTML 已加入手推車模式
• 取得總價，即本地儲存陣列中每個商品的數(shù)量*價格
• 將價格元素的innerText設(shè)定為從本地儲存檢索的價格

我點了一下，看起來也很棒！ ....直到我刷新頁面。然後，價格設(shè)定為與之前相同的總價，但 DOM 已完全恢復(fù)為初始頁面載入時的樣子。從視覺上看，購物車中似乎沒有商品（顯示的是添加按鈕，而不是數(shù)量輸入控制），但總數(shù)超過 0 英鎊。

添加到購物車和未添加到購物車的商品之間的差異

這真的讓我很困惑，我花了一段時間才弄清楚。最終，我明白了。是的，我正在將這些項目新增到本地儲存中。但是，當(dāng)重新載入頁面並觸發(fā) DOMContentLoaded 事件偵聽器時，我沒有根據(jù)本機(jī)儲存中的內(nèi)容渲染 DOM。事實上，現(xiàn)階段我根本沒有檢查本地儲存中的內(nèi)容。

意識到這一點後，我創(chuàng)建了一個名為DOMContentLoaded 的函數(shù)，該函數(shù)循環(huán)遍歷本地存儲中的產(chǎn)品數(shù)組中的所有產(chǎn)品，找到每個產(chǎn)品的id，然後更新相關(guān)產(chǎn)品的html 元素以顯示已新增的產(chǎn)品到購物車。

函數(shù)的簡化版本是：

const loadCartState = () =>;
{
    const cart = JSON.parse(localStorage.getItem("cart"));
    如果（！購物車）
    {
        購物車=[]；
        localStorage.setItem("購物車", JSON.stringify(cart));
    }

    cart.forEach(產(chǎn)品 =>
    {
         const shopItem = document.querySelector(`.shop-item[data-
        >



<h2>
  
  
  部署
</h2>

<p>我使用 Github Pages 部署了這個應(yīng)用程式。我之前沒有使用它進(jìn)行部署，但發(fā)現(xiàn)該過程非常簡單。我遇到的唯一問題是起初沒有顯示任何圖像。我意識到這是因為區(qū)分大小寫：我的圖像資料夾名為 Img 但圖像路徑是 html 中的 img/ 。修復(fù)此問題並清除快取後，網(wǎng)站會按預(yù)期顯示。 </p>

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

<p>我從這個專案中學(xué)到了很多東西，特別是關(guān)於 CSS 網(wǎng)格和透過 JavaScript 使用本地儲存。我很想添加更多頁面並將其變成一個完整的前端電子商務(wù)應(yīng)用程序，但我決定暫時保留它的MVP，以便我可以專注於下一階段將其變成Django 應(yīng)用程式並掛鉤它到資料庫？ </p>