смена изображений и других параметров(характеристик продукта) при выборе цвета.

Добрый день, подскажите как реализовать такую задачу:
При выборе цвета в карточке товара, необходимо сменять изображения на другие(выбранный цвет), а так же сменять дополнительные параметры(характеристики, текст) у продукта, которые могут отсутсвовать у продукта с другим цветом.
С бд приходит многомерный ассоц. массив в основном массиве имеется 2 и более вложенных массивов, в каждом из них указан цвет, свои изображения и другие параметры. При выборе цвета соответсвенно один массив должен отображаться, остальные нет.
Сделал на страницы списка товаров смену изображения при выборе цвета, а вот как с остальным контентом быть, как его сменять, незнаю. В js не силен.
Заметил на алиэкспресе такую реализацию, при выборе цвета стекол, происходит замена изображений,
пример:
https://ru.aliexpress.com/item/Half.../1777368669.html?spm=a2g0s.9042311.0.0.eF7jMa

 

Благодарю, буду пробовать, другого пути нет)
--- Добавлено ---

Осваиваю потихоньку js, надо бы знать, а то копипастить не очень приятно.

 

Я имел ввиду что "другого пути нет..." это мне в любом случае надо выполнить такую задачу, как говориться: Умри, но сделай)). а перезагружать всю страницу ради одного изображения это считаю не правильно, у меня грубо говоря приходит 3 массива в массиве, где каждый массив имеет изображения 4 маленькие(превьюхи) и 4 большие, где большое появляется при нажатии на превьюху(скрипт просмотра изображений) + краткое описание, у модели разных цветов может отличатся описание(его тоже менять надо), (вот и думаю либо мне менять несколько элементов на странице, либо просто с помощью ajax менять кусок контента со всем содержимым) поэтому при выборе цвета(по клику) я должен обращатся к тому массиву где есть этот цвет, соответсвенно будет выводится содержимое этого массива в шаблонизаторе, остальные массивы скрыты. Вот как то так...))). Потихоньку буду сейчас двигатся, читать и пистаь скрипт. Мужики, Благодарю за советы!

 

хм..., допустим у меня 3 цвета, черный, красный, белый, есть изображения продукта по 4 фотографии больших и 4 маленьких(превьюх) черного цвета, а также по 4/4 красного, белого цвета, при нажатии на черный, беру url с кнопки, вставляю в url картинки и получается что для 8 изображений одного цвета будет один url пришедший с кнопки? Это же может повлиять на url адрес нужного изображения. Если бы было по одному изображения каждого цвета, то тут бы вродь отрабатывало нормально, может я не правильно понимаю из-за не полного представления сей картины...
--- Добавлено ---

Я с помощью

PHP:

1. $jsonZ = json_encode($rsProduct);

присваиваю переменной в php, её передаю в smarty, в скрипте её принимаю и проверяю:

Код (Javascript):

1. var obj = ({$jsonZ});
2. console.log(obj);

в коде tpl прокручиваю циклом

HTML:

1. {foreach $rsProduct as $item}

массив, беру с каждого подмассива значение ключа- COLOR

HTML:

1. <a href="" class="colorImgs individOnClick" id="{$item['ID_PRODUCT']}"><span style="background-color: {$item['COLOR']};"></span></a>

в id подставляю id подмассива. При клике по цвету беру id в который уже записано значение id с подмассива. Вопрос:
Как можно в js проверить и вывести именно тот массив целиком, в котором ключ[id] имеет полученный id c клика, и вернуть этот массив в smarty?

 

написал такой скрипт

Код (Javascript):

1. <script>
2.     $(".individOnClick").click(function (event){
3.         event.preventDefault();
4.         var  idClick;
5.         idClick = $(this).attr('id');
6.         var obj = {$jsonZ};
7.  
8.         function find(obj, value) {
9.             for (var i in obj) for (var j in obj[i])
10.              if (obj[i][j] == value) return [obj[i], obj[i][j]];
11.             return false;
12.         };
13.         console.log(find(obj, idClick));
14.     });
15. </script>

на стороне сервера:

PHP:

1. $jsonZ = json_encode($rsProduct);

Все отрабатывает, выдает нужный подмассив, осталось тольковернуть данные и вывести на сайт.

 

подскажите почему не могу передать данные на сервер, пишет ошибку: on line 80 "data: {'data': JSON.stringify(find(obj, idClick))}," - Unexpected ": ", expected one of: "}" <-- thrown in C:\OpenServer\domains...
Код прописываю такой:

Код (Javascript):

1. $.post({
2.             url: '?category=300&controller=product&id=444',
3.             data: {'data': JSON.stringify(find(obj, idClick))},
4.             success: function (data) {
5.                 console.log('Данные успешно отправлены.');
6.             }
7.         });

но в php ничего не приходит...

 

Убрал, но данные все так же не приходят в php, в консоли выбранные данные отобразились... а дальше не идут

 

Сначало передаю в js:
$jsonZ = json_encode($rsProduct);

Вот весь скрипт:

Код (Javascript):

1. <script>
2.  
3. $(".individOnClick").click(function (event){
4.         event.preventDefault();
5.         var  idClick;
6.         idClick = $(this).attr('id');
7.         var obj = {$jsonZ};
8.  
9.         function find(obj, value) {
10.             for (var i in obj) for (var j in obj[i])
11.              if (obj[i][j] == value) return [obj[i], obj[i][j]];
12.             return false;
13.         };
14.         $.post({
15.             url: '?category=300&controller=product&id=444',
16.             data: {data: JSON.stringify(find(obj, idClick))},
17.             success: function (data) {
18.                 console.log('Данные успешно отправлены.');
19.             }
20.         });
21.     });
22. </script>

на стороне сервера потом проверяю пришла пеерменная или нет:

PHP:

1. foreach($_POST as $name => $val) {
2.             d( $name . ' = ' . $val . '<br>');
3.       }
4.  
5. d($_POST['data']);

дебагом проверяю.

 

неа, не помогло, ругается на дату если передаю объектом или строкой в data,

 

... on line 82 "data: {data: massString}," - Unexpected ": ", expected one of: "}" <-- thrown in C:\OpenServer\domains..... это если строку передаю в дата data:

Код (Javascript):

1. data: {data: massString}

,

 

Подскажите, вот я выбрал ассоц-й под-массив из массива в JS, как его через ajax правильно передать в data, чтобы этот ассоц массив получить и вывести на страницу? Строкой или объектом? читал что его лучше передавать строкой, так как он удаляет все лишние пробелы, делает его более компактным при передачи,

Код (Javascript):

1. JSON.stringify()

у меня ассоц. массив переводится в строку и присваивается в переменную:

Код (Javascript):

1. var massString = JSON.stringify(mass);

а в data записывается как data: massString, Так данные передаются, ошибка не вылетает, но на стороне сервера _POST не приходит, если передавать объект в data: то необходимо прописать фигурные скобки {} в которых указывается ключ и значение через двоеточие ),

Код (Javascript):

1. data:  {data : mass},

// переменная mass это объект ==>>

Код (Javascript):

1. var mass = (find(obj, idClick));

но когда прописываю в ajax:

Код (Javascript):

1. data:  {data : mass}

он ругается на двоеточие или на какие нибудь еще знаки. Подскажите, или поделитесь ссылкой где описывается как правильно передать ассоц. массив и как его получить на стороне сервера.? Премного Благодарен!

 

На стороне сервера передаю данные(многомерный-ассоц. массив) в js :

PHP:

1. $jsonZ = json_encode($rsProduct);

далее в js его ловлю:

Код (Javascript):

1. <script type="text/javascript">
2.  
3. $(".individOnClick").click(function (event){
4.         event.preventDefault();
5.         var  idClick;
6.         idClick = $(this).attr('id'); // тут я по клику элемента присваиваю ему id
7.         var obj = {$jsonZ}; // тут получаю ассоц. массив с php, далее ниже я беру подмассив(ассоц) у которого имеется значение равное переменной idClick
8.  
9.         function find(obj, value) {
10.             for (var i in obj) for (var j in obj[i])
11.              if (obj[i][j] == value) return [obj[i], obj[i][j]];
12.             return false;
13.         };
14.         var mass = (find(obj, idClick));
15.         var massString = JSON.stringify(mass); // объект перевел в строку
16.          $.ajax({
17.             async: true,
18.             type: 'POST',
19.             url: "ProductController.php?category=300&controller=product&id=444&lang=ru#_tabs-10",
20.             data:  massString,
21.             success: function(data) {
22.                 console.log('Данные успешно отправлены.');
23.             }
24.         });
25.     });
26. </script>

Далее в консоле после клика по выбору цвета отображается то, что выбрали нужный ассоц.подмасив с имеющимся значением. Пишет Данные успешно отправлены. А в php я поймать не могу, даже в POST ничего не приходит. Его надо поймать в php и вернуть на страницу шаблонизатора не перезагружая страницы. Вот как то так код написал.