Changing color for Sale Price items on Product Pages

[d2d2d2]

I am looking for suggestions on how to modify the sale price/discounted price to a red font color without changing font color globally.

I am trying to show a sale price in red on individual product pages and also the quick view pop-ups. Many of our products are complex and most of these products have a formatted price driven by attribute pricing.

The marketing aspect of sale price and discount is set up and displaying correctly. However, when I change the default charcoal color to an attention-grabbing red color, it changes ALL formatted product pricing for the entire website to red. The related products and product lists all display discounted prices beautifully in red with the crossed out normal price in charcoal - but they are not dependent upon attribute driven pricing and the code is very simple.

Any suggestions on how to accomplish this?

Example product - https://www.designquest.biz/american...wood-legs.html

I was able to change the new discounted price to red - but every other product displayed pricing in a red font as well, so I changed it back to charcoal.

Also, a side question - is there a way for the base "normal" price to modify as upcharges are selected? Or does this involve using inventory variants? I am holding off on that feature until Miva introduces a new way of maintaining the variant pricing - which I understand may come with the next big update.

[Matt Zimmermann]

Hi Katie,

If you use something like this for your pricing code, the price will only show in red if the product is on sale.

<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
    <div id="js-price-value" class="h4 nm bold red" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
    <p><s id="js-additional-price">&mvt:product:formatted_base_price;</s>
<mvt:else>
    <div id="js-price-value" class="h4 nm bold" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
</mvt:if>

[d2d2d2]

Well, It's interesting...not working though when using the attributes. Try visiting the same link I posted above. I have left your code addition there. Play a little with adding a power option or headrest to the chair, etc. The new red text is not changing with attribute selection. Also, because there is not that "<mvt:else> <br/> " added to your suggested code, it is displaying the price twice and the one that is changing with attribute selection is the charcoal text.

This is the original Iron and Wool code. I only replaced the last five lines of the code - the part that started with the exact same line as your suggested code above. Was that correct? Also, I haven't even touched the code for the mobile version that appears a bit before this.

<mvt:if expr="l.settings:product:price GT 0">
                        <div id="js-price-value" class="h3 charcoal nm" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
                    <mvt:else>
                        <div id="js-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
                    </mvt:if>
                    <mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
                        <p>Normally: <s id="js-additional-price">&mvt:product:formatted_base_price;</s>
                    <mvt:else>
                        <br />
                    </mvt:if>

Thanks for looking at this, Matt :)

[Matt Zimmermann]

Hi Katie,

In your code, replace this block:

<mvt:if expr="l.settings:product:price GT 0">
    <div id="js-price-value" class="h3 charcoal nm" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
<mvt:else>
    <div id="js-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
</mvt:if>
<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
    <p>Normally: <s id="js-additional-price">&mvt:product:formatted_base_price;</s>
<mvt:else>
    <br />
</mvt:if>

with this one:

<mvt:if expr="l.settings:product:price GT 0">
    <mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
        <div id="js-price-value" class="h4 nm bold red" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
        <p><s id="js-additional-price">&mvt:product:formatted_base_price;</s>
    <mvt:else>
        <div id="js-price-value" class="h4 nm bold" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
    </mvt:if>
<mvt:else>
    <div id="js-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
</mvt:if>

For the mobile section, replace this block:

<mvt:if expr="l.settings:product:price GT 0">
    <div id="js-price-value" class="h3 charcoal nm" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
<mvt:else>
    <div id="js-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
</mvt:if>
<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
    <p>Normally: <s id="js-additional-price">&mvt:product:formatted_base_price;</s></p>
</mvt:if>

with this one:

<mvt:if expr="l.settings:product:price GT 0">
    <mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
        <div id="js-price-value" class="h4 nm bold red" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
        <p><s id="js-additional-price">&mvt:product:formatted_base_price;</s>
    <mvt:else>
        <div id="js-price-value" class="h4 nm bold" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
    </mvt:if>
<mvt:else>
    <div id="js-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
</mvt:if>

[d2d2d2]

That works perfectly! Thank you so much, Matt. Just need to apply the same modification to my couple of custom PROD pages and everything will be perfect. It's just as I wanted. Cheers!

[Protos]

Hi! That was very interesting example. Nice code. I got inspired. I was always wondering how to start show discounts or overstricken prices. Where do I start? I have
some elements on the Prod page:

Price Element:	------------------------------------------------------------------------------------------------------------------------------
Additional Price Element:
Discount Element:
Displayed Price:	Retail Price Base Price (includes any legacy price group discounts but does not reflect sales, coupons or discounts applied in the basket) Sale Price (includes legacy price groups and predicted discounts)
Additional Price Display:	None Retail Price Base Price (includes any legacy price group discounts but does not reflect sales, coupons or discounts applied in the basket)
	Display Predicted Discounts

How do I configure the Prod page to get started?

//André

[Matt Zimmermann]

Hi André,

If you are using the Iron and Wool ReadyTheme, it is already coded to show sale prices. To make the display work, here are some settings:

• Displayed Price: Base Price
• Additional Price Display: Retail Price
• Price Element: js-price-value
• Additional Price Element: js-additional-price
• Discount Element: js-product-discounts

[Protos]

Thanks Matt,
I do not have any fields for retail price or discount on my PROD or CTGY page. Though I have attribute machine code assigned.
Should not retail price be seen on the create Product page?

<script>
AttributeMachine.prototype.Generate_Discount = function( discount )
{
var discount_div;

discount_div = document.createElement( 'div' );
discount_div.innerHTML = discount.descrip + ': ' + discount.formatted_discount;

return discount_div;
}

I guess I will buy some support time to get some help.

//André