renderer.phtml

Go to the documentation of this file.

<?php
// @codingStandardsIgnoreFile

?>
<?php $swatchData = $block->getSwatchData(); ?>
<div class="swatch-attribute swatch-layered <?= /* @escapeNotVerified */ $swatchData['attribute_code'] ?>"
     attribute-code="<?= /* @escapeNotVerified */ $swatchData['attribute_code'] ?>"
     attribute-id="<?= /* @escapeNotVerified */ $swatchData['attribute_id'] ?>">
    <div class="swatch-attribute-options clearfix">
        <?php foreach ($swatchData['options'] as $option => $label): ?>
            <a href="<?= /* @escapeNotVerified */ $label['link'] ?>"
               aria-label="<?= /* @escapeNotVerified */ $label['label'] ?>"
               class="swatch-option-link-layered">
                <?php if (isset($swatchData['swatches'][$option]['type'])) { ?>
                    <?php switch ($swatchData['swatches'][$option]['type']) {
                        case '3':
                            ?>
                            <div class="swatch-option <?= /* @escapeNotVerified */ $label['custom_style'] ?>"
                                 tabindex="-1"
                                 option-type="3"
                                 option-id="<?= /* @escapeNotVerified */ $option ?>"
                                 option-label="<?= /* @escapeNotVerified */ $label['label'] ?>"
                                 option-tooltip-thumb=""
                                 option-tooltip-value=""
                                ></div>
                            <?php    break;
                        case '2':
                            ?>
                            <?php $swatchThumbPath = $block->getSwatchPath('swatch_thumb',
                            $swatchData['swatches'][$option]['value']); ?>
                            <?php $swatchImagePath = $block->getSwatchPath('swatch_image',
                            $swatchData['swatches'][$option]['value']); ?>
                            <div class="swatch-option image <?= /* @escapeNotVerified */ $label['custom_style'] ?>"
                                 tabindex="-1"
                                 option-type="2"
                                 option-id="<?= /* @escapeNotVerified */ $option ?>"
                                 option-label="<?= /* @escapeNotVerified */ $label['label'] ?>"
                                 option-tooltip-thumb="<?= /* @escapeNotVerified */ $swatchThumbPath ?>"
                                 option-tooltip-value=""
                                 style="background: url(<?= /* @escapeNotVerified */ $swatchImagePath ?>) no-repeat center; background-size: initial;"></div>
                            <?php    break;
                        case '1':
                            ?>
                            <div class="swatch-option color <?= /* @escapeNotVerified */ $label['custom_style'] ?>"
                                 tabindex="-1"
                                 option-type="1"
                                 option-id="<?= /* @escapeNotVerified */ $option ?>"
                                 option-label="<?= /* @escapeNotVerified */ $label['label'] ?>"
                                 option-tooltip-thumb=""
                                 option-tooltip-value="<?= /* @escapeNotVerified */ $swatchData['swatches'][$option]['value'] ?>"
                                 style="background: <?= /* @escapeNotVerified */ $swatchData['swatches'][$option]['value'] ?> no-repeat center; background-size: initial;"></div>
                            <?php    break;
                        case '0':
                        default:
                            ?>
                                <div class="swatch-option text <?= /* @escapeNotVerified */ $label['custom_style'] ?>"
                                     tabindex="-1"
                                     option-type="0"
                                     option-id="<?= /* @escapeNotVerified */ $option ?>"
                                     option-label="<?= /* @escapeNotVerified */ $label['label'] ?>"
                                     option-tooltip-thumb=""
                                     option-tooltip-value=""
                                    ><?= /* @escapeNotVerified */ $swatchData['swatches'][$option]['value'] ?></div>
                            <?php    break;
                    } ?>
                <?php } ?>
            </a>
        <?php endforeach; ?>
    </div>
</div>

<script>
    require(["jquery", "jquery/ui", "Magento_Swatches/js/swatch-renderer"], function ($) {
        $('.swatch-layered.<?= /* @escapeNotVerified */ $swatchData['attribute_code'] ?>')
            .find('[option-type="1"], [option-type="2"], [option-type="0"], [option-type="3"]')
            .SwatchRendererTooltip();
    });
</script>