【问题标题】:Bigcommerce product image customization with text change带有文本更改的 Bigcommerce 产品图像定制
【发布时间】:2016-12-13 09:58:30
【问题描述】:

目前我正在尝试在 Bigcommerce Storefront 中构建这样的产品定制,允许显示带有动态文本的图像,这些文本是在文本框中输入的。这意味着产品图片预览应立即显示为带有书面文字的新图片。

以便最终用户知道最终产品的外观,并且相同的图像也应该放入购物车。

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

这可以在 Bigcommerce 上实现吗?

提前致谢

【问题讨论】:

    标签: image customization product preview bigcommerce


    【解决方案1】:

    使用一些相当先进的客户端代码绝对有可能。不幸的是,我不知道有任何 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 上寻找的东西的经验。我希望这会有所帮助!

    【讨论】:

      猜你喜欢
      • 2017-06-19
      • 2014-10-02
      • 2014-02-25
      • 2015-08-15
      • 1970-01-01
      • 1970-01-01
      • 2014-08-21
      • 2011-08-11
      • 1970-01-01
      相关资源
      最近更新 更多