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

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

02.06.2020

66

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

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

Материалы

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

Изображения должны быть в формате 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);
	});		
	
});

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

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Изменение конфигурации объекта Изменение конфигурации объекта Изменение конфигурации объекта
Технология акций на Woocommerce
Рекомендации для васТехнология акций на WoocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.