Show simple products URL in bundle summary

Question

We want to make product name clickable in bundle summary.

When user click on product it should be redirected to simple product page.

Anyone knows if it possible?

Answer 1

Yes it's possible indeed, but you should know your way around UI components in Magento2 !

Bundle Summary is rendered by the UI component called from the template file summary.phtml

vendor/magento/module-bundle/view/frontend/templates/catalog/product/view/summary.phtml

<div class="bundle-summary">
        <strong class="subtitle"><?= $block->escapeHtml(__('Summary')) ?></strong>
        <div id="bundle-summary" data-container="product-summary">
            <ul data-mage-init='{"productSummary": []}' class="bundle items"></ul>
            <script data-template="bundle-summary" type="text/x-magento-template">
                <li>
                    <strong class="label"><%- data._label_ %>:</strong>
                    <div data-container="options"></div>
                </li>
            </script>
            <script data-template="bundle-option" type="text/x-magento-template">
                <div><?= /* @noEscape */ __('%1 x %2', '<%- data._quantity_ %>', '<%- data._label_ %>') ?></div>
            </script>
        </div>
    </div>

You have to modify the script at the end to this one

<script data-template="bundle-option" type="text/x-magento-template">
  <div><?= /* @noEscape */ __('%1 x <a href="%2" target="_blank">%3</a>', '<%- data._quantity_ %>', '<%- data._productUrl_ %>', '<%- data._label_ %>') ?></div>
</script>

Note that data._productUrl_ has been added which contains the product URL. The Product URL is not available by default,

You have to add this to priceBundle.optionConfig Object before you use it in your template.

In order to do this, add this in the Block responsible to add the bundle product configurations

Magento\Bundle\Block\Catalog\Product\View\Type\Bundle.php

pluginize / override (preference) this class in your module and modify the method

getJsonConfig

Though the exact method that you need to modify is getSelectionItemData which is private so it cannot be overriden, so include that in your overriden class and add the productUrl to the array which returns the bundle product config as shown below.

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(),
            'sku' => $selection->getSku(),
            'productUrl' => $selection->getProductUrl(), // added the product url here
            'canApplyMsrp' => false,
        ];

And pass this to product-summary.js. You can add a mixin to override this JS in your module.

vendor/magento/module-bundle/view/frontend/web/js/product-summary.js

inside the function _renderOptionRow: function (key, optionIndex)

add this inside data object

_productUrl_: this.cache.currentElement.options[this.cache.currentKey].selections[optionIndex].productUrl

This is how you can make bundle product options clickable and redirect to the product page when its clicked.