昨天我們已經在 實戰之路的專案中把前端套件安裝好了，今天就在專案之中加入套件吧！

還記得在 Day25 - 前端，結帳按鈕修改 的時候有提到說，我們送出訂單的地方可以加個SweerAlert來轉圈圈防止重複點擊發送嗎？
我們今天就在這邊加個SweetAlert吧！

導入SweetAlert 在現有專案中

因為只是純前端，我就不囉嗦直接上code了：

function goToCheckOut(e) 
{ 
    setDuplicateSend(1); 
    MySwal.fire({ 
        title: '正在為您建立訂單', 
        html: '<b>請耐心等候，請勿離開視窗</b>', 
        didOpen:() => { 
            MySwal.showLoading() 
            window.axios.post(route('create-order') , { 
                "customer_id": user.id, 
                "product": product.id, 
                "amount": amount, 
            }).then( response => { 
                MySwal.fire({ 
                    title: '訂單已建立成功', 
                    html: '<b>正在將您導向結帳頁面，請勿離開視窗</b>', 
                    didOpen: () => { 
                        MySwal.showLoading() 
                        document.location.href = route('send-order') + `/${response.data}`; 
                    } 
                }) 
            }).catch( error => { 
                setDuplicateSend(0); 
                Swal.fire({ 
                    icon: 'error', 
                    title: '我靠...', 
                    text: '好像壞掉惹', 
                    footer: '<a href="">尋求客服幫助</a>' 
                }) 
            }); 
        } 
    }); 
}

畫面上的呈現就像這樣：

但其實這樣做也不太嚴謹，因為如果使用者在繞圈圈的時候點擊框框以外的地方，SweetAlert會跳出去，所以我們要多加一個參數：

allowOutsideClick: () => !Swal.isLoading(),

這個參數主要的功能是：在繞圈圈(Loading)的時候 拒絕使用者跳出。

就這樣，我們就輕易地完成了SweetAlert在現有專案的導入。

接下來試試看：圖片滑動Swiper的導入吧！

導入Swiper 在現有專案中

照理來說，前端要預設 後端會傳送 多張圖片，我這裡就單純在前端套用就好，就不修改後端，基本上前端的差別只有在 要用 .map語法來跑SwiperSlide 而已。
這裡我把放圖片的地方改成：
原本：

<div className="w-6/12">  
    <img src="https://pic.616pic.com/ys_img/00/44/76/yYdFMozXJd.jpg" alt="商品圖片" />  
</div>

修改後：

<Swiper 
    modules={[Navigation]} 
    spaceBetween={50} 
    slidesPerView={1} 
    navigation 
    onSlideChange={() => console.log('slide change')} 
    onSwiper={(swiper) => console.log(swiper)} 
    className="w-6/12" 
> 
    <SwiperSlide> 
        <div className="flex justify-center"> 
            <img src={product.product_image} alt="商品圖片" /> 
        </div> 
    </SwiperSlide> 
    <SwiperSlide> 
        <div className="flex justify-center"> 
            <img src={product.product_image} alt="商品圖片" /> 
        </div> 
    </SwiperSlide> 
    <SwiperSlide> 
        <div className="flex justify-center"> 
            <img src={product.product_image} alt="商品圖片" /> 
        </div> 
    </SwiperSlide> 
</Swiper>

昨天有說"不要放Ally"，如果放了一樣會噴掉喔！！
Swiper基本上也是這樣使用就可以，前端的code其實都不難，直接套用Component就好~

Day 29 最後成果：

兩個套在上面都已經融合到我們前面做的小專案了，接下來就是看一下整體的結果&看有沒有衝突：

結語

今天把昨天安裝與測試用的前端套件成功融合到專案之中，實際使用後看起來是沒問題，畫面也豐富了一點！！我想這個專案已經告了一個段落，學習的目標也大致上完成了。突然不知道明天要寫什麼了

那就明天見啦！！