"前端開發"共有112篇文章

您在線上商店會需要的一切。但許多人抱怨它的速度、資源密集、難以維護等等。若您想讓您的magento體驗更快速，你可能需要為伺服器資源燒更多錢。但如果您不想這麼做，Vue Storefront或許是個選擇。使用Vue.js撰寫的無頭及微服務電商漸進式網路應用程式（PWA）” - 出自他們的網站。理論上您可以將您的magento轉換成PWA，它應該能像手機原生操作系統一樣執行。如果您想讓您的Magento（特別是Magento 1）在沒有花太多金錢讓伺服器升級的情況下，更加快速，或花太多時間升級成Magento 2，那這可能就是答案。

微調 font 文件並進階優化字體載入策略，以實現最快速度和最短 FOUT 表現 在之前的文章我們介紹了關於 system fonts 相對於 web fonts 的優點，與 system fonts 相比，web fonts 會對效能產生負面影響，使用更多數據並且增加網頁耗能，更是對 Google SEO 排名造成間接性的傷害。

什麼是 System Fonts / Web Fonts？System Fonts 顧名思義指的是作業系統內定的字型，因為來自於作業系統（也就是用戶的電腦、手機），不需要去特定網站（如 Google）抓取字體文件，也不需要將字體文件存在我們的網頁伺服器裡。而 Web Fonts 則是儲存於網頁伺服器的字體文件，瀏覽器會在渲染畫面時下載當前網頁指定的字體。在一天之內，瀏覽各種網頁可能會下載成百上千個這樣的文件。 其中一些甚至可能是相同的字體，來自不同的網站。

對於商家來說，針對來自不同國家和語言的顧客，支援不同語言是必須的。原因不用多說：更大的客戶群就意味著更多的商機。有以上需求的Magento商家不用擔心語言支援會是一個麻煩：即使Venia / Magento PWA主題沒有提供拆開即用的國際包（也就是美式英語作為預設語言(en_US)）;但翻譯一個Venia網站是非常簡單的過程。以下我們就教你怎麼快速進行在Magento中進行前端語言的轉換與翻譯。

在使用下拉選單或者是彈出視窗的時候、我們常常會需要一個功能：點擊元件外部來關閉元件。在接下來的範例中，我們要示範如何使用jQuery實現點擊div以外的地方來關閉div。首先、我們先準備好html的部份，我們要做一個按鈕和一個div方塊。按下按鈕就可以顯示或隱藏div。並且在div顯示的狀態下，點擊div以外的地方就可以隱藏它。

在Magento2的結帳頁面是使用knockoutjs渲染製作的功能和特效，而它的購物車、客戶、商品等資料都是藉由\Magento\Checkout\Block\Onepage::getSerializedCheckoutConfig的函數提供，再將它宣告至windows.checkoutConfig裡，讓knockoutjs的model能去取得一些基本必要設定值，但當我們客製化一些新的功能在結帳頁面，想要去新增或定義新的windows.checkoutConfig值該如何做呢?

Web Share API 是現代瀏覽器提供的功能之一，它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。以下我們分成三大主題來為各位介紹 Web Share API 的基本使用概念，什麼是 Web Share API呢？Web Share API 的限制是什麼呢？Web Share API 要如何使用？

bootstrap-table.js 是一個以bootstrap為基礎的表格外掛。可以對表格的資料進行排序、分頁、查詢等等。這篇文章要簡單的介紹如何設定bootstrap-table.js的中文化呦！因為bootstrap-table.js是以bootstrap為基礎開發的套件，因為我們必須先載入bootstrap。另外bootstrap-table使用了font awesome作為預設的圖標，因此我們也需要找入font awesome.一起來看看吧！

Magento為市面上提供高度彈性以及客製化程度的電子商務開發系統之一，也因為其系統架構較為複雜且繁瑣，市面上所提供的theme套版方案也較為少見，本篇文章所要介紹的為市面上 envatomarket Theme銷售平台中，銷售排行第一名Theme Porto Theme。就讓我們往下看看吧！

在全球受到疫情侵擾無一倖免的肆虐下，為避免疫情擴散各地紛紛展開了居家隔離政策，全球各地的生活模式也遭受強烈的變革。然而電子商務產業因應疫情事態反而逆向而行，在疫情肆虐下開展網路通路成為各行各業的另一出路。其中縮短上線時間的秘訣之一，即是利用前端套用固定版型方式達成縮短開發時程目的。Magento為市面上提供高度彈性以及客製化程度的電子商務開發系統之一，也因為其系統架構較為複雜且繁瑣，市面上所提供的theme套版方案也較為複雜。本篇文章所要介紹的為市面上 envatomarket Theme銷售平台中，銷售排行第一名Theme Porto Theme。

儘管 Magento 2 採用 KnockoutJS 開啟了現代前端功能的可能性，但較於抽象的概念間接提高新的挑戰，在表單欄位中添加 placeholder 不再像打開 HTML 那樣簡單。 在這裡，我們將解釋如何將 placeholder 添加到 Magento 2 表單中。

在javascript中我們常常使JSON格式做資料交換，所以我們常常使用JSON.parse來把字串轉為物件再做使用，但是有一個問題會造成你轉出來的資訊與你期望的產生差距，讓我們用一個簡單的範例來重現這個問題吧！那就繼續往下看囉！