Documentation

Ucommerce includes full API reference documentation and lots of helpful articles to help you build your e-commerce site as effortlessly as possible.

Topics Payment Providers
v7.18

Setting up Ucommerce.Sitefinity.UI

  1. Setup a Sitefinity website through NuGet.
  2. Install Ucommerce.Sitefinity package from NuGet
  3. Install Ucommerce.Sitefinity.UI package from NuGet
    • If upgrading from Ucommerce.Sitefinity 8.4.0 or 8.4.1: After installing Ucommerce.Sitefinity.UI run the console command: Update-Package -reinstall 4.If you want to show defintion fields on ProductPage and CategoryPage, setup a custom IndexDefintion to decide the properties you want to shot

Note about Ucommerce.Sitefinity.UI 1.0.3.20066

  • We noticed a case where the total of the mini cart widget doesn’t immediately update to the latest total upon adding to cart
  • Workaround: Programmatically refresh the page after adding to cart

Since we only use test data in this case, we need to do these some extra steps:

  • Go to Ucommerce>Settings>Security>Users, enter a user and click save Save user in Ucommerce screenshot

  • Change the Payment method Service to Default Payment Method Service inside of the Settings>Orders>Payment Methods and add the AcceptURL link Change the Payment method service screenshot

  • Run the ScratchIndexer in Ucommerce>Settings>Search Run ScratchIndexer in Ucommerce screenshot

  • Disable Use Cached Controller Container Assemblies, by going into Sitefinity Settings>Advanced>Feather, removing the checkmark and recycling the application. Feather settings in Sitefinity screenshot


Create Page Template called Ucommerce Template with Template: Left Sidebar, Header, Footer. Create template screenshot


Create pages with the Ucommerce Template called: Products, Cart, Address, Shipping, Payment, Confirm, Completed Create pages screenshot


Go to the Ucommerce Page Template and enter the editor

Put the Mini Basket widget in the header Put the Category Navigation in the left sidebar Template layout screenshot

Edit the mini basket to have Cart Page point to >Cart< Edit mini basket screenshot

Edit the Category Navigation to have Product listing page and Search page point to >Products< Edit category navigation screenshot

Save and publish


Go to the Products Page Editor

Put the Products widget in Column 2 Put the Facets Filter in the Left Sidebar Products page layout screenshot

Edit the Products widget with Single product settings Show in existing page, that points to >Products< Edit products screenshot

In order to ensure your facets are working properly, there is a setting you need to adjust in Sitefinity - on your Products page you need to go to Settings > Title & properties. Products Enable Facets step 1

Unfold the Advanced options and in the Caching options drop down select No Caching. Products Enable Facets step 2

Save and publish


Go to the Cart Page Editor

Put the Cart widget in Column 2 Cart page layout screenshot

Edit the Cart widget with Next Page to point to >Address<, and Product Details Page pointing to >Products< Edit cart screenshot

Save and publish


Go to the Address Page Editor

Put the Address Information in Column 2 Address page layout screenshot

Edit the Address Information widget with Next Page to point to >Shipping<, and Previous Page to point to >Cart< Edit address screenshot

Save and publish


Go to the Shipping Page Editor

Put the Shipping Picker in Column 2 Shipping page layout screenshot

Edit the Shipping Picker widget with Next Page to point to >Payment<, and Previous Page to point to >Address< Edit shipping screenshot

Save and publish


Go to the Payment Page Editor

Put the Payment Picker in Column 2 Payment page layout screenshot

Edit the Payment Picker widget with Next Page to point to >Confirm<, and Previous Page to point to >Shipping< Edit payment screenshot

Save and publish


Go to the Confirm Page Editor

Put the Basket Preview widget in Column 2 Confirm page layout screenshot

Edit the Basket Preview widget with Next Page to point to >Completed<, and Previous Page to point to >Payment< Edit confirm screenshot

Save and publish


Go to the Completed Page Editor

Put the Confirmation Message in Column 2 Completed page layout screenshot

Save and publish


You can now navigate to the website, and see the Ucommerce widgets in action! Going through the checkout flow will complete the order, and you will be able to see it in the Ucommerce back office.

Be aware that some of the default products and variants have no price, and the Marketing Campaign is giving sale on some of the products, this can all be manually changed in the back office.