2016-12-13 36 views
1

目前我正在嘗試在Bigcommerce Storefront中構建產品的此類定製,以允許顯示帶有輸入到文本框中的動態文本的圖像。這意味着產品圖像預覽應該立即顯示帶有書面文字的新圖像。Bigcommerce產品圖像定製與文本更改

這樣最終用戶就會知道最終產品的外觀如何,同樣的圖片也應該放在購物車中。

我知道Shopify上有一個應用程序,名稱爲Product Builder。

這可能在Bigcommerce上做到嗎?

由於提前

回答

0

這是絕對有可能有一些相當先進的客戶端代碼。不幸的是,我不知道任何Bigcommerce的即插即用系統或應用程序能夠實現您所期望的功能,但是如果您願意讓自己的手變髒,則可以通過幾種方法獲得實時更新產品預覽。

這是example from my site。點擊「個性化此項目」下的按鈕,您將看到一個實時預覽圖像,就像您在模式中描述的一樣。輸入一些文字並更改會標風格和顏色,每次更改選項時,預覽圖像都會更新得非常快。與我的完全一樣的解決方案對您來說可能並不可行,因爲該網站使用基於廣泛定製的Stencil主題構建的非常複雜的React/Redux實現......遠不是一種交鑰匙解決方案。也就是說,你可以實現類似的東西,而不需要完全定製的應用程序。

上述示例中的圖像預覽本身由IMGIX.com驅動。他們以極好的價格提供優質的服務。基本上,我的系統將用戶選擇的Bigcommerce選項轉換爲每個IMGIX基於URL的API的URL字符串。顯示實時預覽就像在每次輸入更改時將圖像的src屬性更改爲相應的IMGIX URL一樣簡單。我在使用Redux商店的React組件中執行此操作,但在您選擇的框架或簡單的舊式香草JavaScript中絕對可以完成類似操作。 Cloudinary提供了與IMGIX類似的(甚至可能更大一些)功能,但是我發現IMGIX的速度要快一些,而且我的使用價格要低得多。

您還可以編寫一些使用HTML5畫布的文字和效果疊加到圖像上,從而避免使用第三方服務。我發現這樣的解決方案在客戶端設備上的工作方式和方式更重,但它肯定是另一種方式來剝離這個諺語的貓。

可能還有其他可行的解決方案,但上述是我在實施類似於您在Bigcommerce上尋找的東西的經驗。我希望這是有幫助的!