I am having trouble while creating a module that add a text between swatch configure and swatch attribute name load by default, I want to add it only on a specific swatch if I have more than one. And what if it an input. How Can I do that?
For exmaple: we have
[attribute name] [attribute configure]
I want to add a text between them
[attribute name] [text] [attribute configure]
How can I do this, thanks
-
Do you want to load it by default OR on On click swatches? And also please add screen here what exactly you expect?Ravi Soni– Ravi Soni2019-07-02 06:38:46 +00:00Commented Jul 2, 2019 at 6:38
-
I want to load it by default, but really do not know how to do itsekiro– sekiro2019-07-02 06:39:34 +00:00Commented Jul 2, 2019 at 6:39
-
Can you please add screenshot what do you want OR on which page?Ravi Soni– Ravi Soni2019-07-02 06:55:58 +00:00Commented Jul 2, 2019 at 6:55
Add a comment
|
1 Answer
You can add below code in swatch-renderer.js
Override this file in your custom theme and add custom code in below funciton.
/vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js
_init: function () {
if (_.isEmpty(this.options.jsonConfig.images)) {
this.options.useAjax = true;
// creates debounced variant of _LoadProductMedia()
// to use it in events handlers instead of _LoadProductMedia()
this._debouncedLoadProductMedia = _.debounce(this._LoadProductMedia.bind(this), 500);
}
if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
// store unsorted attributes
this.options.jsonConfig.mappedAttributes = _.clone(this.options.jsonConfig.attributes);
this._sortAttributes();
this._RenderControls();
this._setPreSelectedGallery();
$(this.element).trigger('swatch.initialized');
} else {
console.log('SwatchRenderer: No input data received');
}
this.options.tierPriceTemplate = $(this.options.tierPriceTemplateSelector).html();
if ($(".swatch-attribute.color")[0]){
$('.swatch-attribute.color').after('<span>Some text</span>');
}
},
Here 'Some text'
Now color is your specific swatch code. "You can add your attribute code here"
Please check this.
-
and what if in a product there are many swatches how can I choose a specific swatch attribute and add some text to it. I can understand your code however, it work with every swatch attribute, but not with an individual swatch attributesekiro– sekiro2019-07-02 08:00:55 +00:00Commented Jul 2, 2019 at 8:00
-
Check now I have updated my codeRavi Soni– Ravi Soni2019-07-02 08:25:13 +00:00Commented Jul 2, 2019 at 8:25
-
Oh thanks, I want to ask what is number 0 mean in this line
if ($(".swatch-attribute.color")[0])sekiro– sekiro2019-07-02 08:28:08 +00:00Commented Jul 2, 2019 at 8:28 -
I add your code to my module however, it not display next to swatches attribute name it display under themsekiro– sekiro2019-07-02 08:45:06 +00:00Commented Jul 2, 2019 at 8:45
-
Oh. here I come to solution with your code.
$('.swatch-attribute.color > .swatch-attribute-label').after('<span>Some text</span>')it will place next to swatches attribute name. Thanks for your helpsekiro– sekiro2019-07-02 08:51:02 +00:00Commented Jul 2, 2019 at 8:51