[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

4 203

+17

Поблагодарить автора Отправить деньги

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

antonlynin

28 декабря 2017, 09:24

Спасибо большое, все отлично добавляется!
Но как теперь это вывести в карточке и в фильтре не пойму.
Не сочтите за наглость, хоть направьте, куда копать.
Спасибо!

Володя

28 декабря 2017, 10:27

Но как теперь это вывести в карточке и в фильтре не пойму.

добавил вывод на странице продукта

Володя

28 декабря 2017, 10:27

в фильтре не пойму.

в фильтре примерно так же как в чанке tpl.msOptions.color

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

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

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

28 декабря 2017, 11:06

Дак а мне же нужен не чекбокс, а селект

Володя

28 декабря 2017, 11:09

дык я откуда знаю что нужно?)
по селекту например гуглится вот codepen.io/DanWebb/pen/zxxQwJ

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

28 декабря 2017, 11:57

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

Володя

28 декабря 2017, 12:22

В скайп напишите

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

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, ну да ладно, главное все работает, спасибо Владимир за плагин

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