Как реализовать рендеринг фото товара в интернет-магазине?

Question

[artemDomenko]

Всего в интернет-магазине планируется 10 товаров, но у каждого товара есть набор настроек: цвет ткани (более 100 вариантов), утяжелитель (3 варианта), цепочка (2 варианта).
Было бы здорово чтобы фотографии каждого товара рендерились на лету, когда юзер выбирает конкретный вариант. Иначе придется 10х100х3х2 = 6000 фотографий, плюс вид сбоку, вид в интерьере и т.д..
Вопрос: с помощью какого инструмента это можно реализовать?

Comments

[FasterTans]

Так что вы конкретно хотите? Автоматом генерировать картинки? Ну такое.. )
Если они у вас есть и вам просто подгружать их надо, то аяксом при смене атрибута отправляйте запрос на сервер, получайте ссылку на картинку и рендерите их.

[artemDomenko]

FasterTans, конкретно хотелось бы как у этих ребят https://www.jalousiescout.de/rollos/premium-rollo.html

[FasterTans]

конкретно у них, при клике на атрибут, улетает запрос, прилетает картинка и они заменяют нужную картинку.
https://i.imgur.com/cS8SqaK.png
Т.е. у них наложены одну на одну разные картинки, с цветом, цепочкой и тд, при клике на атрибут, подгружается нужного цвета и картинка заменяется.
Т.е. получается у вас отдельно 10 картинок товаров, 100 цветов ткани, 3 утяжелителя и 2 цепочки, итого 115 картинок

Answer 1

[McBernar]

Если фото вашего товара позволяет разбить его на части - ткань, утяжелитель, цепочка - просто разбейте их и подгружайте по-отдельности.

Из вашего примера с рулонами это сделать было бы совсем несложно.

Answer 2

[Кирилл Горелов]

Мы делали подобное, для прицепов.
Но у нас было немного иначе.
У нас было меньше.
То есть у нас стоит пустой прицеп, по кнопке "добавить фаркоп" появлялся сам фаркоп. И тд.
У нас было сделано бутербродом. То есть все картинки лежали друг над другом. И при выборе соответствующего параметра появлялась или скрывалась соответствующая картинка.

Answer 3

[Антон Шаманов]

у меня есть подобный плагин для webasyst shop-script 7-8

Answer 4

[Руслан]

Я реализовывал такое с помощью многослойного изображения.
Изначально смоделили сабж, отрендерили кучу изображений во всех цветах, а так же отдельно карту объектов для того чтобы потом в фш отделить детали которые меняют свои цвета. На выходе получилось какое-то множество изображений с прозрачностью. Далее на js прикрутили подмену этих картинок по клику на выбор цвета и элементов управления.