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

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

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

橫幅字體大小

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

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

這意味著字體大小的目標(biāo)是 5vw（視口寬度 - 又稱為總可見屏幕寬度的 5%）。

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

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

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

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

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

不同的屏幕尺寸

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

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

購(gòu)物車項(xiàng)目網(wǎng)格區(qū)域

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

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

JavaScript

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

• 單擊購(gòu)物車圖標(biāo)時(shí)隱藏模式
• 單擊關(guān)閉圖標(biāo)時(shí)關(guān)閉模式
• 禁用頁(yè)面滾動(dòng)，以便在模式打開時(shí)無(wú)法向下滾動(dòng)商店商品的主頁(yè)

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

在CSS中，我將模態(tài)框設(shè)置為默認(rèn)隱藏，并將.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)閉圖標(biāo)和購(gòu)物車圖標(biāo)上的事件偵聽器可以重用相同的功能，因?yàn)槿绻形达@示，它將顯示模態(tài)，如果已經(jīng)打開，它將隱藏它。

使用本地存儲(chǔ)

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

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

關(guān)注點(diǎn)分離

我決定將與修改 DOM（添加元素、刪除元素、編輯元素）相關(guān)的函數(shù)與與本地存儲(chǔ)相關(guān)的函數(shù)分開。例如，我有一個(gè)函數(shù)removeCartItemFromLocalStorage，它的功能與上面所說(shuō)的一樣，并且與removeCartItemFromModalDOM不同，它從模態(tài)中刪除商店項(xiàng)目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;
}

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

遇到問題

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

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

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

添加到購(gòu)物車和未添加到購(gòu)物車的商品之間的差異

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

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

該函數(shù)的簡(jiǎn)化版本是：

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

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



<h2>
  
  
  部署
</h2>

<p>我使用 Github Pages 部署了這個(gè)應(yīng)用程序。我之前沒有使用它進(jìn)行部署，但發(fā)現(xiàn)該過(guò)程非常簡(jiǎn)單。我遇到的唯一問題是起初沒有顯示任何圖像。我意識(shí)到這是因?yàn)閰^(qū)分大小寫：我的圖像文件夾名為 Img 但圖像路徑是 html 中的 img/ 。修復(fù)此問題并清除緩存后，網(wǎng)站按預(yù)期顯示。 </p>

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

<p>我從這個(gè)項(xiàng)目中學(xué)到了很多東西，特別是關(guān)于 CSS 網(wǎng)格和通過(guò) JavaScript 使用本地存儲(chǔ)。我很想添加更多頁(yè)面并將其變成一個(gè)完整的前端電子商務(wù)應(yīng)用程序，但我決定暫時(shí)保留它的 MVP，以便我可以專注于下一階段將其變成 Django 應(yīng)用程序并掛鉤它到數(shù)據(jù)庫(kù)？</p>