[minishop2-combo-colors] - вариация поля цвета

Краткая инструкция как добавить на страницу продукта поле с выбором цвета.




данное поле модификация родного поля опций github.com/bezumkin/miniShop2/blob/master/assets/components/minishop2/js/mgr/misc/ms2.combo.js#L236-L283 с небольшими изменениями.

необходимые действия:
добавляем поле с помощью плагина
мапа
array(
    'fields'    => array(
        'colors' => null
    ),
    'fieldMeta' => array(
        'colors' => array(
            'dbtype'  => 'text',
            'phptype' => 'json',
            'null'    => true,
        )
    )
);
указываем xtype поля minishop2-combo-colors
регистрируем поле в msproductdata.js
miniShop2.combo.Colors = function (config) {
    config = config || {};
    
    var html = ''
    +'<span style="background:#{value};width: 45px;height: 15px;display: inline-block;border-radius: 2px;"></span>'
    +'<span> {value}</span>';
    
    Ext.applyIf(config, {
        xtype: 'superboxselect',
        allowBlank: true,
        msgTarget: 'under',
        allowAddNewData: true,
        addNewDataOnBlur: true,
        pinList: false,
        resizable: true,
        name: config.name || 'tags',
        anchor: '100%',
        minChars: 1,
        store: new Ext.data.JsonStore({
            id: (config.name || 'tags') + '-store',
            root: 'results',
            autoLoad: false,
            autoSave: false,
            totalProperty: 'total',
            fields: ['value'],
            url: miniShop2.config['connector_url'],
            baseParams: {
                action: 'mgr/product/getoptions',
                key: config.name
            }
        }),
        mode: 'remote',
        displayField: 'value',
        valueField: 'value',
        triggerAction: 'all',
        extraItemCls: 'x-tag',
        expandBtnCls: 'x-form-trigger',
        clearBtnCls: 'x-form-trigger',
        
        displayField: config.displayField || html,
	displayFieldTpl: config.displayFieldTpl || html,
        tpl: new Ext.XTemplate(''
        +'<tpl for="."><div class="x-combo-list-item">'
        + html
        +'</div></tpl>',{
            compiled: true
        })
        
    });
    config.name += '[]';

    Ext.apply(config, {
        listeners: {
            newitem: function(bs, v) {
                bs.addNewItem({value: v});
            },
        },
    });

    miniShop2.combo.Colors.superclass.constructor.call(this, config);
};
Ext.extend(miniShop2.combo.Colors, Ext.ux.form.SuperBoxSelect);
Ext.reg('minishop2-combo-colors', miniShop2.combo.Colors);

miniShop2.plugin.colors = {
    getFields: function(config) {
        return {
            colors: {xtype: 'minishop2-combo-colors', description: '<b>[[+colors]]</b>'}
        }
    }
};

вывод на странице продукта
вызов
{'!msOptions'|snippet:[
'options' => 'colors',
'tpl' => 'tpl.msOptions.color'
]}
чанк tpl.msOptions.color
{foreach $options as $name => $values}
    <div class="form-group">
        <label class="col-md-2 control-label" for="option_{$name}">{('ms2_product_' ~ $name) | lexicon}:</label>
        <div class="col-md-10">
            {foreach $values as $value index=$index}
				<div class="radio-inline pull-left">
					<label class="input-parent">
						<input type="radio" name="options[{$name}]" value="{$value}" {$index ? '' : 'checked'}>
						<img alt="" title="{$value}" class="img-rounded" style="background-color:#{$value};width:25px;height:25px;">
					</label>
				</div>
			{/foreach}
        </div>
    </div>
{/foreach}
Володя
27 декабря 2017, 15:21
13
903
+17

Комментарии: 19

antonlynin
28 декабря 2017, 09:24
0
Спасибо большое, все отлично добавляется!
Но как теперь это вывести в карточке и в фильтре не пойму.
Не сочтите за наглость, хоть направьте, куда копать.
Спасибо!
    Володя
    28 декабря 2017, 10:27
    0
    Но как теперь это вывести в карточке и в фильтре не пойму.
    добавил вывод на странице продукта
Володя
28 декабря 2017, 10:27
0
в фильтре не пойму.
в фильтре примерно так же как в чанке tpl.msOptions.color
antonlynin
28 декабря 2017, 10:33
0
{'!msOptions'|snippet:[
'options' => 'colors',
'tpl' => 'tpl.msOptions.color'
]}
Это прям так и писать в чанк?
Белый экран вместо карточки
    Володя
    28 декабря 2017, 10:39
    +1
    Это прям так и писать в чанк?
    это синтаксис феном. В обычном виде будет как
    [[!msOptions?
    &options=`colors`
    &tpl=`tpl.msOptions.color`
    ]]
antonlynin
28 декабря 2017, 10:38
0
А вызов у меня правильно добавлено?
И вот сдесь прописываем нужный шаблон который будет похож на tpl.msOptions.color?
&tplFilter.outer.ms|colors=`mFilter2.filter.select`
[[!mFilter2?
                    &parents=`[[*id]]`
                    &element=`msProducts`
                    &class=`msProduct`
                    &tpl=`msProducts.row`
                    &setMeta=`1`
                    &filters=`
                    ms|colors:colors,
                    msoption|size:size
                    `
                    &aliases=`
                            ms|price==price,
                            resource|parent==parent,
                        `
                    &suggestionsRadio=`msoption|size, ms|colors`
                    &sort=`ms|price:desc`
                    &tplFilter.outer.default=`mFilter2.filter.outer`
                    &tplFilter.row.default=``
                    &tplOuter=`mFilter2.outer`
                    &tplFilter.outer.msoption|size=`mFilter2.filter.select`
					&tplFilter.row.msoption|size=`mFilter2.filter.option`
					&tplFilter.outer.ms|colors=`mFilter2.filter.select`
					&tplFilter.row.ms|colors=`mFilter2.filter.option`
                    &limit=`8`
                	&pageLimit=`4`
                	&tplPagePrevEmpty=`@INLINE <li class="disabled" style="opacity: 0.6;"><span><i class="fa fa-angle-left"></i></span></li>`
                	&tplPagePrev=`@INLINE <li class="control"><a href="[[+href]]"><i class="fa fa-angle-left"></i></a></li>`
                	&tplPageNextEmpty=`@INLINE <li class="disabled" style="opacity: 0.6;"><span><i class="fa fa-angle-right"></i></span></li>`
                	&tplPageNext=`@INLINE <li class="control"><a href="[[+href]]"><i class="fa fa-angle-right"></i></a></li>`
                	&tplPageFirst=`@INLINE <li class="control" style="display:none;"><a href="[[+href]]">[[%pdopage_first]]</a></li>`
                	&tplPageLast=`@INLINE <li class="control" style="display:none;"><a href="[[+href]]">[[%pdopage_last]]</a></li>`
                	&tplPageFirstEmpty=`@INLINE <li class="control" style="display:none;"><span>[[%pdopage_first]]</span></li>`
                	&tplPageLastEmpty=`@INLINE <li class="control" style="display:none;"><span>[[%pdopage_last]]</span></li>`
                ]]
    Володя
    28 декабря 2017, 10:41
    +1
    для опции ms|colors чанки
    &tplFilter.outer.ms|colors=`mFilter2.filter.select`
    &tplFilter.row.ms|colors=`mFilter2.filter.option`
antonlynin
28 декабря 2017, 10:40
0
Вы уж простите, только недавно начал погружаться.
    Володя
    28 декабря 2017, 10:41
    +1
    погружайтесь)
    Володя
    28 декабря 2017, 10:52
    0
    выведите опцию ms|colors c дефотными чанками
    &tplFilter.outer.ms|colors=`tpl.mFilter2.filter.outer`
    &tplFilter.row.ms|colors=`tpl.mFilter2.filter.checkbox`
    вы получите список значений цвета.
    затем скопируйте чанк tpl.mFilter2.filter.checkbox под другим названием и укажите в вызове его.
    вот его уже и подгоняйте по типу tpl.msOptions.color
antonlynin
28 декабря 2017, 11:06
0
Дак а мне же нужен не чекбокс, а селект
antonlynin
28 декабря 2017, 11:12
0
Получается нужно кастомизировать?
&tplFilter.outer.ms|colors=`mFilter2.filter.select`
&tplFilter.row.ms|colors=`mFilter2.filter.option`
    Володя
    28 декабря 2017, 11:15
    0
    естественно, действия те же… только tplFilter.row.ms|colors=`mFilter2.filter.option` уже будет другой
antonlynin
28 декабря 2017, 11:57
0
Не что то не получается( Может вы поможете, ну или за небольшое денежное вознаграждение.
Просто сроки поджимают, ну не идет в голову…
eflit
25 января 2018, 01:03
0
Здравствуйте, подскажите выдает следующую ошибку при добавлении товара
[2018-01-24 22:00:53] (ERROR @ /home/www/core/xpdo/om/xpdoobject.class.php : 240) Error 42S22 executing statement: 
Array
(
    [0] => 42S22
    [1] => 1054
    [2] => Unknown column 'msProductData.colors' in 'field list'
)
    Володя
    25 января 2018, 10:07
    0
    привет.
    Так поле в БД забыли добавить.
    Выполните
    $manager = $modx->getManager();
    $manager->addField('msProductData', 'colors');
      eflit
      25 января 2018, 10:50
      0
      Спасибо поле в базе создал но почему то оно не появилось а админке ошибок не каких нет