0

enter image description here

add strike through on the price and show the discounted price after strick through price on the checkout shipping step summary section

1 Answer 1

0

To add a strikethrough on the original price and display the discounted price after the strikethrough price in the checkout shipping step summary section in Magento 2, you'll need to make customizations to your theme's checkout templates. Specifically, you'll be working with the shipping.html template to achieve this effect. Here's a step-by-step guide:

  1. Create or Override the Shipping Template:

    If you don't already have a custom theme, you might need to create one. If you have a custom theme or a child theme, navigate to your theme's directory. The shipping.html file is typically located at:

    app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/web/template/shipping.html
    

    If the shipping.html file doesn't exist, you'll need to create it in the above path.

  2. Edit the shipping.html Template:

    Open the shipping.html template file in a code editor and locate the section where the price is displayed. You'll typically find something like this:

    <span class="price">
        <text args="$shippingMethod.amount" />
    </span>
    

    Modify this section to include the strikethrough and discounted price:

    <span class="old-price">
        <s><text args="$shippingMethod.amount" /></s>
    </span>
    <span class="new-price">
        <text args="$shippingMethod.discountedAmount" />
    </span>
    

    In this example, we've added a class for the old price and a class for the new price. The discountedAmount is a variable you'll need to provide in your JavaScript code.

  3. Add JavaScript to Set the Discounted Amount:

    In your theme's requirejs-config.js file (located in the same directory as your shipping.html template), add a configuration to include a JavaScript file. If the file doesn't exist, create it:

    var config = {
        map: {
            '*': {
                'customShippingScript': 'Magento_Checkout/js/custom-shipping-script'
            }
        }
    };
    
  4. Create the JavaScript File:

    Create a new JavaScript file named custom-shipping-script.js in your theme's Magento_Checkout/js directory:

    app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/web/js/custom-shipping-script.js
    

    In this file, define the discounted amount based on your logic:

    define([
        'jquery',
        'ko',
        'uiComponent'
    ], function ($, ko, Component) {
        'use strict';
    
        return Component.extend({
            initialize: function () {
                this._super();
                // Replace this with your logic to calculate the discounted amount
                var discountedAmount = 10.00; // Example discounted amount
                this.discountedAmount = ko.observable(discountedAmount);
            }
        });
    });
    
  5. Apply Styles:

    Add CSS to style the old price (strikethrough) and the new price (discounted amount):

    .old-price s {
        text-decoration: line-through;
    }
    
    .new-price {
        font-weight: bold; /* To emphasize the discounted price */
    }
    
  6. Flush Cache:

    After making these changes, flush your Magento cache to ensure that your modifications take effect.

Remember that these steps provide a basic outline for achieving the desired effect. The actual implementation might vary based on your theme's structure and any additional customizations you have in your Magento instance.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.