# 快易購日記-By Danny

### 圖庫的密碼更新囉~

設計師帳號：danny
設計師密碼：FFD%PNQ5

http://tw.123rf.com/
帳號：gtut
密碼：Gtut#2021May

https://www.shutterstock.com/
帳號：[e-mail]
密碼：Gtut#2021May

# 小技巧

快易購or快意套板時需要使用字體時候，要再字型加上 css屬性
font-display: swap;
可提升快易購分數

# 語系辭庫增加
{{ trans('frontend/general.option') }}

# 詢價/購物車-填寫個人寫資料處攤開
> .page-container .js-cart-open {
> display: block;
> }

# 視差效果
background-attachment: fixed;

# 元素隱藏

<table>
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>

# 選單改模式

@includeIf('frontend.includes.menus.pc.2')

# 印出內頁標題

{{ $pages['example']['data']->name }}

# 套版製作中 清除快取


---
# Git備份

---

# 快易購SASS FTP上傳位置

本地 \\Gtut_nas\web\on\tjj-education\public\assets\frontend\css\
目標 /public_html/assets/frontend/css


---
# 快易購製作順序
0. 寄執行信時 如案件有SEO 需要寄給企劃同步進行
1. 請求「蘇林」支援開版(寄信)
2. 自行選版製作....製作....製作....
3. 完成時請業助開-對外校稿主機(寄信)
4. 跑流程後「蘇林」回信------Git備份
5. 再把排件表信件的網址改成對外教稿網址寄該 業務 CC 業助+經理(使用報價那封信寄)

> → 發信通知開主機
> To業助 cc業務、Betty、Tonia、Nick
> → 業助開好會直接轉信給Sulin
> → Sulin收到通知後上傳至校稿網址，回覆校稿網址給設計師
>
>
> → 發完成信 (請直接轉寄派件信)
> To業務 cc業助、Teresa、Betty、Tonia、(有久大寰宇SEO 給Luna、Lynn)、(有程式客製給工程師、Nick)
> 記得註明 1.案件負責人：XXX 2.負責主視覺banner：XXX 3.上架資料：XXX

---

# ico更改(蠢問題)


---
# 更改快易購 CSS

全域 按鈕 樣式

---

@if($banner = $banners['all_new'] ?? null)
@php
$item = $banner->media[0];
@endphp
<section>
<div class="row">

<div class="col-12 col-lg-6">
<h3 title="{{ $item->title }}">{{ $item->title }}</h3>
</div>

<div class="col-12 col-lg-6">
<img src="{{ $item->image }}" alt="{{ $item->title }}">
</div>

</div>
</section>
@endif


---

# 區間設定
@media screen and (min-width: 1192px) {
}

---

# 尋找原快易購改快易購模組(不在範本裡的模組)

模組位置 :\\Gtut_nas\web\fastshop\demo\resources\templates\frontend\customView

SASS位置: \\Gtut_nas\web\fastshop\demo\resources\assets\frontend\sass\version
`(↑須貼在_custom-style.scss)`

JS位置
檔案路徑：public\assets\frontend\javascript\active.js

---

# 快易購-搜尋欄底色更變

input:-internal-autofill-selected {
    background-color: rgba(255, 255, 255, 0) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(246, 246, 246, 0) inset;
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

(↑須貼在_custom-style.scss)

---

# 按鈕多語系寫法

<div class="btn-be btn-center">

@if($pages['aboutus'] ?? null)
<a class="btn btn-primary btn-set mt-5" href="{{
action('Frontend\ContentsController@show', 
$pages['aboutus']['data']->slug) }}">MORE</a>
@endif

</div>

後臺設定

---

# 修改頁面的形式位置

---
# JS位置(輪播...等)

---

# 增加WOW特效

1.把templates貼在views裡

2.acctive <上> 新增wow.min.js

3.檔案內貼上文字檔裡的字串(txt)

4.打開下載包裏這一支css
複製這一串貼在style

5.再到動畫網址裡去找要的動畫
https://animate.style/
到找要的動畫
貼在

再到設定CSS---完成

---

# 範例頁

<h1>標題一標題一標題一標題一標題一標題一</h1>

<h2>標題二標題二標題二標題二標題二標題二</h2>

<h3>標題三標題三標題三標題三標題三標題三</h3>

<h4>標題四標題四標題四標題四標題四標題四</h4>

<h5>標題五標題五標題五標題五標題五標題五</h5>

<h6>標題六標題六標題六標題六標題六標題六</h6>

<p>段落一段落一段落一段落一段落一段落一段落一段落一段落一段落一</p>

<hr />
<p>段落二段落二段落二段落二段落二段落二段落二段落二段落二段落二</p>

<p><a href="/contact">連結連結連結連結連結連結連結連結連結連結連結連結連結</a></p>

<ul>
<li>符號清單符號清單符號清單符號清單符號清單符號清單</li>
<li>符號清單符號清單符號清單符號清單符號清單符號清單</li>
<li>符號清單符號清單符號清單符號清單符號清單符號清單</li>
</ul>

<ol>
<li>數字清單數字清單數字清單數字清單數字清單數字清單</li>
<li>數字清單數字清單數字清單數字清單數字清單數字清單</li>
<li>數字清單數字清單數字清單數字清單數字清單數字清單</li>
</ol>

<div class="table-responsive h-in-gtuttable">
<table cellspacing="0" class="table table-bordered" style="width: 100%;">
<thead>
<tr>
<th scope="col">Title is here</th>
<th scope="col">Title is here</th>
<th scope="col">Title is here</th>
<th scope="col">Title is here</th>
<th scope="col">Title is here</th>
<th scope="col">Title is here</th>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div>
&nbsp;

<div class="table-responsive rl-in-gtuttable">
<table cellspacing="0" class="table table-bordered" style="width: 100%;">
<tbody>
<tr>
<th scope="col">Title is here</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="col">Title is here</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="col">Title is here</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="col">Title is here</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div>