I want to pass product id in a rel tag in the swatch-option class which is on the listing page for swatches.

I am aware it has to be done via swatch-renderer.js but not able to do the code.

console.log($.widget.options);
                id = this.id;
                type = parseInt(optionConfig[id].type, 10);
                value = optionConfig[id].hasOwnProperty('value') ? optionConfig[id].value : '';
                thumb = optionConfig[id].hasOwnProperty('thumb') ? optionConfig[id].thumb : '';
                label = this.label ? this.label : '';
                attr =
                    ' id="' + controlId + '-item-' + id + '"' +
                    ' aria-checked="false"' +
                    ' aria-describedby="' + controlId + '"' +
                    ' tabindex="0"' +
                    ' option-type="' + type + '"' +
                    ' option-id="' + id + '"' +
                    ' option-label="' + label + '"' +
                    ' aria-label="' + label + '"' +
                    ' option-tooltip-thumb="' + thumb + '"' +
                    ' option-tooltip-value="' + value + '"' +
                    ' role="option"';
up vote 1 down vote accepted

You will have to pass $widget in the Renderswatch option first like -

_RenderSwatchOptions: function (config, controlId, $widget) {

Then in the _RenderControls function update the swatch option function call with 3 arguements like -

options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),

After this code will work -

                var relVal = '';
                $.each($widget.options.jsonConfig.attributes, function () {
                    var item = this;
                    if(item.id == config.id) {
                        $.each(item.options,function(){
                           // var option = this;
                            if(id == this.id) {
                                $.each(this.products,function (index, value) {
                                    relVal = value;
                                });
                             }

                        });
                    }
                });
                attr =
                ' id="' + controlId + '-item-' + id + '"' +
                ' aria-checked="false"' +
                ' aria-describedby="' + controlId + '"' +
                ' tabindex="0"' +
                ' option-type="' + type + '"' +
                ' option-id="' + id + '"' +
                ' option-label="' + label + '"' +
                ' aria-label="' + label + '"' +
                ' option-tooltip-thumb="' + thumb + '"' +
                ' option-tooltip-value="' + value + '"' +
                ' rel="' + relVal + '"' +
                ' role="option"';

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.