Перейти к содержимому


Фото
* * * * * 1 голосов

много вариаций товара

simpla

  • Чтобы отвечать, сперва войдите на форум
8 ответов в теме

#1 megauser

megauser
  • Пользователь
  • 117 сообщений
  • Дизайн, Заказчик, Пользователь
  • Откуда:Россия

Опубликовано 27.01.2020 - 15:14

Есть задача сделать так чтоб у товара было много вариаций, но пока из готового видел ( цвет и размер) и еще цвет, рост , размер) 

 

Ну а если нужно 5 или 6 различных вариантов?

 

Чтоб человек смог выбрать по выпадающим спискам, 

 

Цвет, 

Высоту, 

Ширину, 

Толщину,

Материал

 

Если делать задумкой просто делать 5 вариантов, то заполнение такого товара будет очень сложным.

 

Может есть альтернативные заработки? Кто как делал? Можно ли сделать доработку без привязки к количеству вариантов, допустим хочется их 5, 6,7 и т.д.

 

Если у кого готовое решение, интересно было бы узнать стоимость.

 

Ну а так пока мысли сделать связанными товарами, и потом массово добавлять их в корзину, как идея?



#2 shooroop

shooroop
  • Фрилансер
  • 1 046 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Antarktida

Опубликовано 27.01.2020 - 16:04

https://simplashop.c...trov-v-variante



#3 megauser

megauser
  • Пользователь
  • 117 сообщений
  • Дизайн, Заказчик, Пользователь
  • Откуда:Россия

Опубликовано 27.01.2020 - 16:38

https://simplashop.c...trov-v-variante

 

Cмотрел ,там много ньансов, каждому товару нужно забивать параметры. Товары не дублируются. А так вроде решение неплохое, планировал его купить если разработчик допилит.



#4 megauser

megauser
  • Пользователь
  • 117 сообщений
  • Дизайн, Заказчик, Пользователь
  • Откуда:Россия

Опубликовано 27.01.2020 - 20:24

https://simplashop.c...trov-v-variante

 

а если варианты ограничить и вписать по принципу стандартного variant то насколько сложно реализовать выбор конкретного товара? это фильтр нужен будет ?



#5 megauser

megauser
  • Пользователь
  • 117 сообщений
  • Дизайн, Заказчик, Пользователь
  • Откуда:Россия

Опубликовано 27.01.2020 - 21:25

https://simplashop.c...trov-v-variante

 

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

 

Нашел сайт на симпле где похожая есть разработка, и покопавшись в js коде нашел это

 

$(function(){
	$(document).on('change', '#option_power', function(){
		get_power();
	});
	$(document).on('change', '#option_light', function(){
		get_light();
	});
	$(document).on('change', '#option_type', function(){
		get_type();
	});
	$(document).on('change', '#option_temperature', function(){
		get_temperature();
	});
	$(document).on('change', '#option_protection', function(){
		get_protection();
	});
	$(document).on('change', '#option_cap', function(){
		get_cap();
	});
	get_power();
	
	function get_power(){
		var power 	= $('select[name=power]').val();
		var	arr 	= [];
		
		$('#option_light option').remove();
		$.each(variants, function(id, val)
		{
			if(val['power'] == power && $.inArray(val['light'], arr) < 0)
			{
				if(val['light'] != '-')
				{
					arr.push(val['light']);
				}
				$('input[name="variant"]').val(id);
				$('#option_light').append('<option value="'+val['light']+'">'+val['light']+'</option>');
			}
		});
		if(arr.length > 0)
		{
			$('#name_light').show();
		}
		else
		{
			$('#name_light').hide();
		}
		get_light();
	}
	
	function get_light(){
		var power 	= $('select[name=power]').val();
		var light 	= $('select[name=light]').val();
		var arr 	= [];

		$('#option_type option').remove();
		$.each(variants, function(id, val)
		{
			if(val['power'] == power && val['light'] == light && $.inArray(val['type'], arr) < 0)
			{
				if(val['type'] != '-')
				{
					arr.push(val['type']);
				}
				$('input[name="variant"]').val(id);
				$('#option_type').append('<option value="'+val['type']+'">'+val['type']+'</option>');
			}
		});
		if(arr.length > 0)
		{
			$('#name_type').show();
		}
		else
		{
			$('#name_type').hide();
		}
		get_type();
	}
	
	function get_type(){
		var power 	= $('select[name=power]').val();
		var light 	= $('select[name=light]').val();
		var type 	= $('select[name=type]').val();
		var arr 	= [];

		$('#option_temperature option').remove();
		$.each(variants, function(id, val)
		{
			if(val['power'] == power && val['light'] == light && val['type'] == type && $.inArray(val['temperature'], arr) < 0)
			{
				if(val['temperature'] != '-')
				{
					arr.push(val['temperature']);
				}
				$('input[name="variant"]').val(id);
				$('#option_temperature').append('<option value="'+val['temperature']+'">'+val['temperature']+'</option>');
			}
		});
		if(arr.length > 0)
		{
			$('#name_temperature').show();
		}
		else
		{
			$('#name_temperature').hide();
		}
		get_temperature();
	}
	
	function get_temperature(){
		var power 		= $('select[name=power]').val();
		var light 		= $('select[name=light]').val();
		var type 		= $('select[name=type]').val();
		var temperature	= $('select[name=temperature]').val();
		var arr 		= [];

		$('#option_protection option').remove();
		$.each(variants, function(id, val)
		{
			if(val['power'] == power && val['light'] == light && val['type'] == type && val['temperature'] == temperature && $.inArray(val['protection'], arr) < 0)
			{
				if(val['protection'] != '-')
				{
					arr.push(val['protection']);
				}
				$('input[name="variant"]').val(id);
				$('#option_protection').append('<option value="'+val['protection']+'">'+val['protection']+'</option>');
			}
		});
		if(arr.length > 0)
		{
			$('#name_protection').show();
		}
		else
		{
			$('#name_protection').hide();
		}
		get_protection();
	}
	
	function get_protection(){
		var power 		= $('select[name=power]').val();
		var light 		= $('select[name=light]').val();
		var type 		= $('select[name=type]').val();
		var temperature	= $('select[name=temperature]').val();
		var protection	= $('select[name=protection]').val();
		var arr 		= [];

		$('#option_cap option').remove();
		$.each(variants, function(id, val)
		{
			if(val['power'] == power && val['light'] == light && val['type'] == type && val['temperature'] == temperature && val['protection'] == protection && $.inArray(val['cap'], arr) < 0)
			{
				if(val['cap'] != '-')
				{
					arr.push(val['cap']);
				}
				$('input[name="variant"]').val(id);
				$('#option_cap').append('<option value="'+val['cap']+'">'+val['cap']+'</option>');
			}
		});
		if(arr.length > 0)
		{
			$('#name_cap').show();
		}
		else
		{
			$('#name_cap').hide();
		}
		get_cap();
	}
	
	function get_cap(){
		var power 		= $('select[name=power]').val();
		var light 		= $('select[name=light]').val();
		var type 		= $('select[name=type]').val();
		var temperature	= $('select[name=temperature]').val();
		var protection	= $('select[name=protection]').val();
		var cap			= $('select[name=cap]').val();
		var arr 		= [];

		$.each(variants, function(id, val)
		{
			if(val['power'] == power && val['light'] == light && val['type'] == type && val['temperature'] == temperature && val['protection'] == protection && val['cap'] == cap)
			{
				$('input[name="variant"]').val(id).attr({
					'data-power': 		val['power'],
					'data-lignt':		val['light'],
					'data-type':		val['type'],
					'data-temperature':	val['temperature'],
					'data-protection':	val['protection'],
					'data-cap':			val['cap']
				});
			}
		});
		get_variant();
	}
	
	function get_variant(){
		var variant 	= $('input[name="variant"]').val();
		var val 		= variants[variant];
		
		$('.options select').each(function(i, v){
			if($(this).find('option').length === 1)
			{
				$(this).attr('disabled', true);
			}
			else
			{
				$(this).attr('disabled', false);
			}
		});
	

	}
});

я так понял это и есть та сортировка текущих вариантов. 

 

Достаточно ли будет на js этого или потребуется еще что либо?



#6 shooroop

shooroop
  • Фрилансер
  • 1 046 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Antarktida

Опубликовано 27.01.2020 - 21:46

так в js который вы привели всего 6 ячеек в варианте а вы хотите произвольные



все индивидуально разрабатывается



#7 megauser

megauser
  • Пользователь
  • 117 сообщений
  • Дизайн, Заказчик, Пользователь
  • Откуда:Россия

Опубликовано 27.01.2020 - 23:06

так в js который вы привели всего 6 ячеек в варианте а вы хотите произвольные



все индивидуально разрабатывается

 

да уже устроит и 5 ячеек) посчитал) Вопрос, я добавляю еще 4 поля по аналогии с name в s_variants

 

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

А вот как быть с этим алгоритмом? Можете пояснить как он что считает?  Вижу функции для каждого отдельного варианта. Получается у меня 5 функций  будет, но как их связать, сам алгоритм немного не понимаю..



#8 megauser

megauser
  • Пользователь
  • 117 сообщений
  • Дизайн, Заказчик, Пользователь
  • Откуда:Россия

Опубликовано 28.01.2020 - 00:17

так в js который вы привели всего 6 ячеек в варианте а вы хотите произвольные



все индивидуально разрабатывается

 

Также на просторах рунета нашел решение на 3 параметра

 

 

        <table style="margin-top: 50px;">
      
        <tr{if $product->colors|count < 2 || $product->colors['']} style="display: none;"{/if}>
            <td>Цвет:</td>
            <td>
                <select id="color" rel="height">
                {foreach $product->colors as $k=>$v}<option value="{$k}">{$k}</option>{/foreach}  
                </select>
            </td>
        </tr>
      
        <tr{if $product->heights|count < 2 || $product->heights['']} style="display: none;"{/if}>
            <td>Высота:</td>
            <td>
                <select id="height" rel="name">
                {foreach $product->heights as $k=>$v}<option value="{$k}">{$k}</option>{/foreach}  
                </select>
            </td>
        </tr>

<tr{if $product->weight|count < 2 || $product->weight['']} style="display: none;"{/if}>
<td>Вес:</td>
<td>
<select id="weight" rel="name">
{foreach $product->weights as $k=>$v}<option value="{$k}">{$k}</option>{/foreach}
</select>
</td>
</tr>


<tr{if $product->width|count < 2 || $product->width['']} style="display: none;"{/if}>
<td>Вес:</td>
<td>
<select id="width" rel="name">
{foreach $product->widths as $k=>$v}<option value="{$k}">{$k}</option>{/foreach}
</select>
</td>
</tr>

        <tr{if $product->variants|count < 2} style="display:none;"{/if}>
            <td>Вариант:</td>
            <td>
                <select id="name" name="variant">
                {foreach $product->variants as $v}<option value="{$v->id}">{$v->name}</option>{/foreach}  
                </select>
            </td>
        </tr>
        
      </table>

 

 <script>

    var variants = {
    {foreach $product->variants as $v} '{$v->id}': {literal}{{/literal}'color':'{$v->color}', 'height':'{$v->height}', 'name':'{$v->name}', 'price':'{$v->price}', 'compare_price':'{$v->compare_price}'{literal}}{/literal},{/foreach}   
    };

    {literal}
    function changeColor(){
        var arr = [];
        $('#height option').remove();
        $.each(variants, function(id, val) {
            if(val['color'] === $('#color').val() && $.inArray(val['height'], arr) == -1) {
                $('#height').append($('<option/>').val(val['height']).text(val['height']));
                arr.push(val['height']);
            }
        });
        $('#height option:first').attr('selected', 'selected');
        $('#height').val($('#height option:first').val());

        changeHeight();    
    }
    
    function changeHeight(){
        var arr = [];
        $('#name option').remove();
        $.each(variants, function(id, val) {
            if(val['color'] === $('#color').val() && val['height'] === $('#height').val() && $.inArray(id, arr) == -1) {
                $('#name').append($('<option/>').val(id).text(val['name']));
                arr.push(id);
            }
        });
        $('#name option:first').attr('selected', 'selected');
        $('#name').val($('#name option:first').val());

        changeVariant();    
    }

    function changeVariant(){
      var option = $("#name option:selected"),
          id = $(option).val();
          
      $('.price span').text(variants[id]['price']);
      $('.compare_price').text(variants[id]['compare_price']);
    }

    $(function() {
      $('#color').change(function(){ changeColor(); });
      $('#height').change(function(){ changeHeight(); });
      $('#name').change(function(){ changeVariant(); });
      changeColor();
    });
    {/literal}
    </script>

А добавить 2 функции проблематично. 



#9 makki

makki
  • Пользователь
  • 22 сообщений
  • Пользователь
  • Откуда:Kiev

Опубликовано 29.01.2020 - 22:35

Задача не простая, но вполне реализуемая. 

Идея такая: У товара есть характеристики, каждая из которых будет иметь несколько значений.

Нужно привязать к конкретному варианту (вариации) товара определенную комбинацию значений его характеристик. Осталось придумать механизм как их хранить в варианте товара и показывать в виде селектов в пользовательской части. Одним JS не обойтись, без серьёзного вмешательства в код движка и БД универсальное решение не получится


Изменено: makki, 29.01.2020 - 22:41






Также с меткой «simpla»

0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых