---
# System prepended metadata

title: '[ 天下 ] 禮物文章'

---

# [ 天下 ] 禮物文章

## 修改需求 (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 ）
> 原本是“訂戶獨享：送好文給好友”

![](https://hackmd.io/_uploads/By4WI0Zhh.png =40%x)

```
<div class="gift--hint">
    <p>領取分享禮</p>
</div>
```
3. 聲音的提示拿掉

![](https://hackmd.io/_uploads/Bk4SxR-2n.png =50%x)

`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 / 紹謙）

![](https://hackmd.io/_uploads/Hk6m34Fvh.png)

- [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

![](https://hackmd.io/_uploads/Sy9A3cjtn.png)

```
<!-- 禮物文章，複製連結後的 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 裡面

![](https://hackmd.io/_uploads/Byo3-9YP3.png)


_side mb：
放置於 article__provideViews 裡面

![](https://hackmd.io/_uploads/ry49-5Yvh.png)

### _header 放置位置 <!-- 0627新增 -->

_header mb：只有手機的 header 要出現 ( css 控制 )

![](https://hackmd.io/_uploads/SkHgFPOdn.png)


1. 新增禮物的 icon ( 共用部分 )
![](https://hackmd.io/_uploads/r1fZtSd_2.png)

```
<li class="tooltips--gift" data-tooltips="禮物文章">
    <span><img src="./../../assets/images/article/icon_gift.svg" alt="" class="function__gift"></span>
</li>
```

2. 新增禮物 lightbox (包著的東西不同，需替換)

![](https://hackmd.io/_uploads/r15YYH__3.png)


### 共用的 js


1. click 禮物 icon，跑出 popup，click 之後如果在30秒之內也要讓 ".gift--hint"消失

![](https://hackmd.io/_uploads/S1nLJttD3.png)


```
// 埋碼規則：
* 非訂戶看到禮物文章的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 秒數）
![](https://hackmd.io/_uploads/S1m2mttwn.png)

```
<!-- 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 也需要關起來

![](https://hackmd.io/_uploads/rJVJX8dd2.png)


---

## part1 非訂戶 (X1)

> 條件：非訂戶

測試頁：https://cw-lab.github.io/cw-website/cw/giftArticle/article_notSubscriber.html

![](https://hackmd.io/_uploads/rke_IOSKPn.png)


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

![](https://hackmd.io/_uploads/H1nddBYw2.png)


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. 點了複製連結後出現的提示

![](https://hackmd.io/_uploads/rJCxeYtP3.png)

```
<!-- 禮物文章，複製連結 -->
<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

![](https://hackmd.io/_uploads/B1EgbKFw2.png)

```
// 禮物文章，複製連結
$('.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

![](https://hackmd.io/_uploads/SkhYdBFD2.png)


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

![](https://hackmd.io/_uploads/Sk2qdSFDh.png)

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

![](https://hackmd.io/_uploads/S1Kndrtwh.png)


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

![](https://hackmd.io/_uploads/HJN6dHKvn.png)


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次

從連結點進來，直接打開文章頁

![](https://hackmd.io/_uploads/H1bOjItw3.png)



<!-- 
---

## 備用區 


改成 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;
                }
            }
        }
    }
}
``` -->