К содержанию

[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
modx.pro
5 148
Поблагодарить автора Отправить деньги
Реклама

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

antonlynin
antonlynin Старожил
28 декабря 2017, 09:24
Спасибо большое, все отлично добавляется!
Но как теперь это вывести в карточке и в фильтре не пойму.
Не сочтите за наглость, хоть направьте, куда копать.
Спасибо!
    Володя
    Володя Эксперт
    28 декабря 2017, 10:27
    Но как теперь это вывести в карточке и в фильтре не пойму.
    добавил вывод на странице продукта
    Володя
    Володя Эксперт
    28 декабря 2017, 10:27
    в фильтре не пойму.
    в фильтре примерно так же как в чанке tpl.msOptions.color
      antonlynin
      antonlynin Старожил
      28 декабря 2017, 10:33
      {'!msOptions'|snippet:[
      'options' => 'colors',
      'tpl' => 'tpl.msOptions.color'
      ]}
      Это прям так и писать в чанк?
      Белый экран вместо карточки
        Володя
        Володя Эксперт
        28 декабря 2017, 10:39
        Это прям так и писать в чанк?
        это синтаксис феном. В обычном виде будет как
        [[!msOptions?
        &options=`colors`
        &tpl=`tpl.msOptions.color`
        ]]
        antonlynin
        antonlynin Старожил
        28 декабря 2017, 10:38
        А вызов у меня правильно добавлено?
        И вот сдесь прописываем нужный шаблон который будет похож на 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
          для опции ms|colors чанки
          &tplFilter.outer.ms|colors=`mFilter2.filter.select`
          &tplFilter.row.ms|colors=`mFilter2.filter.option`
          antonlynin
          antonlynin Старожил
          28 декабря 2017, 10:40
          Вы уж простите, только недавно начал погружаться.
            Володя
            Володя Эксперт
            28 декабря 2017, 10:41
            погружайтесь)
              Володя
              Володя Эксперт
              28 декабря 2017, 10:52
              выведите опцию 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
              antonlynin Старожил
              28 декабря 2017, 11:06
              Дак а мне же нужен не чекбокс, а селект
                Володя
                Володя Эксперт
                28 декабря 2017, 11:09
                дык я откуда знаю что нужно?)
                по селекту например гуглится вот codepen.io/DanWebb/pen/zxxQwJ
                antonlynin
                antonlynin Старожил
                28 декабря 2017, 11:12
                Получается нужно кастомизировать?
                &tplFilter.outer.ms|colors=`mFilter2.filter.select`
                &tplFilter.row.ms|colors=`mFilter2.filter.option`
                  Володя
                  Володя Эксперт
                  28 декабря 2017, 11:15
                  естественно, действия те же… только tplFilter.row.ms|colors=`mFilter2.filter.option` уже будет другой
                  antonlynin
                  antonlynin Старожил
                  28 декабря 2017, 11:57
                  Не что то не получается( Может вы поможете, ну или за небольшое денежное вознаграждение.
                  Просто сроки поджимают, ну не идет в голову…
                  eflit
                  eflit Старожил
                  25 января 2018, 01:03
                  Здравствуйте, подскажите выдает следующую ошибку при добавлении товара
                  [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
                    привет.
                    Так поле в БД забыли добавить.
                    Выполните
                    $manager = $modx->getManager();
                    $manager->addField('msProductData', 'colors');
                      eflit
                      eflit Старожил
                      25 января 2018, 10:50
                      Спасибо поле в базе создал но почему то оно не появилось а админке ошибок не каких нет
                    Александр
                    Александр Старожил
                    10 марта 2019, 16:47
                    Подскажите пожалуйста что я делаю не так
                    я создал все необходимые файлы в core/components/minishop2/plugins/colors

                    содержимое index.php
                    <?php
                    return array(
                        'map' => array(
                            'msProductData' => require_once 'msproductdata.inc.php',
                        ),
                        'manager' => array(
                            'msProductData' => MODX_ASSETS_URL . 'components/minishop2/plugins/colors/msproductdata.js',
                        ),
                    );
                    содержимое msproductdata.inc.php
                    <?php
                    return array(
                        'fields'    => array(
                            'colors' => null
                        ),
                        'fieldMeta' => array(
                            'colors' => array(
                                'dbtype'  => 'text',
                                'phptype' => 'json',
                                'null'    => true,
                            )
                        )
                    );
                    содержимое 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>'}
                            }
                        }
                    };
                    в таблице modx_ms2_products создал поле colors
                    в системных настройках в ms2_product_extra_fields дописал через запятую colors
                    В словари добавил и описание и заголовки, но у товара это поле так и не появилось
                    В «журнале ошибок» вот на что ругается, но я так понял что это не относиться к плагину
                    [2019-03-10 16:41:34] (ERROR in modTemplateVar::renderInput @ /home/a/acberebx/адрес/public_html/core/model/modx/modtemplatevar.class.php : 396) Old modTemplateVar getRender inputmethod is deprecated since version 2.2.0. 
                    [2019-03-10 16:41:34] (ERROR in modProcessor::run @ /home/a/acberebx/адрес/public_html/core/model/modx/modprocessor.class.php : 177) Flat file processor support is deprecated since version 2.7.0. 
                    [2019-03-10 16:41:38] (ERROR in modProcessor::run @ /home/a/acberebx/адрес/public_html/core/model/modx/modprocessor.class.php : 177) Flat file processor support is deprecated since version 2.7.0. 
                    [2019-03-10 16:41:41] (ERROR in modProcessor::run @ /home/a/acberebx/адрес/public_html/core/model/modx/modprocessor.class.php : 177) Flat file processor support is deprecated since version 2.7.0. 
                    [2019-03-10 16:41:47] (ERROR in modProcessor::run @ /home/a/acberebx/адрес/public_html/core/model/modx/modprocessor.class.php : 177) Flat file processor support is deprecated since version 2.7.0.
                      Володя
                      Володя Эксперт
                      10 марта 2019, 18:27
                      Добрый вечер. Как минимум файл с js лежит не там. Посмотрите внимательнее какой путь к нему.
                        Александр
                        Александр Старожил
                        10 марта 2019, 18:40
                        И правда, что то не углядел, спасибо, перенес в assets/components/minishop2/plugins/colors
                        но к сожалению это не помогло, видимо что то ещё я не так сделал)
                          Александр
                          Александр Старожил
                          12 марта 2019, 12:35
                          Все заработало после того как убрал путь до inedx.php в системных настройках ms2_plugins, сам не знаю за чем его туда добавил, видимо решил последовать примеру плагина msplColor который описывает Василий, при установке этого плагина в эту строку записывается путь до index.php, ну да ладно, главное все работает, спасибо Владимир за плагин
                        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                        23