如何在Magento 2 中客製化表單欄位驗證規則
Magento 2 本身提供有一些表單驗證方法，其中關於電話號碼欄位只有提供US或UK的格...
AI 自動化專案／電商快速上線專案，歐斯瑞專業團隊免費提供諮詢中！
如何彈性更改地址格式？
Magento 2 中允許使用者修改客戶帳單和送貨地址格式的範本。這兩種類型的地址出現在以下文件中：...
如何在Shopify 主題包中使用額外的字型
Shopify本身具有webfont字型庫，可以在所有的Shopify商店中免費使用，我們也可以在主...
前端開發｜nr – 一個簡化npm run script 的工具
您有沒有過這樣子的困擾？package.json中的script指令太簡潔，常常會忘記指令的作用是什...
前端開發｜自定義網頁捲軸(Scrollbar)樣式
這篇文章主要跟大家分享如何自定義網頁捲軸(Scrollbar)的樣式。從這篇文章你會知道：1.如何自...
如何讓 localStorage 具有時效性
在開發中我們常會運用到 localStorage 來對客戶端瀏覽器的數據進行各方面的操作，但唯一美中...
使用inputmode決定虛擬鍵盤的配置類型
前端工程師在開發中大多會使用到 input 屬性，也對多數屬性並不陌生，但卻鮮少運用到 inputm...
前端開發：巢狀Sass Map的使用
這篇文章主要跟大家分享巢狀Sass Map的用法，並比較不使用Sass Map，及單層Sass Ma...
Magento 2 | 在 AJAX 未完成時調用 Loader Widget
在 Magento 2 執行 AJAX 時，根據要獲取的數據、處理時間、服務器類型等等，請求可能需要...
Magento2 如何在 minicart 顯示折扣
“折扣” 一直是電商行銷很重要的一環，但在 Magento 原生 minicart 中並沒有顯示消費...
如何在表單欄位中禁用貼上及拖放功能
您有沒有遇過無法在表單欄位中直接貼上字串的網站，通常這種禁止貼上的作法，都是應該在帳號密碼有關的欄位...
如何在網頁上禁用文本選擇及滑鼠右鍵
如果不希望讓別人輕易竊取網站內容、通常會選擇在網頁上禁用文本選擇(文字反白)、剪下、複製、貼上和滑鼠...
Mage Template 自定義模板是什麼？
如果您已經開發 Magento 2 一段時間，您可能在 JavaScript 文件中遇到過 mage...
前端創建日期選擇器的最佳方法
在安排某些計劃 / 行動時，會需要使用 Magento 2 所提供的小工具 - 日期選擇器。 對於 ...
如何在不同形式的檔案中獲取Magento 2 URL
在運行 Magento 2 商店時，會有很多情況需要系統自動獲取基本或特定頁面網址，例如，CMS 頁...
前端開發 | 如何使用jQuery resize event套件
在原始的JS語法中，只有瀏覽器的window物件可以觸發resize事件，如果想要知道其他元素的大小...
前端開發 | 如何將8位數的HEX色碼轉換成 RGBA
HEX 色碼是一種16進位的顏色標示法，相信從事網頁前端和美編工作的人，對他一點都不會感到陌生，他是...
Magento2 / 前端開發 | 如何使用Slick js 自訂商品輪播器
之前我們分享過如何使用view.xml去調整商品輪播(Product Carousel)每次滾動的商...
Magento2 / 前端開發 | 如何調整page builder商品網格及商品輪播的響應式變化
Page Builder是Magento內建的內容編輯系統，可用在一般內容區塊、內容頁面、目錄或是產...
Magento2 / 前端開發 | 如何避免點擊目錄頁的篩選器時產生的畫面跳動情形
在Magento2 目錄頁底下，使用左邊的篩選器時、偶爾會發生畫面跳一下的情況，這是因為篩選器使用的...
如何新增Magento 會員中心導覽列內的客製連結
Magento原生功能中，前台會員中心會顯示大量客戶帳戶相關連結；但想當然，這些連結未必是客戶們實際...
如何移除 Magento 會員中心導覽列內不必要的連結
Magento原生功能中，前台會員中心會顯示大量客戶帳戶相關連結；但想當然，這些連結未必是客戶們實際...
前端開發：使用@supports來檢查瀏覽器支援性
之前我們在 快速查詢CSS/HTML與各瀏覽器的支援－Can I Use 這篇文章中 提到過瀏覽器...
前端開發：解決slider js垂直滑動時出現的高度問題
slick js 是一個相當好用的輪播套件，Magento2 page builder裡的slide...
前端開發：解決SASS的禁用警告 “Using / for division is deprecated and will be removed in Dart Sass 2.0.0. “
由於Dart Sass 2.0.0不再支援用"/"表示除法，如果您恰好使用了這個方法，那麼在編譯的過...
前端開發：讓你的Bootstrap4下拉選單支援多層次選單
Bootstrap 3 和 Bootstrap 4 的下拉選單，只支援到第二層，如果需要多層次選單的...
React JS：如何讓React dev tools支援本機網站
React DevTools 是React js的除錯工具，可以用來觀察React APP在網頁面執...
Magento PWA：如何安裝Magento PWA sample data (Venia sample data)
這篇文章要跟大家分享安裝Magento PWA sample data的方法以及如何解決可能遇到的問...
Magento2：如何將購物車的同意條款移到畫面底下
在將結帳按鈕移到畫面底下之後、你可能也需要將結帳的同意條款移到畫面底下。假設我們使用的主題包是Ast...
Magento2：如何將購物車的結帳按鈕移到畫面最底下
在Magento2的結帳頁中，預設的結帳按鈕是跟著結帳方式跑的。每個結帳方式都有自己的結帳按鈕。那如...
前端開發小學堂（一）如何限制按下Enter就送出表單與勾選框的可勾選數量
今天的前端開發小學堂，會介紹兩項小方法： 在一般情況下，按下Enter就會直接送出表單，若有額外的...
Vue Storefront ＋Magento執行
您在線上商店會需要的一切。但許多人抱怨它的速度、資源密集、難以維護等等。若您想讓您的magento體...
五個方法提升 Web Fonts 載入速度
微調 font 文件並進階優化字體載入策略，以實現最快速度和最短 FOUT 表現 在之前的文章我們...
System Fonts 和 Web Fonts 比較
什麼是 System Fonts / Web Fonts？System Fonts 顧名思義指的是作...
前端開發：使用jQuery實作點擊div以外的地方來關閉它
在使用下拉選單或者是彈出視窗的時候、我們常常會需要一個功能：點擊元件外部來關閉元件。在接下來的範例中...
Magento2 新增javascript的windows.checkoutConfig變數
在Magento2的結帳頁面是使用knockoutjs渲染製作的功能和特效，而它的購物車、客戶、商品...
Web Share API 網頁分享功能
Web Share API 是現代瀏覽器提供的功能之一，它讓網頁的使用者能夠體驗到和原生 app 完...
前端開發：bootstrap-table.js的中文化設定
bootstrap-table.js 是一個以bootstrap為基礎的表格外掛。可以對表格的資料進...
Javascript 中 JSON.parse 數字支援問題
在javascript中我們常常使JSON格式做資料交換，所以我們常常使用JSON.parse來把字...
前端開發：如何使用Javascript實現複製到剪貼簿的功能
這篇文章要來分享如何使用Javascript實現複製到剪貼簿的功能呦！那就跟著以下操作教學，一起來試...
Magento2 前端開發：如何在前端頁面取得自訂product attribute的值
呈上期 新增product attribute 之後，本篇文章將說明如何在前端頁面把product ...
Magento2前端開發：新增主題後無法執行deploy
最近在工作中發現，在新增Magento2 主題包的時候，如果設定了parent theme，就會無法...
Magento2前端開發：使用PHP TIDY來補齊或移除不完整的HTML TAG
Magento2 後台的wisiwyg編輯器有防呆的機制，會自動修正使用者輸入的html，可以避免產...
前端開發：使用JQuery.qrcode來產生QR code吧！
jquery.qrcode.js 是純前端的jquery 外掛，可以輕鬆在網頁上生產QR code。...
Sass Map的使用
本篇文章將來教大家關於Sass Map的應用，來提升工程師在開發與維護程式時的品質，跟著歐斯瑞手把手...
CSS 預處理器 SASS、LESS 介紹
CSS 預處理器產生了一種新的語言，而核心理念是用一種專門的程式語言，為 CSS 增加一些程式設計的...
前端開發：如何隱藏數字輸入框的小箭頭
又來到了歐斯瑞的前端開發教學系列，今天要與大家分享如何使用CSS隱藏數字輸入框的小箭頭，並附上cod...
前端開發：使用bootstrap-table.js來實現表格的排序
bootstrap-table.js 是一個以為bootstrap為基礎的表格外掛。可以對表格的資料...
前端開發：表單元件常用的CSS選擇器
CSS對於前端開發而言，是不可少的一重要元件，今天就來為大家介紹表單元件中常用的CSS選擇器 (CS...
利用CSS counter 自動分類計算細項
CSS (Cascading Style Sheets) 用於定義網頁中所顯示的樣式，也可以用於做簡...
前端開發：將輸入的英文轉成大寫
有時候我們需要限制輸入框只能輸入大寫符號，這時候我們可以使用JavaScript，將已經輸入的英文字...
關於 CSS 偽元素的那些小事
偽元素是什麼？它能為前端解決哪些問題？為什麼要使用它？ 前端工程師對於 ::before 和 ::...
Magento2前端開發：如何透過修改layout xml檔來顯示最近看過的商品
雖然透過後台的widget設定就可以顯示「最近看過的商品」，但是為了做好版本控制，我們還是希望可以透...
利用checkbox做判斷改變CSS樣式並更改checkbox本身樣式
如何利用checkbox 做判斷改變CSS樣式並更改checkbox本身樣式
Magento2前端開發: 當滑鼠滑入購物車按鈕時隨即展開迷你購物車
原生的Magento2 主題包，需要點擊購物車小圖才能展開迷你購物車，如果想要在滑鼠滑入的時候展開迷...
Magento2前端開發: 如何從購物車中移除計算運費和稅金的區塊
一般我們要移除某個區塊的時候、直接在xml檔裡加上底下設定就可以，但是在購物車頁面中，如果我們直接使...
使用css+jquery+jqueryUI 做出拖拉相片效果
拖拉相片效果其實比你想像中簡單，清楚的設定教學與截圖，讓你一次就上手！
Magento2前端開發：使用手指左右滑動來切換Bootstrap 輪播區塊
在開始實作之前，我們要先確認已經將Bootstrap打包進我們的Magento主題包裡，詳細的操作可...
Magento2使用手指左右滑動來切換Bootstrap頁籤
先前已經分享過如何將Bootstrap打包進我們的Magento主題包裡，接下來我們要開始讓Boot...
簡單完成社群網站連結散開效果-圓形
很多網站會將社群連結固定在網頁上，讓使用者易於觸擊，但隨著社群越來越多，放上太多連結總是不美觀，因此...
使用Magento2 原生工具來將LESS編譯成CSS
Magento2 提供Blank以及Luma二款預設的主題包，這二款主題包都是使用LESS來編譯CS...
CSS3 : 簡單使用flexbox 展示自適應及滑過效果
要怎麼在網頁呈現自適應及滑過的效果呢，這次我們介紹flexbox，讓你可以簡單使用輕鬆上手！
具有響應式功能的圖片延遲載入外掛
延遲載入 lazy load 是 Hibernate3 默認的加載方式，是為了避免一些無謂的性能開銷...
Sass selectors(選擇器)－該不該使用巢狀架構？
在撰寫Sass selectors(選擇器)時，到底該不該使用巢狀架構呢？這裡將提出來讓大家一起分析...
純CSS實現表格首行和首列固定
當表格列數和行數較多時，使用者會出現的需求即是把重要的列與行固定，以便於瀏覽表格內容，才得以提高用戶...
3個實用的 infinite scroll 套件
infinite scroll是一種新的網頁讀取資料的技術，當使用者到網頁的最下方時，會自動載入新的...
BEM 規範思維 – 讓 CSS 更利於開發與維護 (二)
BEM 是一種前端項目開發的方法學，著重程式命名的識別度、一致性，本文將介紹Modify、Mix模式...
如何在Magento2 使用 Bootstrap
如果想要在Magento2的主題包裡使用bootstrap 的 javascript，我們就要使用r...
用下載代替嵌入 Google fonts 使用小技巧
Google Fonts 會依照瀏覽器的字型格式需求回傳相應的字型檔，這可能會使網頁加載變慢，或讓d...
KnockoutJs 系列(1)-observableArray
Knockout 是一個JavaScript函式庫，它使用一種清晰的資料模型協助您建立更豐富的使用者...