Изменение конфигурации объекта

Создадим функционал по изменению различных конфигураций объекта. Например сделаем конфигуратор коттеджа, у которого будут изменять цвет и материал кровли, а также цветовая схема стен.

Должно получится примерно следующее:

Материалы

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

Изображения должны быть в формате png. Фон желательно должен быть из рендера объекта, либо можно сделать фон изменяемым. Если основные изменяющиеся изображения с одинаковым фоном, то их можно сделать в формате .jpg.

В моем примере мы будем изменять варианты окраски стен (я сделал отдельные png, но можно было использовать и jpg с одинаковым фоном, 10 вариантов) и материал и цвет кровли (6 png файлов: 2 материала и 3 расцветки).

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

/config/

• House-109-01.png
• House-109-02.png
• House-109-03.png
• …
• House-109-10.png

/roof/

• House-109-r01m01.png
• House-109-r01m02.png
• House-109-r01m03.png
• House-109-r02m01.png
• House-109-r02m02.png
• House-109-r02m03.png

Основные компоненты

Верстка

<div id="config-block" class="section"><div class="wrapper"><div class="container"><div>
  
	<h2>ВЫБЕРИ СВОЙ ЦВЕТ</h2> 

	<div id="config">
	
		<img id="color-relation" src="/wp-content/themes/meisterwerk-2/images/config/House-109-01.png">
		
		<div id="roof"><img src="/wp-content/themes/meisterwerk-2/images/roof/House-109-r01m01.png"></div>	

	</div>		
		
	<div class="color-select">
		Выбор цвета: 
		<div class="color selected" color="01">01</div>
		<div class="color" color="02">02</div>
		<div class="color" color="03">03</div>
		<div class="color" color="04">04</div>
		<div class="color" color="05">05</div>
		<div class="color" color="06">06</div>
		<div class="color" color="07">07</div>
		<div class="color" color="08">08</div>
		<div class="color" color="09">09</div>
		<div class="color" color="10">10</div>	
	</div>
	
	<div class="material-select">
		Выбор материала кровли: 
		<div class="mat selected" mat="01">falc</div>
		<div class="mat" mat="02">metall</div>
		<div class="mat" mat="03">soft</div>
	</div>		
	
	<div class="roof-color-select">
		Выбор цвета кровли: 
		<div class="roof selected" roof="01">коричневый</div>
		<div class="roof" roof="02">тёмный</div>
	</div>  

</div></div></div></div>

Стили

#config {
    position: relative;
    max-width: 1190px;
    margin: 0 auto;
    background: url(/wp-content/uploads/2020/05/uchastok-2-2.jpg);
    background-size: cover;
    background-position: center; /* center -100px */
    margin-bottom: 30px;
    padding: 30px;
}

#config img {display: block;}

.color-select, .roof-color-select, .material-select {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.color-select div, .roof-color-select div, .material-select div {
    background: #475384;
    color: #fff;
    padding: 5px;
    margin: 0 5px;
    cursor: pointer;
}

.color-select div.selected, .roof-color-select div.selected, .material-select div.selected {
    background: #2d3967;
}

#roof {
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
}

Скрипты

jQuery(document).ready(function ($) {
	
	// Изменение расцветки стен
	$("body").on("click", ".color-select div", function () {
		var color = $(this).attr('color');
		$('.color-select div').removeClass('selected');
		$(this).addClass('selected');
		$('#color-relation').attr('src', '/wp-content/themes/meisterwerk-2/images/config/House-109-' + color + '.png');
	});
	
	// Изменение цвета и материала кровли
	$("body").on("click", ".roof-color-select div", function () {
		var roof = $(this).attr('roof');
		var material = $('.mat.selected').attr('mat');
		$('.roof-color-select div').removeClass('selected');
		$(this).addClass('selected');
		$('#roof img').attr('src', '/wp-content/themes/meisterwerk-2/images/roof/House-109-r' + roof + 'm' + material + '.png');
	});
	
	$("body").on("click", ".material-select div", function () {
		var material = $(this).attr('mat');
		var roof = $('.roof.selected').attr('roof');
		$('.material-select div').removeClass('selected');
		$(this).addClass('selected');
		$('#roof img').attr('src', '/wp-content/themes/meisterwerk-2/images/roof/House-109-r' + roof + 'm' + material + '.png');
		//alert (roof);
	});		
	
});

Скрипт используется атрибут кнопки конфигуратора для подбора изображения по названию файла. За счет того что изображения подгружаются на лету, а не все сразу, данное решение не является долгим для первоначальной загрузки.

[site-socialshare]