• Posted By: Lee Messenger
  • Tagged: FastTrack

With the release of v2.1.0 came a new starter kit, and a much faster way to build eCommerce sites in Umbraco and Merchello.

Our original Bazaar took quite a bit of understanding if you wanted to customise it or pull it into an existing websites. So, after getting feedback from the community we sat down and focused on a new starter kit.

One that would still work out the box but one that could easily be pulled into an existing site, and extended where needed.

Note: Baazar is still available, it’s been moved to it’s own repo on Github for the community to manage/update/extend.

https://github.com/Merchello/Merchello.Bazaar

Package

You can download the FastTrack package from the bottom of the Merchello our.umbraco package and it installs like a normal Umbraco package (You MUST have Merchello installed first).

https://our.umbraco.org/projects/collaboration/merchello/

We also have a nuget package available, which installs the FastTrack functionality but not the website itself (Nodes, Styles etc…)

https://www.nuget.org/packages/Merchello.FastTrack/

This is what you would use on your own custom website, and then override the necessary Actions/Models as outlined below.

Overview

Through various feedback and our own experiences, one of the biggest challenges people have had implementing a Merchello store is that in previous “starter kits” (such as the Bazaar) was having to deal with completely new set of view models and “route hijacking” controllers that were introduced into their solution.

Merchello’s new approach is to utilize Umbraco’s built in mechanism for defining MVC areas by decorating controller classes with a PluginControllerAttribute and assigning an area name.

By using this strategy, the idea is to allow you as the implementer to use your own Umbraco document types and views and embed various Merchello store components rather than be forced into any one particular setup.

It also allows for selectively using controllers provided by Merchello or customized versions developed either extended or completely developed by the implementer(s).

Merchello uses standard Umbraco Surface Controllers for presenting store data or collecting form data required by Merchello.

Form views are rendered to the UI by use of MVC ChildAction methods on respective controllers. The actual Merchello MVC pattern itself (Fast Track) is designed to be extensible so that an implementer continues to have the option of completely custom implementations by creating their own controllers or even customizing and extending an existing implementation.

The default view locations for the controllers are located with their respective Plugin (Umbraco "MVC Areas").

  • FastTrack AREA views are located: App_Plugins/FastTrack/Views
  • Merchello AREA views are located: App_Plugins/Merchello/Views

 
Note: Alternatively (if you don't like having these views nested under each AppPlugin folder) you can move them to the root /Views folder. If you do this, it is recommended to remove the views from the AppPlugins folder just to avoid confusion.

By default, Merchello uses the MVC default for folder name = controller name (minus the Controller suffix). e.g.

BasketController = folder named ‘Basket‘

and

public virtual ActionResult BasketForm ( string view = "")

Has a view BasketForm.cshtml located inside the Basket folder.

Example: The default BasketController is assigned to the “Merchello” area with the PluginControllerAttribute as shown below.

[ PluginController ( "Merchello" )] 
public class BasketController : BasketControllerBase < StoreBasketModel , StoreLineItemModel , StoreAddItemModel> { ...

This controller has a method named

BasketForm(string view = "")

which by default will render a view named “BasketForm.cshtml”. Umbraco will look for a view for the Merchello area for the Basket controller in:

/App_Plugins/Merchello/Views/Basket/BasketForm.cshtml

Rendering the basket is done via Html.Action in an Umbraco template.

@Html.Action("BasketForm", "Basket", new { area = "Merchello" })

The developer now has the choice of either using the default configuration or creating their own implementation in a separate area. To create a new area, the developer needs to create a new controller, even optionally defining variations of the respective models used by the controller and then decorate the class with their own PluginControllerAttribute .

[PluginController("MySite")]
public class BasketController : BasketControllerBase < MyBasketModel , MyLineItemModel , MyAddItemModel> { ...

Note: Custom models must implement interfaces defined in Merchello.Web.Models.UI

In this case The BasketForm.cshtml view should be placed in:

/App_Plugins/MySite/Views/Basket/BasketForm.cshtml

Rendering this version of the basket would then be done via Html.Action in an Umbraco template.

@Html.Action("BasketForm","Basket", new { area="MySite" })

Another good example is in the PaymentMethod.cshtml view.

// This is referencing the FastTrack area (so App_Plugins/FastTrack/Views) 
@Html.Action("PaymentMethodForm", "CheckoutPaymentMethod", new { area="FastTrack" })
// This is referencing the Merchello area (so App_Plugins/Merchello/Views)
@Html.Action("DiscountForm", "CheckoutDiscount" , new { area="Merchello" })

The FastTrack is actually doing exactly the same as you could do yourself, taking the base Merchello controllers/actions and overriding them so it can add specific logic which relates to the FastTrack site.

An example of this would be the checkout, it keeps track of the current checkout step and after each form submission during a stage works out the next page to display to the user.

Again, the next page is just using the FastTrack actions you can see below.

You can see for yourself how FastTrack works and how it’s overriding the controller/actions/models in the source for the FastTrack on Github.

https://github.com/Merchello/Merchello/tree/merchello-dev/src/Merchello.FastTrack

FastTrack Actions

If you open up the FastTrack views you will see they are just standard Umbraco views and just call the Actions defined below.

Default Merchello

Rendering The Basket on the page

@Html.Action("BasketForm", "Basket", new { area = "Merchello" })

Rendering the Discount Form

@Html.Action("DiscountForm", "CheckoutDiscount", new { area = "Merchello" })

Render the Add to Basket forms for products

@Html.Action("AddProductToBasketForm", "Basket", new { area = "Merchello" , model = Model })

FastTrack

Basket Summary

@Html.Action("BasketSummary", "CheckoutSummary", new { area = "FastTrack" })

Render the Invoice Summary

@Html.Action("InvoiceSummary", "CheckoutSummary", new { area = "FastTrack" })

Render the SalesReceipt

@Html.Action("SalesReceipt", "CheckoutSummary" ,new { area = "FastTrack" })

Render the Billing Address Form

@Html.Action("BillingAddressForm", "CheckoutAddress", new { area = "FastTrack" });

Render the ShippingAddressForm

@Html.Action("ShippingAddressForm", "CheckoutAddress", new { area = "FastTrack" })

Render the Shipping Rate Quote form

@Html.Action("ShipRateQuoteForm", "CheckoutShipRateQuote", new { area = "FastTrack" })

Render the PaymentMethodForm

@Html.Action("PaymentMethodForm", "CheckoutPaymentMethod", new { area = "FastTrack" })

Render the ResolvePayment

@Html.Action("ResolvePayment", "CheckoutPaymentMethod", new { area = "FastTrack" })

Render the LoginForm

@Html.Action("LoginForm", "CustomerMembership", new { area = "FastTrack" })

Render the RegisterForm

@Html.Action("RegisterForm", "CustomerMembership", new { area = "FastTrack" })

Render the CustomerSalesHistory

@Html.Action("CustomerSalesHistory", "CustomerMembership", new { area = "FastTrack" })

Render the CustomerBillingAddress

@Html.Action("CustomerBillingAddress", "CustomerMembership", new { area = "FastTrack" })

Render the CustomerShippingAddress

@Html.Action("CustomerShippingAddress", "CustomerMembership", new { area = "FastTrack" })

If you kept the same node structure

Customising

If you are developing a bespoke site, you can still use the API’s as you could previously and not use any of the above. Take a look at our docs for more information on that.

https://merchello.readme.io/

In the next blog posts, I will cover how to customise FastTrack (using the Nuget package) and show how flexible and easy it is to use your own models and add your own logic to your own website.

Become A Merchello Solution Partner

Merchello's goal is to make you and your clients successful.

Because the needs of every partner are different, we offer two levels of partnership - Gold and Silver.

Each level has unique benefits, all with the goal of connecting partners to our community and helping them succeed.

Apply Today!

  • Get Listed On the official Merchello website
  • Priority Placement Get your business noticed
  • Get Merchello Leads From the Merchello website
  • Premium Support For your Merchello projects
  • Discounts On official Merchello plugins
  • Your Company Featured In our Newsletter