0

I'd like to add text below each attribute on the product options form section of the product page.

So, for example, something like:

Size
[s][m]
Appended text here

I can tell this is directly related to /module-swatches/view/frontend/templates/product/view/renderer.phtml, but the stuff I'd like to edit is generated by this js:

<script type="text/x-magento-init">
    {
        "[data-role=swatch-options]": {
            "Magento_Swatches/js/swatch-renderer": {
                "jsonConfig": <?= /* @escapeNotVerified */ $swatchOptions = $block->getJsonConfig() ?>,
                "jsonSwatchConfig": <?php /* @noEscape */ echo $block->getJsonSwatchConfig(); ?>,
                "mediaCallback": "<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>",
                "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
                    'Magento_ConfigurableProduct') ?: 'replace'; ?>"
            },
            "Magento_Swatches/js/configurable-customer-data": {
                    "swatchOptions": <?php /* @noEscape */ echo $swatchOptions ?>
            }
        }
    }
</script>

Any thoughts?

  • Are you wanting static text, or do you want the text to change based on the attribute value? Does the text need to change when an attribute value is selected? – dawhoo Oct 25 '18 at 16:45
  • I actually want to add, for each attribute, the value of that attribute's "description" -- a field I've added using this module: github.com/dmatthew/magento2-attribute-description – brackfost Oct 25 '18 at 16:48
  • Do you think I'd need to override/alter some of the methods in \Magento\Swatches\Block\Product\Renderer\Configurable to pass some additional JSON data, and then somehow grab that data in swatch-renderer.js? I barely know what I'm talking about here, but it smells like the right direction. – brackfost Oct 25 '18 at 16:53
  • 1
    Kind of sounded like it should be there from the description of the product - packagist.org/packages/dmatthew/magento2-attribute-description – dawhoo Oct 25 '18 at 17:01
  • 1
    Hey @dawhoo, I got it! Just had to throw item.description in the containter.append() in swatch-renderer.js – brackfost Oct 25 '18 at 17:18
0

I ended up solving this by editing swatch-renderer.js, in the container.append() function in the _RenderControls block:

  container.append(
                    '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
                         'attribute-code="' + item.code + '" ' +
                         'attribute-id="' + item.id + '">' +
                        label +
                        '<div aria-activedescendant="" ' +
                             'tabindex="0" ' +
                             'aria-invalid="false" ' +
                             'aria-required="true" ' +
                             'role="listbox" ' + listLabel +
                             'class="' + classes.attributeOptionsWrapper + ' clearfix">' +
                            options + select +
                        '</div>' + input +
                    '</div>' + '<div class="my-extra-stuff">' + item.description + '</div>'
                );

(In my case, I grabbed the newly-created item.description from the JSON object)

| improve this answer | |
  • I would suguest you to add your custom text using your custom js without changing in swatch-renderer.js – Shashank Kumrawat Oct 25 '18 at 17:53
  • How would I go about doing that? – brackfost Oct 25 '18 at 18:11
  • You can add a phtmlfile on that page with custom js script. In this script you can write code to append text below your swatches. – Shashank Kumrawat Oct 25 '18 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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