[nopCommerce] Add ‘Continue Shopping’ button on empty cart page

Many e-Commerce websites offer different features that keeps the online customers engaged in the store. One of these features is “Continue Shopping” button that you may have see on many sites and the main aim of this button is to take the online shoppers back to the product catalog or homepage so that they can browse other items.

Adding the “Continue Shopping” button to the empty cart page in nopCommerce can be quite useful in order to make it convenient for online customers to go back to homepage to look for other products.

This requires a little bit of work in the code as nopCommerce does not offer this feature out of the box.

The default nopCommerce empty cart page looks like this:

Let us go to this location in the code: Nop.Web/Views/ShoppingCart/OrderSummary.cshtml

Copy the OrderSummary.cshtml” file and paste it in your store current theme folder like this:

Themes/DefaultClean/Views/ShoppingCart/OrderSummary.cshtml
(You will have to create the folder “ShoppingCart” in your theme views)

Open the “OrderSummary.cshtml” file and find this code at the bottom of the page:

else
    {
        @T("ShoppingCart.CartIsEmpty")
    }
    @Html.Widget("order_summary_content_after")
</div>

We will be adding this button code here:

<input type="submit" name="continueshopping" value="@T("ShoppingCart.ContinueShopping")" class="button-2 continue-shopping-button" />

So, your “else” section should look like this (at the bottom of the page):

else
    {
        @T("ShoppingCart.CartIsEmpty")
        using (Html.BeginRouteForm("ShoppingCart", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <div class="buttons">
                <div class="common-buttons">
                    <input type="submit" name="continueshopping" value="@T("ShoppingCart.ContinueShopping")" class="button-2 continue-shopping-button" />
                </div>
            </div>
        }
    }
    @Html.Widget("order_summary_content_after")
</div>

That’s it – Now, simply run your website and go to empty cart page. You should see the “Continue Shopping” button like this:

 

Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of StrivingProgrammers.com - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *