Widgets and Widgets Zones in 3.10

6 years ago
Hi,

Having just started developing nopCommerce (and having forked out for the User Guide, which is rather optimistically described as "is the definitive guide to installing, configuring, building, maintaining an e-commerce site using the nopCommerce" but fails in many areas especially if you are a developer) I wanted to know where all the widget zones where.
I was surprised to find there was no definitive list, so I thought I'd create one, for all you budding Widget developers out there.

Below are two lists. The first is just a list of the widget zones that are available. The second is a list of all the cshtml files in which they appear. The list is based on a new install of nopCommerce 3.10 - no additional plugins or themes.

To add a new widget zone, add a line like:
@Html.Widget("your_new_widget_zone_name")

to the appropriate .cshtml file, and return the same name in the
public IList<string> GetWidgetZones()
method in your Widget's Plugin class.

Hope you all find it useful. Please vote for this post if you do!

Widget Zones

account_navigation_after
account_navigation_before
admin_dashboard_bottom
admin_dashboard_top
admin_header_after
admin_header_before
admin_header_middle
bloglist_page_after_posts
bloglist_page_before_posts
bloglist_page_inside_post
blogpost_page_after_comments
blogpost_page_before_body
blogpost_page_before_comments
blogpost_page_inside_comment
body_end_html_tag_before
body_start_html_tag_after
categorydetails_after_breadcrumb
categorydetails_after_featured_products
categorydetails_before_featured_products
categorydetails_before_filters
categorydetails_before_product_list
categorydetails_before_subcategories
categorydetails_bottom
categorydetails_top
checkout_billing_address_bottom
checkout_billing_address_middle
checkout_billing_address_top
checkout_completed_bottom
checkout_completed_top
checkout_confirm_bottom
checkout_confirm_top
checkout_payment_info_bottom
checkout_payment_info_top
checkout_payment_method_bottom
checkout_payment_method_top
checkout_progress_after
checkout_progress_before
checkout_shipping_address_bottom
checkout_shipping_address_middle
checkout_shipping_address_top
checkout_shipping_method_bottom
checkout_shipping_method_top
compareproducts_row
contactus_bottom
contactus_top
content_after
content_before
footer
head_html_tag
header
header_links_after
header_links_before
header_menu_after
header_menu_before
header_selectors
home_page_bottom
home_page_top
infoblock_after
infoblock_before
left_side_column_after
left_side_column_after_category_navigation
left_side_column_before
main_column_after
main_column_before
manufacturerdetails_after_featured_products
manufacturerdetails_before_featured_products
manufacturerdetails_before_filters
manufacturerdetails_before_product_list
manufacturerdetails_bottom
manufacturerdetails_top
mobile_account_navigation_after
mobile_account_navigation_before
mobile_bloglist_page_after_posts
mobile_bloglist_page_before_posts
mobile_bloglist_page_inside_post
mobile_blogpost_page_after_comments
mobile_blogpost_page_before_body
mobile_blogpost_page_before_comments
mobile_blogpost_page_inside_comment
mobile_body_end_html_tag_before
mobile_body_start_html_tag_after
mobile_categorydetails_before_featured_products
mobile_categorydetails_before_product_list
mobile_categorydetails_before_subcategories
mobile_categorydetails_bottom
mobile_categorydetails_top
mobile_checkout_billing_address_bottom
mobile_checkout_billing_address_middle
mobile_checkout_billing_address_top
mobile_checkout_completed_bottom
mobile_checkout_completed_top
mobile_checkout_confirm_bottom
mobile_checkout_confirm_top
mobile_checkout_payment_info_bottom
mobile_checkout_payment_info_top
mobile_checkout_payment_method_bottom
mobile_checkout_payment_method_top
mobile_checkout_shipping_address_bottom
mobile_checkout_shipping_address_middle
mobile_checkout_shipping_address_top
mobile_checkout_shipping_method_bottom
mobile_checkout_shipping_method_top
mobile_compareproducts_row
mobile_contactus_bottom
mobile_contactus_top
mobile_content_after
mobile_content_before
mobile_footer
mobile_head_html_tag
mobile_header_links_after
mobile_header_links_before
mobile_home_page_bottom
mobile_home_page_top
mobile_infoblock_after
mobile_infoblock_before
mobile_manufacturerdetails_before_featured_products
mobile_manufacturerdetails_before_product_list
mobile_manufacturerdetails_bottom
mobile_manufacturerdetails_top
mobile_newsitem_page_after_comments
mobile_newsitem_page_before_body
mobile_newsitem_page_before_comments
mobile_newsitem_page_inside_comment
mobile_newslist_page_after_items
mobile_newslist_page_before_items
mobile_newslist_page_inside_item
mobile_notifications
mobile_order_summary_content_after
mobile_order_summary_content_before
mobile_order_summary_content_deals
mobile_orderdetails_page_afterproducts
mobile_orderdetails_page_beforeproducts
mobile_orderdetails_page_bottom
mobile_orderdetails_page_overview
mobile_orderdetails_page_top
mobile_productdetails_add_info
mobile_productdetails_after_pictures
mobile_productdetails_before_pictures
mobile_productdetails_bottom
mobile_productdetails_top
mobile_productreviews_page_bottom
mobile_productreviews_page_inside_review
mobile_productreviews_page_top
mobile_productsbytag_bottom
mobile_productsbytag_top
mobile_profile_page_info_userdetails
mobile_profile_page_info_userstats
mobile_searchbox
newsitem_page_after_comments
newsitem_page_before_body
newsitem_page_before_comments
newsitem_page_inside_comment
newslist_page_after_items
newslist_page_before_items
newslist_page_inside_item
notifications
op_checkout_billing_address_bottom
op_checkout_billing_address_middle
op_checkout_billing_address_top
op_checkout_confirm_bottom
op_checkout_confirm_top
op_checkout_payment_info_bottom
op_checkout_payment_info_top
op_checkout_payment_method_bottom
op_checkout_payment_method_top
op_checkout_shipping_address_bottom
op_checkout_shipping_address_middle
op_checkout_shipping_address_top
op_checkout_shipping_method_bottom
op_checkout_shipping_method_top
order_summary_cart_footer
order_summary_content_after
order_summary_content_before
order_summary_content_deals
orderdetails_page_afterproducts
orderdetails_page_beforeproducts
orderdetails_page_bottom
orderdetails_page_overview
orderdetails_page_top
productbox_add_info
productbreadcrumb_after
productbreadcrumb_before
productdetails_add_info
productdetails_after_pictures
productdetails_before_collateral
productdetails_before_pictures
productdetails_bottom
productdetails_overview_bottom
productdetails_overview_top
productdetails_top
productreviews_page_bottom
productreviews_page_inside_review
productreviews_page_top
productsbytag_before_product_list
productsbytag_bottom
productsbytag_top
productsearch_page_advanced
productsearch_page_basic
profile_page_info_userdetails
profile_page_info_userstats
right_side_column_after
right_side_column_before
searchbox


The pages on which they appear:
The paths are all relative to the root of the nop.Web project, except for the last 5 which are in the nop.Admin project

\Views\Blog\BlogPost.cshtml  blogpost_page_before_body
\Views\Blog\BlogPost.cshtml  blogpost_page_before_comments
\Views\Blog\BlogPost.cshtml  blogpost_page_inside_comment
\Views\Blog\BlogPost.cshtml  blogpost_page_after_comments
\Views\Blog\BlogPost.Mobile.cshtml  mobile_blogpost_page_before_body
\Views\Blog\BlogPost.Mobile.cshtml  mobile_blogpost_page_before_comments
\Views\Blog\BlogPost.Mobile.cshtml  mobile_blogpost_page_inside_comment
\Views\Blog\BlogPost.Mobile.cshtml  mobile_blogpost_page_after_comments
\Views\Blog\List.cshtml  bloglist_page_before_posts
\Views\Blog\List.cshtml  bloglist_page_inside_post
\Views\Blog\List.cshtml  bloglist_page_after_posts
\Views\Blog\List.Mobile.cshtml  mobile_bloglist_page_before_posts
\Views\Blog\List.Mobile.cshtml  mobile_bloglist_page_inside_post
\Views\Blog\List.Mobile.cshtml  mobile_bloglist_page_after_posts
\Views\Catalog\_AddToCart.cshtml  productdetails_add_info
\Views\Catalog\_AddToCart.Mobile.cshtml  mobile_productdetails_add_info
\Views\Catalog\_ProductBox.cshtml  productbox_add_info
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml  categorydetails_after_breadcrumb
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml  categorydetails_top
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml  categorydetails_before_subcategories
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml  categorydetails_before_featured_products
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml  categorydetails_after_featured_products
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml  categorydetails_before_filters
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml  categorydetails_before_product_list
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.cshtml  categorydetails_bottom
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.Mobile.cshtml  mobile_categorydetails_top
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.Mobile.cshtml  mobile_categorydetails_before_subcategories
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.Mobile.cshtml  mobile_categorydetails_before_featured_products
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.Mobile.cshtml  mobile_categorydetails_before_product_list
\Views\Catalog\CategoryTemplate.ProductsInGridOrLines.Mobile.cshtml  mobile_categorydetails_bottom
\Views\Catalog\CompareProducts.cshtml  compareproducts_row
\Views\Catalog\CompareProducts.Mobile.cshtml  mobile_compareproducts_row
\Views\Catalog\ManufacturerTemplate.ProductsInGridOrLines.cshtml  manufacturerdetails_top
\Views\Catalog\ManufacturerTemplate.ProductsInGridOrLines.cshtml  manufacturerdetails_before_featured_products
\Views\Catalog\ManufacturerTemplate.ProductsInGridOrLines.cshtml  manufacturerdetails_after_featured_products
\Views\Catalog\ManufacturerTemplate.ProductsInGridOrLines.cshtml  manufacturerdetails_before_filters
\Views\Catalog\ManufacturerTemplate.ProductsInGridOrLines.cshtml  manufacturerdetails_before_product_list
\Views\Catalog\ManufacturerTemplate.ProductsInGridOrLines.cshtml  manufacturerdetails_bottom
\Views\Catalog\ManufacturerTemplate.ProductsInGridOrLines.Mobile.cshtml  mobile_manufacturerdetails_top
\Views\Catalog\ManufacturerTemplate.ProductsInGridOrLines.Mobile.cshtml  mobile_manufacturerdetails_before_featured_products
\Views\Catalog\ManufacturerTemplate.ProductsInGridOrLines.Mobile.cshtml  mobile_manufacturerdetails_before_product_list
\Views\Catalog\ManufacturerTemplate.ProductsInGridOrLines.Mobile.cshtml  mobile_manufacturerdetails_bottom
\Views\Catalog\ProductBreadcrumb.cshtml  productbreadcrumb_before
\Views\Catalog\ProductBreadcrumb.cshtml  productbreadcrumb_after
\Views\Catalog\ProductReviews.cshtml  productreviews_page_top
\Views\Catalog\ProductReviews.cshtml  productreviews_page_inside_review
\Views\Catalog\ProductReviews.cshtml  productreviews_page_bottom
\Views\Catalog\ProductReviews.Mobile.cshtml  mobile_productreviews_page_top
\Views\Catalog\ProductReviews.Mobile.cshtml  mobile_productreviews_page_inside_review
\Views\Catalog\ProductReviews.Mobile.cshtml  mobile_productreviews_page_bottom
\Views\Catalog\ProductsByTag.cshtml  productsbytag_top
\Views\Catalog\ProductsByTag.cshtml  productsbytag_before_product_list
\Views\Catalog\ProductsByTag.cshtml  productsbytag_bottom
\Views\Catalog\ProductsByTag.Mobile.cshtml  mobile_productsbytag_top
\Views\Catalog\ProductsByTag.Mobile.cshtml  mobile_productsbytag_bottom
\Views\Catalog\ProductTemplate.Grouped.cshtml  productdetails_top
\Views\Catalog\ProductTemplate.Grouped.cshtml  productdetails_before_pictures
\Views\Catalog\ProductTemplate.Grouped.cshtml  productdetails_after_pictures
\Views\Catalog\ProductTemplate.Grouped.cshtml  productdetails_overview_top
\Views\Catalog\ProductTemplate.Grouped.cshtml  productdetails_overview_bottom
\Views\Catalog\ProductTemplate.Grouped.cshtml  productdetails_before_collateral
\Views\Catalog\ProductTemplate.Grouped.cshtml  productdetails_bottom
\Views\Catalog\ProductTemplate.Grouped.Mobile.cshtml  mobile_productdetails_top
\Views\Catalog\ProductTemplate.Grouped.Mobile.cshtml  mobile_productdetails_before_pictures
\Views\Catalog\ProductTemplate.Grouped.Mobile.cshtml  mobile_productdetails_after_pictures
\Views\Catalog\ProductTemplate.Grouped.Mobile.cshtml  mobile_productdetails_bottom
\Views\Catalog\ProductTemplate.Simple.cshtml  productdetails_top
\Views\Catalog\ProductTemplate.Simple.cshtml  productdetails_before_pictures
\Views\Catalog\ProductTemplate.Simple.cshtml  productdetails_after_pictures
\Views\Catalog\ProductTemplate.Simple.cshtml  productdetails_overview_top
\Views\Catalog\ProductTemplate.Simple.cshtml  productdetails_overview_bottom
\Views\Catalog\ProductTemplate.Simple.cshtml  productdetails_before_collateral
\Views\Catalog\ProductTemplate.Simple.cshtml  productdetails_bottom
\Views\Catalog\ProductTemplate.Simple.Mobile.cshtml  mobile_productdetails_top
\Views\Catalog\ProductTemplate.Simple.Mobile.cshtml  mobile_productdetails_before_pictures
\Views\Catalog\ProductTemplate.Simple.Mobile.cshtml  mobile_productdetails_after_pictures
\Views\Catalog\ProductTemplate.Simple.Mobile.cshtml  mobile_productdetails_bottom
\Views\Catalog\Search.cshtml  productsearch_page_basic
\Views\Catalog\Search.cshtml  productsearch_page_advanced
\Views\Catalog\SearchBox.cshtml  searchbox
\Views\Catalog\SearchBox.Mobile.cshtml  mobile_searchbox
\Views\Checkout\BillingAddress.cshtml  checkout_billing_address_top
\Views\Checkout\BillingAddress.cshtml  checkout_billing_address_middle
\Views\Checkout\BillingAddress.cshtml  checkout_billing_address_bottom
\Views\Checkout\BillingAddress.Mobile.cshtml  mobile_checkout_billing_address_top
\Views\Checkout\BillingAddress.Mobile.cshtml  mobile_checkout_billing_address_middle
\Views\Checkout\BillingAddress.Mobile.cshtml  mobile_checkout_billing_address_bottom
\Views\Checkout\CheckoutProgress.cshtml  checkout_progress_before
\Views\Checkout\CheckoutProgress.cshtml  checkout_progress_after
\Views\Checkout\Completed.cshtml  checkout_completed_top
\Views\Checkout\Completed.cshtml  checkout_completed_bottom
\Views\Checkout\Completed.Mobile.cshtml  mobile_checkout_completed_top
\Views\Checkout\Completed.Mobile.cshtml  mobile_checkout_completed_bottom
\Views\Checkout\Confirm.cshtml  checkout_confirm_top
\Views\Checkout\Confirm.cshtml  checkout_confirm_bottom
\Views\Checkout\Confirm.Mobile.cshtml  mobile_checkout_confirm_top
\Views\Checkout\Confirm.Mobile.cshtml  mobile_checkout_confirm_bottom
\Views\Checkout\OpcBillingAddress.cshtml  op_checkout_billing_address_top
\Views\Checkout\OpcBillingAddress.cshtml  op_checkout_billing_address_middle
\Views\Checkout\OpcBillingAddress.cshtml  op_checkout_billing_address_bottom
\Views\Checkout\OpcConfirmOrder.cshtml  op_checkout_confirm_top
\Views\Checkout\OpcConfirmOrder.cshtml  op_checkout_confirm_bottom
\Views\Checkout\OpcPaymentInfo.cshtml  op_checkout_payment_info_top
\Views\Checkout\OpcPaymentInfo.cshtml  op_checkout_payment_info_bottom
\Views\Checkout\OpcPaymentMethods.cshtml  op_checkout_payment_method_top
\Views\Checkout\OpcPaymentMethods.cshtml  op_checkout_payment_method_bottom
\Views\Checkout\OpcShippingAddress.cshtml  op_checkout_shipping_address_top
\Views\Checkout\OpcShippingAddress.cshtml  op_checkout_shipping_address_middle
\Views\Checkout\OpcShippingAddress.cshtml  op_checkout_shipping_address_bottom
\Views\Checkout\OpcShippingMethods.cshtml  op_checkout_shipping_method_top
\Views\Checkout\OpcShippingMethods.cshtml  op_checkout_shipping_method_bottom
\Views\Checkout\PaymentInfo.cshtml  checkout_payment_info_top
\Views\Checkout\PaymentInfo.cshtml  checkout_payment_info_bottom
\Views\Checkout\PaymentInfo.Mobile.cshtml  mobile_checkout_payment_info_top
\Views\Checkout\PaymentInfo.Mobile.cshtml  mobile_checkout_payment_info_bottom
\Views\Checkout\PaymentMethod.cshtml  checkout_payment_method_top
\Views\Checkout\PaymentMethod.cshtml  checkout_payment_method_bottom
\Views\Checkout\PaymentMethod.Mobile.cshtml  mobile_checkout_payment_method_top
\Views\Checkout\PaymentMethod.Mobile.cshtml  mobile_checkout_payment_method_bottom
\Views\Checkout\ShippingAddress.cshtml  checkout_shipping_address_top
\Views\Checkout\ShippingAddress.cshtml  checkout_shipping_address_middle
\Views\Checkout\ShippingAddress.cshtml  checkout_shipping_address_bottom
\Views\Checkout\ShippingAddress.Mobile.cshtml  mobile_checkout_shipping_address_top
\Views\Checkout\ShippingAddress.Mobile.cshtml  mobile_checkout_shipping_address_middle
\Views\Checkout\ShippingAddress.Mobile.cshtml  mobile_checkout_shipping_address_bottom
\Views\Checkout\ShippingMethod.cshtml  checkout_shipping_method_top
\Views\Checkout\ShippingMethod.cshtml  checkout_shipping_method_bottom
\Views\Checkout\ShippingMethod.Mobile.cshtml  mobile_checkout_shipping_method_top
\Views\Checkout\ShippingMethod.Mobile.cshtml  mobile_checkout_shipping_method_bottom
\Views\Common\ContactUs.cshtml  contactus_top
\Views\Common\ContactUs.cshtml  contactus_bottom
\Views\Common\ContactUs.Mobile.cshtml  mobile_contactus_top
\Views\Common\ContactUs.Mobile.cshtml  mobile_contactus_bottom
\Views\Common\Footer.cshtml  footer
\Views\Common\Footer.Mobile.cshtml  mobile_footer
\Views\Common\HeaderLinks.cshtml  header_links_before
\Views\Common\HeaderLinks.cshtml  header_links_after
\Views\Common\HeaderLinks.Mobile.cshtml  mobile_header_links_before
\Views\Common\HeaderLinks.Mobile.cshtml  mobile_header_links_after
\Views\Common\InfoBlock.cshtml  infoblock_before
\Views\Common\InfoBlock.cshtml  infoblock_after
\Views\Common\InfoBlock.Mobile.cshtml  mobile_infoblock_before
\Views\Common\InfoBlock.Mobile.cshtml  mobile_infoblock_after
\Views\Common\Menu.cshtml  header_menu_before
\Views\Common\Menu.cshtml  header_menu_after
\Views\Customer\MyAccountNavigation.cshtml  account_navigation_before
\Views\Customer\MyAccountNavigation.cshtml  account_navigation_after
\Views\Customer\MyAccountNavigation.Mobile.cshtml  mobile_account_navigation_before
\Views\Customer\MyAccountNavigation.Mobile.cshtml  mobile_account_navigation_after
\Views\Home\Index.cshtml  home_page_top
\Views\Home\Index.cshtml  home_page_bottom
\Views\Home\Index.Mobile.cshtml  mobile_home_page_top
\Views\Home\Index.Mobile.cshtml  mobile_home_page_bottom
\Views\News\List.cshtml  newslist_page_before_items
\Views\News\List.cshtml  newslist_page_inside_item
\Views\News\List.cshtml  newslist_page_after_items
\Views\News\List.Mobile.cshtml  mobile_newslist_page_before_items
\Views\News\List.Mobile.cshtml  mobile_newslist_page_inside_item
\Views\News\List.Mobile.cshtml  mobile_newslist_page_after_items
\Views\News\NewsItem.cshtml  newsitem_page_before_body
\Views\News\NewsItem.cshtml  newsitem_page_before_comments
\Views\News\NewsItem.cshtml  newsitem_page_inside_comment
\Views\News\NewsItem.cshtml  newsitem_page_after_comments
\Views\News\NewsItem.Mobile.cshtml  mobile_newsitem_page_before_body
\Views\News\NewsItem.Mobile.cshtml  mobile_newsitem_page_before_comments
\Views\News\NewsItem.Mobile.cshtml  mobile_newsitem_page_inside_comment
\Views\News\NewsItem.Mobile.cshtml  mobile_newsitem_page_after_comments
\Views\Order\Details.cshtml  orderdetails_page_top
\Views\Order\Details.cshtml  orderdetails_page_overview
\Views\Order\Details.cshtml  orderdetails_page_beforeproducts
\Views\Order\Details.cshtml  orderdetails_page_afterproducts
\Views\Order\Details.cshtml  orderdetails_page_bottom
\Views\Order\Details.Mobile.cshtml  mobile_orderdetails_page_top
\Views\Order\Details.Mobile.cshtml  mobile_orderdetails_page_overview
\Views\Order\Details.Mobile.cshtml  mobile_orderdetails_page_beforeproducts
\Views\Order\Details.Mobile.cshtml  mobile_orderdetails_page_afterproducts
\Views\Order\Details.Mobile.cshtml  mobile_orderdetails_page_bottom
\Views\Profile\Info.cshtml  profile_page_info_userdetails
\Views\Profile\Info.cshtml  profile_page_info_userstats
\Views\Profile\Info.Mobile.cshtml  mobile_profile_page_info_userdetails
\Views\Profile\Info.Mobile.cshtml  mobile_profile_page_info_userstats
\Views\Shared\_ColumnsOne.cshtml  main_column_before
\Views\Shared\_ColumnsOne.cshtml  main_column_after
\Views\Shared\_ColumnsThree.cshtml  left_side_column_before
\Views\Shared\_ColumnsThree.cshtml  left_side_column_after_category_navigation
\Views\Shared\_ColumnsThree.cshtml  left_side_column_after
\Views\Shared\_ColumnsThree.cshtml  main_column_before
\Views\Shared\_ColumnsThree.cshtml  main_column_after
\Views\Shared\_ColumnsThree.cshtml  right_side_column_before
\Views\Shared\_ColumnsThree.cshtml  right_side_column_after
\Views\Shared\_ColumnsTwo.cshtml  left_side_column_before
\Views\Shared\_ColumnsTwo.cshtml  left_side_column_after_category_navigation
\Views\Shared\_ColumnsTwo.cshtml  left_side_column_after
\Views\Shared\_ColumnsTwo.cshtml  main_column_before
\Views\Shared\_ColumnsTwo.cshtml  main_column_after
\Views\Shared\_Notifications.cshtml  notifications
\Views\Shared\_Notifications.Mobile.cshtml  mobile_notifications
\Views\Shared\_Root.cshtml  body_start_html_tag_after
\Views\Shared\_Root.cshtml  content_before
\Views\Shared\_Root.cshtml  content_after
\Views\Shared\_Root.cshtml  body_end_html_tag_before
\Views\Shared\_Root.Head.cshtml  head_html_tag
\Views\Shared\_Root.Head.Mobile.cshtml  mobile_head_html_tag
\Views\Shared\_Root.Mobile.cshtml  mobile_body_start_html_tag_after
\Views\Shared\_Root.Mobile.cshtml  mobile_content_before
\Views\Shared\_Root.Mobile.cshtml  mobile_content_after
\Views\Shared\_Root.Mobile.cshtml  mobile_body_end_html_tag_before
\Views\Shared\_RootPopup.cshtml  head_html_tag
\Views\Shared\_RootPopup.cshtml  body_start_html_tag_after
\Views\Shared\_RootPopup.cshtml  body_end_html_tag_before
\Views\Shared\Header.cshtml  header
\Views\Shared\Header.cshtml  header_selectors
\Views\ShoppingCart\OrderSummary.cshtml  order_summary_content_before
\Views\ShoppingCart\OrderSummary.cshtml  order_summary_cart_footer
\Views\ShoppingCart\OrderSummary.cshtml  order_summary_content_deals
\Views\ShoppingCart\OrderSummary.cshtml  order_summary_content_after
\Views\ShoppingCart\OrderSummary.Mobile.cshtml  mobile_order_summary_content_before
\Views\ShoppingCart\OrderSummary.Mobile.cshtml  mobile_order_summary_content_deals
\Views\ShoppingCart\OrderSummary.Mobile.cshtml  mobile_order_summary_content_after
\Administration\Views\Home\Index.cshtml  admin_dashboard_top
\Administration\Views\Home\Index.cshtml  admin_dashboard_bottom
\Administration\Views\Shared\_AdminLayout.cshtml  admin_header_before
\Administration\Views\Shared\_AdminLayout.cshtml  admin_header_middle
\Administration\Views\Shared\_AdminLayout.cshtml  admin_header_after
6 years ago
Great topic!
6 years ago
cyberspy wrote:
Hi,

Having just started developing nopCommerce (and having forked out for the User Guide, which is rather optimistically described as "is the definitive guide to installing, configuring, building, maintaining an e-commerce site using the nopCommerce" but fails in many areas especially if you are a developer) I wanted to know where all the widget zones where.
I was surprised to find there was no definitive list, so I thought I'd create one, for all you budding Widget developers out there.

Below are two lists. The first is just a list of the widget zones that are available. The second is a list of all the cshtml files in which they appear. The list is based on a new install of nopCommerce 3.10 - no additional plugins or themes.

To add a new widget zone, add a line like:
@Html.Widget("your_new_widget_zone_name")

to the appropriate .cshtml file, and return the same name in the
public IList<string> GetWidgetZones()
method in your Widget's Plugin class.

Hope you all find it useful. Please vote for this post if you do!

.....shortened.....



There's no 'definitive list', because you can add as many zone as you like by calling the @Html.Widget("ZONE_NAME") method at any place in the view, and this will create a new zone for injection.

In other words, while the original Views has their own Widget Zones, the themes can override these without any additional configuration. In short, Widget Zones are super flexible and is not tied to a specific configuration or list.

Hope this explains. :)
6 years ago
@rcianci - Thanks!

@woncherk
Yeah, I'd sort of guessed that. However, it's useful to have a starting point
6 years ago
cyberspy,

This list is very helpful and complete.

One thing I would like to know is where are these widgets defined?

Where would I go to see the coding of a specific widget?

Thanks,
Tony
6 years ago
Carneno,

They are created as plugins.

There are a couple that come with the source code.
Have a look in the Plugins folder - the one in the root of the solution, not the one in the Nop.Web project ( this is where plugins go when they have been compiled)

There are two there by default - Nop.Plugin.Widgets.GoogleAnalytics and Nop.Plugin.Widgets.NivoSlider
Have a look at the source code to see how it's done

You can also have a look at this tutorial on creating plugins:
https://www.nopcommerce.com/docs/77/how-to-write-a-nopcommerce-plugin.aspx

Documentation is not one of nopCommerce's strengths

Regards

Adam
6 years ago
Adam,

Thanks for your help.

I looked at the Nivo Slider plugin and cannot see where it says to display it as the first item in the body of the page.

When I look at _Root.Head.cshtml and see this "@Html.Widget("head_html_tag")", If I do a find of the whole solution for "head_html_tag", it only finds the other views that have the same statement.  It does not tell me where the widget is.

What is it that tells the Nivo Slider to display at the start of the page body?

Thanks,
Tony
6 years ago
Carneno,

If you look in NivoSliderPlugin.cs, you'll find this code:


        /// <summary>
        /// Gets widget zones where this widget should be rendered
        /// </summary>
        /// <returns>Widget zones</returns>
        public IList<string> GetWidgetZones()
        {
            return new List<string>() { "home_page_top" };
        }


You can change the "home_page_top" to the zone you want it to appear in. If you want it in multiple zones, then a comma separated list e.g.

return new List<string>() { "home_page_top", "another_widget_zone", "yet_another_zone" };


You can use my list above to see all the default zones, or you can add more zones by adding more lines like

@Html.Widget("head_html_tag")


in other .cshtml files (use another name, or all the widgets that should appear in 'head_html_tag' will appear in your new zone too!

Please voter up my posts if they are of use ;-)

Regards

Adam
6 years ago
Thanks Adam.

I'm starting to get a better understanding of how the widgets processing works.

So, this "@Html.Widget("head_html_tag")" tells the view to create a new zone in the view that contains it.  Right?

I'm not sure about your explanation of:
cyberspy wrote:

You can change the "home_page_top" to the zone you want it to appear in. If you want it in multiple zones, then a comma separated list e.g.

return new List<string>() { "home_page_top", "another_widget_zone", "yet_another_zone" };


I tried:
 return new List<string>() { "home_page_top", "home_page_bottom" };

and the NivoSlider stayed on the top of the home page.

I also tried:
 return new List<string>() { "home_page_top", "left_side_column_before" };

and the NivoSlider moved from the top of the home page to the left side top in a 3 column layout.

The widget placement is not working the way you explained it.

I cleaned the solution and rebuilt it before each test.

Thanks,
Tony
6 years ago
nivo slider should not work more then once in the same page.
the Nivo javascript is using div Id which must to be unique

when u are placing the same nivo plugin more then once in the same page u are creating divs with the same Id
that is why it will only run once.

take a look kick starter, it looks for an element with nivo-slider Id and there should be only one:


<script type="text/javascript">
    $(window).load(function () {
        $('#nivo-slider').nivoSlider();
    });
</script>
  

u can modify the code and add the zone name to  the Id ( nivo-slider + zone name), this way u will have a unique Id to each of the running sliders
.