文章彙整

660 篇文章標籤含"網站技術與設計"

首頁  /  標籤含 "網站技術與設計"的文章

前端開發:使用@supports來檢查瀏覽器支援性

之前我們在 快速查詢CSS/HTML與各瀏覽器的支援-Can I Use  這篇文章中 提到過瀏覽器支援性的問題,在這篇文章中我們建議開發者先到 Can I Use 網站中確認瀏覽器對CSS新屬性的支援度再進行開發。然而在實際開發的過程中,我們常常會遇到客戶在驗收階段對我們說:「為什麼在我手機(電腦)上看起來怪怪的?」仔細確認過客戶的裝置版本之後、就是各種的無奈。在這個階段我們不太可能把之前做好的東西推翻重做,多數時間的解法都是針對不支援的瀏覽器另外設置對應的CSS。在這個時候,確認瀏覽器是否支援某些CSS屬性這件事、就變得非常的重要。

前端開發:解決slider js垂直滑動時出現的高度問題

slick js 是一個相當好用的輪播套件,Magento2 page builder裡的slider也是使用這個套件來實現輪播的效果。這篇文章要跟大家分享的是:如何使用slick js 製作上下滾動的滑塊,以及如何解決垂直滑動時出現的高度問題呦!

Magento2 開發 – 設置排程群組

如果各位接觸Magento2開發有一段時間,對於添加排程工作想必不陌生。今天想與大家進一步分享的,是關於排程進階的參數控制。如果您發現預計執行的工作,沒有如預期產生在cron_schedule資料表,或者沒有正常的執行,那麼有可能是被這些隱性參數所影響。

前端開發:解決SASS的禁用警告 “Using / for division is deprecated and will be removed in Dart Sass 2.0.0. “

由於Dart Sass 2.0.0不再支援用"/"表示除法,如果您恰好使用了這個方法,那麼在編譯的過程中,SASS會不斷的跳出棄用警告:DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.。而且這警告又沒有辦法關閉,雖然不影響編譯的結果,但是大量的警告真的很煩人。若是使用了bootstrap 4,那警告量更是驚人。若是要解決這個問題,底下提供了二個方法供您參考。

前端開發:讓你的Bootstrap4下拉選單支援多層次選單

Bootstrap 3 和 Bootstrap 4 的下拉選單,只支援到第二層,如果需要多層次選單的話,我們需要用到 bootstrap-submenu.js。其中Bootstrap 3 要搭配 Bootstrap-submenu 2使用,Bootstrap4 則是要搭配 Bootstrap-submenu 3 使用。今天這篇文章主要是分享Bootstrap 4 + Bootstrap-submenu 3的作法,關於Bootstrap 3 + Bootstrap-submenu 2 的作法,你可以參考我們的舊文章:讓你的Bootstrap下拉選單可以支援多層選單

Magento2 直接把Block轉換以Ajax方式渲染,迴避Full Page Cache問題

在Magento2大部分的頁面都有Full Page Cache,舉凡像是prodcut、category、cms頁都有使用,讓使用者在下次近入頁面時間提升,但是這對於說想在頁面上想根據不同使用者所呈現不同內容來說是非常惱人的,雖然可以使用cacheable="false"來避免但是這樣便會完全失去Full Page Cache功能,於是剩下的辦法便是使用AJAX拿回沒有Cache的資料進行渲染,但是對於每次都寫一隻AJAX與API的方式來說並不是怎麼的有效率,這邊將提供一個簡單的方法將你的Block轉換為上述方式,只需一個簡單的參數,省下更多的時間。

Photoshop【超簡單系列】Neural Filters-超縮放

由於Photoshop軟體運算技術的提升,讓本來很複雜的修圖變的很輕鬆,今天astralweb要與大家分享當照片放大後會模糊,PS有什麼方式可以改善呢,一起來看看如何製作吧! ※本教學使用Adobe Photoshop 2021 (v22.1) 製作 ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法,如去背、選取工具、色調調整 以往如果解析度不夠的圖片就會無法使用,現在你可以先考慮一下PS新的處理功能

Category attribute無法存入表單為0值

因為專案需求的關係需要在admin的category的form上新增原本沒有的欄位,上網爬文後我使用category attribute的方式去新增,以下圖所示,是我用的方式。而將這multi-select的選項換成我需要的選項Customer group。

如果使用Cloudflare取IP的問題和解決方法

由於網路發展的快速,越來越多開發者為了避免使用者等待網頁讀取時間過長而使用CDN,而CloudFlare是如今網站常用的CDN服務供應商,專門提供網站加速與安全防護的服務。 最近遇到了一個有使用CloudFlare專案的需求是記錄使用者的IP方便確認哪些是惡意攻擊的使用者以方便封鎖。但因為這個專案是有使用CloudFlare,取到的IP都是從CloudFlare出來的,無法確認真正的使用者是從哪裡來。以下就要來介紹的是在使用CloudFlare時取得使用者真實IP的方法。

Photoshop【超簡單系列】Neural Filters-彩色化

由於Photoshop軟體運算技術的提升,讓本來很複雜的修圖變的很輕鬆,今天astralweb要與大家分享如何快速將黑白照片上色,一起來看看如何製作吧! ※本教學使用Adobe Photoshop 2021 (v22.1) 製作 ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法,如去背、選取工具、色調調整 以往將黑白照片上色時,我們需要將不同顏色區塊給區分開來並分別上色,現在Photoshop可以直接幫你做好這些事情

Shopify開發:如何針對不同語系顯示不同的頁尾選單

在開發多國語系的Shopify網站時,我們常常需要在不同的語系下,顯示不同的頁尾選單。而shopify的預設功能,沒有辦法針對不同語系去指定不同的頁尾選單。因此我們需要修改程式碼來實現多語系的頁尾選單。如果想要針對不同語系顯示不同的頁尾選單,我們只需要把握判二樣技巧就可以了一、判斷語系二、呼叫自訂選單

React JS:如何讓React dev tools支援本機網站

React DevTools 是React js的除錯工具,可以用來觀察React APP在網頁面執行的一些資訊,利如組件之間的相互關係。不論是Chrome或者是Firefox 都有React DevTools的擴充工能。在預設的情況下,React DevTools是不支援本機網站的,這篇文章要分享如何安裝React DevTools並支援本機網站。底下我們以Chrome為例來做分享。

Magento PWA:如何安裝Magento PWA sample data (Venia sample data)

這篇文章要跟大家分享安裝Magento PWA sample data的方法以及如何解決可能遇到的問題。 在開始之前您需要先有一個Magento2 網站,安裝方法可以參考我們之前的文章: 如何使用composer安裝magento2 如果您之前已經安裝了 magento2-sample-data的模組,那必須先把sample data的模組移除,再用全新乾淨的資料庫重新安裝一次。

Magento2:如何將購物車的同意條款移到畫面底下

在將結帳按鈕移到畫面底下之後、你可能也需要將結帳的同意條款移到畫面底下。假設我們使用的主題包是AstralWeb/theme,底下我們的範例是直接在AstralWeb/theme這個主題包裡移動同意條款核取框的位置。

Magento2:如何將購物車的結帳按鈕移到畫面最底下

在Magento2的結帳頁中,預設的結帳按鈕是跟著結帳方式跑的。每個結帳方式都有自己的結帳按鈕。那如果我們想要把結帳按鈕移到結帳頁的畫面底下,並且希望只有一個結帳按鈕的話、又該如何處理呢?假設我們使用的主題包是AstralWeb/theme,底下我們的範例是直接在AstralWeb/theme這個主題包裡移動結帳按鈕的位置。

前端開發小學堂(一)如何限制按下Enter就送出表單與勾選框的可勾選數量

今天的前端開發小學堂,會介紹兩項小方法: 在一般情況下,按下Enter就會直接送出表單,若有額外的需求,不能讓表單直接被送出呢? 在做項目選擇時,我們可一直將勾選框打勾,若要限制可勾選數量呢? 以上兩種問題小情境, 想知道怎麼製作嗎,那就繼續往下看吧!

git reset的使用方式

今天要來介紹git reset的使用方式。有時候我們在 commit 時,會不小心 add 錯檔案,或是 commit message 寫錯、打錯字,但我們不想要再多新增一個commit,只是想修改原本的內容而已,就會發生「剛才的 Commit 後悔了,想要拆掉重做…」。

Forking Workflow的介紹

今天要來介紹寫CODE在專案進行多人協作時,好用的Forking Workflow。Forking Workflow的主要好處是,不需要所有開發者都擁有能push code到專案的repository中的權限,而其他開發者的Code也可以被整合在一起。每當其他開發者推送修改到自己的fork repository,再發起Pull Reques的通知給專案維護者,讓專案維護者合併到專案repository。這樣專案維護者可以不需要給其他開發者專案repository權限,並接受任何開發者的提交修改。

Photoshop【超簡單系列】智慧型肖像

由於Photoshop軟體運算技術的提升,讓本來很複雜的修圖變的很輕鬆,今天Astral Web要與大家分享在有限度的範圍內,如何快速更改臉部光影、頭部方向、頭髮厚度、眼球方向等,一起來看看如何製作吧!以往這些動作都要個別處理,每一項修改都要花上不少時間,現在Photoshop可以一次幫你做好這些事情

Photoshop【超簡單系列】化妝轉移

由於Photoshop軟體運算技術的提升,讓本來很複雜的修圖變的很輕鬆,今天astralweb要與大家分享如何快速上妝,一起來看看如何製作吧! ※本教學使用Adobe Photoshop 2021 (v22.1) 製作 ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法,如去背、選取工具、色調調整

Line Pay 金流串接

註冊為LINE Pay的商家,可以吸引全球的LINE用戶作為自己的客戶。此外,通過LINE擴展商家的銷售管道,可以預見銷售額的迅速成長。 上次我們已經說過如何申請Sand Box與帳號,現在我們要來串接付款的程式。SandboxUrl : https://sandbox-api-pay.line.me

Magento2 JavaScript mixins介紹

使用mixin可以讓一個class的方法去增加或混合到另一個class裡, 而不用整個class去繼承或覆寫原本的基礎class, 大大增加了開發的彈性, 此篇就要來介紹, 要如去使用mixin方法在Magento2專案裡。範例:延展UI component此示範如何新增一個function至目標component, 使其component屬性可增加

Magento PhpStorm Plugin(上)

IDE作為工程師最重要的開發工具之一,對工程師的工作效率有著決定性的影響。由JetBrains所推出的PhpStorm即便是收費軟體,仍受到廣泛Magento工程師推崇為最適合開發Magento的IDE. 除了PhpStorm本身所帶來十分便利的功能及良好的性能表現之外,搭配Magento官方發布的"Magento PhpStorm" plugin 更是如虎添翼。以下為大家介紹如何安裝及使用Magento PhpStorm.

Photoshop【超簡單系列】Neural Filters-皮膚平滑化

由於Photoshop軟體運算技術的提升,讓本來很複雜的修圖變的很輕鬆,今天astralweb要與大家分享內建功能Neural Filters中的皮膚平滑化,如何快速修皮膚,一起來看看如何製作吧! ※本教學使用Adobe Photoshop 2021 (v22.1) 製作 ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法,如去背、選取工具、色調調整 以往要透過「汙點修復工具」和「修補工具」針對各個汙點做處理,現在Photoshop可以直接透過Neural Filters做全臉處理

在GITHUB上建立可供Composer安裝的Magento2 Repository

當module或library需要透過composer來安裝,但卻又沒有packagis帳號時候該怎麼辦呢? 此篇要來介紹,如何在github上建立可以支援composer安裝的Repository,這樣就算沒有將module上傳packagist,也可以透過composer指定Repository進行安裝哦。

MAGENTO 2 – 如何將完整的訂單概要呈現於 Checkout Shipping Step

近期我們收到一個需求是希望能在 Checkout - 1. Shipping 第一階段就能完整呈現 Order Summary ,而原生 MAGENTO 2 所提供的是使用者需要等到 Checkout - 2. Review & Payments 這個步驟時,才會提供完整資訊,下圖截至 Luma Theme 能更清楚看出原生在這兩個步驟所顯示的資訊差異。

Magento2 可售庫存的計算

不知各位是否遇過,明明設定產品的庫存量為正數,但前台卻顯示無庫存,或者下單時被告知無庫存的情況呢?如果對這種情況感到棘手,今天剛好一起來了解庫存可售量,在訂單流程中的增減邏輯吧!我們先從後台新增了一個簡單商品,給定初始庫存量 5。從產品列表,可確認當前庫存量與可售量皆為5。

Magento 2 與POS系統串接進行會員註冊測試的常見情境!

要使用Magento製作一個電商網站非常不容易,不僅在一開始業務端需要花很多時間去釐清客戶的需求,了解完再交由公司內部的PM針對客戶的需求進行網站規格的盤點以及人力資源的調度和專案時程規劃,在完成這些前置作業後,專案開跑團隊工程師開始進行網站製作,過程中客戶可能會有新的問題及需求,而PM要在負責統籌並審核將此需求加入專案的必要性與時程調整。

di.xml注入的使用方式

今天要來介紹如何di.xml注入的使用方式,開發magento2的時候常常會需要plugin或preference去影響原生的程式,如果只要針對原生程式中的一個物件、參數或陣列做替換或注入的話,用preference去覆蓋掉原本的程式又過於費工,這時候就可以用Argument type直接替換或注入就可以。這邊我們預設各位讀者都已經知道如何製作一個基本的magento2 module來進行範例製作,因此這邊只寫出必要的設定檔案。

Photoshop教學【手繪風】切片柳丁

今天Astralweb要與大家分享使用筆刷繪圖的實例,一起來看看如何製作吧! ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法,如去背、選取工具、色調調整 希望對您在未來繪圖上能有所幫助。如對本系列有興趣可以參考其他篇以及隨時關注我們喔!

處理cloudflare’s誤報

Cloudflare是個非常強大的工具。您可以使用它來管理您的DNS登入,為您的網站多一層安全保護,改善您的網站速度以及許多其他事物。但與其他人造品一樣,cloudflare並非完美的。在本篇文章中,我們會說明當您在網站上使用cloudflare時,可能發生的問題之一。

Laravel 8 URL 改寫問題

網路上有許多支援Laravel的Nginx配置範例。設定是蠻簡單的,不過當使用Laravel 8時,可能會出現以下錯誤。這個錯誤的原因並非太明確,但此問題在Laravel文件版本4.2~5.3中有提到過。關於URL改寫,需要在Nginx的配置文件中加入以下這行

基本的Elasticsearch故障排除

自從Magento 2.4.0,Elasticsearch逐漸成為預設的索引工具。部分的小問題持續發生,其中最重要的就是無法正確搜尋,需要一些Linux技術。如果在執行重新索引後,您覺得索引的性能降低了,此篇文章或許可以協助到您。首先,要透過執行”curl -X GET”來檢查ElasticSearch是否運作正確

內容安全政策:修復Yotpo政策錯誤

Yotpo是內建在Magento中很實用的一個平台,幫助商家可以很輕鬆的收集與顯示客戶評論、照片和影片,提高了客戶的信任度,進而促進銷售。 雖然Yotpo已與Magento完全整合並配置共同運作,但在全新安裝後,並非完全無誤。內容安全政策Content Security Policies(CSP)是最常見的問題。 CSP為一種安全工具用來減緩網站攻擊,像是信用卡盜錄器、連線劫持、點擊劫持等等。要求伺服器在HTTP標題中將腳本、樣式與其他資源的外部資源列入白名單。

基本的VPS安全:SSH

在先前的文章中,我們有列出您需要了解的一些有關VPS安全重要事項。在這第二部分,我們會針對保護您的SSH再做些微深入討論。 SSH(安全外殼協定)是一種在非安全的網路中,提供安全連接到您的VPS協定。代表著就算您使用的是公共wifi,您與伺服器之間的連接會一直被加密著。我們一直把SSH安全放在安全檢查列表的首位,因為安全是最重要的事情。如果入侵者可以得到您的SSH訪問權限,他很有可能閱讀您的資料、放一些惡意軟體、執行一些指令,甚至使用您的電腦資源來為比特幣挖礦或下載非法的內容。

基本的VPS安全最佳實踐作法

想像一下,如果您在市中心經營一家實體店且非常忙碌,誰不想要您的錢呢?自古以來最著名的可說是強盜與竊賊了,那就是為何您總是需要在店裡裝設24/7全天候的監視器。 我們都生活在一個一切都在線上的世界,包括您的事業(而竊賊同樣也在線!)您已經在網路上運作您的事業,然後呢?執行線上事業不只是開發您的網站,為您的產品進行促銷,還有支付您收到來自託管公司的所有帳單:來維護您的網站安全,確保沒人能毀掉您的事業。

Vue Storefront +Magento執行

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

使用git attributes正規化專案換行字元

各位開發者所熟悉的專案版控工具git, 無論是一人專案或多人合作專案都有其用武之地。在多人專案中,數名開發者各自在自己的作業系統上進行開發後,將成果發布到repository 上。其他的開發者則將新的內容拉到自己的環境中,再繼續自己的開發作業。這乍聽之下沒什麼問題,多數情況下也不會有什麼問題──直到你遇到這個詭異的現象

Magento2 擴充模組的ACL權限

過去我們已介紹了如何設定Magento後台使用者的權限,在原生的架構下,各模組依功能可細分控管項目,而在客製擴充功能時,勢必也會遇到權限控管需求,今天就跟各位一同來了解Magento的ACL實作方式。首先,需要先了解Magento的ACL架構,是由使用者(User),角色(Role),與資源(Resource)所組成。透過指定角色擁有哪些資源,再將使用者納入角色,來建構使用者對資源的存取鏈。因此要為新功能增加權限,第一步就是定義新的資源。

五個方法提升 Web Fonts 載入速度

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

System Fonts 和 Web Fonts 比較

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

使用FB Conversions API增加事件與Facebook Pixel兼容

我們也在前篇文章(這裡可以擺個連結)示範了如何使用FB Business SDK新增FB Conversions API,我們將在這篇文章講述如何設定事件。以上是四個常用事件,詳細參數可以到FB Conversions API參數,但是當你已經通過Facebook pixel發送事件則需對重複事件進行刪除,刪除必須滿足兩個條件

FB Conversions API

2021年起 appale 使用 App Tracking Transparency 向 iOS 14 裝置用戶顯示提示。此提示將徵求用戶是否許可第三方應用程式和網站追踪他們,這意味者用戶可以自己選擇是否要提供數據給第三方。影響:這會影響FB在追蹤用戶網路行為,進而影響廣告投放精準度,造成廣告效益降低。由於無法取得資料,業主無法得知廣告效益,是否提升商品加入購物車

在正式環境設定Magento PWA Venia

在開發或測試新功能後,對於在開發者模式下的任何特定Venia環境中,下一步就是要部署正式環境 ,來充分利用Magento前端的客製化及增強程式碼。由於它的屬性與動態性質是基於客製要求及測試,這篇文章將不涵蓋任何標準化下的CI/CD的過程。

翻譯Magento PWA Venia的主題

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

Photoshop【超簡單系列】毛髮去背

由於Photoshop軟體運算技術的提升,讓本來很複雜的修圖變的很輕鬆,今天astralweb要與大家分享內建的選取功能,如何快速去除有頭髮的背景,一起來看看如何製作吧! ※本教學使用Adobe Photoshop 2021 (v22.1) 製作 ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法,如去背、選取工具、色調調整

Magento FPC清除事件

每個建置網站的人一定都曾思考過這個問題:「如何讓我的網站變得更快?」網站的載入速度除了影響使用者體驗,也和SEO大有關係。因此,許多工程師使盡渾身解數,只求省下那數十毫秒的載入時間。使用Magento建置的網站,其功能強大且完善,但隨著啟用的套件越多,網站的載入速度也會變得越慢。所幸Magento本身已有「全頁快取 (Full Page Cache)」的功能,可大大優化這方面的表現。

將PHP擴充模組部署至Magento Cloud

根據設計,MagentoCloud提供了一個無需配置修改即可立即使用的環境構造,包含運行Magento的所有必要資料及設置,而無需花費時間在找尋正確的配置與規範。但有時因技術的變化,可能需要安裝額外的PHP擴充模組。 最常需要添加的擴充模組通常與安全性有關,例如強化雲環境安全性的新加密演算法。除此之外,為新的模組添加新的PHP擴充模組也是可能發生的情形之一。

修復Magento Cloud上的502錯誤

502 Bad Gateway錯誤可能是個異常發生的錯誤,在特定的整合(開發)環境中。若在檢查Magento Cloud配置與網路速度後,工程團隊仍無法判斷造成該錯誤的根本原因,此錯誤會很難被分析。此篇文章主要為簡述可能造成502錯誤的根本原因與將該錯誤降低的建議方式。

Magento Cloud:建立一個新的整合環境

如果您需要在Magento Cloud建立一個新的整合環境該怎麼做呢?這篇文章中,我將會詳細介紹從Staging branch新建一個整合環境的過程。您注意到Magento Cloud UI介面是非常容易使用的,讓您認為建立一個新的整合環境就像是操作簡易的“刪除”及“從Staging分支”,但您很快就能發現事實並非如此。在刪除整合環境後,您會發現沒有可用的選項得以從Staging網站新建一個分支。若有這種情況,別驚慌。Magento Cloud CLI可以協助解決。

Magento Cloud Command-Line:基礎用法

Magento Cloud的目標之一為有效節省DevOps時間與減少開發上的問題。雖然利用Magento Cloud Web提供的UI是非常方便,但透過Command-Line(CLI)執行同樣地任務會更加省時。

使用bash functions簡化指令

有些常用的magento相關指令比較長,即使有官方縮寫也經常容易打錯。使用bash function可以自定義這些常用指令的縮寫,以進行簡化或是自行使用容易記得的縮寫。

Sendgrid 發信失敗!錯誤代碼421.5.7.1 是什麼原因?

什麼是Sendgrid ?Sendgrid為國際知名的SMTP廠商之一,不熟悉的讀者可能會接著問那SMTP廠商是什麼廠商?簡單來說SMTP廠商提供較可靠的Email郵件伺服器,並經過特殊的Server配置,使得透過SMTP廠商來發送電子郵件時,有比較低的機率會被收件者的郵件伺服器歸類為垃圾信件,重點是您就不需要自己去架設Email郵件伺服器,也不需要花費資源去維護Email郵件伺服器。

使用git interactive rebase改寫commit歷史

只要是有使用過git進行版本控制,一定會發生commit了之後反悔的情況。若僅想要訂正部份commit內容,可使用commit --amend, 但若想要將commit「移除」,則有兩種作法:git revert或git interactive rebase. 

將Magento Cloud請求重新路由轉送至另一個CMS

Magento Cloud顧名思義就是在雲上運作。意思是他們已經為您配置好所有的網路運作及基礎設施,且它們運作的良好。讓您不用擔心那些事情,且作為Magento開發者,只要專注於開發您的網站即可。自從它開始在雲上運作,您可能無法自由地客製您的nginx、防火牆及其他基礎設施方面。在某些情況下,您需要整合一些第三方系統至您的Magento。舉個例,您通常需要有一個wordpress部落格在您安裝的Magento /blog目錄底下運行。

前端開發:使用jQuery實作點擊div以外的地方來關閉它

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

Magento Cloud Cron 不會動的原因

Magento Cloud上的Cron不會動?筆者於用Magento Cloud上部屬的網站後台MARKETING->Promotions->Cart Price Rules的Manage Coupon Codes新增完促銷後,點擊Generate後系統留下此提示訊息後就結束了。

【WordPress】不懂程式碼也能輕鬆架出美感出眾的網站,設計功能強大的 Divi Theme

當你已經成功架設好WordPress網站,下一步就是要煩惱網站該如何呈現? 除了可以使用WordPress原生的佈景主題外,其實你還有更多高客製化的選擇,也就是頁面編輯器(Page Builder)今天要和讀者們介紹的頁面編輯器不是大家耳熟能詳的Element,而是擁有強大設計功能的Divi Theme.

POSTMAN Response直接解密的方法

先前有介紹過一篇 POSTMAN HEADER直接文字加密的方法,打過去的API傳回來的資料可能是加密的資料(如下圖),每打一次API都要再將回傳的資料再找其他方式解密才能閱讀資料是非常麻煩的事情。所以今天要來介紹POSTMAN Response直接解密的方法。

使用Markdown來編寫API

Markdown是一種輕量級標記式語言,他具有輕量化、易讀易寫特性,並且對於圖片,圖表、數學式都有支援,它允許人們使用易讀易寫的純文字格式編寫文件,然後轉換成有效的XML或HTML。API Blueprint是一種Markdown,針對API做了一些改變,也有很多工具支援,讓你極易產生API並且是開源的。

JMeter-網頁壓力測試教學

上次我們說到JMeter的安裝,這次來說說網頁壓力測試。一起來看看吧! JMeter壓力測試 主要是指定頁面裡在時間內有多少人進入頁面。 我們先用以下二種做測試: 1. 一秒內10個人進入Google首頁 2. 一秒內10個人進入Google網頁,三分鐘後自動停止

Magento Cloud – 如何在專案中使用Patch進行修正

現今在專案中,透過composer安裝第三方套件來使用是極為普遍的方式,使用composer安裝的程式碼是來自網路的公版軟件,也就意味著不可任意修改。而實務上,難免會遇到第三方套件存在bug,且尚未釋出修正。我們無法直接去修改vendor中的程式,因為每次composer更新安裝時,程式就會再次被公版覆蓋掉。針對這樣的修正需求,Magento Cloud在部署過程設計了一個Patch機制,可以在composer install完畢,去執行修改vendor裡特定的程式檔案。

給開發者 – 制定軟體版號

作為開發者,對於使用外部軟體套件一定不陌生,有在持續維護的套件,每隔一段時間,就會因功能上的追加或問題修復,釋放出新版程式。在未探究前,我們可能只知道版本基本上是遞增的,似乎又有分大小號。但何時加小號,何時加大號,該如何判斷呢?總會有那麼一天,我們需要自行定義產品發布的版號,今天就一起來認識關於版號使用上常見的慣例與規則吧!

導致訪客離開網站的2021年網站使用體驗

隨著網路趨勢的成長與技術的提升,現今多數網站皆會使用各式類型的彈跳視窗,顯示促銷活動、追蹤成效、提供最新消息、確保用戶了解網站所提供的服務等。然而,過多的彈跳視窗反而會對於使用者體驗帶來負面影響,進而導致訪客離開網站,降低轉換率。 那麼常見的網站彈跳視窗有哪些呢?一起來看看吧!

Magento2 新增javascript的windows.checkoutConfig變數

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

Web Share API 網頁分享功能

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

Illustrator教學 用AI做出霓虹燈效果

今天Astral Web要與大家分享用Illustrator做出霓虹燈文字的效果,一起來看看如何操作吧! ※本教學使用Adobe Illustrator 2021 25.2.1版本 霓虹效果不僅可以用PS做出,簡單幾個步驟AI也能做出類似效果歐。

XSS 檢測工具 XSStrike

XSStrike 是以python寫成的Cross Site Scripting注入檢測工具,他會使用多個解析器來產生有用的paload來去測試,他還包含爬蟲測試、參數查找、模糊測試、防火牆檢測功能掃描DOM XSS,下面我們來講解如何安裝與使用。

前端開發:bootstrap-table.js的中文化設定

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

Photoshop【超簡單系列】保留細節2.0放大

由於Photoshop軟體運算技術的提升,讓本來很複雜的修圖變的很輕鬆,今天astralweb要與大家分享在有限度的範圍或照片款式內,讓圖片放再大也不會變模糊。 ※本教學使用Adobe Photoshop 2021 (v22.3.0) 製作

Magento1 與 Magento2擴展模組介紹

此篇文章介紹給已經開發過Magento1轉開發Magento2的技術人員,或是反之Magento2轉開發Magento1的技術人員,來比較Magento1和Magento2之間擴展模組目錄的結構差異呦!

Photoshop【超簡單系列】天空取代功能

由於Photoshop軟體運算技術的提升,讓本來很複雜的修圖變的很輕鬆,今天astralweb要與大家分享內建的天空取代功能,如何秒速更換天空景色,一起來看看如何製作吧! ※本教學使用Adobe Photoshop 2021 (v22.1) 製作 ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法,如去背、選取工具、色調調整

Adobe XD教學【入門】雲端檢視好方便-設計稿演示與開發資料

今天astralweb要與大家分享Adobe XD,如何將完成好的XD文件產出開發時所需的資料,跟著本篇文章一步一步操作,希望對您在未來設計上能有所幫助!趕快一起來看看吧!

POSTMAN HEADER直接文字加密的方法

做API需求舉例,Stamp會需要拿RequestBody去做加密,但如果每一次都要將如果要修改RequestBody那麼同時也會需要以下面的加密方式再將SHA128(Base64Encode(RequestBody))寫回去Header裡的Stamp,而時間戳也要馬上產生,這樣每打一次API都要再重新加密是非常麻煩的事情。那要如何改善呢?

Illustrator教學【入門篇】物件重複圖樣功能

以往我們在做圖樣的重複排列或放射狀組合時,總是需耗費大量時間在排位置或是喬角度,這次推出一個自動化的功能,自動產出重複圖樣縮短了製作上的時間。今天Astral Web要與大家分享Illustrator的物件重複圖樣功能,分為放射、格點與鏡像呦!一起來看看如何操作吧!※本教學使用Adobe Illustrator 2021 25.1版本

使用submodule管理git子專案

使用Git來管理程式版本,身為開發者一定不陌生。在Magento專案裡,如果遇上原生不支援的功能,我們會自己開發模組,如果這個模組被設計可通用於不同專案,那麼集中一個地方去開發,肯定是較好的維護方式。今天要跟大家分享git本身即有功能可達到此目的,透過submodule的建立,一個模組專案,可以被安裝在不同Magento專案之下,一旦模組有更新異動,各專案可自行同步到最新程式,一起來看看吧!

Adobe XD教學【入門】增加更多方便的功能-安裝插件

在運用Adobe XD設計時,如果有工具能夠增添使用的方便性,是不是更好呢? 今天astralweb就要與大家分享Adobe XD官方提供的插件,可以額外增加Xd更多方便的功能喔,一起來看看吧!

Magento 2 Theme – Magento前端也能套版嗎?(下)

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

Magento 2 Theme – Magento前端也能套版嗎?(上)

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

Magento 2: 如何在表單欄位中新增 placeholder

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

如何修改Magento2 Increment Id

今天要來介紹修改increment id,在Magento2裡不管是訂單、發票、配送單還是退款單都會有increment id這個欄位,這個欄位就是用來當流水號用的,但為什麼會需要修改這個欄位呢?很多時候在與第三方平台串接時候,都會以increment id當作對接的唯一值,在開發的期間又會有local、test、staging、production各種不同的對接通一個第三方平台,此時就會發生第三方平台收到同樣的increment id導致錯誤,無法繼續進行下去,因此去修改increment id前綴開頭號碼,是最為快速的解決方法!

Javascript 中 JSON.parse 數字支援問題

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

Magento2 開發 – 使用 Plugin 改變原生行為 (三)

好久不見的Magento2開發-使用Plugin改變原生行為系列又來啦!這次Plugin的使用來到尾聲囉!最後一個,也就是置入點放在最末的 after Plugin,其使用也是最簡單的,我們繼續以先前的範例往下看吧!

Adobe XD教學【入門】善用資源來節省時間-官方UI kit資源

在設計時,如何善用資源來節省製作時間呢? 今天astralweb要與大家分享Adobe XD官方提供的免費資源喔!UI套件、插件等等,快速開始您的設計,可以省去一些製作的時間喔!一起來看看文章的介紹吧!

前端開發:如何使用Javascript實現複製到剪貼簿的功能

這篇文章要來分享如何使用Javascript實現複製到剪貼簿的功能呦!那就跟著以下操作教學,一起來試試吧!

Magento 2 引用 Popup Modal

與 Magento 1 相比,Magento 2 讓許多前端 Modal 的使用變得更加容易,特別是在 Popup。 Popup 是一種很好的行銷策略,可立即發出號召性用語,吸引訪問者的注意力並與他們進行深入互動,讓對方更具好奇心的探索網站。 Popup 也可以是提示使用者網站流程的資訊來源,因此經常被各網站使用。 本篇文章,我們將學習在 Magento 2 中創建 Popup。

Adobe XD教學【入門】新版3D立體功能 – 讓網站更具互動性

今天Astral Web要與大家分享Adobe XD 3D元件的運用,一起來看看吧! 此功能非常簡單,只要選擇物件後,再點擊右方工具列“3D Transforms按鈕” 即可使物件自由拖曳物件的垂直與水平方向。以下會透過實例讓大家更加了解 ※本教學使用Adobe XD (v35.1.12.5) 製作 (3D功能版本至少v34.0.12.33)

Magento 2 使用表單驗證 Form validation

什麼是表單驗證 ?表單驗證,簡單來說就是針對網頁上的

進行檢查格式的動作,今天主要是介紹怎麼樣在Magento 2 Form 加上 Validation,並且進一步的客製化 Validation Rule。那就跟著步驟一起看下去吧!

Magento2 開發 – 使用 Plugin 改變原生行為(二)

上回帶大家實作before的Plugin,用來改寫傳入的參數值。今天要探究的是最常被使用到的around Plugin,因為它可以直接覆蓋掉目標方法裡的邏輯行為,是普遍的客製需求所在,所以實做變化較多,話不多說,直接進入主題!沿用上回範例,我們以虛構類別 Magento\Example\Model\SummaryAmount.php來覆寫,不過這回稍微為目標方法增加了額外行為

Adobe XD教學【入門】Overlay疊加效果

今天Astral Web要與大家分享Adobe XD Overlay疊加效果的運用,一起來看看吧! ※本教學使用Adobe XD (v35.1.12.5) 製作 這次要教大家的是很常會用到的疊加功能,可以針對重複性高的做使用,例如:彈跳視窗、打字鍵盤或是下拉選單都能使用。 首先把按鈕製作成組件,再來先把要彈跳出來的物件做出來,並擺到理想顯示的位置。

Magento2 翻譯語言包權重

當我們製作好翻譯語言包後(還不知道如何製作翻譯包的讀者可以點此連結: Magento2 建立中文翻譯語言包),在Magento專案上有一些地方可以放置這些翻譯語言包,而這些放置的地方會影響到語言包讀取的權重,進而影響翻譯的結果,所以各位讀者需要好好的了解,才能準確無誤的翻譯到所需的字串。

Magento2 開發 – 使用 Plugin 改變原生行為 (一)

Magento 提供多種覆寫方法便於開發者進行客製,今天我們要介紹的方式- Plugin,是屬於較小範圍的改寫。 這種覆寫方式,會針對某個特定的類別,改變其所屬方法(method)的實際行為,而置入客製程式的方式,則依置入點細分三種: 方法之前(before),與方法當中(around) ,方法之後(after)。每種方式概念相仿,細節有異,今天要實際帶大家先了解的是 before  Plugin的實作。 我們知道一個function會有輸入參數跟輸出值,before就是針對輸入的的參數去包覆客製行為,也就是說,可以在參數傳遞進方法被執行前,對其值進行調整。

如何在Magento2 system config設置加密欄位

今天要來介紹如何在Magento2將資料加密再存入core_config_data 資料庫表格裡 為什麼需要加密資料呢? 有些資料是敏感性、隱私性高的資料,像是與第三方廠商合作,串接系統時候,通常都會有非公開的API需要以一些金鑰、密碼值進行認證,像這類的資訊在後台填寫時候和存入資料庫時候就應該被加密,就可以預防有權限直接存取資料庫的管理者,也無法拿到金鑰和密碼。 讀者在實作前,應已知如何設定system config data的前提下來進行,如果還不知道如何設定,請詳見此篇Magento 2 資料設定欄位的方法。

Adobe XD教學【入門】響應式輔助工具-Responsive Resize應用

今天astralweb要與大家分享Adobe XD在製作響應式縮放時的輔助工具,可以省去不少時間喔,一起來看看吧! ※本教學使用Adobe XD (v27.2.12) 製作 ※操作本教學前建議看看之前的其他篇喔 在製作響應式畫面的時候,會需要將特定區塊作縮放,Adobe XD的Responsive Resize可以依照響應式自動縮放,雖然不能完全符合各種需求,但是已經算是一個不錯的輔助工具。

Magento開發小筆記-修改Magento內建的jQuery日曆

我們在開發Magento時,多少會遇到需要使用日期選單的需求,這一點在Magento本身已有提供jQuery的日曆,而這個日曆產出的日期格式將會根據系統配置而不同。

如何在Win10上用WSL2建立Linux環境

在許多情況下,開發者必須使用Linux進行作業(包含Magento),但對於台灣Windows占比如此高的國家,該如何有效的切換Windows與Linux呢? 今天的文章就來與大家分享如何在Windows上使用Linux。

Adobe XD教學【入門】轉存檔案一次搞定-批次匯出

今天Astral Web要與大家分享Adobe XD轉存jpg、png、svg、pdf檔案,並且能批次處理,該如何操作呢?一起來看看吧!※本教學使用Adobe XD (v27.2.12) 製作※範例來源:Adobe UI kits - XD wireframe kits

運用 Axure Repeater Widget 優化 Prototype

網站開發時,有沒有過這樣的經驗...網站提案階段設計師提出美美的設計稿,但在開發完成後,卻怎麼看起來不太一樣? 通常這樣的情形容易發生在動態生成的頁面,實際串接的資料樣貌,會影響最終頁面的長相。 也因此,在規劃網頁結構時,我們會期望能將實際的資料納入考量,盡可能讓 Prototype 更接近實際的使用需求,藉此減少開發後期來回溝通、修調版面的人力成本。 今天讓我們以電商平台的產品列表頁舉例,簡介如何使用 Axure 的 Repeater Widget 製作Prototype,藉以及時確認並優化規劃內容。

活用Axure Dynamic Panel讓Wireframe動起來

在網站規劃過程中,必定會需要與團隊或是客戶溝通製作細節,除了盡可能運用文字詳細描述外,也可使用原型設計工具添加動態,輔助溝通與理解。 在使用 Axure 繪製Wireframe 時,可以選擇以 Dynamic Panel 表現不同使用情境下網站內容的變化,像是切換頁籤 (tab)、顯示彈出視窗 (pop-up)、顯示/隱藏網頁元素等 。 今天,讓我們以切換按鈕舉例,簡介如何活用 Dynamic Panel 讓 Wireframe 動起來。

使用Certbot安裝Let’s Encrypt

為了網站的安全性與更好的SEO排名,實踐SSL已經是必須的配置,Let’s Encrypt提供免費的SSL憑證,只要證明我們是網站的持有者,就可以免費申請。但Let’s Encrypt的證書每隔一段時間便會過期,方便的是,一個免費的開源工具Certbot,它提供可以自動執行憑證的頒發、安裝,而且操作步驟相當簡易,省去了煩雜的設定時間。下面將與各位分享,如何在LINUX ubuntu 安裝Certbot。

Magento2 開發 – 精確定義API回傳介面

上期我們詳盡示例了如何實作API回傳內容,其範例實作中的一環 - 定義介面(Interface),也就是回傳巢狀結構最繁複的一個環節,其實還隱藏了眉角,今天就來跟大家進一步分享這些不易發現的細節!

Google Chrome 洩漏密碼檢查教學

經常上網註冊、登入帳戶的使用者們,想必也有遇過密碼遭暴露的情況。密碼遭洩漏時怎麼辦?先別擔心,只要做好即時的密碼變更便可避免帳戶盜用的情況。Google Chrome瀏覽器針對已保存於Chrome中的密碼進行檢測,讓使用者們在第一時間變更已遭洩漏的密碼。 本文將針對Google Chrome瀏覽器中所推出的密碼檢查 (Password Checkup) 更新進行教學與介紹,幫助您即時更新任何遭洩露的網站密碼。

Adobe XD教學【入門】比複製更好用的工具-重複網格應用

今天Astral Web要與大家分享Adobe XD重複網格(Repeat Grid)的應用,一起來看看吧! ※本教學使用Adobe XD (v27.2.12) 製作 在UI/UX設計中,我們有時候會需要建立數個相同區塊或是相似區塊,例如商品列表、文章列表等,當要修改時就會變得非常麻煩,而重複網格(Repeat Grid)可以透過連動的方式來做調整喔!

Magento2前端開發:新增主題後無法執行deploy

最近在工作中發現,在新增Magento2 主題包的時候,如果設定了parent theme,就會無法順利執行 deploy,出現的錯誤訊息宛如一大片的紅海。如果您也遇到同樣的問題,一起學習如何處理吧!

Magento2前端開發:使用PHP TIDY來補齊或移除不完整的HTML TAG

Magento2 後台的wisiwyg編輯器有防呆的機制,會自動修正使用者輸入的html,可以避免產生不完整的html tag。但有時候我們需要匯入一些資料,或是同步一些外部資料進來,這些匯入或是同步來的資料就有機會夾帶一些不完整的html tag,進而造成網頁的大破版,所以就算後台有再堅強的防呆機制,都沒辦法防止。因為他是不通過後台的!

Adobe XD教學【入門】一個組件顯示多個狀態-用組件狀態製作選單

今天astralweb要與大家分享Adobe XD如何用一個組件顯示多個狀態,並能透過組件批次修改,一起來看看吧! ※本教學使用Adobe XD 2019(v25.1.12) 製作

前端開發:使用JQuery.qrcode來產生QR code吧!

jquery.qrcode.js 是純前端的jquery 外掛,可以輕鬆在網頁上生產QR code。整隻檔案不到3k。最小化之後更是只剩下1點多K。這篇文章要跟大家分享如何使用jquery.qrcode.js。

Magento2 開發 – 正確實作API回應內容

在客製Magento時,有時會遇上需要擴充API端點來支援前端取資料或第三方的串接。API的擴充,會先新增API介面 (Interface),將其與路徑關聯在webapi.xml,再實作對應的類別 (class)並設定在di.xml。每個API端點對應到該類別的一個方法 (method),API回應的內容,取決於那個方法所吐出的值。

Adobe XD教學【入門】滑入效果也能批次調整-用組件製作按鈕的滑入效果

今天Astral Web要與大家分享Adobe XD如何使用組件製作滑入效果,並能透過組件來批次修改,一起來看看吧!(※本教學使用Adobe XD 2019(v25.1.12) 製作) 還記得我們之前教過的建立組件的方式嗎?組件內還可以用來顯示不同狀態喔,如果沒看過之前文章,建議先參考歐斯瑞所撰寫的其他篇Adobe XD教學。

Sass Map的使用

本篇文章將來教大家關於Sass Map的應用,來提升工程師在開發與維護程式時的品質,跟著歐斯瑞手把手的教學,一起來看看吧。

Magento 2.3 更新介紹 – 阿不是阿,你要改資料表你要先講 (三)

繼上篇 Magento 2.3 更新介紹 - 阿不是阿,你要改資料表你要先講 (二) 以來,我們已經可以將轉換過後的db_schema.xml透過安裝/升級來更新我們的資料表,接下來,本篇將介紹如何自訂db_schema.xml

CSS 預處理器 SASS、LESS 介紹

CSS 預處理器產生了一種新的語言,而核心理念是用一種專門的程式語言,為 CSS 增加一些程式設計的的特性,無需考慮瀏覽器的兼容性問題,例如可以在 CSS 中使用變量、簡單的邏輯程序、函數等等,讓開發者就只使用這種語言進行編碼工作。簡單來說,CSS 預處理器用一種專門的程式語言,進行 Web 頁面樣式設計,然後再透過編譯轉為正常的 CSS 文件。

Laravel 7 中的新元件

雖說 Laravel 6 短期內仍會被多數大眾所用,然而使用 PHP 程式語言撰寫而成的框架 -- Laravel 7 近期的來臨,讓我們來學習 Laravel 7 可為專案的開發帶來什麼效益吧!Laravel 7 中的一個新功能為元件標記 (component notation)。有兩種方法可使用元件 - 「層級」或「匿名」,而本文將針對「層級」來做介紹。

Magento 1 的 getOrigData 使用方式

在Magento後台儲存資料的時候,時常會需要判斷修改前跟修改後的資料,去決定要做什麼動作。Magento的model有提供一個function叫做 ”getOrigData”,這個function可以取得model的原始的值,可以跟 set過後的model的值做差異性比較。

NGROK-Debug的救星

今天要介紹的是NGROK這個服務,它可以讓外網的人存取你區網的網頁伺服器,好處是什麼呢,你可以在你的本地端測試聊天機器人(Chatbot)或是API(信用卡、物流等等),不用要求一定要把程式碼推到有PUBLIC IP的測試站上去測試。以下我們將一步步介紹NGROK服務,一起接著看吧!

Magento Geo IP 導向指南

在多國多語系的網站架構下,往往有個需求是希望使用者第一次進入頁面時,可以自動進到該地區對應的語系頁面,而Magento商店上也有許多的套件可協助滿足此需求,但本篇文章要來介紹如何在沒有套件的支援下,自行將使用者導向到所屬地區的語系頁面。

Illustrator教學【入門篇】任意形狀漸層

今天歐斯瑞要與大家分享如何操作Illustrator的任意形狀漸層工具,提升你的Illustrator技能! 跟著我們的手把手教學,一起來看看如何操作吧 ※本教學需先對工具使用有基本認識

Magento2 開發 – 如何使用API的搜尋條件 “searchCriteria”

我們在客製Magento時,多少會遇到需要與其他系統串接的需求。也許是Magento作為主動方去要資料,也可能為被動方被呼叫。Magento本身已有提供restful API,而這些API的使用方式,官網中都有基本說明,像是功能端點(endpoint)、HTTP方法(method),以及傳送的參數與回應格式。這當中仍需要開發者再花時間探究的,筆者認為當屬 “搜尋參數-searchCriteria”。一起來看看更詳細的說明吧!

如何在 Magento 1 使用 REST API

Magento有API的建置與使用方式,今天就要先來講Magento原生API的使用方式。只需透過兩個步驟即可完成!

前端開發:如何隱藏數字輸入框的小箭頭

又來到了歐斯瑞的前端開發教學系列,今天要與大家分享如何使用CSS隱藏數字輸入框的小箭頭,並附上codepen範例方便讀者們做使用,一起跟著我們來學習吧!

Adobe XD教學【入門】批次修改好工具,組件Component、顏色Color、字符樣式Character Styles

又來到了歐斯瑞Adobe XD手把手教學系列囉!今天我們要與大家分享Adobe XD如何建立組件Component、顏色Color、字符樣式Character Styles,可以批次修改設計稿的好工具。本教學使用Adobe XD 2019 (v25.1.12) 製作,本教學需對軟體操作有基礎認識。

Magento 2 結構化資料設定教學

什麼是結構化資料?為何要做結構化資料?我們在之前的文章結構化資料(上)- 簡介 已有分享過,有興趣了解的讀者可以在點擊連結快速了解一下。今天要來跟大家分享在電商平台上,如何設定/使用/測試 結構化資料,本篇文章將用Welt PIXEL的Magento 2 Rich Snippets 來講解,進行相關結構化資料的應用分享。

AWS CodeDeploy 佈屬你的網站,簡單又快速

DevOps在當今是個流行與受歡迎的角色與文化,大部份工程師或多或少也都會碰到架構與佈署的問題。而在佈署程式碼一定也聽過各式各樣的方式,尤其是在尚未建立完善的CI/CD流程時,像是直接上SERVER下git pull、利用rsync、甚至用ftp上傳、或是其他不同方式以及各種互相搭配等等。以下本文及流程將使用CodeDeploy來做說明。

PWA(Progressive Web Apps)主要架構 – Web App Manifests

本篇開始我們將以實際案例作為範例,帶大家初步了解 PWA 各種核心技術,包括 Service Workers 和 Web App Manifests 並搭配 Cache Storage API、IndexedDB 和 Push Notifications 等等。PWA 最主要仰賴兩支檔案 manifest.json 以及 Service Worker,而我們就從最簡易的部分 manifest.json 著手。Web App Manifests 為一個 JSON 格式的檔案,根據MDN上的解釋,它提供了下載 PWA 的必要資訊,讓網頁呈現近似 Native App,從而為使用者提供更快速的訪問和更豐富的體驗。

Magento2.3 更新介紹 – 阿不是阿,你要改資料表你要先講 (二)

繼上篇以來,我們已經可以將舊有的install/upgrade Schema以及install/upgrade Data轉換成db_schema.xml和data patch了,那麼接下來,我們可以來測試我們所產出來的db_schema是否會有問題,並使用本文中所提供的command指令!

Magento2 – 給開發者:避開影響效能的程式設計 – 關於Full-Page Cache

有關Magento效能的議題,官方網站已提供了許多由後台設定的優化方式。過去我們也分享了不少實務上有關環境設定的調校方式。今天要跟大家提醒的,是作為開發者,在進行客製時所需注意的細節之一 - Full Page Cache。

如何在Magento2使用Akeneo

Akeneo PIM 可以集中管理產品的數據,讓你的產品資料同步至各個系統中。上次與大家分享了如何手動安裝社群版Akeneo PIM,那麼今天要接著介紹如何透過幾個簡單的指令在Magento中使用Akeneo。

前端開發:使用bootstrap-table.js來實現表格的排序

bootstrap-table.js 是一個以為bootstrap為基礎的表格外掛。可以對表格的資料進行排序、分頁、查詢等等。本篇文章將簡單的介紹如果套用bootstrap-table.js到表格上,進行排序。

如何在 ubuntu 18.04 安裝 AKENEO 4.0

Akeneo PIM 可以集中管理產品的數據,讓你的產品資料同步至各個系統中。Akeneo PIM 可分為社群版與企業版,今天歐斯瑞要分享的為社群版的手動安裝,讓你可以更清楚Akeneo的架構。

使用Docker在同一機器中建立多站環境

相信有在開發網站並且使用版控的大家,多多少少都有遇過需要同時測試不同feature、不同branch的情況。但可能測試環境又只有一台或是只有一個database,在切換環境的同時可能就影響了資料庫,導致問題發生時不確定是否是另一個branch修改了資料庫所造成;或是直接多個branch merge起來測試卻不知道出問題的是哪一個branch。最理想的解決辦法就是配合CI/CD, 當發出PR時就建立起一台完全獨立的機器以及基本的sample data,這樣就可以單獨的測試該feature的branch,但上述作法會有相當的成本考量。跟著歐斯瑞學習使用docker 及 traefik這個服務的docker來達成差不多的目的。

前端開發:表單元件常用的CSS選擇器

CSS對於前端開發而言,是不可少的一重要元件,今天就來為大家介紹表單元件中常用的CSS選擇器 (CSS selector for input),同時也提供codepen範例給大家參考,方便大家快速學習唷!

如何在Ubuntu 16上安裝php oci8 module

PHP如果需要跟Oracle資料庫做溝通的時候,就需要安裝oci8 module,下面會說明如何完整安裝oci8。 本篇文章所使用的環境 PHP VERSION

Magento2使用RAM Disk的時機

硬碟的I/O速度遠比RAM來的慢,如果不想在自已server上面架一個redis的話,可以選擇把magento cache的資料夾改成RAM Disk,這樣就可以把檔案直接丟到記憶體裡面去做保存了,但要小心因為是記憶體有揮發性,所以重開機時、該地方的資料就會不見,這點要切記,所以這個方案通常也只適合放置暫存類的資料。

Magento2使用Redis的時機

Magento本身有良好的cache機制,在預設的情況下都是存儲在硬碟上面,所以寫入跟讀取速度被限制在硬碟的I/O,所以如果要加速Magento存取這一些cache的速度的話,就把這一些cache放入memory去處理。 這時後就可以使用redis去處理這一些cache囉,magento本身做了很好的cache整合,所以可以透過簡單的config就可以去整合redis了!

利用CSS counter 自動分類計算細項

CSS (Cascading Style Sheets) 用於定義網頁中所顯示的樣式,也可以用於做簡單計算,讓歐斯瑞帶著大家學習如何使用CSS來自動分類計算細項!

Magento新增結帳步驟-Part 1

在magento 增加一個結帳步驟不是一件容易的事情,需要了解templates和blocks的關係,以及javascript顯示和隱藏相關步驟。依照六個步驟,login/register、billing information、shipping information、shipping method、payment information、order review 來完成新增。快跟著歐斯瑞一起學習吧!

Adobe XD教學【入門】畫板基礎大解析-畫板設定

今天Astral Web要帶領大家學習分享Adobe XD中基礎教學 - 畫板(Artboard)常用功能的相關設定,一起來看看如何使用吧! ※本教學使用Adobe XD 2019(v25.1.12)製作

Magento1:移除 sort by 中的position選項

Magento官方已宣布,將於2020年6月份全面停止支援所有Magento1的安全更新與修正服務,不論是Magento開源版或企業版,將於近期停止服務。有需升級至Magento2的店家們敬請與歐斯瑞聯繫。 那麼仍使用Magento1的店家們,若想在前台的「Sort By」下拉式選單中移除「Position」的選項,請依照文中的幾個簡單的步驟執行~

如何安裝Magento2安全性封包

為了確保商店的安全性,Magento定期會釋出安全性更新的封包,可以在Magento官方網站中看到更新的相關情報。本次的文章要來介紹如何安裝Magento安全性更新。在安裝之前,建議先把全部Magento根目錄的檔案都備份(包括資料庫),萬一不幸在安裝完之後有功能壞掉的情況,這時候可將所有檔案及資料庫還原,再尋找其他的解決方案。另外Magento官方釋出的安全性更新僅包含原生程式碼,如果你有安裝其他的樣板、套件或客製化功能,則需要詢問該開發商是否有相對應的版本可以進行更新,避免有更新不完全的情況產生。

前端開發:將輸入的英文轉成大寫

有時候我們需要限制輸入框只能輸入大寫符號,這時候我們可以使用JavaScript,將已經輸入的英文字母自動轉成大寫的英文字母。 跟著歐斯瑞一起學習,如何輕鬆使用JavaScript指令來完成吧!

Illustrator教學【入門篇】向量3D文字

今天歐斯瑞要與大家分享如何使用Illustrator製作向量的3D文字,提升你的Illustrator技能! 跟的我們的手把手教學,一起來看看如何操作吧 ※本教學需先對工具使用有基本認識

關於 Magento 開發者不能不知道的好用工具

Magento 在開發上面比其他框架較為繁瑣,需要考慮的事情太多,我們綜整了在公司開發期間會使用到幾個較為有用的工具,如PHPStorm、Docker、iTerm 2 for macOS 和 TablePlus,與讀著們分享。

Photoshop教學【入門篇】製作傳統立體字模板

今天歐斯瑞要與大家分享如何使用Photoshop製作可以重複使用的立體字模板,一起來看看如何製作吧! ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法,如去背、選取工具、色調調整

SSH 金鑰是個好主意

「密碼」是很糟糕認證方式!密碼需注意不可丟失,且使用上也相對麻煩。值得慶幸的是,SSH 金鑰可讓遠端連線更加輕鬆,讓我們從透過 ssh-keygen 製作金鑰來開始今天的介紹吧!

如何在Magento2中的searchCriteria filter加入”OR”條件

在建立module或客製化功能時,一定常常都會需要對資料庫操作,其中也不免的會需要下各種的搜尋條件,不論是單純的一個where,抑或是OR、AND,再搭配其他語法達到自己想要的結果。 那相信會點到這篇文章的各位,必是對於M2中要如何使用"OR"條件感到有所疑惑, 當然大家可以直接編寫raw sql來query,不過以下歐斯瑞還是以M2的ORM來說明及操作。

如何使用Magento 2 Complex Messages

Magento 針對顯示通知、警示、頁面錯誤等訊息提供簡單的框架讓開發者使用,而這些訊息可透過幾個簡單的指令去做客製化,如加入超連結、開發獨特辨識器、顯示特定圖示、儲存一般訊息中無法解析的資訊等,皆可自行調整。歐斯瑞帶您學習如何使用這些指令吧!

2020年最佳手機UI設計趨勢

近年來,多裝置本是不可擋的趨勢,且手機購物比例日漸趨高,根據2018台灣網路報告指出台灣網民在網路上有買賣東西的使用率為 64.2%,未來更有上升的空間,因此如何優化移動裝置介面並讓網友有良好的使用者體驗是非常重要的!今天就來和大家聊聊2020年的手機UI應用的設計趨勢吧!

Magento2.3 更新介紹 – 阿不是阿,你要改資料表你要先講

Magento2.3版最新的資料表定義架構,你用過了嗎? 我們手把手帶您進入更通透的世界。

使用CDN的優缺點

不少人都有想改善網站速度的問題,這時你可能會想到或聽到別人建議使用CDN加速網站,但使用CDN只是為了加速網站嗎?CDN還有沒有其他用途?CDN會有什麼缺點嗎? 今天就讓我們來快速整理下CDN對於網站的優缺點給大家參考:   一、使用CDN的優點 1、加速媒體的載入速度

在Magento 1 新增Eav模組的資料欄位

平常在使用資料欄位時,如果有多商店(multi-stores)的架構會變得非常複雜,也不易維護,但在Magento的產品管理是可以使用Eav模組可以完美解決這個問題。跟著我們一起來學習吧!

【影像處理概念篇】陰影處理小技巧

在影像合成中,陰影是結合主體與背景的關鍵元素,如果少了陰影物體就會顯得很不自然,跟著我們一起來學習後置「陰影」時的繪圖知識與小技巧吧!

如何在Magento2使用command來快速執行Cron

Magento 2 的 cron 非常方便,但是開發期間,常常需要測試,沒有辦法一直等待 cron 來執行,我們介紹另一個方式,能夠快速的執行 cron,一起來看看吧!

Javascript Moment.js library介紹

當我們製作多語系或跨境網站的時候,在網站前端要顯示關於時間的地方時候,會遇到關於時區、時間格式這些問題,而Moment.js就提供了非常多方法來解決時間上會遇到的問題。

關於 CSS 偽元素的那些小事

偽元素是什麼?它能為前端解決哪些問題?為什麼要使用它? 前端工程師對於 ::before 和 ::after 這兩個偽元素應該不陌生,經常可見於網頁中。本篇我們將深入介紹更多偽元素的特性和應用。

測試設計技術:等價劃分(Equivalence Partitioning)之介紹與應用

在介紹等價分類的測試技術內容之前,我們先來了解一下甚麼是測試設計技術。我們做測試最重要目的是「儘早發現盡量多的缺陷」,因為窮盡測試是不可能的。用盡量少的測試案例,發現盡量多的缺陷就是運用測試設計技術的主要目的,但我們該如何能達成呢? 答案便是利用測試設計技術來達到此目的。

線上自動測試網站-Ghost Inspector教學

Ghost Inspector是線上自動化測試服務。操作方式和Selenium一樣簡單,可以設定多種屏幕尺寸,並使用滑鼠就可以完成錄製,所以不會程式也沒關係。和Selenium不一樣的是它在雲端監控和測試網站,且每次測試完成後都會錄製為影片並截圖方便快速確認測試結果。

【網頁設計輔助工具Zeplin】使用Photoshop發布與Assets應用

今天 Astral Web 要與大家分享將設計稿使用 Photoshop 發布至 Zeplin 與 Assets 的應用,一起來看看如何製作吧! ※本教學需先對 Photoshop 操作有基本認識

【網頁設計輔助工具Zeplin】分享與註解

今天 Astral Web 要與大家分享 Zeplin 如何將文件分享給工作夥伴,以及團隊成員該如何註解的應用,一起來看看如何操作吧!

【網頁設計輔助工具Zeplin】群組分類與Tag標籤

今天 Astral Web 要與大家分享 Zeplin 分類與標籤的應用,一起來看看如何製作吧! ※本教學需先對 Photoshop 操作有基本認識

Adobe XD 三種好用的預覽方式

Adobe XD好用的功能之一,就是能將設計時的畫面投射到部分裝置上呈現,有三種方式可以做預覽,其中兩種可以在裝置上觀看,我們使用官方提供的範本來作介紹。

Magento2前端開發:如何透過修改layout xml檔來顯示最近看過的商品

雖然透過後台的widget設定就可以顯示「最近看過的商品」,但是為了做好版本控制,我們還是希望可以透過程式碼來達到相同的效果。一起來看看如何透過修改主題包裡的layout xml檔來顯示「最近看過的商品」吧。

AR技術為電商帶來新的體驗

電商的確達到了最快瀏覽產品資訊的方式,如果再進一步導入AR相關技術,就可以讓消費者在瀏覽商品時,直接進行獨特的虛實交錯體驗,讓消費者本身與虛擬商品互動;試用化妝品、家具擺設等應用,真正達到所見即所得,進而增加消費者的購買機率。

淺談Magento資料庫:EAV

在Magento的資料庫中,光資料表就有三百多張,應用於其中的資料結構就是EAV(Entity實體/ Attribute屬性/ Value值),今天讓我們來粗淺的談論一下EAV在Magento的應用及其優點吧。

PHP中的多個漏洞可造成任意代碼的執行

網路安全中心 近期釋出在PHP中發現了許多漏洞的消息。其中最為嚴重的漏洞可允許任意代碼的執行。

用Photoshop玩3D【Fuse CC系列】實作範例(下)

本篇接續Photoshop玩3D【Fuse CC系列】實作範例(上),我們將使用Photoshop來對做好的3D圖像進行細部修圖,一起來看看吧!

你以為在談平行宇宙,其實是版本管理的策略 (一)

不管您所在的產業與職務分工,相信都聽過『版本控制』這四個字,尤其是出版業者與資訊業者,對於這四個字應該更有所感,在多人協作的專案中,如何確保每個分工的個體,能夠以最有效率的方式協作,是整個團隊成員共同關心的議題。

利用checkbox做判斷改變CSS樣式並更改checkbox本身樣式

如何利用checkbox 做判斷改變CSS樣式並更改checkbox本身樣式

pestle 相關系列 (七) generate_theme 快速建立 theme

"Magento 2 如何建立前台 Theme" 教你如何簡單的建立自己的 theme,今天教大家更簡單的方法來完成同樣的工作

身為PM不可或缺的-Axure RP 網站原型設計軟體

今天要介紹一套原型製作軟體:Axure RP,可以讓網站企劃人員或是資訊架構師快速且簡易的建立網站的wireframe、流程圖、prototype和規格。甚至,UI/UX介面設計師也可以透過該軟體製作高仿真的網站模擬原型圖。

用Photoshop玩3D【Fuse CC系列】實作範例(上)

今天Astral Web要與大家分享使用Fuse與Photoshop來製作實際範例,跟著小編一起來學習吧!

談軟體負載測試Load Testing

負載測試屬於效能測試的一種,在軟體工程中,效能測試是一個普遍用來確定系統特定之工作負載量;與某段時間下其在回應與穩定性上,會如何呈現所執行的一種非功能性測試。跟小編一起來看看負載測試吧!

Magento 2 客製化email模板

在某些情況中,我們需要寄出信件,但又希望客戶可以自由的編輯它,這時候就可以跟著我們一起寫出自己的模板吧!   首先先建立etc/adminhtml/system.xml <?xml version=”1.0″?>

手動測試與自動化測試的區別

測試是一個範圍廣大的領域,怎麼說呢? 測試主要的目的是為了確保產出的品質,在測試過程中有很多細節或重複性的測試,不管是Web測試或軟體測試。它大致分為兩種,一是手動測試,由測試人員在未使用工具或腳本情況下執行,而自動化測試則需要藉由工具及腳本的輔助來進行測試。

Magento1 新增篩選器屬性與範圍

在Magento1裡你可以使用「addAttributeToFilter」與「addFieldToFilter」來篩選你的query結果,但是他們是在不同得場合使用,讓我們來一起看看吧!

Magento2前端開發: 當滑鼠滑入購物車按鈕時隨即展開迷你購物車

原生的Magento2 主題包,需要點擊購物車小圖才能展開迷你購物車,如果想要在滑鼠滑入的時候展開迷你購物車,那麼請跟著小編一起學習吧!

強化網站安全 – Cookie篇

為了有效避免xss攻擊,可以在cookie上面做些強化,目前有三個flag可以使用,快來看看吧!

Magento2 使用原生程式分析工具尋找效能瓶頸

Magento是個龐大複雜的開源軟體,當網站遇上效能不佳的情況,可先透過幾個步驟執行通用的優化步驟,但若仍面臨部分頁面執行時間過長,表示需要進一步分析程式個別執行效能,才能找出改善的關鍵點。幸運的是,Magento原生程式即支援此功能,趕快來瞭解如何快速的分析網站的程式效能吧!

Magento 2 搜尋功能插件介紹

對於電商業者來說,網站內的搜尋引擎扮演著非常重要的角色,可以讓對特定商品類型或商品已心有所屬的顧客更快速的瀏覽目錄及進入其目標商品,明確的指引能加速顧客結帳的速度,在這邊,讓我們介紹幾個強大且常見的Magento 2 搜尋功能插件。

自動測試網站工具-Katalon教學

網站自動測試有很多方式,從最複雜的寫程式到最簡單的錄製指令碼都有,由剛開始測試的人員來說都會想以簡單的方式發輝最大的效益,就可以試試Katalon Recorder這個測試工具。

2019年電子商務網站設計趨勢(下)

除了上篇介紹的電子網站設計十個趨勢外,這一次我們要更進一步介紹一些更實用的分享,讓大家知道要如何在實踐中做出改變的可操作建議。

Magento2前端開發: 如何從購物車中移除計算運費和稅金的區塊

一般我們要移除某個區塊的時候、直接在xml檔裡加上底下設定就可以,但是在購物車頁面中,如果我們直接使用上面的方法移除運費和稅金計算的這個區塊,則會出現一大堆的js錯誤,這時候我們就要使用文章的方法來移除區塊。

使用css+jquery+jqueryUI 做出拖拉相片效果

拖拉相片效果其實比你想像中簡單,清楚的設定教學與截圖,讓你一次就上手!

Magento2.3reCAPTCHA設定教學

Magento的reCAPTCHA 功能可以在後台輕鬆設定,也就是不需要工程師協助編碼動作,即可讓你的網站開啟使用reCAPTCHA,但是v3設定雖然一樣,還是需要請工程師做一些JavaScript API的動作,請知悉。

使用正確的 xsd 檔,讓你輕鬆找到 Magento 的schema

大家在開發 Magento 的過程中,一定會遇到 Magento 內許多的 XML 檔,不知道該如何定義,也不知道還有哪些參數可以使用,有時候一個參數要找半天,不過好在 Magento 有工具能夠快速產生這些資料,讓我們能夠輕鬆的對應到 xsd 定義檔,一起來看看怎麼做到的吧!

Google reCAPTCHA 申請教學

CAPTCHA,也就是俗稱驗證碼,是一種區分用戶是電腦或人的公共全自動程式,根據Google研究指出,最新的人工智慧在辨識最複雜扭曲文字的精準度已高達99.8%,而且輸入驗證碼的程序也會影響使用者體驗。

冒煙測試

冒煙測試就是在每日build建立後,對系統的基本功能進行測試,這種測試是針對主要功能進行基本驗證,而不會對具體功能進行更深入的測試。

Magento2前端開發:使用手指左右滑動來切換Bootstrap 輪播區塊

在開始實作之前,我們要先確認已經將Bootstrap打包進我們的Magento主題包裡,詳細的操作可以參考之前分享Bootstrap相關文章,接下來我們要開始讓Bootstrap輪播可以支援手指左右滑動的動作。

用Photoshop玩3D【Fuse CC系列】演算

精彩的Photoshop Fues CC系列來到演算啦,我們在使用這些3D物件繪圖時都是呈顯一個預覽的狀態,在真的出圖時,我們會產生出較細緻的畫面就是演算,趕緊來看看完整詳細的教學吧。

個人與公司的網路隱私安全最佳防衛

如果你已經在網路活躍了一段時間,很可能已經有某種程度上的數據洩漏,隨著產業的習性和不良行為者持續演進,針對個人與敏感資訊的保護安全措施也隨之成長。然而,有許多最佳基礎的做法可以降低你的風險,並同時減少你所屬的組織風險。

Magento2 移除不需要的模組

Magento2 安裝時資料過於龐大這是眾所皆知的事情了,這次分享兩個作法,教你如何關閉或是刪掉不需要使用的內建模組,讓 Magento 系統更輕巧!

Magento2使用手指左右滑動來切換Bootstrap頁籤

先前已經分享過如何將Bootstrap打包進我們的Magento主題包裡,接下來我們要開始讓Bootstrap頁籤可以支援手指左右滑動的動作,因為Magento2 已經打包好了,所以可以直接叫出來使用。

關於回歸測試Regression Testing

回歸測試是透過現有的測試來確保產品的更動不會影響舊有的功能,開發團隊必須選擇有效且正確的回歸策略,來降低測試人員的負擔,又能將產品保持在一定的水準之上。

用Photoshop玩3D【Fuse CC系列】自訂3D模型紋理

學會建立人物,並懂得如何建立臉型與體型調整,除了膚質服裝,3D模型紋理也是提升擬真度非常重要的關鍵,趕緊來看看PS-CC系列最後一篇吧!

Magento2 取消結帳頁必填欄位限制

Magento2的設計是基於歐美國家設計的,對於台灣商家來說會有一些不適用的必填欄位,本篇將介紹如何在Magento2的結帳頁面,取消原本需要必填的地址欄位,讓您可以因應不同的需求去限制使用者該填寫的欄位。

簡單完成社群網站連結散開效果-圓形

很多網站會將社群連結固定在網頁上,讓使用者易於觸擊,但隨著社群越來越多,放上太多連結總是不美觀,因此我們用一個icon固定在網頁上,點擊以後展開社群的項目,可以隨時被點擊。

熟知基本排版技巧讓你的文章更容易被閱讀

當有了一篇好的文章內容,編輯者也需要知道基本的排版的觀念,目的是要讓讀者能更容易閱讀與理解你的文章內容,良好的排版觀念可以讓你的文章大大加分,本文提供幾個排版基本觀念,給予未來在撰寫時的參考。

使用Magento2 原生工具來將LESS編譯成CSS

Magento2 提供Blank以及Luma二款預設的主題包,這二款主題包都是使用LESS來編譯CSS。在這篇文章中,我們要為您介紹如何使用Grunt來開發及調整CSS。

CSS3 : 簡單使用flexbox 展示自適應及滑過效果

要怎麼在網頁呈現自適應及滑過的效果呢,這次我們介紹flexbox,讓你可以簡單使用輕鬆上手!

Github的branch權限設定 – Required signed commits

這次介紹的protected branch的一項功能是 Required signed commits,這項功能的用途是用來驗證commit 的作者與github上的使用者是否符合,簡單來說就是做身分驗證,可避免身分被有心人士冒用,接來來馬上來介紹如何設定 Required signed commits。

Magento2.3 探索新大陸

在2018年底Magento2迎來了最新的版本2.3.0,增加許多新功能,也有多更動,而這些改變在官方文件中並沒有特別說明,僅能從原生code裡看出不同,那我們今天就先來介紹在Controller中的異動!

具有響應式功能的圖片延遲載入外掛

延遲載入 lazy load 是 Hibernate3 默認的加載方式,是為了避免一些無謂的性能開銷而提出,就是當在真正需要數據的時候,才真正執行數據載入。緩慢的載入速度會影響到使用者體驗,網路上有很多 lazy load 外掛提供前端人員使用,而我們這次選擇 lazysizes.js 作為介紹。

解決Magento2.3.0目錄頁跑版的問題

在安裝完成Magento2.3.0之後,會發生一個狀況,那就是目錄頁跑版,多出一個空白區域,現在就來教你如何解決這個問題!

聊點硬核的-CDN對我的網路店頭有甚麼幫助?(下)

從初代的CDN原型演化至今,技術不斷的演化,但內核仍是實打實的快取技術與設備的素質提升;我們追求的是讓使用者「感覺」快,在整個資料傳遞過程中,其實有很多軟設計是可以進行優化的,就像是不同的駕駛員開著同一台超跑,賽事的結果不盡相同。

線上SSL憑證檢測工具Cloudflare,讓您的網站不再被標為不安全網站

從2018年9月起Google公告在更新版的Chrome針對網站進行SSL安全加密憑證檢測,將不是HTTPS的網站都標為不安全的網站,線上SSL憑證檢測工具Cloudflare讓您的網站不再被標為不安全的網站!

Magento 2 信件樣板詳解(二) -在 Template 內插入 block 應用

本文將繼續介紹Email Template訂單信件樣板詳解,Template 是 html 檔 無法執行如迴圈或是判斷式之類的程式邏輯,若有這方面的需求就必須要用到插入 block 的技巧。

A/A測試是什麼?

在A/A測試中,如果測試程序正確,控制組與實驗組不應該有任何區別。如果樣本的A/A測試結果達到了統計上的顯著差異,那麼A/B測試這個方案就是不可信的。如果說A/B測試是用來比較幾個樣本的好與壞,那麼A/A測試就是用來驗證A/B測試及工具可靠度的最佳方式。

Magento 2 結帳頁面與 Magento1 設計差異

在M1時大部分的頁面都可以直接透過後台開啟路徑提示的方式,找到其對應的template路徑然後開發,但在M2時你開啟路徑提示後可能只會顯示一支路徑。

用Photoshop玩3D【Fuse CC系列】內建表情動作

今天astralweb要與大家分享使用Photoshop 調整 Fuse 模型表情,一起來看看吧! 本教學需先對PS工具使用有基本認識; 3D運算會需要較好的電腦設備。

Google MyBusiness API 實戰教學(三)-在PHP使用API

本篇教學實際操作在PHP中如何使用這支API!相信看到這裡的讀者一定可以照著上面的步驟成功的查詢出該location的reviews,更多的功能請見連結。

聊點硬核的-CDN對我的網路店頭有甚麼幫助?(上)

複製『內容的副本』讓世界各地的使用者能就近存取,這樣的概念便出現了;尤其隨著傳輸技術的進化,使用者們的耐性也越來愈低了,快-成了有心開拓電商通路的企業,共同追求的標準。

6個網頁設計靈感來源分享

打造一個品牌,在視覺上給人的形象與感覺是很重要的,是使用者第一眼對網站的印象。網站顏色搭配、Logo 顏色挑選在這篇文章分享網頁設計靈感參考網站。

Github的branch權限設定 – Required pull request reviews before merging

Required pull request reviews before merging,這項功能啟用之後,每個對此branch的合併(merge)的請求都需要經過審核人員審核,接下來實作此功能的流程。

Magento 2 信件樣板詳解 (一) 覆寫樣板

本文說明如何建立Email Template訂單信件樣板詳解,兩種方法教學如何覆寫樣板:一使用後台即可設定樣板的方法,此方法簡單易操作,不需要技術背景的人員也可以完成設定。

利用多邊形圖層,絕對定位和置中呈現Landing Page

今天要介紹的是用css打造一個Landing Page中 header部分,利用多邊形圖層,絕對定位和置中呈現;本教學大概會用到製造效果的css包括:background-image: linear-gradient()。

解決Magento 2的問題:調整訂單編號的方法

最近在測試時,發生信用卡交易失敗的問題。查詢log之後發現,是訂單編號重複所造成的!解決的方法也很簡單,問題是該怎麼調呢?我們一起來看看!

結構化資料應用使用JSON / LD【地點應用】

需要在本地或跨境執行搜尋引擎優化時,我們須仰賴一個用於組織化搜尋的parent Organization,同時擁有標記個別位置數據能力來進行在地搜尋引擎優化。對於一個大型個體來說,維繫位置與總公司之間的明確關係非常重要!

用Photoshop玩3D【Fuse CC系列】內建模型動作

Astral Web要與大家分享使用Photoshop調整 Fuse 3D人物動作,針對動態的部分只要在3D模型套用效果就可以看到動作變化的效果,一起來看看吧!

Magento自訂欄位內資料顯示的方式與搜尋

上一章中我們講到如何自訂自己的後台欄位,但是有時顯示出來的資料並不是我們需要的,例如圖片路徑。本篇文章教學如何改變欄位顯示的方式與搜尋。

以SASS開發Magento2佈景主題

Magento2 預設是使用Less及Grunt來產生css檔案。當然我們也可以使用別的工具、例如Sass及Gulp。接下來要介紹如何建置Sass及Gulp的開發環境。

Google MyBusiness Api 實戰教學(二)- Postman測試

這一篇來帶大家做Google MyBusiness API的測試。各位讀者可以先去下載Postman,使用Postman測試api 會比直接使用網頁var_dump來得方便快速。

Github的branch權限-設定protected branch

當有很多人在同個github repository上面工作的時候,必須對branch賦予protected branch,不能被刪除以及不能被強制更新,也可以防止有人強制回朔commit。

如何在Magento後台列表頁「自訂欄位」

在Magento裡我們常常會新增自己要的屬性,但有時為了方便辨識會希望他會出現在列表頁,讓作業起來更順利,今天就要講如何新增一欄自己的屬性欄位。

KnockoutJs系列(2)-Interactive Arra

KnockoutJs它使用一種清晰的資料模型協助您建立更豐富的使用者互動介面,本文將示範用observableArray來做一個互動功能,可以新增刪除資料。

跨境電商小工具,在全球各大城市查看你的網頁如何顯示!

您的網站擁有不同語系、不同國家的跨境商店,需檢視頁面在其他國家城市能否正常開啟,檢視網站是否需進行效能優化,大家可以利用此免費工具唷!

Sass selectors(選擇器)-該不該使用巢狀架構?

在撰寫Sass selectors(選擇器)時,到底該不該使用巢狀架構呢?這裡將提出來讓大家一起分析與思考,非巢狀與巢狀架構兩者的差異區別與優缺點!

如何在Magento 2 加上麵包屑

雖然Magento本來就有麵包屑了,但並不是每個頁面都有麵包屑;若遇上需要加上麵包屑的需求要如何補上去?這篇文章將以登入頁為實例說明!

用Photoshop玩3D【Fuse CC系列】6 Fuse匯入到 Photoshop

本篇文章教學Fuse如何匯入到 Photoshop,以及其他Fuse系列教學:介面基本操控、建立人物模型、臉型與體型、調整膚質、調整服裝等。

純CSS實現表格首行和首列固定

當表格列數和行數較多時,使用者會出現的需求即是把重要的列與行固定,以便於瀏覽表格內容,才得以提高用戶體驗。為各位介紹使用單純 CSS 和運用簡單邏輯的解決方案。

Google MyBusiness Api 實戰教學(一)-簡單4步驟完成啟用

這次要來介紹Google眾多API中,相當實用的MyBusiness(我的商家) API,這項API主要能夠取出註冊商家各個位置的資訊及各位置的評論,簡單4個步驟完成啟用MyBusiness API,這篇會先帶各位完成前置作業。

用Photoshop玩3D【Fuse CC系列】5 Fuse服裝調整

今天astralweb要與大家分享Adobe Fuse 3D人物繪圖的服裝調整,一起來看看吧!

3個實用的 infinite scroll 套件

infinite scroll是一種新的網頁讀取資料的技術,當使用者到網頁的最下方時,會自動載入新的資料到現有的頁面。網路上有許多已存在的套件,可以讓人快速套用infinite scroll技術,接下來我們就來看看3個最實用的infinite scroll套件吧!

在magento1上設定Redis session

在magento上使用Redis是為了減輕後端資料庫的負擔,Redis 為in-memory database,所以在存取上更為迅速,以下介紹的是Redis session的設定。

淺談測試基本觀念 – 壓力測試、負載測試、效能測試

這次要跟大家來簡單談談測試人員必備的三個基本觀念:壓力測試 (Stress Testing)、負載測試 (Load Testing)、效能測試 (Performance Testing)。

使用site:指令 管理網頁 檢查Google index

Google的"site"搜尋指令可以幫助我們檢查特定網站上頁面的索引情況,例如,網站各個子項目的情況,特定主題內容的索引情況等等,使用Google的"site"指令可以幫助網頁SEO的檢查。

簡單、強大的螢幕擷錄取工具 – Snagit

Snagit是一款能在Windows和Mac上使用的螢幕畫面擷錄取工具。它不僅能擷取螢幕畫面及錄製畫面,同時也能編輯所擷取下來的圖像。不管您是要直接擷取現有畫面,以哪種方式擷取(如: 區域、全景或延遲時間擷取...等)或只是想要載入現有圖像檔案編輯畫面,都可以直接使"Snagit"來完成。

Magento 2 客製訂單編號

一般而言,Magento 2訂單編號的產生會以流水號的方式遞增。而在實務上,有時編號會需要照特定格式去遞增。Magento 2的訂單編號有一固定公式,足以在一般慣用的格式範圍內,達到客製訂單編號的需求。

如何覆蓋 magento 2 原生的程式 – Layout

當Magento 2客製化的需求有需要更動到頁面結構時,我們都必須要透過修改 Layout 來達成,例如,多一個區塊、少一個區塊、位置對調等等,以下用實際的例子簡單的說明。

如何在WordPress中使用Cron Job

在Wordpress中想用CronJob跑一些客製化的內容,目前有兩種做法,第一是使用主機端原生的Crontab,自行定義時間、所需做的事情,然而並不是所有主機商都有提供這項功能,不過我們還是可以透過Wordpress本身的CronJob完成我們想要做的事。

BEM 規範思維 – 讓 CSS 更利於開發與維護 (二)

BEM 是一種前端項目開發的方法學,著重程式命名的識別度、一致性,本文將介紹Modify、Mix模式以及文件架構!

如何安全的把你的WordPress網站升級到PHP7

PHP7現在不僅已經是WordPress的官方版本,而且還以安全性的提升聞名,以下介紹幾項技巧幫助Wordpress升級成PHP:backup、檢查Plugin、更新Worpress!

如何在Magento2 使用 Bootstrap

如果想要在Magento2的主題包裡使用bootstrap 的 javascript,我們就要使用requirejs的方式來引入bootstrap.js,請看以下說明。

pestle 相關系列 (六) generate_menu 快速建立後台menu

Magento 後台左方列表的按鈕列表經常為了客製化的擴充需求加上按鈕與連結,這篇就是要探討如何快速的完成這些客製化更動。

何謂漸進式JPEG

Progressive JPEG (漸進式圖檔) 在開啟檔案時,會先顯示整張圖片模糊的輪廓,在網路較慢的情況下,瀏覽者能透過圖片的輪廓知道正在讀取的圖片大概是什麼,減少因為圖片載入太慢而離開的情況。

用下載代替嵌入 Google fonts 使用小技巧

Google Fonts 會依照瀏覽器的字型格式需求回傳相應的字型檔,這可能會使網頁加載變慢,或讓display-font屬性無法順利使用,將Google Fonts字型下載管理可以避免此情形。

KnockoutJs 系列(1)-observableArray

Knockout 是一個JavaScript函式庫,它使用一種清晰的資料模型協助您建立更豐富的使用者互動介面(UI).任何時間您需要動態的更新您UI的部分,例如當使用者執行了一個動作或外部資料來源有所異動,『KO』 可以幫您簡化並實踐。

如何在ZFS上安裝KDE Neon

本文將介紹如何在ZFS上安裝KDE Neon。

讓我的WordPress網站也有SSL

如果我們網站上沒有加裝SSL,Google就會在網站左上角放一個紅色的警告標示,造成客戶的不信任,所以今天歐斯瑞要來教學如何幫Wordpress網站取得綠色鎖頭!

使用者行為,網站頁面分析工具 (中)- Hotjar 如何在GTM, Magento, WordPress設定

Hotjar 是一個線上工具,提供 Heatmap、Recording、Funnels、Forms 四種監測服務,使用Hotjar可以監測和記錄用戶在您的網站上的行為,提供反饋和分析您的網站,深入了解如何改善您的網站的用戶體驗和性能。

BEM 規範思維 – 讓 CSS 更利於開發與維護 (一)

BEM 是一種前端項目開發的方法學,因應當前網頁發展爆炸趨勢,前端程式碼複雜度大大提升,尤其是 JavaScript 和 CSS 的數量大幅增加,程式命名的識別度、一致性就成了首要課題,使用BEM找出適合自己與團隊的程式組織方法和命名規範因應而生!

用Photoshop玩3D【Fuse CC系列】4 Fuse膚質調整

今天astralweb要與大家分享Adobe Fuse 3D人物繪圖的膚質調整,一起來看看吧!

Nginx 的 map 設定

Nginx 的 Map 是用在需要設定一個變數給設定檔使用的功能,在Magento的多站裡使用map的功能,可以更好管理設定檔,請看以下範例與操作。

CSS3屬性 pointer-events應用

CSS3 的新屬性Pointer-Events,最簡單的用法就是讓滑鼠滑過後沒有作用,本篇文章將介紹一些其他變化操作。

使用Certbot 更新SSL認證

SSL憑證保護已經被Google正式列為網頁排名考量因素之一,因此幫自己的網站加裝SSL是有助SEO的方法之一,本篇文章將介紹如何使用Certbot更新SSL認證。

使用WordPress內容行銷撰寫小技巧

Wordpress的內容撰寫介面操作簡單,也成為許多有志想學習內容行銷者的入門管道,那麼究竟在撰寫文章時有哪些地方該注意呢?以下分享幾個小技巧,一起打造SEO-friendly的文章吧!

如何覆蓋 magento 2 原生的程式

當Magento 2 開發遇到需要改寫原生程式的狀況時,考量到減少程式相依性,我們不會直接去修改 magento 2程式,而是用我們的 extension 來覆蓋,請看以下幾個方法分享!

Clippy – 輕鬆利用 CSS 實踐多邊形設計

現在的 UI 設計中隨處可見各種不規則的形狀元素,現在將介紹 CSS3 中的 clip-path 屬性, 就可以輕鬆使用幾行程式碼實踐各種不同的形狀!

何謂多變量測試?

多變量測試簡稱MVT,通常用於將三個以上的不同元素做各種不同的組合並呈現在網頁上,藉由流量、點擊率來進行消費者行為模式分析,使用MVT可以判斷出是哪個元素或那些元素組合可以為網頁得到最佳效果。

Magento 2 內部變數傳遞

在Magento 2 開發期間,常常會遇到不知道如何在內部傳遞變數的問題,為了節省查詢的次數,我們可以利用內建 Registry 幫助我們做內部的變數傳遞。

我的WordPress網站安全嗎—提升WordPress網站安全性的方法

Wordpres強調5分鐘快速架站,而這麼快速的開發,所需要的更是日後維護安全的細膩心,以下我們將一一帶領各位實現WordPress「基本的」安全設定!

用Photoshop玩3D【Fuse CC系列】3 Fuse臉型與體型調整

使用Adobe Fuse 3D 可以快速的人物建模,今天astralweb要與大家分享人物繪圖的臉型與體型如何調整,一起來看看吧!

Magento2建立Cron Job的兩種方式(一)

Magento開發時常常會需要處理例行性資料,尤其是幫客戶串接各種API或是檔案資料交換時,而Magento有提供CronJob的機制可以來跑這些排程,詳細操作步驟一起看下去吧!

PHP上面使用RabbitMQ

在上一篇安裝RabbitMQ在Ubuntu16.04上已經提過RabbitMQ的介紹及怎麼安裝,所以這一篇就不在多做說明,這一篇將直接介紹如何使用RabbitMQ,RabbitMQ總共有6個pattern,這一篇我們就教你怎麼使用 1. “Hello World”,基本上使用方式都差不多,會一個之後、其它自行摸索即可,不會有太大的難度。  

Photoshop教學【冷門工具】尺標工具

上次介紹了Photoshop中的計算工具,今天astralweb要與大家分享尺標工具,一起來看看如何製作吧! ※本教學需先對工具使用有基本認識 1.開啟檔案 2.使用尺標工具 3.點擊要測量的起點,到終點後放開

Magento2上實作Singleton

什麼是Singleton Singleton的道理很簡單,就是確保只有一個instance在記憶體之中。 當我們在使用一個物件的時後,就需要使用new class的方式讓物件實體化再使用它,但如果很多程式都在使用這個class、就會造成很多個instance存在記憶體中,但很多時候我們並不需要一直new獨立instance,像是db的connection,為了避免過度浪費connection,必須確保只會有一個connection存在。其實用static的方式就可以解決這個問題了,但是下static就表示程式再被initialize的時後全部會被放進記憶體,不管它是有被使用或沒有被使用的情況下,如此一來變會造成記憶體的浪費、所以最好的狀態就是要被使用到的時後、再被new出來,並且確保只有一個instance被實體化而已,這樣後我們就需要使用到singleton。 圖片來源:https://www.concretepage.com/design-pattern/example-singleton-design-pattern-java

Magento2 製作客製化付款方式模組

本篇將介紹如何在Magento2新增一個付款方式,可以讓你在後台進行開關,設定付款名稱等設定,如果你需要串接不同金流,本篇將會提供你基礎必須資訊。 *適用版本: Magento2.0.X~2.2.X 製作模組需要的設定檔 首先創立模組需要的註冊檔

如何利用CSS3原生網格系統快速排版

CSS3有原生地網格系統,過去沒有被廣泛應用最大的原因莫過於瀏覽器支援性的問題,但現在IE11也支援Grid的語法了,讓我們來看看用CSS3 Grid屬性排版有多方便。

實用的平行壓縮程式

通常來說,像是gzip、bzip2和xz都是單一執行緒,也就是說,不論你的CPU是單核心或是16核心的處理器,Linux上default版本的gzip、bzip2和xz都只會使用單線程進程,而這個狀態並不理想。幸好,有這些utilities的「平行」版本存在,它們可以使用每一個核心,而且可以大幅度的增加壓縮的速度,這些utility是其他具有相同功用,但單線程進程軟體的理想替代品。所以,如果你需要的話,你還有這些平行版本可選。

在自訂的擴充套件新增csv匯出的控制項

當開發者自訂自己的extension的時候,如何在後台的extension頁面新增匯出表格的功能呢?一起看下去吧! *適用版本: magento 1.9 1.新增一個匯出的控制項

Magento 2 你不能不知道的實用短代碼

Magento2 提供我們很多網頁佈局和模板,但很多人都沒有意識到,其實這些功能也可以用短代碼透過CMS編輯器來完成,這個動作被稱作「directives」,但如果你跟我一樣擁有wordpress開發者背景的話,那麼這個動作一定會讓你想到短代碼。 1.以block directive 呼叫PHTML模板

Magento 2 iOS 產品放大圖全螢幕時無法關閉

這篇內容要跟大家介紹一個在Magento 2 可能會遇到的小問題與解決方法。 裝置:iOS(手機/平板) 版本:Magento

安裝RabbitMQ在Ubuntu16.04上

什麼是RabbitMQ 首先,先了解什麼是AMQP,全名是Advanced Message Queuing Protocol,是應用層協議的一個開放標準,主要是用來使用交換系統與系統之間的訊息。RabbitMQ實作了AMQP,是使用Erlang語言編寫,支援多樣的語言,如:Python、Ruby、.NET、Java、JMS、C、PHP。用於在分布式系統中存儲轉發消息,在易用性、擴展性。

如何在 Magento 2 使用 Session?

網頁程式設計師對於 Session 肯定都能運用自如,但在 Magento 2

Magento2 佈景主題開發的基本設定

不久前介紹如何解決Magento 2 預設主題的選單問題,不少網友也提問到佈景主題該怎麼設定? 本篇文章就來解決大家對Magento2佈景主題開發的基本設定做教學 主題包的路徑

Sublime Text3 好用的SFTP套件

很多情況下,後端開發者習慣將環境架在虛擬機中(例如:VM VirtualBox),好處是假如哪天在設定環境時把環境玩壞了,可以馬上再架一個一樣的環境出來,非常方便,但是一般情況下我們不會裝有GUI介面的虛擬機,所以內建的文字編輯器只有nano vi vim 可以選擇,但這些編輯器的功能很簡單,只適合短時間的修改,若整個專案都用這些編輯器完成一定會崩潰,所以大多數人選擇的方式是在本機端使用自己喜愛的文字編輯器編輯檔案再透過SFTP傳輸檔案與虛擬機(遠端)同步,這樣的方式我們可以避免虛擬機中介面很醜的編輯器,又可以使用自己裝了一大堆外掛的文字編輯器,用起來方便又快速,編輯器中的大佬

AWS資料庫異地備援服務

與商城、租用平台相比,自行營運品牌電商網站雖然擁有行銷自主權、網站功能調整彈性、數據分析的掌握等多種優勢,但相對的,品牌勢必會需要花更多人力去維護,包含網站或伺服器上的問題。若自有品牌電商遇到技術上的問題,將會需要有專業的技術人員或是第三方協力廠商協助處理,視問題嚴重情況得花上長短不等的工作時間,而期間若有網站停擺的情況,將會造成收入上的虧損。 AWS雲端運算提供了相當多的解決方案,歐斯瑞今天要來介紹其中一項與資料庫有關的備援服務「異地備援」。在講異地備援服務前,首先要提提什麼是Amazon RDS: Amazon RDS全名為Amazon

Magento資料庫串接工具-devart篇

上一篇我們提到透過外部工具連接Magento資料庫的動機,以及需要注意的事項,這篇要提供其他的工具選擇-devart。 devart和上一篇介紹的CDATA相同,兩個品牌的專業都是資料庫與客戶端資料交換,旗下產品多從客戶端各種應用情境出發,進行各種資料庫的存取與更新,當然,電商領域的Magento與市占率極高的統計分析工具-Excel也在他們的服務項目之中。 影像來源:https://www.devart.com/excel-addins/magento.html SOAP VS

Magento資料庫串接工具-CDATA

為什麼會想連接Magento資料庫? Magento作為一個電商管理系統,當然內建了資料匯出/入的功能,也有相對應的介面進行操作,但大型電商通常由不同部門透過Magento,負責管理不同的業務,光是客戶、產品與訂單與稅務等等,可能就分由三個或更多部門分別處理。 假想一下,行銷部門想針對特定產品的追蹤分析;或者您的客戶來源並不一定來自於網站前台等等,這些因素都會使得在Magento中的權限控管,成為一個十分重要卻也相對複雜的議題。若再加入系統管理人員的教育訓練成本等外部因素,資料的交換與分析報表的過程或許會是導入電商系統的一大痛點。 可能適用的情境? 由於Excel作為統計分析工具,有很高的市占率,我們先做出這樣的假設:

Gutenberg 古騰堡—WordPress 發布最新官方核心編輯器(下篇)

Wordpress 5.0上將發布最新編輯器Gutenberg古騰堡,現在就搶先看樣板介紹與使用示範!

進階測試工具 WebPageTest

本篇文章將介紹WebPagetest這款進階測試工具,讓您更能快速並清楚知道當訪客從不同國家/地區進行連線時,您網站是否需要做更進一步的優化,如:拖慢網頁載入的原因等。

Magento 2 EAV Model 介紹 (3) – 在 Magento 2 使用程式新增 entity type

今天要透過程式的方式來教大家如何新增 Entity Type 及其相關的資料表,讓自己的定義的 Entity Type 也可以存取 Attribute 屬性!

Magento 2 EAV Model 介紹 (2) – 使用程式新增 Attribute

上一個篇幅的文章內,我們介紹了 Eav Model 的關係。今天我們要透過程式的方式來教大家如何新增 Attribute

closure-compiler︰產生最佳化(最小化)的JavaScript 程式碼

Closure Tools 是由 Google 所發展的一套網頁應用程式工具組,可以幫助網頁開發者快速發展大型的網頁應用程式。Closure

Photoshop教學【CC 2018】新式筆刷

Photoshop CC 2018增加了許多筆刷,今天就讓我們一起看看塗抹、橡皮擦、潑墨的效果,以及快速使用筆刷製作圖片的示範吧!

Photoshop教學【CC 2018】新式筆刷-拖繩模式

使用Photoshop CC 2018的新式筆刷–拖繩模式,可以簡單的製造圓順平滑的手感,一起來看看如何開啟這項功能以及繪製效果吧!

線上撰寫PHP語法,並提供給對方做參考分享

網站工程師在寫PHP語法時,常常會發生寫過的某個功能想要分享給另外一個人的狀況,這時我們可以用WORD、LINE、EMAIL、等等任何一種可以傳遞文字訊息的方式給對方做參考,但在這樣的過程中,程式碼的排版通常會發生錯亂,且無法得知這段CODE真正最後的產出為何,此時,網路上有一個免費的資源服務,Onlinephpfunctions,滿足了這樣的需求: 該網站能將你撰寫的純PHP程式碼直接性的做輸出跟分享,並且提供基本的除錯功能,輸出之後還能透過網址再分享給第三方做參考,甚至還能選擇透過不同的PHP版本做編譯!以下提供幾張截圖並提供說明介紹: 1.PHP程式碼無錯誤,正常編譯成功時 2.當PHP程式碼發生編譯錯誤時,會提供基本的除錯訊息做參考  

如何在Windows xampp環境裡,安裝、配置和啟用oracle_connect

這篇文章是要來介紹在Windows xampp的環境裡,如何使用oracle_connect。 安裝oracle_connect在xampp的目的,當然就是要讓你可以使用php程式碼來連接Oracle資料庫了,過程可不如想像中的簡單,步驟大致可以分三步驟: 1.安裝Instant Client。

2018年7月最新釋出的Chrome 68版本,將把HTTP網頁列為不安全!

Google為了讓使用者們理解HTTP網站並不具有安全保障,已經在最新Chrome68版本上將沒有Https憑證的網站標示為不安全。

Photoshop教學【CC 2018】液化工具-臉型調整

之前有與大家介紹過Photoshop Fix 內建臉型調整,在CC 2018新液化工具也有此功能,可以針對多張、不同角度的臉型進行調整,一起來看看有什麼新的效果吧! *本教學需先對工具使用有基本認識

用Photoshop玩3D【Fuse CC系列】2 Fuse 建立人物模型

使用Adobe Fuse可以快速的建立人物模型,一起來看看如何建立創作一個基本的3D人物吧!

用Photoshop玩3D【Fuse CC系列】1 Fuse介面基本操控

Adobe Fuse是一個模組化的3D人物繪圖輔助軟體,並能在Photoshop中進行人物姿勢與動作編輯,只需要從內建設定好的人物模型中挑選,再透過內建設定好的數值調整,如可以針對臉部、身體、四肢、服裝的各細部區塊做調整,再套用內建設定好的動作,而產生想要的繪圖結果,詳細的操作介面介紹,一起看下去吧!

Photoshop教學【冷門工具】備註工具

Photoshop的備註工具可以在圖片編輯備註,但存圖片時不會被存出來,適用於以下的情況:多人編輯同一份PsD,但負責項目不同時,例如:設計主管與設計人員、設計人員與印刷人員,或是職務階段性交接時,例如設計人員給予前端人員、設計人員給予另一位設計人員時,以及自我記錄與提醒的功能。

前端通訊協定介紹 

現今的網站常常需要像聊天室一樣即時做資料接收,而且必須在不重新整理網站的情況下一直接收後端送來的最新資料,今天就讓我們來看看有幾個技術可以做到這點,以及其各自的優缺點吧! 1.輪詢(Polling) 簡單的說就是讓browser每隔一段時間去後端取得最新的資料,這是一種最古老的方式、也相當浪費server的資源,因為browser不會知道server上面是否有新的資料、所以常常去server取資料都是拿到舊的資料、而不是新的,這樣會造成浪費server的連線資源,但這種方式最簡單、也幾乎所有的browser都支援。 圖片出處:https://www.pubnub.com/blog/2014-10-01-websockets-and-long-polling-in-javascript-ruby-and-python/ 2.長輪詢(Long-Polling)

1分鐘學會magento2的restAPI使用方式

Magento2提供相當完整的restAPI供人使用,此篇文章就要教你如何使用magento2的API 1.先去magento後台新增權限:   直接點這裡新增使用者: 接下來到userinfo填完user的資料,在這裡使用webuser

結構化資料 (下)–不會寫code也可以做結構化資料

利用Google Console的資料螢光筆,幫文章網頁畫重點,建立結構化資料,讓使用者的搜尋結果上出現公司的實用資訊,搭配結構化資料測試工具來糾錯,一起來看看如何做吧!

結構化資料 (上)–簡介

什麼是結構化資料 Google 的官方定義: 「如果 Google

Photoshop教學【冷門工具】計算工具

處理照片時,有遇過想要快速計算出畫面人物的情況嗎?用Photoshop的小工具就可以快速做到唷!一起來看看操作步驟吧!

Photoshop教學【CC 2018】筆刷工具-繪圖對稱

Photoshop CC 2018 新增的繪圖對稱筆刷工具,輕鬆使用即可打造繪圖對稱效果,一起來看如何設定如何運用!

Gutenberg 古騰堡 – WordPress 發布最新官方核心編輯器(上篇)

Wordpress 5.0上將發布最新編輯器Gutenberg古騰堡,現在就搶先看安裝以及探索頁面!

Photoshop【App修圖教學】Photoshop Fix 內建臉型調整

ˋ之前介紹了如何用Photoshop Fix 局部光線調整,今天astralweb要與大家分享Photoshop Fix內建臉型調整,一起來看看如何製作吧! ※本教學使用版本Photoshop

Magento 2 EAV Model 介紹 (1)

上次教學了在Magento 2 的自定義事件, 這次要再加碼介紹Magento 的EAV

Progressive Web Application (PWA) – 漸進式網頁應用程式

PWA,是同時結合了網站與App應用程式的優點的網頁,PWA所擁有的三大特點為:可預先存取部分資料,讓用戶在網路欠佳情況下仍可瀏覽、畫面順暢回應快、具有類似app的瀏覽體驗。

如何使用ngrok將你電腦上的專案透過瀏覽器直接分享

Ngrok軟體可以建造一個幫你把別人的瀏覽請求轉到個人電腦中的通道服務,用這種暫時性的方式讓客戶確認畫面,省去不停的截圖和寄email進行確認的時間。

如何在magento 1 使用event for model

這次Astralweb要教大家如何在資料存進資料庫之前做處理,又不要動到原本架構啦!其實使用event for model這個方式就可以有效地完成喔!

如何在magento 1 使用event for controller

在magento上開發程式時,常需要在原生程式碼前後新增功能,這時善用event功能可以省時省力,以下為新增會員之前觸發event中function的程式碼範例: <events> <customer_logout> <observers> <sso_logout>

Navicat – 統一的資料庫管理工具

今天要介紹一個公司:Navicat(業界統稱導航貓),它考慮到了熟悉每種資料庫、每種管理工具十分耗時耗力的狀況,把各種資料庫包進了其資料庫開發管理工具,並且以其直覺好操作方式受廣大使用者喜愛。

pestle 相關系列 (三) generate_route 快速建立 route

在Magento建立 route 就是建立前/後台連結的路徑,設定指定的連結路徑並建立route後才能由瀏覽器進入前/後台執行對應的程式;現在透過 pestle 就可以快速的完成。

Magento2- pestle 相關系列 (二) generate_module 快速建立 module

pestle 是一個可以快速生成 Magento 程式的代碼生成工具,幫助您在而建立一個自訂的 module時省略複製貼上舊程式修改?現在透過 pestle 可以快速的完成這個動作。

HTML5.2 的到來 (2) – 新的有效與無效實踐篇

html 5.2將一些之前認定為無效的內容改為有效,究竟哪些寫法在html 5.2 將調整為有效呢?請看本文為為您說明!

部分賽門鐵克認證即將失效  對於台灣百大網站的影響

由於網路資訊安全的不確定性,許多網站會向數位憑證認證機構(CA─Certificate Authority)申請數位憑證。作為一個權威並可依賴的第三方機構,CA 負責發放以及管理數位憑證。數位憑證的內容包含申請單位的資訊以及公鑰。一般使用者可透過檢驗 CA 發行的數位憑證是否有效,來保障自己的資訊是傳給正確的網站。由於數位憑證關聯著網路資訊安全的重要性,發行憑證的

如何規劃WordPress活動報名功能

近期歐斯瑞接到許多關於Wordpress客製化功能開發的詢問,而其中發現有蠻多公司在詢問活動報名的相關需求,因此歐斯瑞今天特別針對活動報名系統,列出一些在規劃上較容易被忽略的地方:   假設歐斯瑞為回饋社會,即將開設免費電商講座課程,課程內容共有B2B、B2C、跨境電商三大主題,以此範例為各位介紹,如何規劃報名系統內的功能,現在就讓我們來看看吧:   報名活動

Google API 定價的改變,對開發者而言代表了什麼呢?

Google在2018年5月2日宣布,將從2018年6月11日開始,要求凡使用Google地圖平台的所有用戶,啟用信用卡結帳功能,並為所有使用Google地圖的項目提供API密鑰。

Nginx expires 設定與優點

Expires的設定可以將頁面暫存到客戶端瀏覽器,減少對server的請求以及負擔,像是一些很久才會更新的檔案比較推薦設定expires。   expires 的參數 time

解決PHP5.6及7~ stream_socket_client() 函數問題

Warning: stream_socket_client(): Peer certificate CN=’ *****.com’

Magento2.2於php7.1上修正 “mcrypt_module_open() is deprecated”問題

原先在magento2.1以前都尚未支援php7.1, 而在magento2.2開始正式支援了. 在官方手冊中的敘述: The mcrypt extension

Magento2-pestle 相關系列(一)下載 pestle

Magento 常會需要建立很多檔案 光是一個 hello world

駭客入侵(修正) – 在 Magento 2 後台 Form 表單取得 categories 功能

當您使用PHP製作一個Magento 2後台Form表單則無法有所有UI elements的功能。 我最近遇到了一個將產品目錄列出來的Form表單,並且正在使用一種我已經看到在Stack Overflow網站平台中廣泛使用的hack方法。

介紹建立 API 的方法 – 3 後台管理者權限

以下繼續介紹如何建立 API 權限為  需有 後台管理者權限

manage category 切換 category 所觸發的 AJAX

在Magento 後台往往會想對某些頁面寫入JavaScript的需求,為了改變頁面的內容,大多數的頁面都在後端作處理就好,而有些頁面像是Category>manage category裡的category做切換的時候是透過AJAX機制做傳遞,這時候就有寫JavaScript的需求了。   1.如下圖的紅色框框,在切換category的時候執行JavaScript的程式碼

快速查詢CSS/HTML與各瀏覽器的支援-Can I Use

Can I Use網站上羅列出前端常用的CSS、Html、SVG、JS,JS API等等屬性以及瀏覽器支援與否,在開發前先行查詢,可以避免最後因為瀏覽器不相容而需要修改情況。

HTML5.2 的到來 – 迎接新的功能

2017年12月14日,W3C(World Wide Web Consortium)發布 HTML

網頁最佳化圖片

爲何要最佳化圖片? 一言以蔽之,速度決定一切。這裡指的速度,是網頁讀取的速度。你只有幾秒鐘的機會抓住和留住使用者,所以會影響網站載入的時間的任何元素都是不可放過的。無論你只是在網路上經營一個部落格,或在網路上販售商品、提供服務。如果你的網站很慢,你將失去大量的訪客、流量、以及收入。一般來說,如果你的網站載入需要超過一秒,就可能已經需要進行優化了。 「圖片」算是影響網頁載入速度的首要因素,因為圖檔是所有網頁需要傳輸的檔案中體積最大的,從 “圖片瘦身” 下手,絕對能帶來

Photoshop教學【影像修圖】動畫風格

今天astralweb要與大家分享眾多動畫風格中其中一種風格的修圖,一起來看看如何製作吧! ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法,如去背、選取工具、色調調整   Step

網站測試工具-Selenium教學

Selenium 是一個圖形化介面的網頁自動化工具,可以幫助測試人員在知短時間內使用滑鼠就可以簡單完成錄製瀏覽器的操作動作,並快速完成部份的案例測試。

Ubuntu如何手動新增虛擬記憶體(swap)

網站伺服器經常會因用途考量低成本,等到發現資源不足時才增加資源;因此也會有記憶體不足的情況,那麼如果主機都已經上線工作了,該如何修改設定呢?在這裡對Ubuntu linux系統介紹設定的方法,只要幾個指令就可設定完成。

Magento 2 資料設定欄位的方法

Magento 內部有一張資料表是用來儲存系統參數,但常常不知道怎麼新增自定義的欄位進去。 今天,我們就來介紹資料設定欄位的方法吧!   1.

如何改善使用者體驗以提高顧客忠誠度

一個高水準網站除了擁有好的商品外,另一個主要原因便是使用者體驗。   Why? 在這個資訊與技術蓬勃發展與進步的時代,現代人們大多透過網站或商店門市與商家、公司進行互動。 不管是一般形象網站、電商網站,更甚是響應式網站,都逐漸顯示出使用者體驗的重要性。

Magento2 客製化模組製作

本篇要介紹如何在Magento2上製造一個客製化模組(Extension),我們會介紹一個模組必要的xml配置檔,和建置controller和view,呈現它們是如何溝通傳遞資料。 適用版本: Magento2.0以上   首先我們先決定好模組名稱為AstralWeb_HelloWorld,然後依照此模組名稱在app/code資料夾裡底下建立新的路徑app/code/AstralWeb/HelloWorld,一個模組必需要有registration.php和module.xml檔案,模組才能在Magento2底下運行,這兩個檔案我們建置的位置及內容如下:

Magento 2 事件處理 (上)

Magento 內建有許多的事件,其實使用起來非常方便,設定上也不會太過於繁瑣,又可以取得想要的參數,今天我們就來看一下事件的呼叫是如何使用的。   1. 什麼是事件

介紹建立 API 的方法 – 2 前台會員權限

繼上一篇介紹了訪客權限後 這次繼續介紹如何建立 API – 前台會員權限

介紹建立 API 的方法 – 1 訪客權限

如何建立 API 關於API 權限等級 依身分不同有三種不同存取權限

AMP是什麼? AMP的好與壞報你知

Google AMP,簡稱AMP,主要的用途就是讓使用者在開啟手機網頁時更快速,AMP 包括三個部分:分別是AMP HTML,AMP JS以及Google AMP Cache,請看以下的介紹以及優缺點說明。

網站速度,影響你的行動搜尋排名?

網站速度的重要性,2018大事件 Google 在2018一開春就宣告,從 2018年7月起,網頁的讀取速度將做為行動搜尋結果的排序條件之一。也就是,除了傳統我們所熟知的,網頁內容的相關性、外站的連結品質、是否使用AMP、使用者體驗,新加入網頁讀取速度。這項更新只會影響使用體驗非常緩慢的網頁,網頁的相關性還是影響搜尋排名的關鍵指標。  

SVG邊框動畫提升網頁質感 (下)

Vivus 是一個輕量級的JS庫,用來執行 SVG 路徑動畫,在上集我們有先提到如何使用CSS製作 SVG

選擇探索新圖片,是該避免使用攝影圖庫了!

購買一般版權照片並不會讓您的網站看起來跟免費的圖庫網站有太大差別,偏偏又不是每個專案都有預算可以拍攝自己的照片,此時,我們可以使用「非真的攝影圖庫網站」。

IconFont(圖示字型)網頁Icon的最佳解

Icon已是網頁上不可或缺的元素,除了可以提供乾淨的UI外,也少不了簡潔易懂的UX在裡面。 以往在Icon的使用上,不外乎就是由客戶、設計師提供或者是使用Font Awesome、Flaticon等等這類免費與開源素材網站上尋找符合需求的圖案來使用。   如果是一般的Icon其類型可能為png、svg,jpg⋯等等常見的圖檔,但是身為一位前端一定常常會遇到以下類似情形:

如何在Magento新增category的attribute跟attribute group

在 Magento上面要新增product attribute可以在後台的 category ->

Python- 基本用法之library安裝

Python有各式各樣的library,無論是官方的還是第三方所提供的套件,這些套件都幫助我們不需要再重新開發去刻出所需要的功能。 而最廣為使用的基本上是 pip 這個指令  

Python- 測試API

本文將介紹如何用Python來測試API,無論對於測試或是學習上,或是臨時要使用沒有php開發環境的電腦來測試都很簡單又方便喔!

SVG邊框動畫提升網頁質感(上)

這次要為大家介紹一個好用的 JS plugin - vivus,製作出類似手寫風格的動畫!

在Magento顯示原生SQL語法

Magento標準對資料庫存取的方式都是使用ORM ,需要除錯的時候就會想要印出原生SQL來看看,完整的SQL到底長什麼樣子呢? 第一種情況顯示sql的方式 上圖是取得資料庫資料的程式碼,因為有getCollection,所以內建有一個function可以取得原生sql,echo (string)$collection->getSelect();,就會在畫面上印出sql語法了。

Elasticsearch產品使用心得分享

利用Elasticsearch可以記錄大量的系統行為,分析後可以得到很多關於你的系統/網路行為有用的相關資訊,請看以下實作以及產品使用心得!

在controller裡面建立layout block

正常的情況下 要設定layout 對應的block以及templates,只要在extension裡面的layout的xml檔案設定就可以了;但是偶爾還是會遇到需要在controller裡面做設定的情況,例如下面的例子:    

Magento 1 模組版本升級設定

本篇文章介紹模組版本升級設定,有的時候模組已經上線了,但之後又有新增資料表欄位的需求,就會需要版本升級,這裡示範Magento模組升級的必要設定。 此範例為0.1.0升級到0.1.1的示範 1.下圖的version標籤內容要設定成要升級版本的版號 2.然後要新增一個檔案upgrade-0.1.0-0.1.1.php 此檔案為0.1.0~0.1.1的升級腳本

Photoshop教學【影像合成】光影篇

今天astralweb要與大家分享影像合成的實例,一起來看看如何製作吧!

Magento 2 ORM 架構淺談 (3)

在上一次的文章中,我們介紹了Collection 中 Select 子句的應用,接下來要介紹的是使用 Model

Magento 2 ORM 架構淺談 (2)

在上一次的文章中,我們稍微介紹了 ORM 在Magento 內部的關係,也教大家怎麼實作了一個 包含

Photoshop【App修圖教學】Photoshop Fix局部光線調正

今天astralweb要與大家分享Photoshop Fix局部亮暗度的修飾,一起來看看如何製作吧!

分享Magento1.9.3.1 Coupon 的Bug與修正方式

此次的BUG是在結帳時候,如果你使用Coupon功能獲得折扣,之後就算取消或者此筆結帳完成,卻仍然一直保有Coupon獲得的優惠折扣,這是在開發其中的一個商業網站QA測試驗收時候發現的,先前的magento專案都沒測出這個問題,所以進而去比對其他專案的magento版本和source code,發現在magento的1.9.0.1和1.9.2.0版本,結帳流程的程式碼沒有一些參數設置和驗證,而1.9.3.1版本多了那些參數的設置與驗證導致BUG的產生。 復原BUG的流程 將產品加入購物車 執行Coupon

Magento 2 ORM 架構淺談 (1)

Magento 除了實踐了許多設計模式( Design Pattern )的精神,也還有其他 Pattern ,像是 ORM 的架構就是其中的一種,今天就一起來了解 ORM 在 Magento 2 裡面有哪些好用的方法吧!

php版本升級 php 5 to php 7

有些magento的extension會有Php版本的要求,要求Php版本要7以上,而網站目前的php版本是5的話,就要做Php版本升級。

Magento 2使用Module建立資料表

 Magento 是一個開源的電子商務購物網站,在客製化的時候,難免不了需要自己新增資料表及各式各樣的欄位,在 Magento 內部有實作了很好用的方法,有助於我們資料表 Schema

強大的前端框架工具Bootstrap 3介紹

Astral Web使用Bootstrap 3作為我們的前端框架基礎,以簡化我們的工作且提高開發效率,並在前端和後端開發人員之間進行溝通。 Bootstrap 3

我愛TMUX

 tmux 是終端機必備的最佳夥伴 我在每台伺服器上都使用它。tmux全名為:terminal multiplexer;tmux以各種方式協助我的工作。 它讓我更有效率的工作。我可以將一個視窗分成多個窗格,而不是以一個視窗填滿整個螢幕。我更可以調整或重新排序我的螢幕和窗格以便我工作。

Safari前端開發-在實機裝置上檢測你的網頁

本文將介紹如何使用Safari瀏覽器來幫助檢測前端開發。

Chrome Devtools 開發者工具功能介紹(network篇)

前端開發最常使用到的開發者工具面板為 Elements Console   Chrome Devtools

8個強化magento效能的方法

Magento是一個相當複雜的系統,今天就來介紹幾個可以強化它的效能方式:     1.關掉不需要用的運送方法模組,可以強化checkout的效能      Magento預設是會打開Fedex,USPS,UDS,DHL,如果不需要的話,可以都關掉它

清除Magento的Log方式

Magento有一些user的統計資料或記錄,是存在資料庫的,但隨著時間的關係、這一些的資料會變的相當肥大,需要定時做清理。 Magento有相當多的log存在資料庫,隨著資料量的上升, 資料庫的效率會開始變差,所以可以先清除掉這些資料,如果用不到的話!   清除log的方式

秒懂PHP的FastCGI跟PHP-FPM有什麼關係

隨著時間的推進,php可以說是花樣越來越多,很多就在問說CGI跟FPM是有什麼關係,讓小編為大家講解一下!

加速magento! 什麼是Zend Opcache

什麼是Opcache Zend Opcache通過opcode做cache,讓php有快的執行過程,它將腳本存在共享內存中供以後使用,避免掉從磁碟讀取代碼進行編譯的時間消秏,同時它還應用了一些代碼優化模式,使代碼執行更快。   什麼是opcode

PHP bug:使用fopen函式經由SSH2連接SFTP失效

      原文請參閱參考資料1,此Bug發生於PHP 5.6.28與7.0.14以上版本,舉例來說下面這段語法是連接SFTP,準備開啟一個檔案做上傳寫入:

網頁文字單位 PX,EM,REM的差別: 如何修改Magento2 預設rem

PX: px的最大特色是精準度高,也因為他不知道他是絕對數值,不管你在那種螢幕寬的裝置下看到的字體大小都一樣,屬於最入門款的文字單位。   EM: em是相對數值,他會隨著外圍

Photoshop【App修圖教學】Photoshop Fix 基本介紹

今天astralweb要與大家分享Photoshop Fix基本環境介紹,對於行動裝置使用者方便的修圖軟體,一起來看看如何製作吧!

製作一個你專屬的滑鼠樣式

  RealWorld Cursor Editor 是一個免費的滑鼠圖示編輯功具、我們今天要分享如何使用它來製作個人專屬的滑鼠樣式。

Photoshop教學【基礎篇】後製彩妝

今天astralweb要與大家分享後製彩妝效果,一起來看看如何製作吧!

網站測試該注意哪些細節?

當網站建置完成後,緊接著就是檢測階段了,以避免上線後產生的問題;像是客戶進行線上購物的過程中發生無法購買的情況,或使用者體驗不佳而失去購買慾望。那麼在進行檢測時應該注意哪些細節呢? 今天歐斯瑞就和大家簡單分享在進行檢測時應該注意的細節,一起來看看吧!   1. 正確的最終版本設計

如何匯入大量的資料進入資料庫

拿到例如一份5個欄位,但有1萬行的文字檔案時,(例如匯入大量序號)如果經過程式介面匯入資料庫,多半會遇到問題,要調整設定又很麻煩。這時,可以經過phpmyadmin這個工具來幫助你將文字檔案匯入後,再匯出成sql。

測試網頁讀取速度與內容多寡

 今天要來測試一個網頁的讀取速度,當中的圖片多寡會影響多少呢?   首先將我們的Astralweb的官網轉出為Html檔,去除了PHP與部分JS的因素並與測試圖片放置在同一個伺服器上,圖片大小沒有固定,扣除外連結的圖片後,我們將分別測試加上額外的20、60與100張圖時,網站的讀取速度會差多少。   每個數量都將統一以清除快取的方式各刷新10次,來計算讀取的時間。

Chrome Devtools 開發者工具功能介紹-source篇

隨著 JavaScript 應用的複雜性逐漸提高,我們需要藉由更有力的測試工具幫助開發快速尋找問題點,並有效地修復它。除了使用 console 輸出檢視外(

如何使用composer安裝magento2

Magento 其實支援多種安裝方式,除了一般常見的下載安裝包之外,因為在 Magnento 2 裡面導入了新的現代化

Magneto2 2.2 不須透過指令自動生成pub資料夾下檔案

過去創立一個主題完成後,在後台選取新建立的主題,前台看到的畫面卻還是未載入css的狀態,這時你會下command “php bin/magento setup:static-content:deploy” ,

快速完成瀑布流版面-使用Masonry套件

今天我們來實作如何使用Masonry製作瀑布流的效果!

Photoshop【App修圖教學】PS Express汙點修復工具

Photoshop【App修圖教學】PS Express汙點修復工具 今天astralweb要與大家分享PS Express汙點修復工具,對於行動裝置使用者方便的修圖軟體,一起來看看如何製作吧! ※本教學使用版本Adobe

Photoshop教學【入門篇】後製夜晚效果

Photoshop教學【入門篇】後製夜晚效果 今天astralweb又要與大家分享簡單的夜晚後製效果,這次使用地球的空照圖,一起來看看如何製作吧! ※本教學使用版本Adobe PS Express

如何在Magento 篩選器中移除目錄及價錢項目

在Magento 的產品目錄頁中、左邊欄位有個篩選器,在預設的Magento 佈景主題包裡、這個篩選器包含了:商品目錄、商品屬性標籤、價錢等。 這篇文章要教大家移除篩選器中的目錄及價錢項目。  

Chrome Devtools 開發者工具功能介紹-console

網頁開發者常需與瀏覽器打交道,本文將針對Chrome瀏覽器,教學使用console指令的幾個基本功能!

使用GSAP來搞定動畫與特效

GSAP不但本身套件的容量小,且能適用於各種瀏覽器,可以從簡單的效果延伸到各種複雜的特效,方便管理與更動,以下簡單介紹它的使用方法!

Magento2測試資料產生工具

        在開發 Magento 的購物商城的時候,常常會需要產生一些測試用的假資料,一方面可以得知開發的頁面是否會跑版,也可以測試自己伺服器的效能是否足夠,是否需要使用更進階的伺服器等級。 而

Cmder 管理工具介紹

日常使用的作業系統是Windows,但Windows內建的命令提示字元真的很難用,cmder這套工具是很好的選擇。他不但好用還可以用一些linux的指令,讓linux的重度使用者可以在windows上面也感受到平常熟悉的環境。

NetBeans 設定檔匯出&匯入的方式

套用設定檔的好處可讓使用者在不同的電腦上面使用Netbeans都能有同樣的設定同樣的coding style,不會因為換了另一台電腦又要再次的設定自己的開發環境   設定檔匯出  

如何利用 Z-pattern 模型 做出更好的佈局設計

呈上篇文章;更多內容介紹請參考: 網頁設計的開始,版面設計–把消費者的視線留在你的核心內容 理想情況下,我們希望使用者首先查看最重要的信息,再次查看第二個重要的信息。因此,重要的元素應該沿著掃描路徑放置,訪客應在正確的時間被提供正確的信息。這點無論是使用任何一種模型都是無庸置疑的。   網頁動線是至關重要的 動線也是你希望使用者在您網站上的行為流程,是將視線從一個頁面的一部分引導到另一個你想要移動的方向。

如何針對 F-Pattern 做出更好的佈局設計

呈上篇文章;更多內容介紹請參考: 網頁設計的開始,版面設計–把消費者的視線留在你的核心內容 針對您的網頁排出優先順序 了解您的網頁的目的,將想放置的內容將重要且希望傳達的訊息排在使用者視線經常停留的位置。另外網頁的頂端往往是視覺停留的重點,所以盡量將最核心的內容放置在頁面頂端。這也是為何標題和導航欄總是很重要 針對快速瀏覽而設定 使用者通常不會一個字一個詞地閱讀文章,而是通過掃描關鍵字來獲取內容,所以,你需要將包含可能會引發使用者興趣內容的關鍵字按照F式布局來排布,這樣可以儘可能有效地呈現內容:

網頁設計的開始,版面設計–把消費者的視線留在你的核心內容

每次開始一個新的網頁設計專案的時候,會不會有那麼一個瞬間:「這個專案的網頁要從哪裏着手呢?」隨着這種問題而來的,設計網頁佈局時是不是有一些規則可循? 其實網頁佈局在很多時候都是相似的,甚至可以說,有些佈局模式是歷久不衰的。身處在資訊爆炸和科技日新月異的時代,造成瀏覽網頁行為的改變。如何有效吸引使用者的注意力?讓資訊傳遞、行銷達到事半功倍的效果。   歐瑞斯特別針對標準使用者行為,整理了3 種較為有效地的版面設計,讓專案經理或是網頁開發設計師在作網頁版面配置時利用網頁瀏覽視覺熱點的轉變,做為使用者瀏覽網頁行為的參考,進行分析在網頁設計,網頁配置是否能運用使用者的瀏覽習慣,創造一個符合感知易用性的網站,促進資訊傳遞,進而達到企業建設網站的目標。

如何繪製購物網站前端Sitemap 以Magento 2 Demo為例

在網頁設計製作開始前,專案管理或行銷企劃人員會提供一份完整資料給予設計人員,而設計與開發會透過這些資訊與資料來為該專案進行有限度的製作,那這些資料有什麼呢? 一起來看看吧!   前言 設計與開發人員能不能決定網頁功能?

PhpStorm 開發 Magento 外掛工具介紹(一)

說到地表最強的 PHP 開發 IDE ,絕對是屬於

Axure RP 8版本-38個免費又實用的Widget Libraries

Axure 的 widget libraries 包括免費及市售兩種,以下是我們最喜歡的38個免費widget程序列表(和幾個模板),由於某些Library已經不正式支持Axure RP 8,部分功能可能無法完全正常運行, 但希望你找到喜歡的東西!

如何解決Bootstrap 3和PrototypeJS之間的衝突

如何解決Bootstrap 3和PrototypeJS之間的衝突 當我們想要在Magento上使用bootstrap collapse.js時,會發現在展開的時候沒有問題,但是收合時卻是直接關閉、與Bootstrap網站上慢慢滑上的效果不同。這是因為Bootstrap 3和PrototypeJS之間產生了衝突。

PhpStorm 開發 Magento 專案的初始設定

PhpStorm 開發 Magento 專案的初始設定 說到地表最強的

什麼是Wireframe?

今天小編要來與大家分享架設網站初期,一個很重要的元素「Wireframe」。 在開始Wireframe之際,須先了解客戶需求,依不同公司不同業務會由該規劃人員來繪製整理來自客戶端蒐集到的資料,如:網站內容頁,客戶的需求概念等,並將蒐集到的資料與團隊進行內部協調溝通,再進行Wireframe的繪製,根據Wireframe同客戶確認各網頁的功能需求 (屬於專案管理IPEMC的Plan階段)。   首先,先來介紹什麼是Wireframe(線框圖),它是一個低擬真度來呈現產品設計的表示法,主要功能可

Photoshop【App修圖教學】PS Express色調調整

  今天astralweb要與大家分享如何PS Express色調調整,一起來看看如何製作吧! ※本教學使用版本Adobe PS

網站測試工具-JMeter教學

JMeter是一套開源的測試軟體,主要是用來測試網站功能及系統負載較重的情形下是否能正常運作,或是在給定的負載量下其效能的表現結果是否符合預期。JMeter原本只用在測試客戶端與服務端結構的軟體,而現在已能支援不同的模塊。它的操作介面簡單,相信你也可以快速上手。

Magento2-教你如何安裝Robots.txt?

Magento2. 三步驟安裝Robots.txt Robots.txt是一個簡單的txt文件,功能是對搜尋引擎制定搜尋規則,也可以說是搜尋引擎與網站間的協議,告訴搜尋引擎那些網站內容可以被索引,那些是拒絕被索引的。 下面將說明如何在Magento2後台管理Robots.txt:  

如何使用Zabbix Alert Scripts

建立Jabber Script 從終端測試 配置Zabbix使用Jabber script

邁向新時代,拓展新視野。歐斯瑞2017視覺設計

邁向新時代,拓展新視野。歐斯瑞2017視覺設計 感謝大家一直以來對歐斯瑞支持與肯定,歐斯瑞服務至今將邁入第十年,為因應時代需求,我們重新規劃了新的視覺形象,一起來看看我們的新標誌吧!   目的: 因應軟硬體進步下所衍伸的相關需求之設計

優化網頁設計-將客戶導向重點頁面

明顯美觀的大橫幅   現代的網頁設計已經變得更加視覺化,讓使用者登進到全屏大橫幅時,可輕鬆查看選單選擇。 但是,所有重要內容發生了什麼事? 隱藏在詳細閱讀中?

版本控制與GitHub專案建立介紹

什麼是版本控制? 版本控制是一個能夠記錄一個或一組檔案在某一段時間的變更,使得使用者以後能取回特定版本的系統。   版本控制最常用的架構又分為集中式版控和分散式版控  

安裝與設定ftp使用者,禁止ssh與sftp登入(以Ubuntu為例)

本文將以vsftp為例,示範如何安裝與設定ftp使用者,禁止ssh與sftp登入,因為他在管理與調整權限或是使用者路徑上都較為簡單。

使用 NIPPON COLORS 在茫茫色彩中尋求一點靈感

  還在為了按鈕、文字,或是哪個區塊要用什麼顏色而煩惱嗎?顏色總是選了又選,換了又換,搞到最後都想叫保安!!保安!!這篇就要介紹一個不錯的配色工具網站給各位。   NIPPON COLORS-(日本の伝統色)是一個介紹各種日本自古以來,常會使用在不管是於文學上,還是手工藝等等地方的顏色代表(總共收錄250種)。讓你能夠更加的了解與認識如:桔梗、緋紅,琉璃等等這些神秘的顏色,不再需要藉由憑空想像。

Photoshop【基礎修圖教學】增加立體感

有時候因為光線關係,人像拍攝結果會顯得較五官為扁平,當以亮度/對比調整也無法顯得有立體感時,我們就可以使用加深加亮工具增加立體感,請看以下介紹!

原型設計AXURE RP 8 專為企劃提案人員而設計的網頁模擬工具

  一個新的原型標準 紙、筆、圖形編輯器和智慧原型應用程式。 隨著不斷發展的設計標準,客戶對網站和應用程序要求更先進、更複雜的界面設計。 現在有許多工具可以幫助加速設計過程,以滿足這些需求。

WordPress 外掛使用注意事項

在開發WordPress時,常會使用一些實用的外掛程式(Plugin)去幫助我們不管是在功能、外觀、甚至是網站管理上,達到想要的目的。   但並不是每個外掛都能順利地與你的WordPress網站順利相容且運作,小則沒有功能,大則能使網站崩潰!所以在使用這些外掛時有些什麼是該注意的呢?   這篇文章將列出幾個注意事項: