Include SKU within Product Drop-Down (Bundle Options) for Magento 2

Question

I am trying to reproduce some functionality that i did in m1. For my m1 I followed this article to display the sku on the dropdown of my bundle products: Include SKU within Product Drop-Down (Bundle Options)

How can i reproduce this in m2? I believe this is the file that i should be editing in m2: app/design/frontend/xxx/xxx/Magento_Bundle/templates/catalog/product/view/type/bundle/option/select.phtml

Answer 1

Unfortunately, modifying the template you mentioned has no effect on the dropdown select, because the option list is retrieved again in the magento/module-bundle/view/frontend/templates/catalog/product/view/type/bundle/options.phtml file, under the section:

<script type="text/x-magento-init">
{
    "#product_addtocart_form": {
        "priceBundle": {
            "optionConfig": <?= /* @noEscape */ $block->getJsonConfig() ?>,
            "controlContainer": ".field.option"
        }
    }
}
</script>

The $block->getJsonConfig() retrieves the product options from the cached collection, and these are used by the UIComponent further on, not the ones displayed in the template you specified.

However, using a plugin, within a simple module, can fix your issue.

1. Vendor/Module/registration.php

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'Vendor_Module',
    __DIR__
);

2. Vendor/Module/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module"/>
</config>

3. Vendor/Module/etc/frontend/di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Bundle\Model\Option">
        <plugin name="vendor_module_add_sku_plugin" type="Vendor\Module\Plugin\AddSkuToBundleOptionPlugin"/>
    </type>
</config>

4. Vendor/Module/Plugin/AddSkuToBundleOptionPlugin.php

<?php declare(strict_types=1);

namespace Vendor\Module\Plugin;

class AddSkuToBundleOptionPlugin
{
    /**
     * This plugin adds the sku to the bundle product dropdown option
     *
     * @return \Magento\Catalog\Model\Product[]
     */
    public function beforeAddSelection(
        \Magento\Bundle\Model\Option $subject,
        \Magento\Catalog\Model\Product $selection
    ) {
        /** @var \Magento\Catalog\Model\Product $selection */
        if ($subject->getType() !== 'select') {
            return [$selection];
        }

        $selection->setName($selection->getName() . ' ' . $selection->getSku());
        return [$selection];
    }
}

And that's it! Just enable the module, clear the caches and you should see the updates on frontend!

To sum up, before the bundle options are retrieved on frontend, we just add the sku to the name (if the option type is dropdown aka select), because this name will be later used as the dropdown option label. You can see the array of bundle options built here under magento/module-bundle/Block/Catalog/Product/View/Type/Bundle.php:

    private function getSelectionItemData(Product $product, Product $selection)
    {
        ...

        return [
            'qty' => $qty,
            'customQty' => $selection->getSelectionCanChangeQty(),
            'optionId' => $selection->getId(),
            'prices' => [
                'oldPrice' => [
                    'amount' => $oldPrice,
                ],
                'basePrice' => [
                    'amount' => $basePrice,
                ],
                'finalPrice' => [
                    'amount' => $finalPrice,
                ],
            ],
            'priceType' => $selection->getSelectionPriceType(),
            'tierPrice' => $this->getTierPrices($product, $selection),
            'name' => $selection->getName(),
            'canApplyMsrp' => false,
        ];
    }

where the $selection->getName() is the name we just updated!

This is how it looks on frontend:

Hope this helps!