How to remove 'clickability' from a SPAN element during Checkout

Question

I'm developing a new Magento 2 eshop in Germany. During the Checkout steps, www.mywebsite.com/checkout/#email in my Sidebar, we see a presentation of the costs and a breakdown view with taxes, Pfand, and Total Costs. So far so good!

My problem is that the span class="price" is clickable, and when clicked it hides the Pfand span. When clicked again, it shows it. How can i edit/change it, so it will always display that span element?

The files, which i think i must edit are located@

web/app/design/frontend/mycompanyname/myproject/Magento_Tax/template/checkout/summary/item/details/subtotal.html

&

web/app/design/frontend/mycompanyname/myproject/Magento_Weee/templates/item/price/unit.phtml

---

And here is the code from subtotal.html

 <!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="subtotal">
    <!-- ko if: isPriceInclTaxDisplayed() && !getRegion('row_incl_tax') -->
    <span class="price-including-tax"
          data-bind ="text: getValueInclTax($parents[1]), attr:{'data-label': $t('Incl. Tax')}">
    </span>
    <!-- /ko -->

    <!-- ko if: isPriceInclTaxDisplayed() && getRegion('row_incl_tax') -->
    <span class="price-including-tax" data-bind ="attr:{'data-label': $t('Incl. Tax')}">
            <!-- ko foreach: getRegion('row_incl_tax') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
    </span>
    <!-- /ko -->

    <!-- ko if: isPriceExclTaxDisplayed() && !getRegion('row_excl_tax') -->
    <span class="price-excluding-tax"
          data-bind ="text: getValueExclTax($parents[1]), attr:{'data-label': $t('Excl. Tax')}">
    </span>
    <!-- /ko -->
    <!-- ko if: isPriceExclTaxDisplayed() && getRegion('row_excl_tax') -->
    <span class="price-excluding-tax" data-bind ="attr:{'data-label': $t('Excl. Tax')}">
            <!-- ko foreach: getRegion('row_excl_tax') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
    </span>
    <!-- /ko -->
</div>

---

And here the code of the unit.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var $block \Magento\Weee\Block\Item\Price\Renderer */


$item = $block->getItem();
?>

<?php if ($block->displayPriceInclTax() || $block->displayBothPrices()): ?>
    <span class="price-including-tax" data-label="<?= $block->escapeHtml(__('Incl. Tax')) ?>">
        <?php if ($block->displayPriceWithWeeeDetails()): ?>
            <span class="cart-tax-total"
                data-mage-init='{"taxToggle": {"itemTaxId" : "#unit-item-tax-details<?= /* @escapeNotVerified */ $item->getId() ?>"}}'>
        <?php else: ?>
            <span class="cart-price">
        <?php endif; ?>
        <?= /* @escapeNotVerified */ $block->formatPrice($block->getUnitDisplayPriceInclTax()) ?>
        </span>
    </span>
<?php endif; ?>

<?php if ($block->displayPriceExclTax() || $block->displayBothPrices()): ?>
    <span class="price-excluding-tax" data-label="<?= $block->escapeHtml(__('Excl. Tax')) ?>">`
        <?php if ($block->displayPriceWithWeeeDetails()): ?>`
           <span class="cart-tax-total"
            data-mage-init='{"taxToggle": {"itemTaxId" : "#eunit-item-tax-details<?= /* @escapeNotVerified */ $item->getId() ?>"}}'>
        <?php else: ?>
            <span class="cart-price">
        <?php endif; ?>
            <?= /* @escapeNotVerified */ $block->formatPrice($block->getUnitDisplayPriceExclTax()) ?>
        </span>`

    <?php if ($this->helper('Magento\Weee\Helper\Data')->getApplied($item)): ?>
        <span class="cart-tax-info" id="eunit-item-tax-details<?= /* @escapeNotVerified */ $item->getId() ?>">
            <?php foreach ($this->helper('Magento\Weee\Helper\Data')->getApplied($item) as $tax): ?>
                <span class="weee" data-label="<?= /* @escapeNotVerified */ $tax['title'] ?>">
                    <?= /* @escapeNotVerified */ $block->formatPrice($tax['amount'], true, true) ?>
                </span>
            <?php endforeach; ?>
        </span>

        <?php if ($block->displayFinalPrice()): ?>
            <span class="cart-tax-total"
                  data-mage-init='{"taxToggle": {"itemTaxId" : "#eunit-item-tax-details<?= /* @escapeNotVerified */ $item->getId() ?>"}}'>
                <span class="weee" data-label="<?= $block->escapeHtml(__('Total')) ?>">
                    <?= /* @escapeNotVerified */ $block->formatPrice($block->getFinalUnitDisplayPriceExclTax()) ?>
                </span>
            </span>
        <?php endif; ?>
    <?php endif; ?>
</span>

`

I'm new in Magento 2 and in Knockout.js, so if i've a mistake on my question, or in my post, please let me know and i will correct it.

I understand that the subtotal.html is the Knockout template, and that the unit.phtml contains the logic, but i'm having trouble to really understand this and figure out the right way to do my task.

I tried deleting the data-binds, because i thought that should be enough, but its not.

So, how to do this 'easy' task of removing the Clickability off, of that element...?

Answer 1

You have a data-mage-init that initialises the taxToggle on this element. If you have a look at : vendor/magento/module-weee/view/frontend/requirejs-config.js

var config = {
   map: {
        '*': {
           'taxToggle': 'Magento_Weee/js/tax-toggle',
           'Magento_Weee/tax-toggle': 'Magento_Weee/js/tax-toggle'
        }
    }
};

The initialisation leads you to vendor/magento/module-weee/view/frontend/web/js/tax-toggle.js where is the binding and the event that is fired for this element. If you want to remove this behaviour. The best is to override the phtml and to change the display according to your needs.

For further digging :

mage-init js file

Official documentation on knockout bindings