[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, 18:21    Володя   G+  
11    291 +17

Комментарии (16)

  1. antonlynin 28 декабря 2017, 09:24 # 0
    Спасибо большое, все отлично добавляется!
    Но как теперь это вывести в карточке и в фильтре не пойму.
    Не сочтите за наглость, хоть направьте, куда копать.
    Спасибо!
    1. Володя 28 декабря 2017, 10:27 # 0
      Но как теперь это вывести в карточке и в фильтре не пойму.
      добавил вывод на странице продукта
    2. Володя 28 декабря 2017, 10:27 # 0
      в фильтре не пойму.
      в фильтре примерно так же как в чанке tpl.msOptions.color
      1. antonlynin 28 декабря 2017, 10:33 # 0
        {'!msOptions'|snippet:[
        'options' => 'colors',
        'tpl' => 'tpl.msOptions.color'
        ]}
        Это прям так и писать в чанк?
        Белый экран вместо карточки
        1. Володя 28 декабря 2017, 10:39 # +1
          Это прям так и писать в чанк?
          это синтаксис феном. В обычном виде будет как
          [[!msOptions?
          &options=`colors`
          &tpl=`tpl.msOptions.color`
          ]]
          
        2. 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>`
                          ]]
          1. Володя 28 декабря 2017, 10:41 # +1
            для опции ms|colors чанки
            &tplFilter.outer.ms|colors=`mFilter2.filter.select`
            &tplFilter.row.ms|colors=`mFilter2.filter.option`
          2. antonlynin 28 декабря 2017, 10:40 # 0
            Вы уж простите, только недавно начал погружаться.
            1. Володя 28 декабря 2017, 10:41 # +1
              погружайтесь)
              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
              2. antonlynin 28 декабря 2017, 11:06 # 0
                Дак а мне же нужен не чекбокс, а селект
                1. Володя 28 декабря 2017, 11:09 # 0
                  дык я откуда знаю что нужно?)
                  по селекту например гуглится вот codepen.io/DanWebb/pen/zxxQwJ
                2. antonlynin 28 декабря 2017, 11:12 # 0
                  Получается нужно кастомизировать?
                  &tplFilter.outer.ms|colors=`mFilter2.filter.select`
                  &tplFilter.row.ms|colors=`mFilter2.filter.option`
                  1. Володя 28 декабря 2017, 11:15 # 0
                    естественно, действия те же… только tplFilter.row.ms|colors=`mFilter2.filter.option` уже будет другой
                  2. antonlynin 28 декабря 2017, 11:57 # 0
                    Не что то не получается( Может вы поможете, ну или за небольшое денежное вознаграждение.
                    Просто сроки поджимают, ну не идет в голову…
                    1. Володя 28 декабря 2017, 12:22 # 0
                      В скайп напишите
                    Вы должны авторизоваться, чтобы оставлять комментарии.