最近有客戶對(duì)于定制提出了新的要求，在上傳照片的功能基礎(chǔ)上，希望能實(shí)時(shí)看到照片上傳之后運(yùn)用在產(chǎn)品上的效果圖，以下我們稱為預(yù)覽功能。

　　預(yù)覽功能對(duì)比傳統(tǒng)單純上傳圖片的功能來(lái)說(shuō)，肯定是更加直觀，給客戶的視覺(jué)沖擊感受比較實(shí)在。試用了多款A(yù)pp，最初幾個(gè)都不是滿意，有些是加載速度比較慢，有些是外觀不好看，有些是底層的實(shí)現(xiàn)原理不夠理想。最終選出了各方面都比較符合需求的一款定制預(yù)覽App - Product Personalizer。

　　Product Personalizer包含了傳統(tǒng)的定制功能，比如上傳圖片，上傳文字，條件邏輯，價(jià)格遞增，色塊顯示等。今天我們重點(diǎn)介紹一下圖片預(yù)覽功能。

　　先看看實(shí)現(xiàn)效果是怎么樣的，一如既往，打開(kāi)Demo站，點(diǎn)擊選擇文件，上傳完選定圖片后，可以根據(jù)自己在后臺(tái)設(shè)定的指定寬高區(qū)域選定，點(diǎn)擊對(duì)勾確認(rèn)過(guò)后，左邊圖片會(huì)實(shí)時(shí)能看到剛剛上傳的那張圖片在相憐中的顯示效果。

　　這種實(shí)時(shí)預(yù)覽很直觀，具體賣家需要怎么做才能達(dá)到這種效果呢?

　　首先，App對(duì)于圖片素材有特殊要求。需要上傳一張展示上傳圖片部分為空的png格式圖片做背景。

　　其次，需要選定圖片裁剪區(qū)域大小，便于顯示在框中。

　　其他具體選項(xiàng)可以查看App文檔介紹，大部分使用起來(lái)都很簡(jiǎn)單。

　　用戶上傳結(jié)束以后，如果有買家下單，我們?cè)谟唵卧斍橹心芸吹絻蓮垐D片，分別是原圖，裁剪后的圖片。

　　如果圖片在訂單中未展示，可能是以下兩個(gè)原因，這也是諸多定制App遇到的兩個(gè)通病，也是無(wú)法避免的問(wèn)題。

　　1.購(gòu)物后未定位到購(gòu)物車頁(yè)面。這里所說(shuō)的購(gòu)物車頁(yè)面不包含Mini Cart / 彈出框 / 側(cè)邊框等。簡(jiǎn)單判斷，需要重定向到/cart頁(yè)面，購(gòu)物車類型需要選擇Page模式才可以。

　　2.定制功能與動(dòng)態(tài)寬度結(jié)款按鈕功能不兼容。即Buy With Paypal等Express Checkout功能。

　　一旦上述兩處沒(méi)有避開(kāi)，很容易導(dǎo)致最終的功能不齊全，即圖片你無(wú)法正常顯示在訂單頁(yè)面。

　　最后，我們說(shuō)說(shuō)這款A(yù)pp的費(fèi)用，區(qū)別于其他的App來(lái)說(shuō)，這款A(yù)pp是根據(jù)每個(gè)月需要用到定制的數(shù)量來(lái)說(shuō)的。49個(gè)產(chǎn)品以內(nèi)是9.99, 99個(gè)產(chǎn)品以內(nèi)是14.99，299個(gè)產(chǎn)品以為是19.99等，因此，大家可以根據(jù)自己需要定制的產(chǎn)品個(gè)數(shù)選擇合適的套餐。