Bigcommerce产品图片定制与文本更改

时间:2016-12-13 09:58:31

标签: image customization product preview bigcommerce

目前,我正在尝试在Bigcommerce Storefront中构建此类产品自定义功能,以便在文本框中输入动态文本。这意味着产品图像预览应该立即显示带有书面文字的新图像。

以便最终用户知道最终产品的外观,同样的图片也应该放在购物车中。

我知道Shopify上有一个名为Product Builder的应用程序。

这可以在Bigcommerce上实现吗?

先谢谢

1 个答案:

答案 0 :(得分:0)

使用一些相当高级的客户端代码肯定是可能的。不幸的是,我不知道Bigcommerce的任何即插即用系统或应用程序将实现您所需要的,但如果您愿意亲自动手,有几种方法可以获得实时更新产品预览。

这是一个example from my site。单击“个性化此项目”下的按钮,您将看到您在模态中描述的实时预览图像。输入一些文本并更改会标样式和颜色,每次更改选项时,预览图像都应该很快更新。完全像我的解决方案对您来说可能不太可行,因为该站点使用了基于广泛定制的Stencil主题的非常复杂的React / Redux实现......它远非一个交钥匙解决方案。也就是说,你可以实现类似的东西,而不需要完全自定义的应用程序。

上例中的图像预览本身由IMGIX.com提供支持。他们以优惠的价格提供优质的服务。基本上,我的系统会根据IMGIX基于URL的API将用户选择的Bigcommerce选项转换为URL字符串。然后,显示实时预览就像在每次输入更改时将图像的src属性更改为相应的IMGIX URL一样简单。我在一个使用Redux商店的React组件中执行此操作,但类似的东西肯定可以在您选择的框架中完成,或者简单的旧的vanilla JavaScript。 Cloudinary为IMGIX提供了类似(甚至可能更大一点)的功能集,但我发现IMGIX要快一点,而且我的使用价格相当低。

您还可以编写一些使用HTML5画布来覆盖图像上的文本和效果的内容,从而避免使用第三方服务。我发现这样的解决方案对于客户端设备来说更多的工作和方式更多的负担,但它肯定是另一种方式来玷污众所周知的猫。

可能还有其他可行的解决方案,但以上是我在实现类似于您在Bigcommerce上寻找的东西的经验。我希望这有用!