Предварительный просмотр пользовательских параметров продукта с наложением изображения
В настоящее время я работаю в магазине, продающем товары на заказ. Эти продукты должны быть настроены клиентом индивидуально. Я хотел бы просмотреть пользовательские параметры, выбранные клиентом, графически показав их, размещенные на элементе.
Я представляю, как создаю отдельное прозрачное изображение для каждого параметра, делая их того же размера, что и весь размер изображения предварительного просмотра, а затем помещаю их друг на друга.
Если мои намерения неясны, пожалуйста, дайте мне знать. Я создам графическое представление того, что я имею в виду.
Существуют ли какие-либо известные расширения, делающие это? Оплаченный или бесплатный.
2 answers
Итак, если я правильно понял ваш вопрос, вы хотите создать многоуровневое отображение изображений выбираемых элементов?
Таким образом, если я продаю шляпы, базовым изображением является голова человека, а затем пользователь выбирает шляпу, и изображение шляпы накладывается поверх головы?
Очень интересная концепция, и я бы очень хотел увидеть конечный результат:)
Как бы я это сделал:
Основной продукт должен быть либо настраиваемым, либо пакетным продуктом с дочерним продукты прилагаются. Это даст вам возможность настраивать аспекты, используя основные функции magento, поэтому дополнительный код не требуется.
Основное изображение продукта будет помещено в контейнер div, поэтому его идентификатор/класс известен. Давайте назовем его "image_container". Дочернее изображение для родительского продукта будет размещено абсолютно внутри этого контейнера.
Каждый из дочерних продуктов будет иметь запланированное многослойное изображение в качестве своего изображения, настроенного в качестве базового изображения, опять же чистого ядра функциональность.
Теперь вам понадобится некоторый пользовательский код js для привязки событий изменения выбираемых дочерних входов (будь то выбор/радио и т. Д.) Это приведет к запуску некоторого ajax, чтобы в результате получить путь к изображению для этого ребенка. Полученный вызов ajax затем вставит новый элемент img в DOM в качестве дочернего элемента для изображения контейнера "image_container" и расположит его абсолютно поверх родительского изображения. Вы можете легко получить правильные координаты x/y от известного статического родителя изображение.
Затем вы можете вводить/выводить новые изображения по мере изменения параметров.
Вы даже можете сделать дочернее изображение перетаскиваемым, чтобы клиент мог разместить его в другом месте на родительском (если это требуется)
Надеюсь, это поможет.
Для этого доступно расширение. Конфигуратор продукта от justSelling - это тот самый. Он делает именно то, что вам нужно.
Проверьте демонстрацию здесь: http://demo.product-configurator.biz/index.php/functions/demo-6.html