# [ 天下 ] 禮物文章
## 修改需求 (2023/08/10)
1. 改提示字的秒數
> 讓提示只出現6秒 （原本是30秒）
```
setTimeout(() => {
$('.article__body .gift--hint,.article__head .gift--hint').fadeOut();
if (!giftStatus_i) {
$('.article__body .tooltips--gift,.article__head .tooltips--gift').removeClass('active');
}
}, 6000)
```
2. 改提示字的文案（ pc / mb ）
> 原本是“訂戶獨享：送好文給好友”
```
<div class="gift--hint">
<p>領取分享禮</p>
</div>
```
3. 聲音的提示拿掉
`audioplayer.js` 找到下面這段拿掉
```
<div class="player__instruction player__instruction--step1">Sky 幫你讀文章</div>
```
這裡不確定要不要也把 `cw.js` 裡面的 sessionStorage 一起拔除
```
// 紀錄：TTS 教學階段僅出現一次
if (sessionStorage.getItem("player__instruction")) {
$("body").addClass("player__instruction--shown");
}
sessionStorage.setItem("player__instruction", true);
```
## 待確認的事項
* hint需要加上cookie讓他顯示過了不顯示嗎 -> (0619)確認這裡先不用
* 兩個連結的網址
* 3-3要推事件嗎 -> (0619)確認不用
<!-- * popup需要叉叉嗎 -->
## figma
https://www.figma.com/file/qgF4mM2jVq218EWaORKvtg/CWapp_iOS?type=design&node-id=5868-17187&t=v48Z7m8DVTET65XJ-0
## todo
- [x] backlog 卡片開設 (紹謙)
https://dev.azure.com/cwgroup/cw-to-c/_sprints/backlog/cw-to-c%20Team/cw-to-c/2023-06-12?workitem=73407
- [x] css 推上測試機（Vera）
- [x] 需要埋碼嗎，目前未提供 (紹謙)
- [x] 加入埋碼 (Vera)
- [x] pm 確認畫面 (紹謙)
- [x] 交接會議（Vera + Jerry）
- [x] 將文件交給IT（Jerry）
- [x] faq 頁更新後台資料，如下圖，正確文字可能要再跟 pm 確認（Jerry / 紹謙）
- [x] 確認上[測試機](https://dev-www.cw.com.tw/article/5125642)畫面（Vera）
- [x] 確認上正式機畫面（Vera）
--
## 套版後畫面確認
- [x] 1. 滾動的觸發位置應該要與禮物icon同步，目前會讓popup單獨
--
## 0712 調整部分
測試機：https://cw-lab.github.io/cw-website/cw/giftArticle/article_subscriber-1.html
```
<!-- 禮物文章，複製連結後的 msg -->
<div class="message message--notification message--center message--afterCopyLink">
<div class="message__txt">
<p class="my0">您已複製此禮物文章連結</p>
</div>
</div>
<!-- 禮物文章，複製連結後的 msg end -->
<!-- 禮物文章，複製連結視窗 -->
<div class="message message--dialogs message--center message--giftCopyLink">
<div class="message__container">
<i class="icon icon-cancel message__close"></i>
<div class="message__txt">
<h2>取得禮物文章連結</h2>
<p class="mb20">
分享以下禮物連結，您的朋友即可在期限內閱讀全文
</p>
<form>
<div class="label form__group form__group--filled w-100">
<label class="label">
<div class="form__group__placeholder">複製連結</div>
<input type="text" name="copyLink" class="form__group__input"
value="{{連結}}">
</label>
</div>
</form>
</div>
<div class="message__btn">
<button class="btn btn--contained btn__copy">複製連結</button>
</div>
</div>
</div>
<!-- 禮物文章，複製連結視窗 end -->
```
```
$('.gift--lightbox .social > div').click(function () {
$('.black').addClass('opened dialogs');
giftStatus_img = false;
$('header .gift--lightbox').fadeOut();
giftStatus_i = false;
$('.article__body .gift--lightbox,.article__head .gift--lightbox').fadeOut();
$('.article__body .tooltips--gift,.article__head .tooltips--gift').removeClass('active');
$('.message--giftCopyLink').fadeIn();
// 將 api 取回的連結放到 input 的 value
})
$('.btn__copy').click(function () {
$('.message--giftCopyLink').fadeOut();
$('.black').removeClass('opened dialogs');
// 複製連結的那段 code
let input = document.body.appendChild(document.createElement("input"));
input.value = document.querySelector('.gift--lightbox .social > div').getAttribute('data-href');
input.focus();
input.select();
try {
$('.message--afterCopyLink').fadeIn();
setTimeout(() => {
$('.message--afterCopyLink').fadeOut();
}, 2000);
return document.execCommand("copy");
} catch (e) {
console.warn("Copy to clipboard failed.", e);
return false;
} finally {
input.parentNode.removeChild(input);
}
})
```
--
## git
https://github.com/cw-lab/cw-website/tree/front/gift-article
## azure
front / giftArticle 分支
* [assets/css/cw.css](https://dev.azure.com/cwgroup/cw-to-c/_git/cw.com.tw?path=/resources/assets/css/cw.css&version=GBfront/giftArticle&_a=contents)
* [lightbox 用到的圖片](https://dev.azure.com/cwgroup/cw-to-c/_git/cw.com.tw?path=/resources/assets/images/article)
<!--
front / giftArticleAddMbHeader 分支
* [assets/css/cw.css](https://dev.azure.com/cwgroup/cw-to-c/_git/cw.com.tw?path=%2Fresources%2Fassets%2Fcss%2Fcw.css&version=GBfront%2FgiftArticleAddMbHeader&_a=contents)
* [lightbox 用到的圖片](https://dev.azure.com/cwgroup/cw-to-c/_git/cw.com.tw?path=/resources/assets/images/article)
-->
---
## 埋碼需求
### 網站GA埋碼
* 想要贈送禮物文章，出現禮物文章的訊息popup
popup_type 中要填寫該popup的資訊
* 非訂戶看到禮物文章的popup = "非訂戶開啟"
* 訂戶在還有額度時，看到的popup = "3" (直接顯示剩餘額度)
* 訂戶在額度用完時，看到的popup = "禮物已送完"
```
dataLayer.push({
'event':'article_gift_popup',
'popup_type': "" //←填寫分享的方式
});
```
* 訂戶點擊禮物文章popup上的分享功能時
method 中要填寫分享的方式，內容如下：
* gtm-name = "function"
* eventaction = "article_gift_share"
* eventlabel = "link" //←填寫分享的方式
* 使用email = mail
* 使用Line = line
* 複製連結 = link
```
<i class="icon icon-mail" gtm-name="function" eventaction="article_gift_share" eventlabel="mail"></i>
```
* 收到禮物文章，看到的popup
popup_type 中要填寫該popup的資訊
* 正常開啟 = "打開禮物文章"
* 期限已過 = "禮物已過期"
```
dataLayer.push({
'event':'article_gift_open',
'popup_type': "打開禮物文章" //←填寫分享的方式
});
```
### 分享網址加utm
* email分享禮物文章
```
utm_source =mail_
utm_medium = website_share_gift
utm_campaign = mail_-website_share_gift-icon-np
```
* Line分享禮物文章
```
utm_source =line_
utm_medium = website_share_gift
utm_campaign = mail_-website_share_gift-icon-np
```
* 連結分享禮物文章
```
utm_source =copylink_
utm_medium = website_share_gift
utm_campaign = copylink_-website_share_gift-icon-np
```
---
## 相關連結
* 瞭解更多：https://www.cw.com.tw/member/help/faq?main=3&sub=41#k5rlt9t
* 登入/註冊：
* 1元解鎖全文：https://www.cw.com.tw/marketing/plan/397/GC20090072
---
## part1 + part2 共同部分說明
### _side 放置位置
> 電腦版塞入位置和手機版不同
_side pc：
放置於 article__function 裡面
_side mb：
放置於 article__provideViews 裡面
### _header 放置位置 <!-- 0627新增 -->
_header mb：只有手機的 header 要出現 ( css 控制 )
1. 新增禮物的 icon ( 共用部分 )
```
<li class="tooltips--gift" data-tooltips="禮物文章">
<span><img src="./../../assets/images/article/icon_gift.svg" alt="" class="function__gift"></span>
</li>
```
2. 新增禮物 lightbox (包著的東西不同，需替換)
### 共用的 js
1. click 禮物 icon，跑出 popup，click 之後如果在30秒之內也要讓 ".gift--hint"消失
```
// 埋碼規則：
* 非訂戶看到禮物文章的popup = "非訂戶開啟"
* 訂戶在還有額度時，看到的popup = "3" (直接顯示剩餘額度)
* 訂戶在額度用完時，看到的popup = "禮物已送完"
// 禮物文章 js <!-- 0628更新 -->
let giftStatus_i = false;
let giftStatus_img = false;
// hint 消失
$('i.function__gift').click(function(){
if(!giftStatus_i){
giftStatus_i = true;
$('.article__body .gift--hint,.article__head .gift--hint').fadeOut();
$('.article__body .tooltips--gift,.article__head .tooltips--gift').addClass('active');
$('.article__body .gift--lightbox,.article__head .gift--lightbox').fadeIn();
dataLayer.push({
'event':'article_gift_popup',
'popup_type': "請參考上面埋碼規則"
});
}else{
giftStatus_i = false;
$('.article__body .gift--lightbox,.article__head .gift--lightbox').fadeOut();
$('.article__body .tooltips--gift,.article__head .tooltips--gift').removeClass('active');
}
});
$('header .tooltips--gift').click(function(){
if(!giftStatus_img){
giftStatus_img = true;
$('header .gift--lightbox').fadeIn();
dataLayer.push({
'event':'article_gift_popup',
'popup_type': "請參考上面埋碼規則"
});
}else{
giftStatus_img = false;
$('header .gift--lightbox').fadeOut();
}
});
// 按“我知道了”或是“X”，_side 禮物文章關閉
$('.article__body .gift--close,.article__head .gift--close').click(function(){
giftStatus_i = false;
$('.article__body .tooltips--gift,.article__head .tooltips--gift').removeClass('active');
$('.article__body .gift--lightbox,.article__head .gift--lightbox').fadeOut();
});
// 按“我知道了”或是“X”，_header 禮物文章關閉
$('header .gift--close,.article__head .gift--close').click(function(){
giftStatus_img = false;
$('header .gift--lightbox').fadeOut();
});
```
2. 進到頁面，30秒後 hint 消失（30秒是參考其他的 hint 秒數）
```
<!-- 0628更新 -->
// 禮物文章 hint 消失，如果要加上cookie，也是這裡要加上
$('.article__body .tooltips--gift,.article__head .tooltips--gift').addClass('active');
setTimeout(()=>{
$('.article__body .gift--hint,.article__head .gift--hint').fadeOut();
if(!giftStatus_i){
$('.article__body .tooltips--gift,.article__head .tooltips--gift').removeClass('active');
}
},30000)
```
3. cw.js - 435 行的 else 內需加上
```
$('header .gift--lightbox').fadeOut();
giftStatus_img = false;
```
用意是點開 popup 後，如果滾動到上面時，分享 bar 會消失，popup 也需要關起來
---
## part1 非訂戶 (X1)
> 條件：非訂戶
測試頁：https://cw-lab.github.io/cw-website/cw/giftArticle/article_notSubscriber.html
html
1. _side 禮物文章 pupup 內容
```
<!-- 禮物文章：出現訂戶限定說明 -->
<li class="tooltips tooltips--right tooltips--gift" data-tooltips="禮物文章">
<span><i class="icon icon-gift function__gift"></i></span>
<div class="gift--hint">
<p>訂戶獨享：送好文給好友</p>
</div>
<div class="gift--lightbox _side">
<h3 class="h3 my0 iconless">成為訂戶<br>贈送禮物文章</h3>
<p>全閱讀訂戶每月可贈送5篇文章給朋友，任何人都可免費閱讀文章。</p>
<div class="btn__con">
<a class="btn btn--outlined btn--small" target="_blank" href="https://www.cw.com.tw/member/help/faq?main=3&sub=41#k5rlt9t">
瞭解更多
</a>
<a class="btn btn--contained btn--small" target="_blank" href="">
立即訂閱
</a>
</div>
<i class="icon icon-cancel gift--close"></i>
</div>
</li>
<!-- 禮物文章 end -->
```
2. _header 禮物文章 pupup 內容
```
<!-- 禮物文章 -->
<div class="gift--lightbox _header">
<h3 class="h3 my0 iconless">成為訂戶<br>贈送禮物文章</h3>
<p>全閱讀訂戶每月可贈送5篇文章給朋友，任何人都可免費閱讀文章。</p>
<div class="btn__con">
<a class="btn btn--outlined btn--small gtmEvent" id="" gtm-name="" target="_blank" href="https://www.cw.com.tw/member/help/faq?main=3&sub=41#k5rlt9t">
瞭解更多
</a>
<a class="btn btn--contained btn--small gtmEvent" id="" gtm-name="" target="_blank" href="">
立即訂閱
</a>
</div>
<i class="icon icon-cancel gift--close"></i>
</div>
<!-- 禮物文章 end -->
```
js
1. 使用共用的js
---
## part2 訂戶 (X3)
### 2-1 出現禮物文章說明
> 條件：訂戶已登入會員/本月禮物文章分享數<5篇
測試頁：https://cw-lab.github.io/cw-website/cw/giftArticle/article_subscriber-1.html
html
1. _side 禮物文章 pupup 內容
```
<!-- 禮物文章：出現禮物文章說明 -->
<li class="tooltips tooltips--right tooltips--gift" data-tooltips="禮物文章">
<span><i class="icon icon-gift function__gift"></i></span>
<div class="gift--hint">
<p>訂戶獨享：送好文給好友</p>
</div>
<div class="gift--lightbox _side">
<h3 class="h3 my0">訂戶獨享：送好文給好友</h3>
<p>您本月還可贈送 5 篇文章給朋友，在時效內，任何人都可免費閱讀您贈送的禮物文章。</p>
<a href="https://www.cw.com.tw/member/help/faq?main=3&sub=41#k5rlt9t" target="_blank">瞭解更多</a>
<div class="btn__con social">
<a href="mailto:?subject=成年禮金怎麼領？文化幣APP如何使用？1200點哪裡可以用？&body=文化部推出成年禮金1200點，發放給18~21歲的青年。成年禮金怎麼領？文化幣APP如何使用？有哪些合作店家？可以買什麼？更多加碼優惠帶你一次看。https%3A%2F%2Fwww.cw.com.tw%2Farticle%2F5125998%3Futm_campaign%3Dmail_-website_share-icon%26utm_medium%3Dwebsite_share%26utm_source%3Dmail" target="_blank">
<i class="icon icon-mail" gtm-name="function" eventaction="article_gift_share" data-share-type="mail"></i>
</a>
<a href="https://line.naver.jp/R/msg/text/?%E6%88%90%E5%B9%B4%E7%A6%AE%E9%87%91%E6%80%8E%E9%BA%BC%E9%A0%98%EF%BC%9F%E6%96%87%E5%8C%96%E5%B9%A3APP%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%EF%BC%9F1200%E9%BB%9E%E5%93%AA%E8%A3%A1%E5%8F%AF%E4%BB%A5%E7%94%A8%EF%BC%9F%0Ahttps%3A%2F%2Fwww.cw.com.tw%2Farticle%2F5125998%3Futm_campaign%3Dline_-website_share-icon%26utm_medium%3Dwebsite_share%26utm_source%3Dline_" target="_blank">
<i class="icon icon-line" gtm-name="function" eventaction="article_gift_share" data-share-type="line"></i>
</a>
<div data-href="https://www.cw.com.tw/article/5125998?rec=vera">
<i class="icon icon-link" gtm-name="function" eventaction="article_gift_share" data-share-type="link"></i>
</div>
</div>
</div>
</li>
<!-- 禮物文章 end -->
```
2. _header 禮物文章 pupup 內容
```
<!-- 禮物文章 -->
<div class="gift--lightbox _header">
<h3 class="h3 my0">訂戶獨享：送好文給好友</h3>
<p>您本月還可贈送 5 篇文章給朋友，在時效內，任何人都可免費閱讀您贈送的禮物文章。</p>
<a href="https://www.cw.com.tw/member/help/faq?main=3&sub=41#k5rlt9t" target="_blank">瞭解更多</a>
<div class="btn__con social">
<a href="mailto:?subject=成年禮金怎麼領？文化幣APP如何使用？1200點哪裡可以用？&body=文化部推出成年禮金1200點，發放給18~21歲的青年。成年禮金怎麼領？文化幣APP如何使用？有哪些合作店家？可以買什麼？更多加碼優惠帶你一次看。https%3A%2F%2Fwww.cw.com.tw%2Farticle%2F5125998%3Futm_campaign%3Dmail_-website_share-icon%26utm_medium%3Dwebsite_share%26utm_source%3Dmail" target="_blank">
<i class="icon icon-mail" gtm-name="function" eventaction="article_gift_share" data-share-type="mail"></i>
</a>
<a href="https://line.naver.jp/R/msg/text/?%E6%88%90%E5%B9%B4%E7%A6%AE%E9%87%91%E6%80%8E%E9%BA%BC%E9%A0%98%EF%BC%9F%E6%96%87%E5%8C%96%E5%B9%A3APP%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%EF%BC%9F1200%E9%BB%9E%E5%93%AA%E8%A3%A1%E5%8F%AF%E4%BB%A5%E7%94%A8%EF%BC%9F%0Ahttps%3A%2F%2Fwww.cw.com.tw%2Farticle%2F5125998%3Futm_campaign%3Dline_-website_share-icon%26utm_medium%3Dwebsite_share%26utm_source%3Dline_" target="_blank">
<i class="icon icon-line" gtm-name="function" eventaction="article_gift_share" data-share-type="line"></i>
</a>
<div data-href="https://www.cw.com.tw/article/5125998?rec=vera">
<i class="icon icon-link" gtm-name="function" eventaction="article_gift_share" data-share-type="link"></i>
</div>
</div>
</div>
<!-- 禮物文章 end -->
```
3. 點了複製連結後出現的提示
```
<!-- 禮物文章，複製連結 -->
<div class="message message--notification message--center message--giftCopyLink">
<div class="message__txt">
<p class="my0">您已複製此禮物文章連結</p>
</div>
</div>
<!-- 禮物文章，複製連結 end -->
```
--
js
1. 使用共用的js
2. 右邊的複製連結按鈕，進入頁面時，api 會將他需要複製的連結放到 data-href，按了之後複製連結，並跑出成功複製的 message
```
// 禮物文章，複製連結
$('.gift--lightbox .social > div').click(function(){
let input = document.body.appendChild(document.createElement("input"));
input.value = document.querySelector('.gift--lightbox .social > div').getAttribute('data-href');
input.focus();
input.select();
try {
$('.message--giftCopyLink').fadeIn();
setTimeout(()=>{
$('.message--giftCopyLink').fadeOut();
}, 2000);
return document.execCommand("copy");
} catch (e) {
console.warn("Copy to clipboard failed.", e);
return false;
} finally {
input.parentNode.removeChild(input);
}
})
```
--
### 2-2 出現額度用盡說明
> 條件：訂戶已登入會員/本月禮物文章分享數=5篇
測試頁：https://cw-lab.github.io/cw-website/cw/giftArticle/article_subscriber-2.html
html
1. _side 禮物文章 pupup 內容
```
<!-- 禮物文章：出現額度用盡說明 -->
<li class="tooltips tooltips--right tooltips--gift" data-tooltips="禮物文章">
<span><i class="icon icon-gift function__gift"></i></span>
<div class="gift--hint">
<p>訂戶獨享：送好文給好友</p>
</div>
<div class="gift--lightbox _side">
<h3 class="h3 my0">訂戶獨享：送好文給好友</h3>
<p>您本月的禮物文章已贈送完畢。</p>
<div class="btn__con">
<a class="btn btn--outlined btn--small" target="_blank" href="https://www.cw.com.tw/member/help/faq?main=3&sub=41#k5rlt9t">
瞭解更多
</a>
<div class="btn btn--contained btn--small gift--close">
我知道了
</div>
</div>
</div>
</li>
<!-- 禮物文章 end -->
```
2. _header 禮物文章 pupup 內容
```
<!-- 禮物文章 -->
<div class="gift--lightbox _header">
<h3 class="h3 my0">訂戶獨享：送好文給好友</h3>
<p>您本月的禮物文章已贈送完畢。</p>
<div class="btn__con">
<a class="btn btn--outlined btn--small gtmEvent" id="" gtm-name="" target="_blank" href="https://www.cw.com.tw/member/help/faq?main=3&sub=41#k5rlt9t">
瞭解更多
</a>
<div class="btn btn--contained btn--small gift--close">
我知道了
</div>
</div>
</div>
<!-- 禮物文章 end -->
```
js
1. 使用共用的js
--
### 2-3 出現登入/註冊會員提示
> 條件：未登入會員
測試頁：https://cw-lab.github.io/cw-website/cw/giftArticle/article_subscriber-3.html
html
1. _side 禮物文章 pupup 內容
```
<!-- 禮物文章：出現登入/註冊會員提示 -->
<li class="tooltips tooltips--right tooltips--gift" data-tooltips="禮物文章">
<span><i class="icon icon-gift function__gift"></i></span>
<div class="gift--hint">
<p>訂戶獨享：送好文給好友</p>
</div>
<div class="gift--lightbox _side">
<h3 class="h3 my0">訂戶獨享：送好文給好友</h3>
<p>登入/註冊會員，即可贈送文章給朋友。</p>
<div class="btn__con">
<a class="btn btn--outlined btn--small" target="_blank" href="https://www.cw.com.tw/member/help/faq?main=3&sub=41#k5rlt9t">
瞭解更多
</a>
<a class="btn btn--contained btn--small" target="_blank" href="">
登入/註冊
</a>
</div>
</div>
</li>
<!-- 禮物文章 end -->
```
2. _header 禮物文章 pupup 內容
```
<!-- 禮物文章 -->
<div class="gift--lightbox _header">
<h3 class="h3 my0">訂戶獨享：送好文給好友</h3>
<p>登入/註冊會員，即可贈送文章給朋友。</p>
<div class="btn__con">
<a class="btn btn--outlined btn--small" id="" target="_blank" href="https://www.cw.com.tw/member/help/faq?main=3&sub=41#k5rlt9t">
瞭解更多
</a>
<a class="btn btn--contained btn--small" id="" target="_blank" href="">
登入/註冊
</a>
</div>
</div>
<!-- 禮物文章 end -->
```
js
使用共用的js
---
## part3 從網站進到文章頁 (X3)
### 3-1 開啟，lightbox 裡面的名字須改成贈送禮物者的
> 條件：無論朋友是不是訂戶/連結尚未到期/也沒有被點擊>10次
測試頁：https://cw-lab.github.io/cw-website/cw/giftArticle/article_openHref-1.html
html
1. _side 的 lightbox - 從連結點進來，需替換成 XXX 贈送
```
<div class="message message--dialogs message--center message--gift">
<div class="message__container">
<i class="icon icon-cancel message__close"></i>
<div class="message__icon pb20">
<img src="./../../assets/images/article/icon_openedGift.svg">
</div>
<div class="message__txt pb20">
<p>這是一份由 {{ 王小明 }} 贈送的禮物文章，您現在可以免費閱讀全文</p>
</div>
<div class="message__btn">
<button class="btn btn--contained">我知道了</button>
</div>
</div>
</div>
```
js
```
if(符合條件){
// 禮物文章，點開連結後的 lightbox
$('.black').addClass('opened dialogs');
$('.message--gift').fadeIn();
dataLayer.push({
'event':'article_gift_open',
'popup_type': "打開禮物文章"
});
}
<!-- 0628更新 -->
// header 禮物文章關閉
$('.message--gift .message__btn ,.message--gift .message__close').click(function(){
$('.black').removeClass('opened dialogs');
$('.message--gift').fadeOut();
});
```
<!--
改用vue做：
```
點連結進到頁面
* ".message--gift" 的 fadeIn()
* ".black" 加上 class "opened dialogs"
click 黑屏 / click Ｘ
* ".message--gift" 的 fadeOut()
* ".black" 拿掉 class "opened dialogs"
``` -->
--
### 3-2 開啟，但連結已失效
> 條件：朋友不是訂戶/連結已到期/或被點擊>10次
測試頁：https://cw-lab.github.io/cw-website/cw/giftArticle/article_openHref-2.html
html
1. lightbox
```
<div class="message message--dialogs message--center message--gift">
<div class="message__container">
<i class="icon icon-cancel message__close"></i>
<div class="message__txt pb20">
<h2>你錯過了</h2>
<p>您需要成為訂戶才能閱讀全文</p>
</div>
<div class="message__btn">
<a href="" target="_blank">
<button class="btn btn--contained">
1元解鎖全文
</button>
</a>
</div>
</div>
</div>
```
js
```
if(符合條件){
// 禮物文章，點開連結後的 lightbox
$('.black').addClass('opened dialogs');
$('.message--gift').fadeIn();
dataLayer.push({
'event':'article_gift_open',
'popup_type': "禮物已過期"
});
}
<!-- 0628更新 -->
// header 禮物文章關閉
$('.message--gift .message__btn ,.message--gift .message__close').click(function(){
$('.black').removeClass('opened dialogs');
$('.message--gift').fadeOut();
});
```
<!--
改用vue做：
```
點連結進到頁面
* ".message--gift" 的 fadeIn()
* ".black" 加上 class "opened dialogs"
click 黑屏 / click Ｘ
* ".message--gift" 的 fadeOut()
* ".black" 拿掉 class "opened dialogs"
```
-->
--
### 3-3 直接開啟文章頁，不出現 lightbox
> 條件：朋友是訂戶/連結已到期/或被點擊>10次
從連結點進來，直接打開文章頁
<!--
---
## 備用區
改成 jq 前
```
// 禮物文章，因為用js寫，所以要避免重複名稱，才會要刪除，但在vue應該不需要
if(window.innerWidth < 1024){
let deleteVersion = document.querySelector('.tooltips--gift.desktop');
deleteVersion.parentNode.removeChild(deleteVersion)
}else{
let deleteVersion = document.querySelector('.tooltips--gift.mobile');
deleteVersion.parentNode.removeChild(deleteVersion)
}
// 禮物文章 hint 消失，如果要加上cookie，也是這裡要加上
document.querySelector('.tooltips--gift').classList.add("active");
setTimeout(()=>{
document.querySelector('.gift--hint').classList.add("hide");
document.querySelector('.tooltips--gift').classList.remove("active");
},30000)
// 禮物文章
document.querySelector('.function__gift').addEventListener('click',() => {
if(!document.querySelector('.gift--hint').classList.contains('hide')){
document.querySelector('.tooltips--gift').classList.remove("active");
}
document.querySelector('.gift--hint').classList.add("hide");
document.querySelector('.tooltips--gift').classList.toggle("active");
document.querySelector('.gift--lightbox').classList.toggle("active");
});
// 禮物文章，複製連結
document.querySelector('.gift--lightbox .social > div').addEventListener('click',() => {
let input = document.body.appendChild(document.createElement("input"));
input.value = document.querySelector('.gift--lightbox .social > div').getAttribute('data-href');
input.focus();
input.select();
try {
$('.message--giftCopyLink').fadeIn();
setTimeout(()=>{
$('.message--giftCopyLink').fadeOut();
}, 2000);
return document.execCommand("copy");
} catch (e) {
console.warn("Copy to clipboard failed.", e);
return false;
} finally {
input.parentNode.removeChild(input);
}
})
// 禮物文章關閉
document.querySelector('.gift--close').addEventListener('click',() => {
document.querySelector('.tooltips--gift').classList.toggle("active");
document.querySelector('.gift--lightbox').classList.toggle("active");
});
```
```
.tooltips--gift {
&.active {
&:before {
opacity: 0;
}
}
}
.gift {
&--copyLinkMessage {
&.hide {
opacity: 0;
visibility: hidden;
transition: all 0.2s;
}
}
&--close {
cursor: pointer;
// article_notSubscriber
&.icon {
position: absolute;
top: 20px;
right: 20px;
transition: all 0.2s;
&::before {
font-size: 18px;
}
// &:hover {
// transform: rotate(90deg);
// }
}
}
&--hint {
position: absolute;
left: calc(100% + 15px);
top: 5px;
z-index: 2;
background-color: #003A9F;
padding: 15px 20px;
transition: all 0.2s;
width: max-content;
animation: hint .7s infinite alternate, fadeIn 0.3s 30s forwards alternate-reverse;
animation-timing-function: cubic-bezier(0, 0.35, 0.7, 1);
@media screen and (max-width: 1023px) {
left: -7px;
top: calc(-100% - 15px);
}
@media screen and (max-width: 321px) {
left: -30px;
}
&.hide {
opacity: 0;
visibility: hidden;
}
@keyframes hint {
0% {
transform: translateX(10px);
}
100% {
transform: translateX(0px);
}
}
@media screen and (max-width: 1023px) {
@keyframes hint {
0% {
transform: translateY(-25px);
}
100% {
transform: translateY(-17px);
}
}
}
p {
color: #fff;
padding: 0;
margin: 0;
font-size: 16px;
font-weight: 400;
}
&::after {
@include beforeafter("", block);
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #003A9F transparent transparent;
top: 10px;
left: -13px;
@media screen and (max-width: 1023px) {
top: calc(100% - 5px);
left: 20px;
transform: rotate(270deg);
}
@media screen and (max-width: 321px) {
left: 42px;
}
}
}
&--lightbox {
width: 270px;
left: calc(100% + 15px);
top: -30px;
z-index: 3;
background-color: #F7F7F7;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
position: absolute;
padding: 20px;
outline: 1px solid #EEEEEE;
@media screen and (max-width: 1023px) {
top: calc(100% + 20px);
left: -60%;
}
@media screen and (max-width: 440px) {
left: unset;
right: calc(-100vw + 140px + 40px);
}
&::after {
@include beforeafter("", block);
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #F7F7F7 transparent transparent;
top: 45px;
left: -12px;
@media screen and (max-width: 1023px) {
top: -16px;
left: 37px;
transform: rotate(90deg)
}
@media screen and (max-width: 440px) {
left: unset;
right: calc(100vw - 140px - 28px);
}
}
&::before {
@include beforeafter("", block);
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #EEEEEE transparent transparent;
top: 45px;
left: -14px;
@media screen and (max-width: 1023px) {
top: -18px;
left: 37px;
transform: rotate(90deg)
}
@media screen and (max-width: 440px) {
left: unset;
right: calc(100vw - 140px - 28px);
}
}
&.active {
opacity: 1;
visibility: visible;
}
>* {
margin: 0;
padding: 0;
}
h3 {
position: relative;
display: flex;
align-items: flex-start;
line-height: 25px;
gap: 8px;
&::before {
@include beforeafter("", block);
content: '';
width: 23.18px;
height: 23px;
background-size: contain;
background-repeat: no-repeat;
background-image: url('./../images/article/icon_gift.svg');
}
&.iconless {
line-height: 25px;
&::before {
display: none;
}
}
}
>p {
margin-top: 10px;
font-size: 14px;
line-height: 21px;
}
// article_subscriber-1
>a {
color: #003a9f;
position: relative;
font-size: 14px;
line-height: 21px;
&:hover {
color: #D60C18;
&::after {
background-color: #D60C18;
}
}
&::after {
@include beforeafter("", block);
content: '';
position: absolute;
transition: all 0.2s;
width: 100%;
height: 1px;
background-color: #003a9f;
left: 0;
bottom: 1px;
}
}
.btn {
padding: 12px 23.25px;
+a.btn {
margin-left: 0;
}
&__con {
display: flex;
gap: 15px;
margin-top: 10px;
// article_subscriber-1
&.social>a,
&.social>div {
width: 43.6px;
height: 43.6px;
display: block;
cursor: pointer;
i.icon {
border: 1px solid #D3D5D7;
border-radius: 50%;
display: block;
text-align: center;
color: #6D767F;
font-size: 1.47875rem;
line-height: calc(43.6px - 2px);
transition: all 0.2s;
&-mail {
&:hover {
color: #D60C18;
border: 1px solid #D60C18;
}
}
&-line {
color: #00C200;
&:hover {
border: 1px solid #00C200;
}
}
&-link {
&:hover {
color: #D60C18;
border: 1px solid #D60C18;
}
}
}
}
}
&--contained {
border: 1px solid #003a9f;
color: #fff;
background-color: #003a9f;
&:hover {
background-color: #D60C18;
border: 1px solid #D60C18;
color: #fff;
}
}
&--outlined {
border: 1px solid #003a9f;
color: #003a9f;
background-color: unset;
&:hover {
color: #D60C18;
border: 1px solid #D60C18;
}
}
}
}
}
.message {
&--gift {
position: fixed;
top: 50%;
left: 50%;
max-width: 508px;
width: calc(100% - 30px);
padding: 30px 24px;
background-color: $white;
z-index: 12;
transform: translate(-50%, -50%);
.message {
&__container {
position: relative;
}
&__icon {
img{
width: 58px;
margin: auto auto auto 0;
@media screen and (max-width: 1023px) {
margin: auto;
}
}
}
&__txt {
padding-bottom: 20px;
h2 {
padding-right: 50px;
margin-top: 0;
margin-bottom: 24px;
}
p {
margin: 0;
}
}
&__btn {
text-align: right;
}
&__close {
top: -5px;
right: -10px;
width: 36px;
height: 36px;
&::before{
font-size: 16px;
}
}
}
}
}
``` -->
Sign in with Wallet
Connect another wallet