Jump to content
Официальный форум поддержки Simpla

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

Slayer
 Share Followers 5

Recommended Posts

Slayer

Slayer

Posted
Posted

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

 

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

 

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

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}
Link to post
Share on other sites
Slayer

Slayer

Posted
  • Author
Posted

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

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

Link to post
Share on other sites
  • 3 weeks later...
cernos

cernos

Posted
Posted

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

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

Link to post
Share on other sites
cernos

cernos

Posted
Posted

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

Link to post
Share on other sites
Slayer

Slayer

Posted
  • Author
Posted

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

Link to post
Share on other sites
Slayer

Slayer

Posted
  • Author
Posted
<!-- Первый этап -->

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>

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

Link to post
Share on other sites
  • 8 months later...
Marketus

Marketus

Posted
Posted

чуток разобрался с 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();
});
Link to post
Share on other sites
  • 2 weeks later...
Rubin

Rubin

Posted
Posted

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

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

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

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

Link to post
Share on other sites
pavnik

pavnik

Posted
Posted

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

Link to post
Share on other sites
Rubin

Rubin

Posted
Posted

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

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

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

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

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

 

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

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

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

 

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

Link to post
Share on other sites
  • 2 months later...
Insane18

Insane18

Posted
Posted (edited)

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

Edited by Insane18
Link to post
Share on other sites
Insane18

Insane18

Posted
Posted (edited)

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

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

Edited by Insane18
Link to post
Share on other sites
n1c

n1c

Posted
Posted

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

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

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

Link to post
Share on other sites
Noxter

Noxter

Posted
Posted

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

Я совершенно ничего не понял.
Link to post
Share on other sites
n1c

n1c

Posted
Posted

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

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

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

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

Link to post
Share on other sites
n1c

n1c

Posted
Posted

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

Хах, те не, зачем менять готовый 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}

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

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...
×
 Share
Followers 5
Go to topic listing
×
×
  • Create New...