how to add discount tag for product image?

7 years ago
i am using nop commerce 2.8 version
i want to  add discounts like 50% or 20% on the product image.pllzzz help me
7 years ago
mahitha1 wrote:
i am using nop commerce 2.8 version
i want to  add discounts like 50% or 20% on the product image.pllzzz help me

If you want to add a ribbon to images of products with discounts here is a work item which will be available with v3.0 (en of july). It has info and code to do it.
7 years ago
I want display the discount percentage for each product on the product picture or after the product price  in the new products page,and for each product i want to add different discount percentages?
i am using nop commerce 2.8 version and also am not using visual studio am using only cshtml coding(web matrix)
plzzzzz help me
7 years ago
This can help you but only on the product page.

You need to create a new discount on page "Promotion -> Distsounts." Select the type of discount "Assigned to product variants (skus)". After this, on page "Product variants -> Discount" select your new discount.

Insert the following code to the file "_ProduсtVariantPrice.cshtml":

@if (!String.IsNullOrWhiteSpace(Model.PriceWithDiscount))
{
    /*Styles for the block with percent*/
    <style>
        .product-essential {
            position: relative;
        }

        .product-discount {
            position: absolute;
            background: yellow;
            width: 75px;
            height: 30px;
            border-radius: 40px;
            color: red;
            font-size: 30px;
            padding: 20px 0;
            text-align: center;
            left: 15px;
            top: 15px;
        }

        .product-variant-line .product-discount {
            display: none;
        }
    </style>

    var discountValue = Model.PriceValue - Model.PriceWithDiscountValue; // calculate the amount
    var discountPercentage = Math.Round(100/(Model.PriceValue / discountValue)); // calculate the percentage
    @Html.Raw("<div class=\"product-discount\">-" + discountPercentage + "%</div>") // show percentage in the block
}

I did it quickly, so it may contain bugs. But I hope you get the idea...
7 years ago
hiii mariann
its not working
7 years ago
Errors?
Which product template you use? This code for a single product variant. But it is not difficult to alter ..
1 year ago
Mariann wrote:
This can help you but only on the product page.

You need to create a new discount on page "Promotion -> Distsounts." Select the type of discount "Assigned to product variants (skus)". After this, on page "Product variants -> Discount" select your new discount.

Insert the following code to the file "_ProduсtVariantPrice.cshtml":

@if (!String.IsNullOrWhiteSpace(Model.PriceWithDiscount))
{
    /*Styles for the block with percent*/
    <style>
        .product-essential {
            position: relative;
        }

        .product-discount {
            position: absolute;
            background: yellow;
            width: 75px;
            height: 30px;
            border-radius: 40px;
            color: red;
            font-size: 30px;
            padding: 20px 0;
            text-align: center;
            left: 15px;
            top: 15px;
        }

        .product-variant-line .product-discount {
            display: none;
        }
    </style>

    var discountValue = Model.PriceValue - Model.PriceWithDiscountValue; // calculate the amount
    var discountPercentage = Math.Round(100/(Model.PriceValue / discountValue)); // calculate the percentage
    @Html.Raw("<div class=\"product-discount\">-" + discountPercentage + "%</div>") // show percentage in the block
}

I did it quickly, so it may contain bugs. But I hope you get the idea...


Hi Mariann, How we could do it in version 4.0 please.
1 year ago
There are several plugins that do this