Add the quantity textbox next to AddtoCart button when you are exploring the products.

By making some minor changes to the _ProductBox.cshtml, you will give the ability to the final users to set the quantity of the products manually for adding to their cart.

Here is the new changes. Just replace the existing _ProductBox.cshtml content with the code as follows.

Hope it will work for you guys.

@model ProductOverviewModel
@using Nop.Core.Domain.Orders
@using Nop.Web.Models.Catalog;
@{
    var shoppingCartTypeId = (int)ShoppingCartType.ShoppingCart;
}

<style>
    .product-list .product-item .prices .actual-price
    {
        color: #000000;
        text-align: center;
        padding-top: 5px;
    }

    .product-list .product-item .description
    {
        margin: 0px 130px 0 120px;
    }

    .product-list .product-item .product-title a
    {
        padding: 0px 0px 0px 0;
    }

    .picturetitle
    {
        font-weight: bold;
        color: #ffffff;
        background-color: #19519d;
        text-align: center;
    }
</style>

<div class="product-item" data-productid="@Model.Id">
    <div class="picture">
        <div class="picturetitle">@Model.ProductNumber</div>
        <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
        </a>
    </div>
    <div class="details">
        <div class="product-title">
            <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })">@Model.Name</a>
        </div>
        <div class="description">
            <br />@Html.Raw(Model.ShortDescription)
        </div>
        <div class="add-info">

            <div class="buttons">
                @*<input type="button" value="@T("Products.Details")" class="button-1 product-box-detail-button" onclick="setLocation('@Url.RouteUrl("Product", new { SeName = Model.SeName })')" />*@
                @if (!Model.ProductPrice.DisableBuyButton)
                {
                    
                    @Html.TextBox("EnteredQuantity", 1, new { @class = "qty-input", size = 1, maxlength = 3, onkeypress = "return isNumberKey(event)" })
                    <input type="button" value="@(Model.ProductPrice.AvailableForPreOrder ? T("ShoppingCart.PreOrder") : T("ShoppingCart.AddToCart"))" class="button-2 product-box-add-to-cart-button"  
                        data-url="@Url.RouteUrl("AddProductToCart", new { productId = Model.Id , shoppingCartTypeId =shoppingCartTypeId , quantity = 0 })"
                        
                        />
                }
            </div>
            <div class="prices">
                @if (!String.IsNullOrEmpty(Model.ProductPrice.OldPrice))
                {
                    <span class="price old-price">@Model.ProductPrice.OldPrice</span>
                }

                <span class="price actual-price"><span style="color: red;">Your Price:</span> @Model.ProductPrice.Price</span>
            </div>
            @Html.Widget("productbox_add_info")
        </div>
    </div>
</div>


<script type="text/javascript">
    //Just numeric values
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }

    //Add to Cart Function
    $(function () {

        $(".add-info input.button-2").click(function () {
            var url = $(this).attr("data-url");
            var _quantity = $(this).prev('input.qty-input').val();
            url = url.replace("0", _quantity);
            AjaxCart.addproducttocart(url);
            return false;
        });

    });
</script>

Hey arlen_bs

I used your code
i've replaced the code found in _ProductBox.cshtml file with
one you have provide , its work fine when running the visual studio environment
but when i deploy it to the server , every time i click the "add to cart" button
"failed to add the product to the cart , please refresh the page and try one more time" message appear
i try to refresh the page and hit the add to cart button , but the same error window appears
i actually return the code to what it was it in _ProductBox.cshtml file and it works fine
so please any help

I'm using NopCommerce 3.00

Thanks In Advance

Thank you Diachronic for notifying me about the glitch in my code.
I updated the code please try the new version, hope it will work flawless for you.


Thank you.

I downloaded latest code but not able to make this working, please help with steps !

Latest update for nopcommerce 3.1

@model ProductOverviewModel
@using Nop.Core.Domain.Orders
@using Nop.Web.Models.Catalog;
@{
    //prepare "Add to cart" AJAX link
   
    var shoppingCartTypeId = (int)ShoppingCartType.ShoppingCart;
   
}
<div class="product-item" data-productid="@Model.Id">
    <div class="picture">
        <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
        </a>
    </div>
    <div class="details">
        <h2 class="product-title">
            <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })">@Model.Name</a>
        </h2>
        @if (Model.ReviewOverviewModel.AllowCustomerReviews)
        {
            int ratingPercent = 0;
            if (Model.ReviewOverviewModel.TotalReviews != 0)
            {
                ratingPercent = ((Model.ReviewOverviewModel.RatingSum * 100) / Model.ReviewOverviewModel.TotalReviews) / 5;
            }
            <div class="product-rating-box" title="@string.Format(T("Reviews.TotalReviews").Text, Model.ReviewOverviewModel.TotalReviews)">
                <div class="rating">
                    <div style="width: @(ratingPercent)%">
                    </div>
                </div>
            </div>
        }
        <div class="description">
            @Html.Raw(Model.ShortDescription)
        </div>
        <div class="add-info">
            <div class="prices">
                @if (!String.IsNullOrEmpty(Model.ProductPrice.OldPrice))
                {
                    <span class="price old-price">@Model.ProductPrice.OldPrice</span>
                }
                <span class="price actual-price">@Model.ProductPrice.Price</span>
            </div>
            <div class="buttons">
                @*<input type="button" value="@T("Products.Details")" class="button-1 product-box-detail-button" onclick="setLocation('@Url.RouteUrl("Product", new { SeName = Model.SeName })')" />*@
                @if (!Model.ProductPrice.DisableBuyButton)
                {
                    @Html.TextBox("EnteredQuantity", 1, new { @class = "qty-input", size = 1, maxlength = 3, onkeypress = "return isNumberKey(event)" })
                    <input type="button" value="@(Model.ProductPrice.AvailableForPreOrder ? T("ShoppingCart.PreOrder") : T("ShoppingCart.AddToCart"))" class="button-2 product-box-add-to-cart-button"  
                        data-url="@Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id , shoppingCartTypeId = shoppingCartTypeId , quantity = 0 })"/>
                        
                }
            </div>
            @Html.Widget("productbox_add_info")
        </div>
    </div>
</div>
<script type="text/javascript">
    //Just numeric values
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }

    //Add to Cart Function
    $(function () {
        $(".add-info input.button-2").click(function () {
            var url = $(this).attr("data-url");
            var _quantity = $(this).prev('input.qty-input').val();
            url = url.replace("0", _quantity);          
            AjaxCart.addproducttocart_catalog(url);
            return false;
        });

    });
</script>

Thanks a lot Cheing this is working perfectly!

Next thing I am trying to get product attributes from details to _productbox page, please get me the steps as I am new bee to nopcommerce. I can make changes to Model, controllers or routings.

Hi,

thanks a lot for this great code!

I have used it too but have noticed one issue with it.

When the product id contains a 0 (zero) than you will not only replace the quantity but also change the product id.

For example when your product id is 120 you will have
the following data-url before you replace it: /addproducttocart/catalog/120/1/0

Now after you call the replace function it will be /addproducttocart/catalog/121/1/1 (if your quantity is 1).

I have changed the line:
url = url.replace("0", _quantity);

to:
url = url.substring(0, url.length - 1) + _quantity;



Br,
Johann

Thanks for the correction.

Help! On version 3.4, if I use this code, there are two Product Quantity textbox. How do I remove the default textbox?

Latest update for version 3.60

Here is the my development about _ProductBox.cshtml, i revised for my custom theme.
It may sound a bit complicated but i think you get the point ;-)

@model ProductOverviewModel
@using Nop.Core
@using Nop.Core.Domain.Orders
@using Nop.Core.Domain.Tax
@using Nop.Core.Infrastructure
@using Nop.Web.Models.Catalog;
@{
    //prepare "Add to cart" AJAX link
    string addtocartlink = "";
    var shoppingCartTypeId = (int)ShoppingCartType.ShoppingCart;
    if (Model.ProductPrice.ForceRedirectionAfterAddingToCart)
    {
        addtocartlink = Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId, quantity = 0, forceredirection = Model.ProductPrice.ForceRedirectionAfterAddingToCart });
    }
    else
    {
        addtocartlink = Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId, quantity = 0 });
    }
    var addtowishlistlink = Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id, shoppingCartTypeId = (int)ShoppingCartType.Wishlist, quantity = 0 });
    var addtocomparelink = Url.RouteUrl("AddProductToCompare", new { productId = Model.Id });
}

<li data-productid="@Model.Id">
    <div class="product-hover">
        @if (!Model.ProductPrice.DisableAddToCompareListButton)
        {
            <input type="button" value="@T("ShoppingCart.AddToCompareList")" title="@T("ShoppingCart.AddToCompareList")" class="add-list pull-right" onclick="AjaxCart.addproducttocomparelist('@addtocomparelink');return false;" />
        }
        @if (!Model.ProductPrice.DisableWishlistButton)
        {
            <input type="button" value="@T("ShoppingCart.AddToWishlist")" title="@T("ShoppingCart.AddToWishlist")" class="add-list" onclick="AjaxCart.addproducttocart_catalog('@addtowishlistlink');return false;" />
        }
        
        @if (Model.ReviewOverviewModel.AllowCustomerReviews)
        {
            int ratingPercent = 0;
            if (Model.ReviewOverviewModel.TotalReviews != 0)
            {
                ratingPercent = ((Model.ReviewOverviewModel.RatingSum * 100) / Model.ReviewOverviewModel.TotalReviews) / 5;
            }
            <div class="product-rating-box" title="@string.Format(T("Reviews.TotalReviews").Text, Model.ReviewOverviewModel.TotalReviews)">
                <div class="rating">
                    <div style="width: @(ratingPercent)%">
                    </div>
                </div>
            </div>
        }
    </div>
    
    <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
        @if (Model.StockQuantity > 0)
        {
            <span class="instock">In stock</span>
        }
        else
        {
            <span class="instock" style="color:red; border-color:red">Out of stock</span>
        }
        <span class="sale"><strong>70</strong>%</span>
        <figure>
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
        </figure>
        <strong class="product-name">@Model.Name</strong>
        <span class="desc">@Html.Raw(Model.ShortDescription)</span>
        <div class="avantage">
            <span class="avantage-product"><i></i>Featured Product</span>
            @if (Model.ProductPrice.DisplayTaxShippingInfo)
            {
                var inclTax = EngineContext.Current.Resolve<IWorkContext>().TaxDisplayType == TaxDisplayType.IncludingTax;
                //tax info is already included in the price (incl/excl tax). that's why we display only shipping info here
                //of course, you can modify appropriate locales to include VAT info there
                <span class="free-ship">
                    <i></i>
                    @T(inclTax ? "Products.Price.TaxShipping.InclTax" : "Products.Price.TaxShipping.ExclTax", Url.RouteUrl("Topic", new { SeName = Html.GetTopicSeName("shippinginfo") }))
                </span>
            }
        </div>
    </a>
    <div class="product-bottom">
        @Html.Widget("productbox_addinfo_before", Model.Id)
        <div class="price">
            @if (!String.IsNullOrEmpty(Model.ProductPrice.OldPrice))
            {
                <span class="price-line">@Model.ProductPrice.OldPrice</span>
            }
            <span class="price-sale">@Model.ProductPrice.Price</span>            
        </div>
        @Html.Widget("productbox_addinfo_middle", Model.Id)
        <div class="add-cart">
            <input type="text" value="1" class="quantity" onkeypress="return isNumberKey(event)" />
            @*<input );"="button" value="@T("Products.Details")" class="button-1 product-box-detail-button" onclick="setLocation('@Url.RouteUrl("Product", new { SeName = Model.SeName })')" />*@
            @if (!Model.ProductPrice.DisableBuyButton)
            {
                var addToCartText = T("ShoppingCart.AddToCart").Text;
                if (Model.ProductPrice.IsRental)
                {
                    addToCartText = T("ShoppingCart.Rent").Text;
                }
                if (Model.ProductPrice.AvailableForPreOrder)
                {
                    addToCartText = T("ShoppingCart.PreOrder").Text;
                }
                <button type="button" title="@(addToCartText)" class="add-icon small" data-url="@addtocartlink"></button>
            }
        </div>
        @Html.Widget("productbox_addinfo_after", Model.Id)
    </div>
    <script type="text/javascript">
    //Just numeric values
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }

    //Add to Cart Function
    $(function () {
        //onclick="AjaxCart.addproducttocart_catalog('@addtocartlink');return false;"
        $(".add-cart button.add-icon").click(function () {
            var url = $(this).attr('data-url');
            var _quantity = $(this).prev('input.quantity').val();
            console.log(_quantity);
            url = url.replace("0", _quantity);
            console.log(url);
            AjaxCart.addproducttocart_catalog(url);
            return false;
        });
    });
    </script>
</li>