使用图像叠加预览自定义产品选项

Question

我目前在一家销售订购产品的商店工作。这些产品需要由客户定制。我想通过以图形方式显示放置在项目上的自定义选项来预览客户选择的自定义选项。

我想象为每个选项制作一个单独的透明图像，使它们的大小与整个预览图像的大小相同，然后将它们放置在彼此的顶部。

如果我的意图不清楚，请告诉我。我将创建一个图形来表达我的意思。

是否有任何已知的扩展可以执行此操作？付费或免费。

Answer 1

那么，如果我正确理解你的问题，你想构建一个可选项目的分层图像显示吗？

因此，如果我卖帽子，基本图像是一个人的头部，然后用户选择一顶帽子，帽子图像会分层在头顶上？

非常有趣的概念，我非常希望看到最终结果:)

我会怎么做：

主产品需要是可配置产品或捆绑产品，并附加子产品。这将使您能够使用核心 magento 功能进行可定制的方面，因此不需要额外的代码。

主要产品图像将放置在容器 div 中，因此其 id/class 是已知的。我们称之为“image_container”。父产品的子图像将绝对定位在此容器内。

每个子产品都将计划的分层图像作为其图像配置为其基本图像，这又是纯粹的核心功能。

现在，您需要一些自定义的JS代码来绑定可选儿童输入的更改事件（无论是选择/收音机等），这将发射一些Ajax，以获取该孩子的图像的路径。然后，生成的 ajax 调用会将新的 img 元素插入到 DOM 中，作为容器图像“image_container”的子元素，并绝对定位在父图像的顶部。您可以轻松地从已知的静态父图像中获取正确的 x/y 坐标。

然后，您可以在选项更改时弹出新图像。

您甚至可以使子图像可拖动，以便客户端可以将其放置在父图像的其他位置（如果需要）

希望这可以帮助。

Answer 2

有一个可用的扩展名。由命令销售的产品配置器是一个。它完全可以完成您的需求。

在此处检查演示： http://demo.product-configurator.biz/index.php/functions/demo-6.html