2

I am new to this community of professional developers. I am trying to customize the Magento color/custom option swatches for multiple select options.

Many of developers create this quite good features for Magento that only work for dropdowns perfectly and i am enjoying this functions for dropdowns easily where my swatches could replace the dropdowns attribute.

But i want to use this features for multiple select custom options where customer can select different options in same custom option head for example... if we are selling stickers and under any price package of 10 stickers customer can select multiple sticker designs from 50 listed stickers (pictures used by using swatches code).

To achieve this i tried to change the custom option from admin to multiple select but useless, only one image could be selected at a time when clicked on another first one unselected. I have added the code below for two main files that used for dropdown features.

< ?php $swatches = $this->getSwatches(); if ($this->isSwatchesEnabled() && !empty($swatches) ) : ?> __('Loading...'); ?> if (typeof Olegnax == 'undefined') { Olegnax = {}; } Olegnax.colorSwatches = { hideDropdowns: helper('olegnaxcolorswatches')->getCfg('main/hide_dropdowns')?>, replaceImage: helper('olegnaxcolorswatches')->getCfg('main/replace_image')?>, attributeTitle: helper('olegnaxcolorswatches')->getCfg('main/attribute_title')?>, swatches: jsonEncode( $this->getSwatches() ); ?>, swatchKeys: jsonEncode( $this->getSwatchKeys() ); ?>, swatchDir: 'wysiwyg/olegnax/colorswatches/', imagesUrl: ' 'PRODUCT_ID')); ?>' };

        jQuery(function ($) {
            $('#product-options-wrapper dt').colorSwatches(Olegnax.colorSwatches);
        });

</script>
<!-- EOF: OLEGNAX COLORSWATCHES -->

isSwatchesEnabled() && !empty($swatches) ) : ?>

and coding for jquery javascript is below one: file name (jquery.colorswatches)

try {

    (function ($) {

        var methods = {
            init: function (options) {

                var opts = $.extend( {}, $.fn.colorSwatches.defaults, options );

                return this.each(function () {

                    var $this = $(this),
                        data = $this.data('colorswatches');

                    if (!data) {
                        $(this).data('colorswatches', {
                            target: $this,
                            options: opts
                        });

                        var label = $.trim($this.find('label').justText());
                        var select = $this.next().find('select');
                        if (select.length && $.inArray(label, opts.swatchKeys) > -1) {
                            createSwatches(opts, label, select);
                            if (select.hasClass('super-attribute-select')) {
                                select.on('change.colorswatches', function () {
                                    setTimeout(function () {
                                        recreateSwatches(opts, $(select)[0].nextSetting);
                                    }, 100);
                                });
                            }
                            if ( !opts.hideDropdowns ) {
                                select.on('change.colorswatches', function () {
                                    var data = $(this).data('swatch');
                                    if (data.swatchElement) {
                                        $(data.swatchElement).children().removeClass('current');
                                        $(data.swatchElement).children().eq($(this)[0].selectedIndex-1).addClass('current');
                                    }
                                    replaceImages(opts);
                                });
                            }
                        }
                    }
                });
            },
            destroy: function () {

                return this.each(function () {
                    var $this = $(this),
                        data = $this.data('colorswatches');

                    $(window).unbind('.colorswatches');
                    data.colorswatches.remove();
                    $this.removeData('colorswatches');

                });

            }
        };

        var findSwatch = function(key, value, swatches) {
            for (var i in swatches) {
                if (swatches[i].key == key && swatches[i].value == value)
                    return swatches[i];
            }
            return null;
        };

        var findProductId = function() {
            //check that all dropdowns has value
            var allSelected = true,
                $dropdowns = $('#product-options-wrapper select');
            $dropdowns.each(function(){
                if ( isNaN(parseInt($(this).val(), 10))) {
                    allSelected = false;
                }
            });
            if ( !allSelected ) return '';

            var attribute = $dropdowns.last().attr('id').replace(/[a-z]*/, ''),
                value = $dropdowns.last().val();
            options = spConfig['config']['attributes'][attribute]['options'];
            for (var i in options ) {
                if (options[i].id == value)
                    return options[i].products[0];
            }
            return '';
        };

        var createSwatches = function (opts, label, select) {

            var $swatchesContainer = $('').attr({'class': 'colorswatches-container'});
            select.parent().append($swatchesContainer);
            select.data('swatch', {
                swatchLabel: label,
                swatchElement: $swatchesContainer
            });

            if ( opts.hideDropdowns ) {
                select.css({position: 'absolute', top: '-9999px'});
            }

            $('option', select).each(function (i) {
                if ( !isNaN(parseInt($(this).attr('value'), 10))) {
                    var $swatchContainer = $('').attr({'class': 'colorswatch'});
                    var key = $(this).text();
                    if ($(this).attr('price')) key = $.trim(key.replace(/\+([^+]+)$/, ''));

                    var item = findSwatch(label, key, opts.swatches);
                    if (item) {
                        $swatchContainer.append( $('').attr({
                            src: opts.swatchDir + item.img,
                            alt: key,
                            title: key
                        }) );
                        if ( opts.attributeTitle ) {
                            $swatchContainer.append( $(''+key+'') );
                        }
                    } else {
                        $swatchContainer.append( $(''+key+'') );
                    }
                    if ( $(this).attr('selected') == 'selected' ) $swatchContainer.addClass('current');

                    $swatchContainer.on('click', function () {
                        $(select)[0].selectedIndex = i;
                        fireEvent($(select)[0], 'change');
                        $swatchesContainer.find('.colorswatch').removeClass('current');
                        $swatchContainer.addClass('current');
                        replaceImages(opts);
                        return false;
                    });
                    $swatchesContainer.append($swatchContainer);
                }
            });
        };

        var lastProductID = 0;
        var replaceImages = function(opts) {
            if ( typeof spConfig == 'undefined' || !opts.replaceImage ) return;

            var productID = findProductId();
            if ( !productID || lastProductID == productID) return;
            lastProductID = productID;

            var url = opts.imagesUrl.replace('PRODUCT_ID', productID);
            if ('https:' == document.location.protocol) {
                url = url.replace('http:', 'https:');
            }
            $('.colorswatches-loading').clone().prependTo('.product-img-box').show();
            $('.product-img-box').first().load(url);
        }

        var recreateSwatches = function (opts, select) {
            if (typeof select == 'undefined' || !select) {
                return;
            }

            var data = $(select).data('swatch');
            if (data.swatchElement) {
                $(data.swatchElement).remove();
                data.swatchElement = null;
            }

            if (!$(select).prop("disabled") )
                createSwatches(opts, data.swatchLabel, $(select));
            if (select.nextSetting)
                recreateSwatches(opts, select.nextSetting);
        };

        var fireEvent = function(element,event){
            if (document.createEventObject) {
                var evt = document.createEventObject();
                return element.fireEvent('on'+event,evt)
            } else {
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent(event, true, true );
                return !element.dispatchEvent(evt);
            }
        }

        $.fn.colorSwatches = function (method) {

            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method ' + method + ' does not supported by Olegnax colorswatches');
            }

        };

        $.fn.colorSwatches.defaults = {
            hideDropdowns: 1,
            replaceImage: 1,
            attributeTitle: 0,
            swatches: [],
            swatchKeys: []
        };

        $.fn.justText = function () {
            return $(this).clone()
                .children()
                .remove()
                .end()
                .text();
        }

    })(jQuery);

}
catch (e) {
    alert("Olegnax ColorSwatches error:" + e.message);
} 

here when i tried to change the dropdowns (option name) to Multiple then it still show swatches but one picture could only be selected at a time clicking other picture unselected the first one.

Can anyone recommend any amended code for to use for mutilple select options.

Thanks

closed as too broad by Marius May 26 '15 at 9:32

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • In my opinion, when you try to replace default dropdown with your own - you just need to replace renderer. It means that there will be only visual differences. And you don't need to fix any logic. If you need to fix some logic, most probably your problem doesn't refer to swatches. Reading your post - you want to create configurable product with multiple select. In my opinion if you have in product multiple select - it can not be configurable product. – zhartaunik May 11 '15 at 7:34
  • Thanks for your comments. My mistake for real question that i need custom options (multiple select) to use with swatches. Code is Olegnax Color Swatches that work fine for dropdown custom options (from product admin custom options), but when i select the option input type to multiple select it still select only one image at a time. Hope this helps to understand what i really means? – user26122 May 11 '15 at 15:30