# 快易購SOP
### 目錄
[TOC]
# 基本資料
快易購本機位置 \\10.40.4.252\web\on
# 一、vs code安裝及設定
- [官網下載](https://code.visualstudio.com/)
- 安裝(一直按下一步)
- 開啟vscode，點左側欄extension
- 搜尋 Chinese (Traditional) Language Pack for Visual Studio Code，並安裝
- 搜尋Live Sass Compiler，並安裝
- 關閉Vs code重啟
---
- 點左下角齒輪>設定
- 點上方"使用者"
- 點左方"延伸模組"
- 點Live sass compile config
- 點在settings.json內編輯
- 將下方程式碼複製貼上 { } 內，存檔
```htmlmixed=
"liveSassCompile.settings.formats": [
{
// "format": "expanded", //多行展開
"format": "compact", //單行
// "format": "compressed",//壓縮
"extensionName": ".css", //輸出的副檔名
"savePath": "/public/assets/frontend/css" //輸出的路徑
}
],
// "liveSassCompile.settings.autoprefix": [
// "> 1%", //SCSS 轉 CSS 時自動補上支援舊瀏覽器語法
// "last 5 versions" //最後5個版本
// ],
"liveSassCompile.settings.autoprefix": null,
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
"**/vendor/**",
".vscode/**"
],
"laravel_goto_view.folders": {
"default": "/resources/views",
"templates": "/resources/templates"
},
"laravel_goto_view.regex": "(?<=view\\(|@include\\(|@extends\\(|@component\\(|@includeIf\\()(['\"])[^'\"]*\\1",
```
- 已完成vscode設定
---
# 二、SASS編譯設定(vs code)
- 每次開啟vscode及替換案件時，請點選右下角"眼睛"
- watching時表示已啟用"存檔即編譯"模式 
- "編譯"做的事情是把"SASS"轉換成"CSS"
---
## 簡單介紹SASS
- 有巢狀
- 可設定全域變數(色碼、大小)
- 漸進式，可以只用掌握的CSS加變數 
---
```sass=
#nav-menu {
nav {
.meninmenu {
>li {
>a {
color: $header-font;
padding-bottom: 2.5rem;
padding-top: 2.5rem;
}
&:last-child {
a {
padding-right: 0;
}
}
}
}
}
}
```
- 等價於此css
```css=
#nav-menu nav .meninmenu > li > a {
color: #694533;
padding-bottom: 2.5rem;
padding-top: 2.5rem;
}
#nav-menu nav .meninmenu > li:last-child a {
padding-right: 0;
}
```
---
## 甚麼是變數
- 盒子
- 代名詞
### SASS的變數是錢開頭，$theme-color $sale-color
### 將原本習慣的色碼打法換成變數打法
```sass=
h1{
color:#036df5;
}
h1{
color:$theme-color;
}
```
#### 好處是之後客戶希望這個藍色在深一點，不需要查找css逐行替換，可以直接改變數設定檔案
#### 避免掉相近顏色要改又沒改到的問題 #036df5 #037df7
---
# 三、SASS變數設定及資料夾分類定義
## 以demo為例-路徑
- 資料夾路徑 \\Gtut_nas\web\fastshop\demo
- sass路徑 \\Gtut_nas\web\fastshop\demo\resources\assets\frontend\sass\template
- css路徑 \\Gtut_nas\web\fastshop\demo\public\assets\frontend\css
#### 依上面步驟設置完成後，要修改案件時只要將資料夾拖曳至vscode，並開啟compile，每次將sass存檔都會自動編譯成css
## 可編輯的scss資料夾custom
custom是不會被版本更新的
進入custom資料夾，made-custom.scss是提供放置外來的scss及不常用的，比如版本內建的特殊icon、animation css3動畫及loading，若要使用請解開註解。
可編輯的scss共有3支
在custom > made資料夾裡面
- _variables.scss 存放變數的scss
- _custom-style.scss 該案客製的scss
- _button.scss 按鈕樣式的scss
### _variables.scss
- 開啟_variables.scss
```sass=
//===== 整體配色區 =====//
$theme-color: #036df5; //主色系
$theme-hover-color:#2a598c; //主色系滑過
$main-dark-color:#201f29; //選單下拉購物車按鈕
$body-color: #2f2f2f; //整體網站文字色
$heading-color: #2e2e2e; //主標題色(包含)
$sale-color: #343940; //銷售文字顏色
$old_prize:#959595; //原價
$hotlabel-color: #2e2e2e; //產品hot標籤
```
- 將主色系改為橘色
```sass=
//===== 整體配色區 =====//
$theme-color: #f55003; //主色系
$theme-hover-color:#2a598c; //主色系滑過
$main-dark-color:#201f29; //選單下拉購物車按鈕
$body-color: #2f2f2f; //整體網站文字色
$heading-color: #2e2e2e; //主標題色(包含)
$sale-color: #343940; //銷售文字顏色
$old_prize:#959595; //原價
$hotlabel-color: #2e2e2e; //產品hot標籤
```
- 存檔，等待右下角出現成功!
- 全站原為藍色地方變為橘色
### _custom-style.scss
- 如有其他客製css或顏色需求，使用_custom-style.scss製作
- 可用全部css方式撰寫 (不推薦)
```sass=
#nav-menu nav .meninmenu > li > a {
color: #694533;
border-bottom:1px solid #ccc;
padding-bottom: 2.5rem;
padding-top: 2.5rem;
}
```
- 可用全部css+變數(推薦)
```sass=
#nav-menu nav .meninmenu > li > a {
color: $header-font;
border-bottom:1px solid $border-color;
padding-bottom: 2.5rem;
padding-top: 2.5rem;
}
```
## sass變數-不同螢幕裝置尺寸使用方法
#### 是由這支scss產生"mixins.scss"，檔案有版本控制，無法隨意更改
###### 示範
```sass=
#wn__footer {
margin-bottom: 4.5rem;
@include width-max-1200 {
margin-bottom: 30px;
}
@include md-width-991 {
margin-bottom: 15px;
}
}
```
###### 尺寸範圍 : @media (min-width: 1200px) and (max-width: 1300px)
```
@include width-1300-1200{}
```
###### 尺寸範圍 : @media (max-width: 1200px)
```
@include width-max-1200{}
```
###### 尺寸範圍 : @media (min-width: 992px) and (max-width: 1199px)
```
@include width-1199-992{}
```
###### 尺寸範圍 : @media (max-width: 767px)
```
@include sm-width-767{}
```
###### 尺寸範圍 : @media (max-width: 991px)
```
@include md-width-991{}
```
###### 尺寸範圍 : @media (max-width: 575px)
```
@include xs-width-576{}
```
###### 尺寸範圍 : @media (max-width: 575px)
```
@include xs-width-576{}
```
###### 尺寸範圍 : @media (max-width: 450px)
```
@include xs-width-450{}
```
###### 尺寸範圍 : @media (max-width: 340px)
```
@include xxs-width-340{}
```
###### 尺寸範圍 : @media (min-width: 992px)
```
@include lg-width-992{}
```
###### 尺寸範圍 : @media (max-width: 1199px)
```
@include wmax-1199{}
```
###### 尺寸範圍 : @media (min-width: 1200px)
```
@include wmin-1200{}
```
###### 尺寸範圍 : @media (max-width: 1024px)
```
@include wmax-1024{}
```
###### 尺寸範圍 : @media (min-width: 1025px)
```
@include wmin-1025{}
```
###### 尺寸範圍 : @media (max-width: 991px)
```
@include wmax-991{}
```
###### 尺寸範圍 : @media (min-width: 992px)
```
@include wmin-992{}
```
###### 尺寸範圍 : @media (max-width: 767px)
```
@include wmax-767{}
```
###### 尺寸範圍 : @media (min-width: 768px)
```
@include wmin-768{}
```
###### 尺寸範圍 : @media (max-width: 575px)
```
@include wmax-575{}
```
###### 尺寸範圍 : @media (min-width: 576px)
```
@include wmin-576{}
```
###### 尺寸範圍 : @media (max-width: 390px)
```
@include wmax-390{}
```
###### 尺寸範圍 : @media (min-width: 391px)
```
@include wmin-391{}
```
###### 尺寸範圍 : @media (max-width: 320px)
```
@include wmax-sm-320{}
```
###### 尺寸範圍 : @media (min-width: 321px)
```
@include wmin-sm-321{}
```
20200310 update scss rule
- 不寫lg / md 這些bootstrap標示
- 數字實際對應到px
- 以lg(991px)為例，應該是大於992(min-width)跟小於991(max-width
###### 最大最小寬度
- 先寫max再寫min
```sass=
@mixin wmax-1600-wmin-992 {
@media (max-width: 1600px)and (min-width:992px) {
@content
}
}
@mixin wmax-1440-wmin-1280 {
@media (max-width: 1440px)and (min-width:1280px) {
@content
}
}
```
###### 一般尺寸
- 不再寫lg / md
```sass=
@mixin wmax-1199 {
@media (max-width: 1199px) {
@content
}
}
@mixin wmin-1200 {
@media (min-width: 1200px) {
@content
}
}
@mixin wmax-1024 {
@media (max-width: 1024px) {
@content
}
}
@mixin wmin-1025 {
@media (min-width: 1025px) {
@content
}
}
@mixin wmax-991 {
@media (max-width: 991px) {
@content
}
}
@mixin wmin-992 {
@media (min-width: 992px) {
@content
}
}
@mixin wmax-767 {
@media (max-width: 767px) {
@content
}
}
@mixin wmin-768 {
@media (min-width: 768px) {
@content
}
}
@mixin wmax-575 {
@media (max-width: 575px) {
@content
}
}
@mixin wmin-576 {
@media (min-width: 576px) {
@content
}
}
@mixin wmax-390 {
@media (max-width: 390px) {
@content
}
}
@mixin wmin-391 {
@media (min-width: 391px) {
@content
}
}
@mixin wmax-sm-320 {
@media (max-width: 320px) {
@content
}
}
@mixin wmin-sm-321 {
@media (min-width: 321px) {
@content
}
}
```
#### 自訂的寫法
直接用@media 設定尺寸，如下:
```sass=
.contentbox {
color: #fff;
max-width: 694px;
width: 100%;
padding: 0 15px;
@media (max-width: 1440px) {
max-width: 500px;
margin-left: 15vw;
}
@media (max-width: 898px) {
margin-left: auto;
margin-right: auto;
}
}
```
---
# 四、CSS層級知識技巧
#### 要客製css但蓋不過原有css時的做法 提高優先序(選擇器)
- 行內的樣式>頁面內的樣式>外部載入
```htmlmixed=
//行內
<div style="color:#CCC">
button
</div>
//頁面內
<style>
.grey{
color:#CCC;
}
</style>
//外部載入
<link href="css/style.css" rel="stylesheet">
```
- 後壓前
```css
.btn{
padding:2rem;
background:blue;
color:#FFF;
}
.btn{
padding:1rem;
background:red;
color: #000;
}
```
- ID > class > element
```htmlmixed=
<h1 class="stlye" id="id">44就44</h1>
#id{
color:#DDD;
background:#000;
border-radius:6px;
text-align:center;
padding:2rem;
}
.stlye{
background:pink;
color:green;
display:inline-block;
width:150px;
}
h1{
background:blue;
color:#000;
border:3px solid green;
}
```
```htmlmixed=
<div class="container">
<div class="row">
<div class="col-12">
<div class="article-wrap">
<div class="article-title">
<h1 class="h1"><strong>best</strong> website </h1>
</div>
</div>
</div>
</div>
</div>
.container .row .col-12 .article-wrap .article-title .h1{
color:green;
}
.container .row .col-12 .article-wrap .article-title h1{
color:red;
}
```
- 靠爸可以提高優先序
```htmlmixed=
<div class="container">
<div class="row">
<div class="col-12">
<div class="article-wrap">
<div class="article-title">
<h1 class="h1"><strong>best</strong> website </h1>
</div>
</div>
</div>
</div>
</div>
.h1{
color:green;
}
.container .row .col-12 .article-wrap .article-title h1{
color:red;
}
```
- element黏class
```htmlmixed=
<div class="container">
<div class="row">
<div class="col-12">
<div class="article-wrap">
<div class="article-title">
<h1 class="h1"><strong>best</strong> website </h1>
</div>
</div>
</div>
</div>
</div>
.container .row .col-12 .article-wrap .article-title h1.h1{
color:green;
}
.container .row .col-12 .article-wrap .article-title .h1{
color:red;
}
```
- !important 是最優先級
```htmlmixed=
<h1 class="stlye" id="id">44就44</h1>
#id{
color:#DDD;
background:#000;
border-radius:6px;
text-align:center;
padding:2rem;
}
.stlye{
background:pink;
color:green;
display:inline-block;
width:150px;
}
h1{
background:blue !important;
color:#000 !important;
border:3px solid green;
}
```
最好只在覆蓋特定"全域"、"套件"的css時使用，因為會讓優先序沒規則
在沒辦法添加新class或更高優先序時的手段
- 繼承，先看父子層結構，若均指定在同一層時再比較權重
```htmlmixed=
<div class="container" id="c1">
<div class="content" id="c2">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
#c1{
color: green !important;
}
.content{
color: pink;
}
```
---
### Facebook Messenger 線上客服申請說明
#### 需要請客戶進入自己的facebook 粉絲專業，申請一組程式崁入碼。
說明圖片 路徑:● 常用資料\套版相關資料\Facebook Messenger 線上客服申請說明
##### ●步驟一：進到粉絲團後，點及左側管理粉絲團專頁的【設定】。
##### ●步驟二：進入設定後再點【訊息】，右側出現視窗畫面之後點擊右下角的【繼續】。
##### ●步驟三：滑至最下方看到Messenger 新增到您的網站，點擊【立即開始】。
##### ●步驟四：出現畫面設定洽談外掛程式視窗。1. 選擇中文(台灣) → 2. 點選【變更】→ 3.方框裡輸入寫問候文字 → 4.按下【儲存】→ 5. 按下【繼續】。
##### ●步驟五：檢視桌面版面預覽、行動版預覽，沒問題後按【繼續】。
##### ●步驟六：1. 將網站網址貼至下圖第一個紅框處 > 2.在將第二個紅框處的選項打勾 > 3. 複製程式碼片段提供給久大寰宇科技股份有限公司 > 4. 按下【完成】即可結束設定。若網址為校稿路徑，請繼續到下個步驟。
##### ●步驟七：左側點選【進階訊息】，將欲上線的正式網址貼至允許清單中的網域紅框處，在按下【儲存】即可設定完成。
#### 崁入碼放置後台功能 > 線上客服 > Facebook Messenger 線上客服 > 點選編輯 > 貼上即可。
# 五、快易購版型使用方法
## 1.樣式
### (1)裝飾線移除方法
"content__with__border"移除即可
"section__title"移除即可
### (2)裝飾線快速換色
#### 黑標題改白標題
```htmlmixed=
//加入 title--white 的class
<div class="row mb-5">
<div class="section__title text-center col-lg-12 title--white">
<h4 class="title__be--2">WELCOME TO WENRO STORE</h4>{{-- 主標題 --}}
</div>
</div>
```
"section__title"移除
### (3)字改白色或白色字移除
增加"text-white"
### (4)線框樣式刪除
編號 : version_catalog_04
"categories__content" 移除
### (5)線框樣式刪除
"center__line" 移除
### (6)ico更改方法
從檔案 > GTUT > 點選檔案上傳
檔名 : favicon.ico(名稱要一模一樣)
### (7)按鈕設定
#### 1.基本按鈕 class: btn btn-primary
#### 2.回上一步按鈕 : class: btn btn-secondary
#### 3.有箭頭按鈕 : class: shopbtn
### (8)css加入背景圖
#### 前面要加"#{$path-prefix}"
範例 : background: url(#{$path-prefix}images/icons/prev.png) left 48% no-repeat;
### (9)內建icon 組
路徑位置:resources\assets\frontend\sass\template\_plugins.scss
###### 內訂
1.Awesome Icons
快易購路徑位置:
@import './plugins/font-awesome.min';
https://fontawesome.com/icons?from=io
2. 社群icon(包含FB、line等等)
快易購路徑位置:
@import './plugins/font-awesome.min
www.socicon.com/icons.php
3. Material Design Iconic Font
快易購路徑位置:
@import '../template/plugins/material-design-iconic-font.min';
https://zavoloklom.github.io/
目前用在網站叉叉、輪播箭頭
##### 增material design的全域icon方式
- 目前不使用material-design-iconic-font.min (93kb)
- 新增了material-design-iconic-font_little (2kb)
material-design-iconic-font_little僅有13個icon
未來需要新增icon步驟如下
1. 開啟resources\assets\frontend\sass\template\plugins\_material-design-iconic-font_little.scss
2. 在[官網](https://zavoloklom.github.io/material-design-iconic-font/icons.htm)找到需要的icon
3. 開啟resources\assets\frontend\sass\template\plugins\_material-design-iconic-font.min.scss搜尋該icon名稱，複製該名稱的css
4. 貼至material-design-iconic-font_little.scss最下方
###### 自訂
使用方法:若需要使用到以下icon 請至 sass\custom\_made-custom.scss 解開註解
1.SIMPLE LINE ICONS
https://pagellapolitica.it/static/plugins/line-icons/
2.icon font pack
https://themes-pixeden.com/font-demos/7-stroke/
### (10) 左右按鈕樣式變更
#### banner 左右鍵預設樣式
banner 左右鍵，方形樣式設計
##### 變更方法:
```
"slider-area" 改成 "slider--two"
```
---
#### 輪播套件左右鍵
##### 圓形款式加入使用方法
加入 class 為 "slide__arrow01"
##### 方形款式加入使用方法
加入 class 為 "slide__arrow02"
## 2.常用連結（上為上傳端，下為本地端。案件資料夾名稱為英文）
- CSS
/public_html/assets/frontend/css
\\GTUT_NAS\web\on\(案件資料夾名稱)\public\assets\frontend\css
- 圖片路徑
/public_html/assets/frontend/imgaes
\\GTUT_NAS\web\on\(案件資料夾名稱)\public\assets\frontend\images
- 聯絡我們表單
後台 → 頁面 → 表單 → 連絡我們
\\GTUT_NAS\web\on\(案件資料夾名稱)\resources/views/frontend/forms/default.blade.php
- ico檔案上傳位置：
後台 → 檔案 → GTUT資料夾（如下圖）
- 產品內頁手機版不需要手風琴效果
\\GTUT_NAS\web\on\(案件資料夾名稱)\resources\views\frontend\products\includes\zone\tab.blade.php
將下圖位置的class移除即可
- 網站名稱、關鍵字、描述、GA碼...等填寫位置：
後台 → 系統 → 網站設定
---
## 3.banner模組
所有的css 都存在於這檔案中_slider.scss
#### banner 文字特效
總共分 10個樣式
如果需要文字特效，請加.animation__style01 ~ .animation__style10
加入方法，請至模組 > Banner01 > 欄位 > ID輸入(animation)
再到前台圖片 > 選擇首頁Banner > 輸入需要的class 名稱即可
#### banner 款式種類
總共有16組banner 樣式，請加
.slider--one
.slider--two
.slider--three
.slider--four
.slider--fiv
.slider--six
.slider__group
.slider--nine
.slider--ten
.slider--11
.slider--12
.slider--13
.slider--14
.slider--15
.slider--16
加入位置
#### 滿版banner製作 fullscreen
加入.fullscreen(比如:demo4)
可以加在 文字讓文字的畫面撐大 或加在任何div都可以
css結構
.fullscreen {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
min-height: 100vh;
}
### JS放置位置
\public\assets\frontend\javascript
JS啟動碼放置位置
\public\assets\frontend\javascript\active.js
JS路徑放置位置(有2種方法)
(1)一般位置沒有被整合打包
路徑 : \resources\templates\frontend\includes\javascript.blade.php
(2)會把所有js，整合一個js，但是放在這裡的js 都要經過"終機端"編譯，編譯完後會跑到public資料夾的js 裡面。
路徑 : \webpacks\frontend.js
### JS編譯方法一
先安裝node.js
https://nodejs.org/download/release/v8.16.1/
下載 node-v8.16.1-x64.msi
JS放在這個路徑
\\gtut_nas\web\on\ivyspagtut\webpacks\frontend.js
至readme.md 打開
| 上線 | 前台 Javascript 編譯 | `$ npm run frontend-production` |
至vscode 上方 點選終端機
輸入node -v 然後貼上 npm run frontend-production
※注意 : 網站路徑一定要是磁碟機的
※提醒 : 不可以是nas 路徑
### JS編譯方法二
vscode 左下角 的 NPM指令碼 點三角形，即可完成編譯。
---
## 4.Loading 製作
\\Gtut_nas\web\on\ivyspagtut\public\assets\frontend\javascript\active.js
增加js
$(window).on('load', function() {
window.closeLoading() //執行完js，Loading 再消失
});
\\Gtut_nas\web\on\ivyspagtut\resources\assets\frontend\sass\custom\_made-custom.scss
請將註解打開
php檔案位置
\resources\views\frontend\includes\javascript.blade.php
id="ya-loading" 不可以改掉，js會無法呈現。
##後台
###彈跳視窗修改
\public\assets\backend\css\sweetalert2.css
---
## 6.首內頁不同menu 設計寫法
步驟一、
至\resources\templates\frontend\layouts\default.blade.php
將
```
@includeIf('frontend.includes.menu')
```
改為
```
@if(isset($isAtHome))
@includeIf('frontend.includes.menu')
@else
@includeIf('frontend.includes.menu2')
@endif
```
（上排為首頁，下排為內頁）
步驟二、
至 路徑\\Gtut_nas\web\on\ch-round\resources\templates\frontend\includes
複製 menu.blade.php ，更名 menu2.blade.php(名稱可以任意自訂)
---
## 7.範本修改
本機端位置 :
Z:\fastshop-resource\dist\assets\1.0\backend\javascript\plugins\ckeditor\plugins\templates\templates\default.js
修改完成，請上傳至 快易購官網 (http://goshop.gtut.com.tw)
FTP位置 :
/public_html/assets/1.0/backend/javascript/plugins/ckeditor/plugins/templates/templates
---
# 後台相關設定
## 提示文字設定
製作路徑 : S:\fastshop-resource\dist\assets\1.1\backend\hints\zh-TW.js
這是全快易購共用設定位置
步驟一、提示說明設定
```
"請輸入代碼": "說明文字內容",
範例 : "gtut-hint__banners__field__action": "編輯內容",
```
步驟二、輸出顯示內容
```
@include('backend.includes.hints.field', ['key' => '請輸入代碼'])
代碼必須跟說明設定的一模一樣。
範例:
@include('backend.includes.hints.field', ['key' => 'gtut-hint__banners__field__action'])
```
# 其他
## 清除案件暫存檔案
有時候會遇到在nas 裡面進行php 設計修改，前台卻不會變更，這時需要去清除暫存記憶檔
位置路徑:
\storage\framework\views
(範例 Z:\fastshop\demo\storage\framework\views)
除了 .gitignore 其他都刪掉
Sign in with Wallet
Connect another wallet