1

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

1 Answer 1

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__
);

  1. 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>

  1. 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>

  1. 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: How it looks on frontend

Hope this helps!

2
  • Thank you! I finally had the time to implement and it works flawlessly!
    – Alex
    Commented Mar 4, 2021 at 21:49
  • I did notice something interesting. When a user adds a product to the wishlist, the item details portion of the admin panel page displays the sku several times. Any idea on why this is?
    – Alex
    Commented Mar 5, 2021 at 15:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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