的 CSS包含我項目中的商店物品卡的是：

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

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

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

橫幅字體大小

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

.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。

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

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

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

創(chuàng)建模態(tài)

不同的屏幕尺寸

對于手推車，我想要一個會從桌面屏幕右側(cè)出現(xiàn)的模式：

在移動視圖上，我決定它應(yīng)該占據(jù)全屏尺寸：

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

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

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

JavaScript

對于模態(tài) JavaScript，我的目標是：

• 單擊購物車圖標時隱藏模式
• 單擊關(guān)閉圖標時關(guān)閉模式
• 禁用頁面滾動，以便在模式打開時無法向下滾動商店商品的主頁

為了實現(xiàn)這一點，我向兩個圖標添加了事件監(jiān)聽器，調(diào)用了函數(shù)toggleModal。如果尚未將其添加到模態(tài)元素中，則會添加一個名為 .active 的類；如果已存在，則將其刪除。

在CSS中，我將模態(tài)框設(shè)置為默認隱藏，并將.active類設(shè)置為顯示它。

設(shè)置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);
}

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

使用本地存儲

對于本地存儲，我發(fā)現(xiàn) Web Dev Simplified 的視頻“JavaScript Cookies vs. Local Storage vs. Session Storage”特別有幫助。它討論了這三種存儲數(shù)據(jù)方式之間的差異、如何在開發(fā)工具的“應(yīng)用程序”選項卡中查看數(shù)據(jù)以及如何為每種數(shù)據(jù)存儲類型添加和刪除項目。

這是我將 2 件商品添加到購物車后項目的“應(yīng)用程序”選項卡的樣子：

關(guān)注點分離

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

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

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

遇到問題

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

• 在初始頁面加載時將本地存儲設(shè)置為空數(shù)組
• 當點擊商店商品上的“添加”按鈕時，將調(diào)用以下函數(shù)：
  • 項目已添加到本地存儲
  • 購物車商品的 HTML 已添加到手推車模式
• 獲取總價，即本地存儲陣列中每個商品的數(shù)量*價格
• 將價格元素的innerText設(shè)置為從本地存儲檢索的價格

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

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

這真的讓我很困惑，我花了一段時間才弄清楚。最終，我明白了。是的，我正在將這些項目添加到本地存儲中。但是，當重新加載頁面并觸發(fā) DOMContentLoaded 事件偵聽器時，我沒有根據(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)用程序。我之前沒有使用它進行部署，但發(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)用程序并掛鉤它到數(shù)據(jù)庫？</p>