Jump to content

Recommended Posts

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

 

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

 

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

 

Цвет, 

Высоту, 

Ширину, 

Толщину,

Материал

 

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

 

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

 

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

 

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

Link to post
Share on other sites

 

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

Link to post
Share on other sites

 

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

Link to post
Share on other sites

 

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

 

Нашел сайт на симпле где похожая есть разработка, и покопавшись в 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 этого или потребуется еще что либо?

Link to post
Share on other sites

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

 

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

 

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

 

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

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

Link to post
Share on other sites

так в 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 функции проблематично. 

Link to post
Share on other sites

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

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

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

Edited by makki
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...