Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как реализовать вариации? (https://javascript.ru/forum/dom-window/77500-kak-realizovat-variacii.html)

Янковиц 13.05.2019 22:37

Как реализовать вариации?
 
Добрый день. У меня есть массив с вариациями товаров:
Array
(
    [0] => {"item_id":19,"item_image":"","item_variation":{"steklo":"ударопрочное","material":"металл"},"item_price":"110"}
    [1] => {"item_id":20,"item_image":"","item_variation":{"steklo":"обычное","material":"металл"},"item_price":"130"}
    [2] => {"item_id":21,"item_image":"","item_variation":{"steklo":"ударопрочное","material":"пластик"},"item_price":"150"}
    [3] => {"item_id":22,"item_image":"","item_variation":{"steklo":"ударопрочное","material":"дерево"},"item_price":"160"}
    [4] => {"item_id":23,"item_image":"","item_variation":{"steklo":"обычное","material":"пластик"},"item_price":"175"}
    [5] => {"item_id":24,"item_image":"","item_variation":{"steklo":"обычное","material":"дерево"},"item_price":"199"}
)

Я вывожу два блока вариантов:
по стеклу: обычное, ударопрочное
по материалу: дерево, пластик, металл

В данном случае получаем 6 вариантов.
(в перспективе, блоков вариантов, а значит вариаций товаров может быть гораздо больше)
Подайте идею, как на фронте реализовать следующее:
Покупатель сначала выбирает стекло, затем материал. В зависимости от того, какая комбинация выбрана, получаем item_id, item_image, item_price.

Я предполагаю, что данные можно выводить инлайновыми скриптами. Однако, не совсем понимаю в каком виде хранить данные. Если выводить через json, то выглядит не очень компактно:
<script type='text/javascript'>
/* <![CDATA[ */
var DATA = {"variable":["{\"item_id\":19,\"item_image\":\"\",\"item_variation\":{\"steklo\":\"\u0443\u0434\u0430\u0440\u043e\u043f\u0440\u043e\u0447\u043d\u043e\u0435\",\"material\":\"\u043c\u0435\u0442\u0430\u043b\u043b\"},\"item_price\":\"110\"}","{\"item_id\":20,\"item_image\":\"\",\"item_variation\":{\"steklo\":\"\u043e\u0431\u044b\u0447\u043d\u043e\u0435\",\"material\":\"\u043c\u0435\u0442\u0430\u043b\u043b\"},\"item_price\":\"130\"}","{\"item_id\":21,\"item_image\":\"\",\"item_variation\":{\"steklo\":\"\u0443\u0434\u0430\u0440\u043e\u043f\u0440\u043e\u0447\u043d\u043e\u0435\",\"material\":\"\u043f\u043b\u0430\u0441\u0442\u0438\u043a\"},\"item_price\":\"150\"}","{\"item_id\":22,\"item_image\":\"\",\"item_variation\":{\"steklo\":\"\u0443\u0434\u0430\u0440\u043e\u043f\u0440\u043e\u0447\u043d\u043e\u0435\",\"material\":\"\u0434\u0435\u0440\u0435\u0432\u043e\"},\"item_price\":\"160\"}","{\"item_id\":23,\"item_image\":\"\",\"item_variation\":{\"steklo\":\"\u043e\u0431\u044b\u0447\u043d\u043e\u0435\",\"material\":\"\u043f\u043b\u0430\u0441\u0442\u0438\u043a\"},\"item_price\":\"175\"}","{\"item_id\":24,\"item_image\":\"\",\"item_variation\":{\"steklo\":\"\u043e\u0431\u044b\u0447\u043d\u043e\u0435\",\"material\":\"\u0434\u0435\u0440\u0435\u0432\u043e\"},\"item_price\":\"199\"}"]};
/* ]]> */
</script>


Мне посоветовали использовать Set. Но я не совсем понимаю как это работает.

Malleys 13.05.2019 23:10

Цитата:

Сообщение от Янковиц
Мне посоветовали использовать Set.

Здесь можно обойтись массивом, вы же сами пишете, что это массив!

Цитата:

Сообщение от Янковиц
Однако, не совсем понимаю в каком виде хранить данные

Так вы сами написали, что в JSON, только можно в более читаемом виде
var data = [
    { item_id: 19, item_image: "", item_variation: { steklo: "ударопрочное", material: "металл" }, item_price: 110 },
    { item_id: 20, item_image: "", item_variation: { steklo: "обычное", material: "металл" }, item_price: 130 },
    { item_id: 21, item_image: "", item_variation: { steklo: "ударопрочное", material: "пластик" }, item_price: 150 },
    { item_id: 22, item_image: "", item_variation: { steklo: "ударопрочное", material: "дерево" }, item_price: 160 },
    { item_id: 23, item_image: "", item_variation: { steklo: "обычное", material: "пластик" }, item_price: 175 },
    { item_id: 24, item_image: "", item_variation: { steklo: "обычное", material: "дерево" }, item_price: 199 }
];


И уже дальше работать с этим массивом.

P. S. Вы слышали или читали о glass?

Poznakomlus 14.05.2019 00:37

Самый продуктивный метод, создание ваших вариаций на основе битовых масок.
Используя битовые операции для сравнения и поиска
Вы можете одним числом описать все вариации продукта

Янковиц 14.05.2019 09:55

Спасибо


Часовой пояс GMT +3, время: 10:42.