Announcement

Collapse
No announcement yet.

Changing color for Sale Price items on Product Pages

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Changing color for Sale Price items on Product Pages

    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.
    Katie Sorensen
    Design Quest Furniture

    http://www.designquest.biz

    #2
    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.
    Code:
    <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>
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      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.

      Code:
      <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 :)
      Katie Sorensen
      Design Quest Furniture

      http://www.designquest.biz

      Comment


        #4
        Hi Katie,

        In your code, replace this block:
        Code:
        <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:
        Code:
        <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:
        Code:
        <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:
        Code:
        <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>
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          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!
          Katie Sorensen
          Design Quest Furniture

          http://www.designquest.biz

          Comment


            #6
            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é

            Comment


              #7
              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

              Matt Zimmermann

              Miva Web Developer
              Alchemy Web Development
              https://www.alchemywebdev.com
              Site Development - Maintenance - Consultation

              Miva Certified Developer
              Miva Professional Developer

              https://www.dev4web.net | Twitter

              Comment


                #8
                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é

                Comment

                Working...
                X