Price change for Configurable products in list

Question

Scenario:
I have a configurable product with the price X (no special price).
One (or more but not all) of the simple products attached to the configurable products has a special price Y (lower than X).

In the product view page (works as desired):

• when the page loads I see the lowest price (Y in my case) along with regular price.
• when changing the configuration of the product and reaching a configuration that is not discounted I see only one price, the original one (X).
• changing the configuration to reach the discounted price product I see again, regular price and special price.

In the product list page (does not work as desired):

• when the page loads I see the minimal price of the configurable product (Y) but no regular price or "special price" label
• changing the product configuration to anything else, changes the price to the price of the configuration (X or Y).

Desired Result in the product list page:
1. when page loads, display the minimal price and the regular price (Regular price: X, Special Price: Y).
2. When the configuration changes show/hide the regular price and the special price label according to the selected options. Example: When selecting the configuration for the discounted price show both regular and special price (bonus: any other price type I add custom). When selecting a non-discounted configuration just show one price.

Additional Info:
I can achieve point 1 from the desired result by editing the final_price.phtml template for configurable products and removing the condition !$block->isProductList().

But in this case, the special price label remains there no matter what configuration I choose.

Speculation:

Since the regular price is not shown in the product list (see the conditions mentioned above), it makes me thing that by design, not all prices are shown in the product list for configurable products.

Question:
Is there a reasonable way (not rewriting all the price display logic) to achieve point 2 in the desired result section?

Answer 1

I kind of got this working.
I removed from the configurable product final_price.phtml the condition for not being in the product list !$block->isProductList().
This makes the prices change somehow. But there is a catch. Actually 2.

• First: If the product is configurable by 2 or more attributes (let's say color and size) and in the product list I only have enabled 1 attribute (color) when changing the color, I see the price of the first product that has that color. If that product does not have a special price I won't see it. If you want to always select the product that has a special price, this can be changed in the file https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js. This line result = $widget.options.jsonConfig.optionPrices[_.findKey($widget.options.jsonConfig.index, options)]; can be changed to loop through all the matching products and select the one with a discount.
• Second: When changing from a product with a discount to a product that does not have a discount, the "regular price" disappears, but the label "Special price" still remains. This can be overcome by changing Magento/Catalog/view/base/templates/product/price/amount/default.phtml.

change
<span class="price-label"><?= /* @escapeNotVerified */ $block->getDisplayLabel() ?></span> to this
<span class="price-label <?= $block->getLabelClass()?>"><?= /* @escapeNotVerified */ $block->getDisplayLabel() ?></span>

and in the final_price.phtml for the configurable product for the special price renderer this attribute needs to be added label_class => 'sly-old-price'.

This kind of works as I need it to.

Notes:

• This is only tested for configurable products. Haven't tested for downloadable or bundle.
• by "changing" in the code I mean properly overriding the files either in a module or in a custom theme. NOT IN THE CORE.