我的農場商店購物車項目

我剛剛使用 HTML、CSS 和 vanilla JavaScript 創建了一個前端購物車 Web 應用程式。因為我喜歡在當地的雜貨店購買蔬菜，所以我的想法是基於一家名為芬利農場商店的農場商店的想法。

要點選該項目，即時連結是：https://gabrielrowan.github.io/Finleys-Farm-Shop-FE/

使用此應用程序，您可以：

？將商店商品加入購物車
？更改商店商品的數量
？在手推車模式上查看購物車中的所有商品
？查看購物車中所有商品的總價
？查看購物車中的商品數量
？即使您刷新頁面或關閉選項卡然後重新打開它，仍將所有商品保留在購物車中

該專案的背景

到目前為止，我在工作中主要從事後端應用程式的工作。不過，今年夏天，我開始從事一個全端項目，包括設計和實現前端。我真的很喜歡它，它讓我想更多地發展我的前端技能。

我想挑戰自己在不使用 CSS 庫的情況下完成這個項目，不是因為我認為使用它們不好，而是因為像 Bootstrap 這樣的東西通常是我前端的首選。

我之前從未在 JavaScript 中使用過瀏覽器本地存儲，因此我決定創建一個專案將是我實際了解它的最佳方式。

我的專案目標

當我第一次開始這個專案時，我心中有幾個目標。這些是：

？響應能力 - 我希望 UI 能夠適應行動裝置、ipad 和桌面視圖
？不使用 CSS 庫建立購物車模式
？熟悉在 JavaScript 中使用本地儲存

未來目標

建立前端是我這個專案計畫的第 1 部分。第二部分是使用 Django 將其轉換為全端應用程序，以便商店商品來自資料庫，而不是硬編碼在 HTML 中。

使其響應式

網格

為了讓應用程式適應不同的螢幕尺寸，我使用了 Kevin Powell 影片中的響應式網格版本。

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

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

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

橫幅字體大小

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

這表示字體大小的目標是 5vw（視口寬度 - 又稱為總可見螢幕寬度的 5%）。

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

字體大小的最大值可以設定為 5.6rem，因此如果 5vw 相當於大於 5.6rem，則字體大小將為 5.6rem。

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

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

建立模態

不同的螢幕尺寸

對於手推車，我想要一個會從桌面螢幕右側出現的模式：

在移動視圖上，我決定它應該佔據全螢幕尺寸：

購物車項目網格區域

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

JavaScript

對於模態 JavaScript，我的目標是：

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

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

在CSS中，我將模態框設定為預設隱藏，並將.active類別設定為顯示它。

設定CSS：

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

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

使用本地儲存

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

這是我將 2 件商品添加到購物車後專案的「應用程式」標籤的樣子：

關注點分離

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

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

遇到問題

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

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

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

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

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

意識到這一點後，我創建了一個名為DOMContentLoaded 的函數，該函數循環遍歷本地存儲中的產品數組中的所有產品，找到每個產品的id，然後更新相關產品的html 元素以顯示已新增的產品到購物車。

函數的簡化版本是：

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

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



<h2>
  
  
  部署
</h2>

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

<h2>
  
  
  結論
</h2>

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


          

以上是我的農場商店購物車項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！