Creating a Dynamic ecommerce Website With Umbraco and Vendr

Update: Since the Dynamic Vines website launch in 2020, Vendr has been awarded the "best expansion" award for adding substantial functionality to Umbraco and demonstrating how the CMS can be a true experience platform! 

We rounded off 2020 with the launch of the Dynamic Vines website; the UK's leading importer of premium biodynamic & organic wine.

The project became a blend of a series of custom integrations on Umbraco and the usage of smart out-of-the-box features from the intuitive ecommerce platform, Vendr.  

Let’s talk about a few ways Umbraco and Vendr helped produce a flexible, scalable ecommerce solution for our partner, Dynamic Vines.

But first, a little about the two solutions:  

The Umbraco CMS (in a nutshell). 

We work with Umbraco (not just because we’re a Gold Partner) but because we trust it. 

Its friendly, customisable nature gives every end user, from content editors to developers, the tools to continuously power up their digital presence. 

What most people don’t realise about Umbraco is that it has a thriving ecosystem. Yes, it’s the leading open source ASP.NET CMS, but it’s also backed by a 200,000-strong developer community, a highly skilled commercial company and a dedicated partner programme, which means if your business is on Umbraco, you are never alone. 

For over a decade, the expert community that comes with the Umbraco CMS has inspired us to contribute and absorb the forward-thinking solutions that we share with our clients today.

And Vendr?

Vendr is the intuitive, flexible ecommerce solution that can be added to your existing Umbraco v8 site, so if you’re already on Umbraco, this ecommerce extension will feel like home. This is because Vendr follows many of the design patterns found in the latest version of Umbraco and allows the entire catalogue of existing Umbraco third-party Integrations to work with Vendr, slotting onto existing projects with minimum fuss.

Vendr doesn’t just handle your products, it boasts smart out-of-the-box features from common payment providers to multi-language, multi-currency (actually, multi-almost-everything support), transforming businesses into modern digital outlets.

Umbraco and Vendr are stronger together.

Marrying Umbraco v8 and Vendr allows us to do what we do best; to make the complex simple. 

For businesses, the two solutions combine perfectly to bring developers, content editors and store owners a more consistent backoffice experience from end to end as they seamlessly merge to produce a fluid, friendly user experience (no matter if you’re publishing an article...or adjusting an SKU).

Creating a Dynamic ecommerce Website With Umbraco and Vendr.

Dynamic Vines provide an extensive catalogue of sustainable premium products to the general public and many of the UK’s top restaurants. As a result, we created an educational and personalised user experience that serves both traders and us ordinary folk consistently from bottle to basket.

This project showcased the benefits of utilising Umbraco’s full flexibility combined with Vendr’s out-of-the-box options. 

For Dynamic Vines, content and shop now work effortlessly together to feed the right information to their team through a friendly, familiar and intuitive user interface so they can focus on keeping cellars stocked.

1. Simplified Information Architecture (IA).

Biodynamic wines have complex characteristics.

Whether they’re dry, aged in concrete vats, or gently pressed and aged for 12 months in stainless steel...wine connoisseurs want to know. Of course, with complexity comes an abundance of data.

Working with Dynamic vines to understand the importance of every detail from grape variety to the producer, we leveraged Umbraco by developing custom content templates to ensure that users could find their preferences as easily as possible. 

Custom Umbraco templates set up for individual wines, wine boxes and gift vouchers work to serve both the general public and trade customers with a unified browsing experience with a clear user journey at every stage of the buying process. By building custom block editors with Umbraco, our team could add rich content to product pages and create the ultimate user experience.

For Dynamic Vines, custom Umbraco product page templates are now an ongoing content creation alliance and a tool to keep users browsing. When there is an adaptive range of useful modules and templates to choose from, content editors can decide to use modules that can add valuable additional product information without disrupting a page’s core information and calls to action. 

But it’s not all about Umbraco. 

While Umbraco seems to be doing all the legwork here, Vendr is humming away in the Umbraco backoffice, linked via specific property editors that enable the Vendr workflow. On the below page, for example, Umbraco and Vendr effortlessly merge to display updated prices to general customers (and friends, family or trade customers equipped with a login).

Source: Dynamic Vines                                                

2. Fuss-free product import.

One of Vendr’s stand-out features is that it works well with other Umbraco packages. So, we put this feature to the test with a big challenge. 

Utilising the CMS import package on Umbraco v8, our team imported over 1500 pre-tagged product pages. It takes a bit of work to get the file ready for the import as Vendr does require a pretty specific string/formula for importing prices. Still, it is worth the configuration (from both a client and agency perspective) when the alternative options are to manually complete the content population...or write a custom script to import the content!

3. Custom search: related products. 

To keep the drinks flowing, Dynamic Vines had a desired logic in mind. With a clear understanding of what their users look for in a wine, we developed a custom Umbraco block using Examine to query and filter items stored in the index. Using Examine resulted in sophisticated filtering of related products based on a specific order of priorities set by their team, pulling in products first by related wine box, then producer, region and grape. 

4.  Advanced discount and gift card management.

Dynamic Vines have different levels of membership, yielding different rewards. Becoming a member of Dynamic Vines is to become a friend or part of the family (with many member advantages including personal touches, like expert consultation and bespoke wine trips).

To calculate specific percentage discounts for different members, Vendr’s out-of-the-box option made it easy to generate automatic and one-time discount codes for different member types, as well as the option to offer a 10% discount to visitors to the new Dynamic Vines website who’d signed up via an email; all of which could be managed with a specific start and end time. (For the full list of discount options available with Vendr, head here). 

Although Vendr does offer some great ready-to-go discount options, we needed to go further with Umbraco to create the refined approach needed to achieve specific shipping discounts. This was one of the more complex parts of the project as Cogworks strategy and development team applied custom logic to Umbraco’s codebase so that the right discount was connected with the correct membership type. 

Vendr’s flexibility and friendly user interface gives Dynamic Vines the tools to update discount rates going forward, plus, the chance to get creative! With the out-of-the-box gift card editor,  content editors and store owners can create and easily manage spur of the moment gift cards. Simply set the amount, the expiry date and it’s ready to go. This function understands face-to-face business too, with the option to manually amend a remaining balance on the card in the event of an offline purchase. 

5. Secure payment solution.

There are a ton of common payment providers available out-of-the-box from Vendr and if you can’t find what you’re looking for, it’s completely pluggable. 

With payment requirements on this project a little more complex (required to handle both shop and membership payments) we opted for a custom implementation of Stripe (the API that not only accepts payments but also helps to set up recurring plans and send invoices).  

Vendr’s open source nature allowed us to extend Stripe’s already functional capabilities with custom integrations to meet Dynamic Vines specific needs: 

Custom Stripe provider - To ensure high levels of security, we developed a custom Stripe provider, a layer of extra security that not only worked to prevent any client credentials from being stored in the Umbraco backoffice. By going “custom” with payment options, we were able to implement our DevOps practices, which allows more secure control of passwords and configurations in a specific dedicated environment such as staging, UAT or production. 

Custom payment view - So that Dynamic Vines could manage subscriptions in the best way possible, we introduced custom payments views for Stripe. Further flexibility on design and functionality allowed us to assign subscription details to specific members and provide a friendly custom view of each subscription status, just in case there are any issues with payments for example. Our team also implemented custom automation that partially filled in any signed in members details, ensuring a faster time to checkout and a better user experience for existing Dynamic Vines members.

(It did require some work to actually connect with the Stripe API, but the result is more freedom to explore different technology stacks resulting in more personalised, rich front-end experiences.)

6. Developer friendly. 

Because Vendr is built by Umbraco developers, for Umbraco developers, it is simply a new conversation in an already thriving community. 

For a Gold Partner agency and Umbraco Certified developers, working with Vendr is easy as its ethos slots into over a decade of experience and understanding of how documentation, contribution and community can continuously benefit our clients.

In true Umbraco fashion, Vendr publicises release candidates (a fully tested, production-ready build of the product) out to a community of thousands of developers all the time. Although Vendr is a paid solution, maintained by a highly skilled team of dedicated Vendr developers, they still encourage feedback from the community to ensure that every bug, every solution and every fix is applied before it reaches client projects! 

At Cogworks, Vendr is just a language we understand. Our years of Umbraco expertise hands us the tools to create intelligent, engaging experiences and to find innovative solutions with Vendr, whether that’s by extending out-of-the-box offerings (thanks to the friendly developer API with many extension points) or utilising awesome ready-to-go features. 

7. Made for content editors and store owners.

For the seasoned Umbraco v8 content editor, getting to grips with Vendr is straightforward as Vendr product nodes in the content tab use the “standard” Umbraco content editing UI, though the user experience for content editors and store owners is far from standard. 

Umbraco v8 understands modern editing, allowing content authors to create layers of complex content from adaptable content templates without getting lost in the user interface. 

For Dynamic Vines, the flexibility of Umbraco meant we could create custom reusable blocks in line with their requirements so that the user journey for browsers to their site will always remain clear and consistent. 

For those new to Umbraco and Vendr, the workflow is designed for content editors and business owners to create rich content without the need for any prior knowledge of web page editing. 

As a store owner, two additional tabs (commerce and settings) contain much of what is needed to manage a business online. Even without customisation to commerce or settings, out-of-the-box Vendr can streamline your business operations with features ranging from simple order management (allowing you to search for orders by customer name or order number) to marketing features that send automated emails out to a customer base. 

The flexibility of Umbraco and Vendr can help smooth business operations whatever the requirement. With so many extensible APIs, it’s easy for experienced Umbraco developers to create custom views (and the simplest way to do it). 

8. Collaborative work style.

The launch of Dynamic Vines illustrates the simplicity of using Umbraco v8 and Vendr together. 

To fit the needs of the business, we worked in close collaboration with the Dynamic Vines to understand how custom implementations could fit the needs of the business. Our proven Cogworks Agile workflow encourages conversation and translates complex business ideas into manageable chunks that can be delivered consistently throughout a project, so there are never any surprises.

 
A note to the future. 

As an Umbraco Gold Partner and contributing member of the open source project, ideas are always in motion for the continuous improvement of Umbraco and its counterpart friends. 

Working with Vendr has inspired the Cogworks development team to help more businesses improve relationships with customers using deeper customisation. For future ecommerce projects (amongst a few ideas) we’re currently planning to create a custom view for each specific member that will help businesses get a more rounded view of each customer. 

Working collaboratively with our clients and within the team at Cogworks works in full circle to improve solutions on Umbraco and Vendr for every end user.

In our team, ideas are often released as packages or carried forward into other projects so that they can be utilised by other businesses with similar requirements (or obstacles to overcome).

It’s fair to say we’re looking forward to the future with Vendr.  

Cogworks.