Magento 2: Hide tier price element
-
20-12-2020 - |
Вопрос
Custom theme using Magento 2.2.1 in developer mode, inheriting from the Magento/blank
theme.
When selecting an item from a sizing dropdown on a product page, created using a configurable product, an element appears, which I believe is the 'tier price'.
The element in question is<div class="price-box price-tier_price" data-role="priceBox"></div>
.
I have tried adding <referenceBlock name="price-tier_price" remove="true" />
and <referenceBlock name="price-box" remove="true" />
to default.xml, but neither have worked.
Please can someone advise me how to hide this element?
Thanks.
EDIT:
Found this link. Looks like this might be the root of the problem, which is marked 'Done' ready for Magento 2.3.
Решение
Did a little reading up on Khoa TruongDinh's answer and discovered this issue posted on Magento's github:
Looks like this is a known bug that has been fixed for v2.3.
I've managed to work around the bug in my custom theme using three different methods.
Method One:
Added the line
<referenceBlock name="product.price.tier" remove="true" />
to
<Vendor>/<Theme>/Magento_Theme/layout/default.xml
and it seems to be working.
Method Two:
First, I copied the file
Magento/Catalog/layout/catalog_product_view.xml
to
<Vendor>/<Theme>/Magento_Catalog/layout/catalog_product_view.xml
.
Then, I removed the following code from the new file:
<block class="Magento\Catalog\Pricing\Render" name="product.price.tier" after="product.info.price">
<arguments>
<argument name="price_render" xsi:type="string">product.price.render.default</argument>
<argument name="price_type_code" xsi:type="string">tier_price</argument>
<argument name="zone" xsi:type="string">item_view</argument>
</arguments>
</block>
Method 3 (from Khoa TruongDinh's answer):
See how tier price is rendered:
\Magento\ConfigurableProduct\Block\Product\View\Type\Configurable::getOptionPrices
Configurable product JS comes from here:
Magento_ConfigurableProduct/js/configurable
Create requirejs-config.js
file here:
app/code/[Vendor]/[Module]/view/frontend/requirejs-config.js
Create the following mixin inside the file requirejs-config.js
:
var config = {
config: {
mixins: {
'Magento_ConfigurableProduct/js/configurable': {
'Vendor_Catalog/js/configurable-mixin': true
}
}
}
};
Then create configurable-mixin.js
here:
app/code/[Vendor]/[Module]/view/frontend/web/js/configurable-mixin.js
configurable-mixin.js
should contain the following code:
define(
[
'jquery'
],
function ($) {
'use strict';
return function (target) {
$.widget('mage.configurable', target, {
_displayTierPriceBlock: function (optionId) {
//Do no thing here.
}
});
return $.mage.configurable;
};
});
Method 4 (from goodlook's answer):
Copy the file
Magento/Catalog/layout/catalog_product_view.xml
to
<Vendor>/<Theme>/Magento_Catalog/layout/catalog_product_view.xml
and remove the following line:
<?= /* @escapeNotVerified */ $block->renderAmountMinimal() ?>
Другие советы
We can see how tier price was rendered: \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable::getOptionPrices
.
There is an easy way to hide the tier price - but not sure it's the best way:
The js for changing value of configurable product comes from Magento_ConfigurableProduct/js/configurable
.
We need to override it by using mixin
app/code/[Vendor]/[Module]/view/frontend/requirejs-config.js
var config = {
config: {
mixins: {
'Magento_ConfigurableProduct/js/configurable': {
'Vendor_Catalog/js/configurable-mixin': true
}
}
}
};
app/code/[Vendor]/[Module]/view/frontend/web/js/configurable-mixin.js
define(
[
'jquery'
],
function ($) {
'use strict';
return function (target) {
$.widget('mage.configurable', target, {
_displayTierPriceBlock: function (optionId) {
//Do no thing here.
}
});
return $.mage.configurable;
};
});
on magento 2.3.0 you can remove by editing
Magento_Catalog/templates/product/price/final_price.phtml
I added text to tell there is % when buy more 'by more and get %' then I marked out the render of tier price. So, no tier price is shown, only some replace text with link to product page where tier prices are correct.
<a href="<?= /* @escapeNotVerified */ $block->getSaleableItem()->getProductUrl() ?>" class="minimal-price-link"> By more and get %
<!-- marke out code or delete line
<?= /* @escapeNotVerified */ $block->renderAmountMinimal() ?>
--> </a>