Перейти к содержанию
Официальный форум поддержки Simpla

Добавить выбор размера в вариантах товаров


Рекомендуемые сообщения

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

 

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

 

Вот что получилось:

1 Добавил поле в таблицу http://prntscr.com/3ijzpr

2 Добавил в Api и в шаблоне выводы и вводы

http://prntscr.com/3ik05u до этого момента все отлично

http://prntscr.com/3ik0cg - все работает отлично.

 

 

Но вот в чем проблема:

1 Выбор цвета и размера должен быть как минимум через выпадающие списки

2 При выборе цвета, в выпадающем списка размеров должны отображаться только те размеры которые есть для этого цвета

 

Прошу помочь разъяснить доходчиво как что и  к чему

"Сделай через яваскрипт" - это мне к сожалению ни о чем не говорит.

 

Спасибо.

 

P.S. По готовности решения выложу как бесплатное готовое с инструкцией 

 

 

Код сейчас вывода стандартный

{if $product->variants|count > 0}
		<!-- Выбор варианта товара -->
		<form class="variants" action="/cart">
			<table>
			{foreach $product->variants as $v}
			<tr class="variant">
				<td>
					<input id="product_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $product->variant->id==$v->id}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>
				</td>
				<td>
					{if $v->name}<label class="variant_name" for="product_{$v->id}">{$v->name} {$v->size}</label>{/if}
				</td>
				<td>
					{if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}
					<span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span>
				</td>
			</tr>
			{/foreach}
			</table>
			<input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
		</form>
		<!-- Выбор варианта товара (The End) -->
		{else}
			Нет в наличии
		{/if}
Ссылка на сообщение
Поделиться на другие сайты

если у человека есть желание выложить какое либо дополнение бесплатно, на этом форуме только приветствуется!

Я уже сделал совместными силами со своим знакомым, оформляю мануал и вкладываю сегодня

Ссылка на сообщение
Поделиться на другие сайты
  • 3 недели спустя...

Я уже сделал совместными силами со своим знакомым, оформляю мануал и вкладываю сегодня

Судя по всему, пообещали и забыли выложить .... : (

Ссылка на сообщение
Поделиться на другие сайты

А все потому что - кому-то видимо ЛЕНЬ составлять инструкцию... Сделать в принципе не сложно и самому. В крайнем случае у Корса есть : )

Ссылка на сообщение
Поделиться на другие сайты

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

Ссылка на сообщение
Поделиться на другие сайты
<!-- Первый этап -->

1 // ЗАПРОС В БД - добавляем поле для размера



ALTER TABLE  `s_variants` ADD  `size` VARCHAR( 255 ) NOT NULL AFTER  `name`


2 // api/Variants.php - делаем так что бы наши данные записывались и читались из БД

Строка 39 добавляем v.size, между v.name, и v.attachment

Должно получится так:



$query = $this->db->placehold("SELECT v.id, v.product_id , v.price, NULLIF(v.compare_price, 0) as compare_price, v.sku, IFNULL(v.stock, ?) as stock, (v.stock IS NULL) as infinity, v.name, v.size, v.attachment, v.position


Строка 57 тоже самое



$query = $this->db->placehold("SELECT v.id, v.product_id , v.price, NULLIF(v.compare_price, 0) as compare_price, v.sku, IFNULL(v.stock, ?) as stock, (v.stock IS NULL) as infinity, v.name, v.size, v.attachment


3 // simpla/design/html/product.tpl - добавляем поля вода размера в карточке товара

Строка 533 


<!-- Варианты товара -->
        <ul id="header">
            <li class="variant_move"></li>
            <li class="variant_name">Цвет</li>    <!-- Переименовоенное Название варианта-->
            <li class="variant_size">Размер</li> <!-- Добавляем сюда эту строку-->
            <li class="variant_sku">Артикул</li>    
            <li class="variant_price">Цена, {$currency->sign}</li>    
            <li class="variant_discount">Старая, {$currency->sign}</li>    
            <li class="variant_amount">Кол-во</li>
        </ul>

Строка 548 



<li class="variant_name">      <input name="variants[id][]"            type="hidden" value="{$variant->id|escape}" /><input name="variants[name][]" type="" value="{$variant->name|escape}" /> <a class="del_variant" href=""><img src="design/images/cross-circle-frame.png" alt="" /></a></li>
вставляем после нее
<li class="variant_size">       <input name="variants[size][]"           type="text"   value="{$variant->size|escape}" /></li>


Строка 574



<li class="variant_name"><input name="variants[id][]" type="hidden" value="" /><input name="variants[name][]" type="" value="" /><a class="del_variant" href=""><img src="design/images/cross-circle-frame.png" alt="" /></a></li>
после нее ставим
<li class="variant_size"><input  name="variants[size][]" type="" value="" /></li>


// simpla/design/css/style.css - Поправим стили CSS



#variants_block li.variant_name { width: 160px;    padding-left: 5px; }
#variants_block li.variant_name input {
    font-size: 16px;
    color: #000;
    width: 120px;
    float: left;
    margin-right: 2px;
}


#variants_block li.variant_size { width: 120px; }
#variants_block li.variant_size input {
    width: 95px;
    font-size: 15px;
    color: #000;
}


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

 

// view/ProductView.php - структура вывода товара

Находим



$product->colors = array()$variants = array();
  foreach($this->variants->get_variants(array('product_id'=>$product->id, 'in_stock'=>true)) as $v)
   $variants[$v->id] = $v;
....


заменяем на



$product->colors = array();


  $variants = array();
  foreach($this->variants->get_variants(array('product_id'=>$product->id, 'in_stock'=>true)) as $v) {
    $variants[$v->id] = $v;
                if($v->name){
                    if(!in_array($v->name,$product->colors))
                    $product->colors[] = $v->name;
                }
  }


<!-- /Первый этап -->

 

<!-- Второй этап -->

// design/default(или шаблон)/js/ajax_cart.js



variant = $(this).find('select').val();


это заменить на



variant = $(this).find('select[name=variant]').val();


// design/default(или шаблон)/html/product.tpl Вывод вариантов в карточке товара

Находим после {$product->body}:



        {if $product->variants|count > 0}
        ...
        {else}
            Нет в наличии
        {/if}


заменяем на


       {if $product->variants|count > 0}        
        <form class="variants" action="/cart">
            <table>
               {*$colors[] = $product->variant->name*}   
               {foreach $product->variants as $v}
               {*if !in_array($v->name,$colors)}
               {$colors[] = $v->name}
               {/if*}
                   {if $v@first} 
                   <tr class="big_price">
                    <td>Цена:</td>
                    <td>
                            <span class="price">
                            <span class="original_price">{$v->price|convert} </span> 
                            <span class="currency">{$currency->sign|escape}</span></span>  
                            {if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}
                    </td>
                   </tr>     
                   {/if}
               {/foreach}    
                   
        {if $product->colors|count > 1}
        <tr class="cvet"{if $product->variants|count<2} style="display:none;"{/if}>
            <td>Цвета:</td>
            <td>{*','|join:$v*}
                <select class="color_select">
                {foreach $product->colors as $k=>$v}{if !empty($v)}<option rel-size="">{$v}</option>{/if}{/foreach}  
                </select>
                
            </td>
        </tr>
        {/if}
        <tr class="pust"{if $product->variants|count<2} style="display:none;"{/if}>


        </tr>
        <tr class="razmer"{if $product->variants|count<2} style="display:none;"{/if}>
            <td>Размеры:</td>
            <td>
                <select class="size_select" name="variant">
                
                </select><div class="info">
                <div class="siz"></div>
                </div>
                <select class="size_data_select" style="display:none;">
                {foreach $product->variants as $v}
                    <option value="{$v->id}" price="{$v->price}" compare_price="{$v->compare_price}" color="{$v->name}">{$v->size}</option>
                {/foreach}  
                </select>
            </td>
        </tr>


            </table>


        <input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
        </form>
        <!-- Выбор варианта товара (The End) -->
        {else}
        <div class="big_price reds">
              <span class="price"><span class="original_price">Нет в наличии</span></span>  
        </div>
        Нет в наличии
        {/if}
        
        <script>
        {literal}
        function changeColor(coel){
            var color = coel.val();
            var size_sel = coel.parent().parent().parent().find('.size_select');
            var size_datsel = coel.parent().parent().parent().find('.size_data_select');
            size_sel.html('');
            size_datsel.find('option').each(function() {
                    if($(this).attr('color') == color) {   
                        $(this).clone().appendTo(size_sel);
                    }
            });
            size_sel.find('option:first').attr('selected', 'selected');
            size_sel.val(size_sel.find('option:first').val());
            
            changeSize(size_sel);
        
        }
        function changeSize(el){
            option = el.find("option:selected");
            
            el.parent().parent().parent().find('.compare_price').text(option.attr('compare_price'));   
            el.parent().parent().parent().find('.original_price').text(option.attr('price'));   
        }
        function initAll(initel){
            var color = initel.parent().parent().parent().find('.color_select').val();
            var size_sel = initel.siblings('.size_select');
            initel.find('option').each(function() {
                if(color) {
                    if($(this).attr('color') == color) {   
                        $(this).clone().appendTo(size_sel);
                    }
                }
                else
                {
                    $(this).clone().appendTo(size_sel);
                } 
                
            });
            size_sel.find('option:first').attr('selected', 'selected');
        }
        
        $(function() {
            $('.color_select').change(function(){ changeColor($(this)); });
            $('.size_select').change(function(){ changeSize($(this)); });
            $('.size_data_select').each(function() {
                initAll($(this));   
            });
            //changeColor();
        
            // Раскраска строк характеристик
            $(".features li:even").addClass('even');
        
            // Зум картинок
            $("a.zoom").fancybox({ 'hideOnContentClick' : true });
        
          //changeColor();
        });
        {/literal}
        </script>

Аналогично проделываем для списка товаров:



{if $product->variants|count > 0}        
        <form class="variants" action="/cart">
            <table>
               {*$colors[] = $product->variant->name*}   
               {foreach $product->variants as $v}
               {*if !in_array($v->name,$colors)}
               {$colors[] = $v->name}
               {/if*}
                   {if $v@first} 
                   <tr class="big_price">
                    <td>Цена:</td>
                    <td>
                            <span class="price">
                            <span class="original_price">{$v->price|convert} </span> 
                            <span class="currency">{$currency->sign|escape}</span></span>  
                            {if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}
                    </td>
                   </tr>     
                   {/if}
               {/foreach}    
                   
        {if $product->colors|count > 1}
        <tr class="cvet"{if $product->variants|count<2} style="display:none;"{/if}>
            <td>Цвета:</td>
            <td>{*','|join:$v*}
                <select class="color_select">
                {foreach $product->colors as $k=>$v}{if !empty($v)}<option rel-size="">{$v}</option>{/if}{/foreach}  
                </select>
                
            </td>
        </tr>
        {/if}
        <tr class="pust"{if $product->variants|count<2} style="display:none;"{/if}>


        </tr>
        <tr class="razmer"{if $product->variants|count<2} style="display:none;"{/if}>
            <td>Размеры:</td>
            <td>
                <select class="size_select" name="variant">
                
                </select><div class="info">
                <div class="siz"></div>
                </div>
                <select class="size_data_select" style="display:none;">
                {foreach $product->variants as $v}
                    <option value="{$v->id}" price="{$v->price}" compare_price="{$v->compare_price}" color="{$v->name}">{$v->size}</option>
                {/foreach}  
                </select>
            </td>
        </tr>


            </table>


        <input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
        </form>
        <!-- Выбор варианта товара (The End) -->
        {else}
        <div class="big_price reds">
              <span class="price"><span class="original_price">Нет в наличии</span></span>  
        </div>
        Нет в наличии
        {/if}    


        скрипт в конец кода        



        <script>
        {literal}
        function changeColor(coel){
            var color = coel.val();
            var size_sel = coel.parent().parent().parent().find('.size_select');
            var size_datsel = coel.parent().parent().parent().find('.size_data_select');
            size_sel.html('');
            size_datsel.find('option').each(function() {
                    if($(this).attr('color') == color) {   
                        $(this).clone().appendTo(size_sel);
                    }
            });
            size_sel.find('option:first').attr('selected', 'selected');
            size_sel.val(size_sel.find('option:first').val());
            
            changeSize(size_sel);


        }
        function changeSize(el){
            option = el.find("option:selected");
            
            el.parent().parent().parent().find('.compare_price').text(option.attr('compare_price'));   
            el.parent().parent().parent().find('.original_price').text(option.attr('price'));   
        }
        function initAll(initel){
            var color = initel.parent().parent().parent().find('.color_select').val();
            var size_sel = initel.siblings('.size_select');
            initel.find('option').each(function() {
                if(color) {
                    if($(this).attr('color') == color) {   
                        $(this).clone().appendTo(size_sel);
                    }
                }
                else
                {
                    $(this).clone().appendTo(size_sel);
                } 
                
            });
            size_sel.find('option:first').attr('selected', 'selected');
        }
        $(function() {
            $('.color_select').change(function(){ changeColor($(this)); });
            $('.size_select').change(function(){ changeSize($(this)); });
            $('.size_data_select').each(function() {
                initAll($(this));   
            });
            //changeColor();
        });
        {/literal}
        </script>    


Теперь есть вывод в списке товаров и в карточке товара но в корзине не видны варианты

2 // design/default(или шаблон)/html/cart.tpl Вывод в корзине добавим 


{$purchase->variant->size|escape}
    {* Название товара *}
    <td class="name">
        <a href="products/{$purchase->product->url}">{$purchase->product->name|escape}</a>
        {$purchase->variant->name|escape} {$purchase->variant->size|escape}            
    </td>

<!-- /Второй этап -->

Ссылка на сообщение
Поделиться на другие сайты
  • 8 месяцев спустя...

чуток разобрался с jQuery

function changeColor(coel){
    var color = coel.val();
    var size_sel = coel.parent().parent().parent().find('.size_select');
    var size_datsel = coel.parent().parent().parent().find('.size_data_select');
    size_sel.html('');
    size_datsel.find('option').each(function() {
            if($(this).attr('color') == color) {   
                $(this).clone().appendTo(size_sel);
            }
    });
    size_sel.find('option:first').attr('selected', 'selected');
    size_sel.val(size_sel.find('option:first').val());
    
    changeSize(size_sel);

}
function changeSize(el){
    option = el.find("option:selected");
    
    el.parent().parent().parent().find('.compare_price').text(option.attr('compare_price'));   
    el.parent().parent().parent().find('.original_price').text(option.attr('price'));   
}
function initAll(initel){
    var color = initel.parent().parent().parent().find('.color_select').val();
    var size_sel = initel.siblings('.size_select');
    initel.find('option').each(function() {
        if(color) {
            if($(this).attr('color') == color) {   
                $(this).clone().appendTo(size_sel);
            }
        }
        else
        {
            $(this).clone().appendTo(size_sel);
        } 
          
    });
    size_sel.find('option:first').attr('selected', 'selected');
}
$(function() {
    $('.color_select').change(function(){ changeColor($(this)); });
    $('.size_select').change(function(){ changeSize($(this)); });
    $('.size_data_select').each(function() {
        initAll($(this));   
    });
    //changeColor();
});
Ссылка на сообщение
Поделиться на другие сайты
  • 2 недели спустя...

Кто поможет установить мне данный код и сделать чтобы он работал на моём сайте за 500 рублей?

Система управления Simpla 2, шаблон не дефолтный.

Устанавливал сам данный код, но второй выпадающий список пустой получается.

Кто поможет пишите на mustang165@yandex.ru Спасибо.

Ссылка на сообщение
Поделиться на другие сайты

kosjak1976 могу и я к вам обратиться (предложение цены за вами)? У меня работает данное решение, но мне надо дописать условие при котором бы второе свойство варианта "размер" не выводилось если оно пустое.

Ссылка на сообщение
Поделиться на другие сайты

А как сделать импорт товаров?
 
В simpla/ajax/export.php
 
Добавил в 17 строку,

'size'=>      'Размер',

и добавил строку 129,

$v['size']      = $variant->size;

И экспорт хорошо работает.

 

А вот в файл simpla/ajax/import.php добавил строку

'size'=>      array('size', 'Размер'),

Но импорт не работает. Добавляет всё как раньше, а столбец "Размер" просто игнорирует.

 

Подскажите, что нужно дописать в файл simpla/ajax/import.php

Ссылка на сообщение
Поделиться на другие сайты
  • 2 месяца спустя...

Спасибо! Только при изменении цены нолики появляются с точкой. Когда выбираешь и меняешь объем. Есть идеи как исправить?

Изменено пользователем Insane18
Ссылка на сообщение
Поделиться на другие сайты

А есть еще у кого идеи как заставить это работать внутри категории? Не отображается список вариантов...

Готов оплатить эту работу по сходной цене =)

Изменено пользователем Insane18
Ссылка на сообщение
Поделиться на другие сайты

А как заменить SELECT на RADIO BUTTON?

Есть готовое, бесплатное решение "Варианты товара выпадающим списком":

http://simpla-addons.org/blog/modules/2xx-varianty-tovara-vypadayuschim-spiskom

Ссылка на сообщение
Поделиться на другие сайты

Есть готовое, бесплатное решение "Варианты товара выпадающим списком":

http://simpla-addons.org/blog/modules/2xx-varianty-tovara-vypadayuschim-spiskom

Я брал из стандартного дизайна, крутил, вертел radio но че-то не ставится толком...а стоит убрал foreach в select так дизайн летит(

Ссылка на сообщение
Поделиться на другие сайты

Я брал из стандартного дизайна, крутил, вертел radio но че-то не ставится толком...а стоит убрал foreach в select так дизайн летит(

Я совершенно ничего не понял.
Ссылка на сообщение
Поделиться на другие сайты

Я совершенно ничего не понял.

Чтобы заменить select на radio, брал из стандартного шаблона код. Менял, но толком не получилось, где-то ошибку делаю.

А стоит убрать foreach из этой темы что писать Slayer, то сыпется дизайн.

Вообщем обратно замениться на RADIO не получается(((

Ссылка на сообщение
Поделиться на другие сайты

Вам наоборот нужно, а я то подумал что радио на селект нужно заменить.

Хах, те не, зачем менять готовый select на select))

 

Сейчас SELECT вот так:

<select name="variant" class="color_select">
  {foreach $product->colors as $k=>$v}
    {if !empty($v)}
	<option rel-size="">{$v}</option>
    {/if}
  {/foreach}  
</select> 

 

Делаю такой RADIO (перепробовал много вариантов и ничего не работает)

{foreach $product->colors as $k=>$v}
	{if !empty($v)}
		{$v}<input name="variant" type="radio" {if $product->color->$v}checked{/if}>
	{/if}
{/foreach}

Прошу не судить, а подправить на верный путь)

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...