Как реализовать вариации?
 

Добрый день. У меня есть массив с вариациями товаров:

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. Но я не совсем понимаю как это работает.

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

Так вы сами написали, что в 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?

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

Спасибо