Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Apr 15 2021
Apr 15

Featuring a video from Acro Media’s YouTube tutorial series Tech Talk, this article will walk you through setting up an awesome Drupal Commerce product catalogue using Search API and Solr, and then adding various ways of filtering the results (product search, sorting options and Facet categories).

Ten steps to creating a product catalogue with Search API, Solr & Facets

These 10 steps will get you a Search API index using Solr, setup a View to display the results of the index, and then implemented 3 different ways to filter the results (search, sorting and Facets).

The end result of this guide will be a catalogue that functions in the same way as our Urban Hipster Drupal Commerce demo site’s catalogue. You can try it here. If you don’t already know why we use Search API, Solr and Facets for catalogues, check out this article to get up to speed.

Even though we’re going to be using products, once you understand how it works you’ll be able to apply the same method for other type of content such as a blog, videos, resources, and more. The datasource can change but the process is the same.

Let's get started! Follow along with this video or skip below for a written guide.

[embedded content]

What you need before starting

  1. A running Solr server (Solr 6.4+)
    This tutorial assumes you have Solr running and can make a new core.
  2. Drupal 8 installed with the following modules:

    TIP: Get most of what you need quickly with Commerce Kickstart. Note that you will still need to install the Facets module after getting your Kickstart package.
    • Commerce
      composer require drupal/commerce
    • Search API
      composer require drupal/search_api
    • Solr
      NOTE: This module requires you're running Solr 6.4+ and PHP 7
      composer require drupal/search_api_solr
    • Facets
      composer require drupal/facets

Getting started

  1. Install/start Solr and add a new core that we’ll use later.
  2. Enable the Commerce, Search API, Solr and Facets modules.

Setup a basic Commerce store

For this tutorial, get your site and basic store set up by doing the following:
  1. Add a product category taxonomy vocabulary that is at least 2 levels deep.
    If we use clothing as an example, we might have Men and Women as the first level, then t-shirts, shorts and shoes as the second level for each.
  2. Setup your basic Commerce store, product types and product variation types.
    If you’re new to Commerce, take a look at their documentation to get up and running quickly.

    NOTE: Make sure to add the taxonomy vocabulary you created as a ‘taxonomy reference’ field to your Product Type.

  3. Add 10 or more simple products for testing the catalogue as we go.

Demo Drupal Commerce today! View our demo site.

Add a Search API server and index

Search API server

Admin: Configuration > Search and metadata > Search API
Admin menu path: /admin/config/search/search-api

  1. Click ‘Add server’.
  2. Configure the server.
    1. Name your server and enable it.
    2. Set ‘Solr’ as the server ‘Backend’.
    3. Configure the Solr connector.
      The defaults are usually fine. The main things to add are:
      • Solr connector = ‘Standard’.
      • Solr core = Whatever you named your core.
    4. Under ‘Advanced’, check ‘Retrieve result data from Solr’.
    5. Look over the remaining settings and update if you need to.
Search API index

Admin:Configuration > Search and metadata > Search API
Admin menu path:/admin/config/search/search-api

The index is where you set what data source is used by Search API. Eventually, you’ll also specify specific fields to be used for filtering the displayed results.

  1. Click ‘Add index’.
  2. Configure the index.
    1. Name your index.
    2. Data source should be ‘Product’
      This can be anything, but we’re creating a Commerce catalogue and so we want to use the store products.
    3. Select the server you just created.
    4. Save. Don’t add any fields for now, we’ll do that later.
    5. Go to the ‘View’ tab and index your results. This will index all of the products you have added so far.

Create a View for the catalogue

Admin:Structure > Views
Admin menu path:/admin/structure/views

The View will use the data source we’ve identified in our index and allow us to create a catalogue with it, and then assign ways of filtering the catalogue results (i.e. a search field and/or facets).

  1. Create a new View.
    1. View Settings, select your index.
    2. Create a page (this will become our catalog).
  2. View Display settings.
    1. Format > Show
      Set as ‘Rendered entity’, then in the settings, set your product types to use a ‘Teaser’ view mode instead of the default.

      NOTE: If you don't see the 'Rendered entity' option, this seems to be a bug with Views and happens when you don't select your index before checking the 'Create a page' checkbox. To fix this, just refresh your page to start over. If that doesn't work, flush your caches.

      NOTE:You may need to create this view mode if it doesn’t already exist.

      NOTE:You could alternately use Fields instead of view modes, but I like to keep my product display settings all within the product type’s display settings. Then you can potentially customize the display per product type if you have more than one.

  3. Save the view .
    These basic settings should give us our overall catalog. You can confirm by previewing the view or visiting the page you just created.

Add Fulltext datasource fields for a catalog search field

Now we’ll start setting up a Fulltext search field to let our users filter results using a product search field. The first thing we need to do is add some datasource fields to our index that the search will use.

  1. Go to your Search API Index and go to the Fields tab.
  2. Add Fulltext fields that you would like to be searchable (such as Title, SKU, Category taxonomy name, etc.).
    Here’s an example for adding the title:
    1. Click ‘Add fields’.
    2. Under the ‘Product’ heading, click ‘Add’ beside the ‘Title’ field.

      NOTE: If you’re adding a different field instead, you may need to drill down further into the field by clicking ( + ) next to the field. For example, to make a taxonomy term a searchable field, you would go to Your Vocabulary > Taxonomy Term > Name .

    3. Click ‘Done’.
    4. Set the field ‘Type’ to ‘Fulltext’.
      This is an important step as only Fulltext fields are searchable with the user-entered text search we are currently setting up.

      NOTE: Under the fields section is a ‘Data Types’ section. You can open that to read information about each available type.

    5. Optionally change the ‘Boost’ setting.
      If you have more than one Fulltext field, the boost setting allows you to give a higher priority to specific fields for when the terms are being searched.

      For example, multiple products could have a similar title, but each product would have an individual SKU. In this case, SKU could be given a higher boost than title to make sure that search results based on the SKU come back first.

  3. Next, add another field for the ‘Published’ status.
  4. Once you’ve added this field, set it’s type as ‘Boolean’.
  5. Reindex your data (from within the index view tab).

Set up the catalogue search field within the catalogue View

We can now set up the actual search field that our customers will use to find products, and use the datasource fields we added to our index to do this.

  1. Go to your catalog View.
  2. Under ‘Filter criteria’.
    1. Add ‘Fulltext search’ and configure its settings.
      • Check ‘Expose this filter to visitors, to allow them to change it’.
        IMPORTANT:This is what gives the user the ability to use this search field.
      • ‘Filter type to expose’, set as ‘Single filter’.
      • ‘Operator’, set as ‘Contains any of these words’.
      • ‘Filter identifier’, optionally adds an identifier into the url to identify a search term filter.
        (i.e. yoursite.com/products?your-filter-identifier=search-term)
      • Apply/save your settings.
    2. Add ‘Published’ and configure it so that it is equal to true.
      This uses the field we added to the index earlier to make sure the product is actually published. Chances are you don’t want unpublished results shown to your customers.
  3. Under ‘Sort criteria’.
    1. Add ‘Relevance’.
    2. Configure so that the order is sorted ascending.
      This will show the more relevant results first (factoring in the boost you may have applied to your index fields).
  4. Now we need to expose the search field to our customers. To do this:
    1. Open the ‘Advanced’ section of your catalog view.
    2. In the ‘Exposed Form’ area.
      • Set ‘Exposed form in block’ to ‘Yes’.
        This creates a block containing a search field that we can place on the site somewhere.
      • Set ‘Exposed form style’ to ‘Basic’ and update the settings. For now, the settings you might change are customizing the submit button text and maybe including a reset button.
  5. Add the search block to your site.
    Admin menu path:/admin/structure/block
    1. In your preferred region, click the ‘Place block’ button.
    2. Find the Views block that starts with ‘Exposed form’ and click ‘Place block’.
      Its full name will be determined by you view’s machine name and page display name (i.e. Exposed form: products-page_1).
    3. Configure the block as you see fit, and save.
  6. Test your search!
    You should now be able to see the search field on your site frontend and try it out.

Add more datasource fields for sorting options

We can optionally sort the catalogue and search results with some additional sorting filters, such as sorting by Title, Price, Date added, etc. Let’s add the ability to sort our products by title with the option to choose ascending or descending order.

  1. Go to your Search API Index fields and add another 'Title' field the same as you did earlier. However, this time you want to change the field ‘Type’ to ‘String’. You should now have two Title fields added, one as ‘Fulltext’ and one as ‘String’.

    NOTE: The field type can be different depending on what field you’re adding. If you’re adding a sorting field such as Price > Number, you might use the ‘Decimal’ field type.

    TIP: I would recommend changing the label for the new Title field to something like ‘Title for sorting’ so that it’s easier to identify later. You could even change the fulltext Title label to ‘Title for search’, just to keep them organized and easy to understand.

  2. Reindex your data (from within the index view tab).
  3. Go to your catalogue View.
    1. Under ‘Sort criteria’.
      • Add the new title datasource and configure it.
        • Check ‘Expose this sort to visitors, to allow them to change it’.
          IMPORTANT: This is what gives the user the ability to use this sorting option.
        • Add a label for the filter
        • Set the initial sorting method.
      • Add any additional sorting fields if you added more.
    2. Open the settings for the ‘Exposed form style’ (within the view’s ‘Advanced’ section).
      • Check ‘Allow people to choose the sort order’.
      • Update the labels as you see fit.
    3. Save your view!
      Refresh your catalogue page and you should now see sorting options available in the search block that you added earlier.

      TIP: If you DO NOT see the sorting options, this is a bug and is easily fixed. All you need to do is remove the search block and then re-add it.

      TIP: You can place this block in multiple regions of your site and hide the elements you don’t want to see with CSS. This way you can have a block with the site search and no filters in your header, and then also have another block on your catalog pages that shows the sorting filters but no search field.

Add Facets to the catalogue

The filters we added earlier can only be used one at a time, however, often we want to filter the results based on a number of different options. For example, if I’m browsing an online store looking for shoes of a certain style and size, I don’t want to see everything else the store has to offer. I want to be able to go to a ‘shoe’ category, then pick the ‘type’ of shoe that I’m after, and finally pick the ‘size’ of shoe that’s relevant to me. I want to see all of the results that fit that criteria. Facets lets you use taxonomy (and other datasources) to achieve this.

Let’s add a Facet that uses the taxonomy vocabulary we created in the initial store setup. This will be our main catalogue menu for narrowing down the product results. Each facet that is created creates a block that we can add into any region of our template.

  1. Add a Search API index field for your taxonomy vocabulary. Set the field ‘Type’ as ‘String’.

    TIP: Like we did earlier, I would recommend renaming the label for this field to something like ‘Categories for Facet’.

  2. Reindex your data (from within the index view tab).
  3. Go to the Facets page.
    Admin: Configuration > Search and metadata > Facets
    Admin menu path: /admin/config/search/facets

    You should see a ‘Facet source’ available to use. When we created a View using our index, this is what added the Facet source here. Now that we have a source, we can create Facets to filter it.

  4. Click ‘Add facet’.
    1. Choose the ‘Facet source’ to use.
    2. Select the index ‘Field’ that this Facet will use (i.e. Categories for Facet, or whatever you labelled your field).
    3. Name your Facet (i.e. Categories).
  5. Configure the Facet.
    This will cover the basic settings that you will need. Start with this and then you can always play around with other settings later. Each setting has a pretty good description to help you understand what it does.
    1. Widget.
      Choose a ‘Widget’ for displaying the categories. For categories, I like to use ‘List of checkboxes’.
    2. Facet Settings.
      Check the following:
      • Transform entity ID to label.
      • Hide facet when facet source is not rendered.
      • URL alias as ‘cat’ (or whatever you like).
      • Empty facet behavior as ‘Do not display facet’.
      • Operator as ‘OR’.
      • Use hierarchy.
      • Enable parent when child gets disabled.
      • NOTE: the Facets Pretty Paths module can be used to give you nicer looking URL paths.
    3. Facet Sorting.
      Configure as you see fit. In this example, I would only check the following.These settings make sure that the taxonomy follows the same order that you have set within the vocabulary itself.
      • Sort by taxonomy term weight.
      • Sort order as ‘Ascending’.
    4. Save.
  6. Add the Facet block to your site.
    Admin: Structure > Block layout
    Admin menu path: /admin/structure/block
    1. In your preferred region, click the ‘Place block’ button.
    2. Find the ‘Categories’ facet block (or whatever you named it) and click ‘Place block’.
    3. Configure the block as you see fit.
    4. Save.
  7. Test your Facet!
    You should now see your Facet on the catalog page. Click the checkboxes and test out how it works!

One last thing...

The sites we've been building use the Facets Pretty Paths module for making nicer looking URLs with our catalog and filters. For a while we were plagued with a problem where, when the user selects a Facet category and then uses the sorting options, the Facets would uncheck and reset. This is obviously not good because the user is trying to sort the filtered down items, not the overall catalog. We need to be able to maintain the active facets when using the filters.

Luckily, a coworker came up with this nice little solutions that you can apply to your theme's .theme file. You just need to replace YOUR_THEME,YOUR-VIEW (i.e. products-page-1), and YOUR-PATH (i.e. products) in the code below. Ideally, this will be fixed within the module itself soon, but this will work while we wait.

/**
* Implements hook_form_alter().
*/
function YOUR_THEME_form_alter(&$form, FormStateInterface $form_state, $form_id) {
// Store - Product Listing view exposed form.
if ($form['#id'] == 'views-exposed-form-YOUR-VIEW') {
$current_path = \Drupal::request()->getRequestUri();

// If current path is within your catalog, correct the form action path.
if ((strpos($current_path, '/YOUR-PATH') === 0)) {
// Fix for views using facets with pretty paths enabled.
// Replace form action with current path to maintain active facets.
$form['#action'] = $current_path;
}
}
}

Done!

There you have it! You have now created a Search API index using Solr, setup a View to display the results of the index, and then implemented 3 different ways to filter the results (search, sorting and Facets). This is the start of an awesome product catalogue and you can expand on it with more datasource fields however you want. Cool!

Contact us and learn more about our custom ecommerce solutions

Editor’s note: This article was originally published on July 12, 2018, and has been updated for freshness, accuracy and comprehensiveness.

 
Apr 14 2021
Apr 14

Companies are breaking free of restrictive proprietary platforms in favour of custom open source solutions. Find out why in this comprehensive article.

Advantages of Open Source Commerce

Download the PDF version of this article | Acro Media

Ownership of data & technology

If you use an open source commerce platform, you own the code.

You need to look at your website the same way you would view a brick-and-mortar storefront. Paying a monthly licensing fee for a hosted platform is like having a leased property -- you’re only adding to your overhead costs and you have no control over your future. Hosted solutions don’t allow you to own the code, which business owners often don’t think of as a problem until something bad happens. If a hosted solution goes under, they take you down with them. You lose your online presence and have to rebuild from the beginning. That’s a long and expensive process.

If you use an open source commerce platform you own the code. If you work with an agency and choose to move to an in-house development team or a different agency, you can do so at no cost or risk to your business.

Integration with virtually any business system

The code is completely exposed for you to use.

If you judge ecommerce solutions solely on their feature set, hosted solutions like Magento, Shopify, and Volusion will always look good up front. But your ecommerce platform is more than just window dressing. Open source frameworks can have an impressive feature set, but the biggest advantage is the expansive list of back-end systems they can integrate with.

Proprietary platforms can offer standard integrations with customer relationship management (CRM) systems and fulfillment solutions, but if you’re a big retailer, you may find you need a higher degree of integration for your sales process.

Open source platforms are exactly that. Open. The code is completely exposed for your use. Combine this with the modular architecture and you have a platform with the ability to integrate with virtually any business system that allows access, from CRMs and shipping vendors to payment gateways and accounting software. Your ecommerce site can become an automated business rather than just a storefront.

A custom user experience

A custom user experience gives more power to the marketer.

When it comes to user experience, hosted platforms give you a best-practice, industry-standard, cookie-cutter execution of a shopping cart. It’s a templated design that is sold as a finished product, so you know you’ll have a catalogue, a simple check-out, account pages, etc. Outside of choosing a theme, there is very little room for customization. Open source allows for all the same functionality plus a powerful theme system that allows you to add unique and advanced features very easily.

A custom user experience gives more power to the marketer, allowing them to create custom conversion paths for different user types and integrate those paths within the content experience. You can generate personalized content based on customer data and/or provide different content to users based on their geographic location.

Open source commerce is also ideal for omnichannel selling. The consumer path is seamless across all sales channels, devices, websites and retail tools throughout the entire customer experience. You can set up content, layout and functionality to respond to the device being used, such as smartphones and tablets.

The omnichannel experience & a single source of data

Open source platforms use a single data source which makes it optimal for creating omnichannel strategies.

Today’s ecommerce landscape is rapidly evolving. It’s no longer just about selling products online. Companies are expected to create immersive shopping experiences for users. The advances in mobile technology have given consumers constant and instant access to information. They expect their favourite brands to be able to deliver an integrated shopping experience across all channels and devices complete with personalized content, consistent product information, and simple conversion paths. This is not an easy task. For retailers that sell through both online and in-store channels, the challenge is even greater.

Open source platforms use a single data source which makes it optimal for creating omnichannel strategies. Rather than having to force together multiple platforms that pull data from various systems, open source allows for one centralized data centre that can be accessed by any of the systems you need.

What does this mean exactly?

Customer data, product details, promotions & sales information, inventory numbers and more can all be easily defined and streamlined across multiple channels. For example:

  • Your customers can start a purchase online and then pick up where they left off in your store. 
  • Customer data can be accessed easily for automated marketing; loyalty programs, birthday “gifts”, personalized recommendations.
  • If your products are sold on your ecommerce store as well as third party marketplaces, your product info is always consistent without having to apply multiple updates on various backends.
  • Easily define and promote location-based pricing and offers.
  • Real-time inventory numbers can be shown online to ensure product availability and minimize the risk of back-orders.
  • Tax & shipping rules can be defined per city, state, country to ensure all customers are shown the correct cost of items at checkout.

A flexible platform that aligns with your needs

Exceed the boundaries of a traditional sales platform.

Any ecommerce platform today needs the ability to adapt. If your platform is locked down, you risk losing to your competitors. Hosted ecommerce solutions are just shopping carts with conventional catalogue management and the ability to sell physical and/or digital products.

Open source commerce releases you from these industry-standard restraints. Organize your products using virtually any attribute. Display your products in any style, from lists, grids, or tables to a customized look that can make you stand out from your in-the-box competition. Integrate features that go beyond commerce, such as custom applications, web services, and customer portals. Exceed the boundaries of a traditional sales platform.

Don’t be tied to someone else’s development path. By leveraging an open source platform, you allow yourself to be the frontrunner in your market.

No licensing fees, revenue sharing or mandatory support contracts.

Open source commerce is free to use.

Anyone with the appropriate development skills can pick up an open source framework and begin working with it immediately at no charge. If you require development help you will need to pay a contractor or agency and depending on your needs these upfront costs can seem like a lofty investment. However, after the upfront development, there are no mandatory ongoing costs associated with open source.

If you are utilizing a SAAS or proprietary platform start-up costs are minimal but the majority of them have various ongoing costs.

  • Monthly contracts — SAAS platforms will charge you a monthly fee to use their platform, in addition to this fee you may have to pay for additional functionality, integrations, and/or support.
  • Licensing fees — The big enterprise platforms (Demandware, Hybris, Magento) charge a yearly license fee to use their software platforms. These fees can range from $50,000 - $700,000 per year.
  • Revenue sharing — SAAS and proprietary platforms will often require a revenue share contract to supplement their low monthly fee. A typical revenue share agreement is a 2% transaction fee. Depending on your yearly gross revenue this can be a major blow.

1000’s of supporters and continued development

Open source platforms are pushed forward by thousands of developers and supporters worldwide; agencies, contractors, & enthusiasts all have a shared goal of bettering their software and creating an accessible and stable platform. Proprietary systems simply can’t compete with a workforce this large or this focused. Open source evolves at the pace of the web. By leveraging this type of platform, you can be a front-runner in your market. Often before a retailer even knows it needs a specific new integration or piece of functionality, someone is already building it.

Drupal Commerce & Acro Media

Drupal Commerce is the powerful ecommerce software that extends from the open source Drupal platform. Drupal Commerce was built onto the content management system using the same architecture, allowing for a true marriage of content and commerce. It is a truly unrestricted platform that provides both structure and flexibility.

Acro Media is the leading Drupal Commerce agency in North America. We work exclusively with Drupal and Drupal Commerce, and currently, develop and support one of the biggest Drupal Commerce websites in the world. Our Drupal services include:

  • Drupal Commerce
  • Drupal consultation and architecture
  • Drupal visualizations and modelling
  • Drupal integrations to replace or work with existing platforms
  • Drupal website migrations (rescues) from other web platforms
  • Custom Drupal modules

Are you ready to escape?

Break free from the proprietary platforms and legacy software you’re handcuffed to and create the commerce experience you want. Open source commerce gives the power to the business owner to create a commerce experience that meets the ever-changing conditions of your marketplace as well as the complexities of your inner company workings.

Next steps

Want to learn more about open source, Drupal Commerce, or Acro Media? Book some time with one of our business developers for an open conversation to answer any questions and provide additional insight. Our team members are here to help provide you with the best possible solution, no sales tricks. We just want to help, if we can.

Consulting Services | Acro Media

Apr 07 2021
Apr 07

How we jumped head-first into decoupling Drupal with a React-based design system built for performance and brand consistency.

Our latest corporate initiative is decoupling our website, upgrading to Drupal 9 and achieving the holy grail of web development — a CMS-driven back end, with a modern, decoupled javascript front end using a component-based design system.

Here is a breakdown of the project so far:

It’s funny how things go. As a company, we’re constantly working in Drupal: building, planning, and helping to maintain various modules and websites for both our clients and the Drupal community. While the large majority of our clients and work is in the latest version of Drupal, our site is still running Drupal 7. Shame on us, right! Like many businesses out there, it’s easy to push aside the upgrade when our internal systems and staff are comfortably using the existing platform and everything is working like a well-oiled machine. Well, we finally got the buy-in we needed from our internal stakeholders and we were off to the races. But, we didn’t want just another Drupal website. We wanted to explore the “bleeding edge” and see if we can achieve the holy grail of web development — a CMS-driven back end, with a modern, decoupled javascript front end using a component-based design system. Go big or go home!

Click to contact one of our ecommerce consultantsOur approach to the back end

After a solid planning phase, we settled on an approach for the new site build and it was time to get going. We decided on Drupal (of course) for the back end since it’s our CMS of choice for many reasons and we could leverage all of the great work that has already been done with the JSON:API. However, not all of our needs were covered out-of-the-box.

Exploring API-first distributions

When we were first getting started, we spent some time looking at using ContentaCMS for our back end. It’s an API-first Drupal distribution that already contains most, if not all, of the modules we needed. We think ContentaCMS is an interesting tool that will stay on our radar for future projects, but ultimately we decided against it this time due to the number of extra modules that were unnecessary for our particular build. We ended up just starting with a fresh Drupal 9 install with only the modules we needed.

Decoupled menus

Another complication we came across focused around decoupled menus. Obviously, to build out a menu on the front end we needed to be able to get menu items. JSON:API Menu Items was installed and gave us a good starting point by exposing the menus in JSON:API. Next, we needed to get around the fact that JSON:API relies on UUID for content but menus use paths. Content also likes to have pretty URLs to use for navigation via path aliases. To display these path aliases from the front end and be able to retrieve the correct node, we need some way to resolve the path alias to its correct content. In comes the Decoupled Router module to solve the problem for us! This module provided the endpoints we needed.

Simplifying the JSON output

When you first install JSON:API, you get ALL of the data. While this is great, the JSON output relies on the naming convention of fields either set by Drupal or the developer(s) configuring the backend. Though we have control over how we name newly added fields, we don’t have that control over existing fields. For example, the User entity's “mail” field, which is intended to be the user’s email address, is not easy to understand without knowing what the data is within the field. For a better developer experience, we renamed fields as needed by creating EventSubscribers that tap into the JSON:API response build events. We also installed the OpenAPI module to give our developers a better high-level look at the available endpoints and their structure, opposed to looking at gross JSON output.

Our approach to the front end

With our back end sorted out, it’s time to get to the front end. When going decoupled, the front end suddenly becomes a whole lot more interesting than just a standard Drupal theme with Twig templates, SASS stylesheets and jQuery. We’re in a whole different realm now with new possibilities. We were 100% on board with having better integration between design and development, where the end result of the design was more than static assets and a 1-hour handoff. Here’s a breakdown of our front end approach.

A new strategy for consistency between design in development

In the past, creative exercises would provide static assets such as style guides to try and capture the design principles of a web property or brand. While this concept is rooted in good intentions, in practice, it never really worked well as a project evolved. It’s simply too difficult to keep design and development in sync in this way. For web development, it’s now understood that the code is a better source of truth, not a style guide, but we still need ways to involve our designers and have them contribute their knowledge of design and UX into the code that is being developed. After all, if you leave these decisions up to developers, you’re not going to end up in a good place (and most developers will readily agree with that sentiment). Luckily for us, applications like Figma, Sketch, and Adobe XD, are leading the way to bridge this gap. While this is still very new territory, there is a lot of exciting progress happening that is enabling the creation of robust design systems that act as a rulebook and single source of truth that is both easily updated, modular, and readily available for product application development.

After an internal study of available technologies for design, we settled on Figma for our design system creative work. Figma runs in either web or desktop applications and is a vector graphic editor and prototyping tool. The team developing it has done an incredible job pushing the envelope on how creative and development can work together. With Figma, we found it was possible to accomplish the following:

Extracting design tokens into our application

With our tokens living in Figma, we still needed a way to bring those static design token values into our development process. This is where Figmagic comes in. Figmagic is a nice tool for extracting design tokens and graphic assets out of Figma and into our application. Once set up, all we need to do in our local development environment is to run yarn figmagic. This connects to Figma and pulls down all of our defined tokens into an organized set of ready-to-use files. From there, we then simply import the file we need into our component and use the values as required. If a value needs to change, this is done in Figma. Re-running Figmagic brings in any updated value which updates any component using it. It works like... magic.

Building reusable front end components

Going decoupled meant breaking away from Drupal’s Twig templating and theming layer. For our front end application, we decided on React for our replacement. React continues to be very popular and well-liked, so we didn’t see any technical advantage to picking anything else. This change brought on some additional challenges in that, as a Drupal development company, our focus has not been React. We undertook some initial training exercises to get our development team on this project up-to-speed with the basics. Between this team, our CTO, our CXO, and a senior technical lead, we quickly trained up and settled on a suite of tools to achieve our desired outcomes of a component-driven React frontend.

Component UI frameworks to increase velocity

For us, the approach to developing the many React components that we needed was to first settle on an established framework. Like Bootstrap is to HTML/CSS development, several React-based frameworks are available to use as a foundation for development. It’s always debatable whether this is necessary or not, but we felt this was the best way for us to get started as it greatly increases the development velocity of our project while also providing good reference and documentation for the developers creating our components. We researched several and tried a few, but eventually found ourselves leaning towards Material UI. There were several reasons for this decision, but mainly we like the fact that it is an established, proven, framework that is flexible, well documented, and well supported. With Material UI (MUI), adjusting the base theme using our design tokens from Figma already gave us a good start. Its framework of pre-built components allowed us to make minimal changes to achieve our design goals while freeing up time to focus on our more unique components that were a bit more custom. This framework will continue to be of great benefit in the future as new requirements come up.

Previewing design system component without Drupal

Without a standard Drupal theme available, we needed somewhere to be able to preview our React components for both development and UX review. A decoupled front end, and the whole point of the design system, is that the front end should be as back end agnostic as possible. Each component should stand alone. The front end is the front end and the back end could be anything. Since we haven’t yet connected the front end components to Drupal’s JSON:API, we still needed an easy way to view our design system and the components within it. For this, we used Storybook. Storybook was made for developing and previewing UI components quickly. As a developer working locally, I install and spin up an instance of Storybook with a single command within our project repo. Storybook then looks at our project folder structure, finds any story files that we include as part of all of the components we develop, and generates a nice previewer where we can interactively test out our component props and create examples that developers in the future may need when implementing a component. Storybook is our design system library and previewer as well as our developer documentation. When we are done developing locally and push code to our repository, our deployment pipeline builds and deploys an updated Storybook preview online.

Bringing it all together

At this point, we have our back end and API established. We also have our front end component library created. Now we need to bring it all together and actually connect the two.

Matching the Drupal UI to our React components

React components are standalone UI elements and are made up of props that determine their functionality. So, for instance, a Button component could have many variants for how it looks. A button could include an icon before or after the text, or it could be used to open a link or a dialogue window, etc. A simple component like this might have a whole bunch of different props that can be used in different ways. To be able to control those props through the Drupal UI, we decided to use the Paragraphs module. A paragraph in Drupal is essentially a mini content type for a specific use. In Drupal, we created paragraphs that matched the functionality we needed from our React components so that the Drupal UI would be, in the end, setting the component props. This is a bit confusing to set up at first and something that will probably not be nailed down first try, but, in the process of setting up the Drupal UI in the context of the React components, you can really start to see how the connection between the two is made. At this point, it’s pretty easy to see if a component is missing any props or needs to be refactored in some way.

We also went with Paragraphs because we wanted to give our content creators a more flexible way of creating content. A standard Drupal content type is pretty rigid in structure, but with Paragraphs, we can give content creators a set of building blocks that can be grouped and combined in many different ways to create a wide variety of pages and layouts in a single content type. If you’re not familiar with this style of creating content in Drupal, I suggest you take a look at this post I wrote a while back. Look at that and imagine React components rendering on the page instead of Drupal templates. That’s essentially what we’re aiming to do here.

An argument against Paragraphs is that it could potentially make page building more time-consuming given that you don’t have that typical rigid structure of a content type. This is especially true if pages on a site being built typically all follow a similar format. In this case, we still like to use Paragraphs anyway but we will typically build out unpublished pages that act as templates. We then install the Replicate module which lets content creators clone the template and use it as a starting point. This makes creating pages easy and consistent while still allowing flexibility when needed. Win-win.

Taking the Next.js step

Since we settled on React, we started our front end project as a standard react build using the built-in create-react-app command. But, after some additional investigation, we decided that a better option for our use case would be to use the Next.js framework. Given that the corporate site is, at its core, is a marketing and blogging website, Next.js allows us to still build the frontend using React but gives us some extra capabilities this type of website needs.

One of these capabilities is incoming server-side rendering which we found increases the performance of our application. This also has SEO benefits due to pages being rendered serverside and sent to the client, as opposed to the standard client-side rendering most React applications use where the client machine handles processing and rendering.

Component factories are key to interpreting the API data

We were also attracted to the structure and organization of the project when using a framework like Next.js, as well as the dynamic routing capabilities. This significantly simplified the code required to implement our decoupled menu and page routing. Using the dynamic routes provided by Next.js, we could create “catch-all” routes to handle the ever-growing content in the CMS. By querying the Drupal API, we can get all the available path aliases for our content and feed it to Next.js so it can pre-build our pages. It can use the path aliases to resolve the content specific to the page through the Decouple Router module, which will then feed that data to a component factory to handle the decision as to what high-level React page component is necessary to build a page. For example, if the data is for a basic page content type, the page factory component returns our Page component, if it’s a blog post content type, it returns the Blog Page component, etc. Each of these components knows how to handle the specific data fed to it, but the factory component is what connects the data to the right page.

The way Paragraphs can be added to a page for composing a piece of content also created a challenge on its own in reading that data and returning the right component. We decided to create another factory component for this. Similar to the page factory component, this one takes in the paragraph data and determines which React components it needs to render the content.

What’s next in our decoupled adventure

Believe it or not, what we’re building is still a work in progress. While we have most of the tech requirements figured out, we’re still actively putting all of the final pieces in place and fine-tuning the backend UI and modules requirements. All in all, we’re feeling really good about this progress and can see the value of what we’re building both for ourselves and the clients we serve. In our opinion that is based on experience and research, decoupled is the future, and we’re excited to walk this path.

With that said, even once our own decoupled site has launched, we still have a lot of work left to do. For one, we still need to get a method in place for managing Drupal blocks and regions. More factory components will be critical here to interpret that data. Given that our clients are primarily ecommerce retailers in one form or another, we still have the whole ecommerce side of web development to sort out, including product catalogues, add-to-cart forms, carts, wish lists, checkout flows, etc. The list is long. However, what we have is a framework that can be repurposed and added on to. It finally helps tie together many disciplines of web development, both creative and technical, that are traditionally siloed. It’s also blazing fast and just plain cool. This is an investment not only in our own online business front but in something greater that we hope to share with others through work, community and general knowledge.

Thanks for taking the time to read this. If you want to chat about this initiative further, drop us a line.

New call-to-action

Jan 14 2020
Jan 14

Content management systems (CMSs) are the engine that drive content creation on the web today. They form the foundation that we build on for publishing and sharing information, creating digital experiences and conducting online retail. WordPress and Drupal are staples in the CMS world and they have both been around a long time. WordPress is known for its intuitive and easy-to-use interface. Drupal is known for its flexibility and complexity. While both have their strengths and weaknesses, the usability gap between WordPress and Drupal is changing. This article will show you the current state of Drupal’s admin user experience in a side-by-side comparison with WordPress, the most widely used CMS. If you’re familiar with one CMS but not the other, this comparison is also a good introduction to the other.

TL;DR: The primary goal of this article is to dispel the perception that Drupal is widely different and harder for administrators to use than WordPress. If you don’t care about the background behind this perception, just skip down to the direct comparison.

WordPress is easy, Drupal is hard… why does this perception exist

But first, a little background. The dominant CMS in terms of number of sites running on it is WordPress. It’s estimated to power about 62% of all websites that use a CMS, meaning multiple millions of websites are using it. Why is WordPress so popular? WordPress started as a blogging engine with a focus on being easy-to-use. This proved to be incredibly important because it meant that nearly anyone could get a WordPress site up and running fast and be able to use it with little-to-no training. The idea caught fire with both individuals and local businesses who just wanted a simple, low-cost website that others could find online. Web developers and agencies also finally had a framework that allowed their clients to make simple content edits within an admin environment that was friendly. Of course, WordPress today can be used for much more than a simple website, but it is still ideal for simple websites. Another key takeaway here is this perception of WordPress as being easy-to-use. This reputation holds true just as much today as it ever did in the past.

This article isn’t actually meant to praise and promote WordPress. Instead, much of this article will focus on another popular CMS, Drupal. Drupal is a fantastic CMS and is incredibly powerful when used correctly. In many web development circles, Drupal is the go-to solution for providing a robust solution for today’s CMS driven website development. It’s thriving both in usage and as a community of enthusiasts, but while WordPress sits in #1 spot with 62% of the market share, Drupal holds steady at #3 with about 3%. It still means there are many hundreds of thousands of websites powered by Drupal, but the number of websites using it pales in comparison to WordPress.

Why isn’t Drupal more popular? Well, anyone who knows Drupal (and even many who don’t) will tell you that Drupal is best suited for large websites with high traffic and complex requirements. Universities, government, nonprofits and online retailers are a sample of who uses Drupal. Drupal out-of-the-box isn’t as ready to use as WordPress, so it’s unlikely a suitable fit for simple websites. For individuals, configuring Drupal is a steep learning curve. For local web agencies, it takes more time to setup which means they must charge more. These reasons alone largely take Drupal out of the running for many websites, so for Drupal it’s more about use case than mass adoption.

With that said, Drupal’s ability to be configured and developed on literally means it can handle nearly any situation required of it, whether that means selling products for enterprise businesses or being the integration layer between multiple platforms. While this inherent flexibility is great for software developers, Drupal’s perception of complexity combined with a historically underwhelming admin experience has cemented a reputation that Drupal is unintuitive and difficult to use for the end user, the people who will be using it every day. While in my opinion this isn’t true of today’s Drupal, like WordPress it’s reputation precedes it. In Drupal’s case, however, this reputation isn’t as flattering and it’s something that our sales and outreach teams battle with often.

For Drupal, it’s time for change

Like WordPress, Drupal is open source software. It’s free to use and anyone has full access to the underlying code to modify and build upon. Both platforms have a core team for advancing key initiatives and a massive community of individuals and organizations that support the initiatives while also adding additional functionality through plugins (WordPress lingo) or modules (Drupal lingo).

While usability has always been important to WordPress (since it started as a blogging platform), Drupal was historically more focused on being open and flexible. It’s user experience has continuously improved with each version release, but late in 2018 marked the beginning of a big push towards modernizing the Drupal admin user interface (UI). Drupal is really amazing software and it’s time that the admin experience catches up.

Introducing Claro, Drupal’s new admin UI

Drupal 8 Claro admin theme
Claro interface design mockup courtesy of Drupal.org

Claro is the new admin theme being built as part of the Admin UI Modernization initiative. It’s included with every Drupal 8 site, new and old, and can be enabled right now if you so choose. Just be aware that it is currently considered “experimental” while progress continues to be made. It’s not yet in its finished state, but you can view the development roadmap here to see what is still left to do.

Side-by-side: WordPress & Drupal Admin UI Comparison

On to the comparison!

For WordPress, I’m using version 5.3.2 (released Dec. 18, 2019) which comes with its own Twenty Twenty default theme and content.

For Drupal, I’m using version 8.8.1 (also released Dec. 19, 2019. How about that!) and the new, but experimental, Claro admin theme. If you’re looking at this at a later date, some aspects may be different (for the better!) as development of the theme continues. I’ve also installed Drupal using the official Umami demo install profile so that I have a theme and some content to work with.

In each of the 10 comparison categories below, I’ll give my opinion on which CMS has the edge out-of-the-box and why I think this. I’ve used both platforms and do have some bias towards Drupal, but I’ll do my best to keep that in check.

Category quicklinks
  1. Admin toolbar
  2. Login dashboard
  3. Managing media
  4. Creating pages
  5. Editing pages
  6. Managing widgets and blocks
  7. Managing menus
  8. Managing users, roles and permissions
  9. Site status report
  10. Plugins and modules
  11. WordPress & Drupal comparison summary

1. Admin toolbar

The admin toolbar is always present on the page of both WordPress and Drupal.

WordPress

WordPress admin toolbar

In WordPress, a single toolbar is used as a jump-off point for common admin pages, but you can also start the content creation process and access your account profile and information.

Drupal

Drupal 8 admin toolbar

Drupal has a similar admin toolbar except you have access to everything including creating new content. Every admin page that your user role has permission to view is available through this menu. While it’s more to look at initially, experienced users enjoy fewer clicks to get where they want to go.

Edge: Drupal

While the learning curve to know where everything is might be a bit steeper, experienced Drupal users enjoy being able to access everything in one familiar way. With that said, new users may find this larger menu intimidating.

2. Login dashboard

After logging in, the login dashboard is the first page you see. WordPress and Drupal both take a different approach to their login dashboard.

WordPress

WordPress login dashboard

WordPress has a robust dashboard right out of the gate. This dashboard takes admins away from the site frontend and into an interface that only they can see. The left side has a larger menu for accessing the rest of the admin interface. The main content area mix of useful information about your site and information specific to WordPress as a whole, such as training resources and upcoming WordPress events. The panes on this page can be toggled on and off and plugins can add new panes.

Drupal

Drupal 8 login dashboard

This is the first area where Drupal takes a different approach. Instead of a robust dashboard, you don’t actually get much of anything. The admin toolbar already gives you access to the entire site, so Drupal keeps you on the website frontend and instead shows you your “user page”. This page is entirely customizable although you will most likely need third-party or IT support to do so. It’s an open canvas to do with as you like. For ecommerce, you might show a customer their information, recently viewed products and their last order placed. For content creators, you might show a custom dashboard with quick links to their common tasks. What you do here is entirely up to you.

Edge: WordPress

Although it’s not entirely useful, WordPress actually has a dashboard which is a nice touch for new users. Drupal's clean slate offers a lot of exciting potential for admins and visitors alike, but any potential must first be realized before this page is useful.

3. Managing media

Images, videos, documents and more are uploaded and organized within a media manager. Both WordPress and Drupal offer a convenient content editor plugin which makes selecting and adding media into content easy.

WordPress

WordPress media manager

WordPress really defined the way media can be managed within a CMS. Their interface for managing media contains a handy drag-to-upload feature and each piece of media is shown in a grid format by default. Media can be filtered by date, type and name.

Drupal

Drupal 8 media manager

Drupal admittedly isn’t as clean as WordPress in this interface yet but it’s functionality is essentially the same and solid for most users. The visual interface will improve as the development of Claro progresses. By default, Drupal displays media in a list, but you can toggle between list and grid. There are also similar filtering options. Like all other aspects of Drupal, advanced users can customize media types beyond what you see here and entirely new media types can be created. This advanced functionality is unique to Drupal and isn’t as easily done in WordPress.

Edge: WordPress

WordPress does a great job of making media easy to manage. Drupal will continue to see improvements in the near future, but right now it still feels clunky.

4. Creating pages

Creating new pages, such as general content pages and blog posts, is a common interaction that most admin users will need to do.

WordPress

WordPress new page Gutenberg editor

As of version 5.0, WordPress includes their much anticipated Gutenberg editor experience. This editing format is sleek, modern, and very intuitive. You start with a title and then continue piecing together chunks of content by selecting various types of “blocks” to build the page with. Blocks are a single, reusable type of content such as a heading or paragraph of text, an image or gallery, a list, a quote, etc. Custom blocks can be created and plugins may also add additional blocks that content creators can use. Along the right side of the page is a settings pane. This pane provides various page specific settings and customizations such as page visibility, featured image, an option to allow comments, etc. Additional settings for the currently selected content block also appears here.

Drupal

Drupal 8 new page creation

Out-of-the-box, creating a new piece of content looks like the screenshot above. Content in Drupal could potentially be something wildly different than just a basic page, so Drupal defaults to a standard “field based” editing interface where the different fields that are configured to make up the content are laid out on the page. All editors need to do is fill in the blanks. Field types can be text (with an optional WYSIWYG editor), and image, a file upload, a date, and anything else you can imagine. This again is where Drupal’s flexibility is both an advantage and a curse. The advantage is that a type of content can be anything you can imagine, but the downside is that someone has to configure that content type first. The field based editing experience is provided by default to ensure the editing experience is consistent across different content types.

Here’s the important thing to know about Drupal. Drupal doesn’t like to make assumptions as to what your editing experience should be. As an example, a used car dealership, a national newspaper, and an online retailer will all have entirely different content editing requirements. Drupal doesn’t want to get in your way and it doesn’t try to. What it does do is give you a solid foundation to create YOUR ideal editing experience. This might not be ideal for organizations and businesses with simple website requirements, but for those with complex workflows and unique requirements, Drupal is ideal.

One last important note to make on this topic is that Drupal does also have a Gutenberg editing experience, it just doesn’t come packaged with Drupal out-of-the-box. This module and other editing interface modules and initiatives can be installed in Drupal to make the default editing experience more capable and modular.

Edge: WordPress

When based solely on out-of-the-box functionality, WordPress pre-packaged Gutenberg editing experience is modern and intuitive for new and experienced users. However, it’s important to note that Drupal modules exist that greatly improve Drupal’s default experience. You can even add the same Gutenberg experience.

5. Editing pages

Once a page has been created, sometimes you still need to go back and edit it once in a while. This is a different experience from creating new content, so let’s now look at how it works with each CMS.

WordPress

WordPress editing existing pages

Pretty standard, as a logged in administrator you have access to editing content by viewing the page on the website frontend and using one of the various “edit” buttons. You’re then brought to the same Gutenberg interface that you see when creating content.

Drupal

Drupal 8 edit existing pages

I would say Drupal has the upper hand for editing existing content. Similar to WordPress, as a logged in administrator you have access to page edit links when viewing the content which brings you back to the same interface as when the content was created. However, in Drupal you also have additional links to view content revisions as well as the view and edit page translations for multi-language sites.

Drupal 8 inline page editor

The current version of Drupal, Drupal 8, also includes an additional edit icon that contains a new “quick edit” option. Depending on the content, the quick edit allows on-page inline editing (shown above) instead of taking you to a separate page! This makes simple edits quick and easy. Furthermore, the edit icon also appears when administrators hover over menus and other configurable page elements too, giving you a quick way to access their configuration.

Edge: Drupal

While WordPress has the edge when creating new content, Drupal’s on-page inline editing feature makes editing existing content quick and easy by keeping content editors on the website frontend.

6. Managing widgets and blocks

Widgets (WordPress lingo) and blocks (Drupal lingo) are two words for essentially the same thing. While not limited to these locations, the header, footer and often left and right columns beside the main content area contain defined regions where certain elements can be placed. I’m talking about slogans, menus, a search bar, your copyright, recent posts, social feeds, etc. WordPress and Drupal have similar but different ways to manage these elements.

WordPress

WordPress widgets page

WordPress includes a backend and frontend methods for editing page widgets, both of which are quite basic and lack a lot of real capability.

The backend method (shown above) is accessed through the backend Appearance menu. This page gives you a nice list of available widgets on the left side and another list of active widgets within the available regions on the right. A simple drag and drop interface lets you move elements around and opening each widget allows for basic configuration.

WordPress widgets live editor

The frontend method is through a "Live Preview" mode (shown above) where a version of the site theme is presented and widgets are managed through the left column. Settings for existing widgets can also be quickly opened by clicking its blue edit icon, as you can see in the image above.

Out-of-the-box, it’s difficult to understand exactly where a widget will appear throughout the site because you don’t have the ability to see or control which pages accept the widget. Some third-party plugins are available to give you this functionality, but they must be added. New widgets are also a bit more difficult to add as they must be created by a developer or added though a plugin.

Drupal

Drupal 8 block layout page

Like WordPress, Drupal has the ability to manage blocks from both the backend and frontend of the website, although Drupal handles both situations better.

The backend method (shown above) is accessed through the admin toolbar’s Structure menu. Here you can view all available regions and the blocks contained within each. Regions are a big part of Drupal theme creation, so you will often see 10+ available regions to choose from. If you’re not sure of your themes regions, the “Demonstrate block regions” link above the list of regions will give you a preview. Each region has a “Place block” button for adding new pre-configured blocks. Existing blocks can be moved dragged between regions and each block can be configured independently. Block configuration in Drupal is very robust, including but not limited to control over what pages the block is visible on and what account roles can view it. Like content, blocks can be translated and even have revisions.

Custom blocks can also be created by more advanced Drupal users in a similar way that new media and content types are created. In the screenshot above there is a link to the “Custom block library,” which is where new blocks can be created. Like WordPress, modules can also be installed which will add new blocks.

Drupal 8 frontend block quickmenu

Drupal’s frontend method for managing blocks takes on the same familiar editing experience that we discussed for editing content. When logged in and viewing the website frontend, navigating to a page and hovering your cursor over an element will reveal an edit icon if that element is a configurable block. Options for the block are then given. The block in the screenshot above contains a menu, so we see options to configure the block and edit the menu. In this case, clicking one of these options will take you to the backend page for performing these actions. If the block contained text, we would also be given an option to edit the text directly on the page, just like we can with content.

Edge: Drupal

Simply put, Drupal’s block management is robust yet not too difficult. Being able to manage existing blocks directly from the website frontend is both user friendly and familiar given that existing pages can also be managed in the same way.

7. Managing menus

Menus connect the pages within a website. Commonly you’ll find a primary navigation and some sort of footer menu, but menus are used in many other places as well.

WordPress

WordPress menu management

The menu system in WordPress is a bit strange at first, but overall it’s pretty simple. You create a menu (or select an existing one using the menu selection dropdown), then add links by selecting pages, categories, or by creating custom links (add menu items in image above), then use a drag and drop interface for moving and nesting the menu items (menu structure in image above). Each menu item within the menu structure can be opened for a bit of customization.

The menu settings area controls where the menu is displayed within predefined template locations. Just check the box and the menu will appear once saved. Any menu created here can also be assigned to region as a widget or through the template live preview screen.

One odd thing I’ve found with WordPress is that, when editing a page, you’re not able to add it into a menu. I’m sure there are plugins that allow this, but out-of-the-box you have to add the page through the menu system or check a setting within the menu that all new pages get added… but then you might have to remove some.

Drupal

Drupal 8 menu management

Drupal’s approach to menus is what I would consider more standard. You navigate the “menus” page which lists all of the menus that have been created, then you create a new menu or edit an existing menu. The screenshot above is what you see when editing a menu. Here you manage this menu’s links by either adding a new one or manipulating the existing ones. When adding a new link you can easily search for content that the link will link to or specify a custom link.

Pages can also be added to a menu when the page is being created or edited. Within the page settings, all you do is select the menu and specify a link title.

Like WordPress, once you create a menu you can then add it into a region of the site as a block. However, within the menu itself you don’t have the ability to put the menu anywhere.

Edge: Drupal

A more standard approach makes managing menus clearer and more user friendly. Also being able to choose if a page should be included in a menu while creating the page is a nice feature. That said, I appreciate being able to manage a menu in its entirety on a single page like you do in WordPress.

8. Managing users, roles and permissions

Managing users is common for both controlling who can edit the website and who can login for other reasons, such as non-admin accounts for an online store or community.

WordPress

WordPress user management

WordPress has six predefined user roles: Super Admin, Administrator, Editor, Author, Contributor, and Subscriber. Each has varying degrees of what they can do, but it’s pretty clear for the most part and goes back to when WordPress was mainly a blogging platform. Users can be created and managed through a “users” page (shown above), which is laid out in a straightforward manner displaying

But WordPress has some major drawbacks here. First, WordPress doesn’t have any frontend user self-management, meaning users can’t view or edit their own profiles. Second, the predefined roles and their associated permissions don’t work for everyone and actually complicate user management when you don’t need it. Third, there is nowhere to really manage role permissions in a granular way. These drawbacks can be fixed through custom development and/or various plugins, but many consider this to be a general weak point of WordPress.

Drupal

Drupal 8 user management

User management is another area where Drupal shines. In contrast to WordPress, Drupal only starts with three default roles: Anonymous, Authenticated and Administrator. Anonymous is a user who is not logged in, authenticated is a user who has an account but isn’t someone who typically isn’t managing content and site configuration, and administrator is a user with full site and admin access. These three roles are minimal, clear and cover all of the basic needs of most sites. If and when another role with different permissions are created, this is easy to do right out-of-the-box.

The image above shows Drupal’s version of the current list of users. It follows a similar look and style to the rest of the admin pages, giving administrators a place to add and manage user accounts, including assigning users to specific roles. Anonymous and authenticated users can also create or manage their own account through the website frontend (although this functionality can be turned off if desired).

Drupal 8 user permissions page

Drupal’s strength in user management comes in the form of roles and permissions. When a role is created, a column of permission checkboxes for the role is added to the Permissions page (shown above). Almost every piece of functionality within Drupal has an associated permission. Simply checking the boxes determines what each role can and can’t do. It’s powerful and easy.

Edge: Drupal

A simple yet powerful user management system combined with frontend self-service functionality gives Drupal a clear edge over WordPress.

9. Site status report

Both WordPress and Drupal include a site status page that gives you information about the website and server configuration as well as an overall health report that outlines any issues. These automated health checks help keep your CMS up-to-date and secure.

WordPress

WordPress site health page

The “Site health” page (shown above) gives you an overall health status and list of any issues. This status page is clean and each item can be expanded for more information, but there is no visual urgency that makes the “2 critical issues” stand out. In my opinion, critical issues should be resolved and so highlighting these issues in some way is a necessary UX improvement.

An info tab at the top of the page can be opened which gives more information about your installation of WordPress, the server, the PHP version, and the database.

Drupal

Drupal 8 status report page

Drupal contains both site information and site health in one “Status report” page (shown above). Like WordPress, this page gives you everything you need to know at a glance about your Drupal installation and the other components that make it run. Here we can also clearly see what errors and warnings have been found and some information on how they can be resolved.

Edge: Drupal

While both WordPress and Drupal have similar pages that show similar information, Drupal’s status report does a better job at laying out the information and visually capturing the severity of any issues.

10. Plugins and modules

Plugins (WordPress lingo) and modules (Drupal lingo) extend core CMS functionality and add new features. Extensions are usually created by third-party developers and released to the platform communities for anyone else to use. Whether it’s to increase performance, enhance SEO capabilities or create an online store, extensions are a powerful way to improve and adapt the CMS platform.

WordPress

WordPress plugins page

Visiting the “Plugins” page (shown above) is a quick way to see what additional plugins are currently packaged with your WordPress installation and can be activated if desired. Plugins shown here all provide some sort of new functionality or feature that is not part of the core WordPress software.

WordPress plugin search page

When you need new functionality, WordPress provides an excellent and convenient plugin library browser (shown above) accessible within the website backend. Here you can search for, view, and install plugins easily with the click of a button.

Drupal

Drupal 8 extend page

Drupal’s module list is where you can see all current extensions, activated or not, for your Drupal installation. The big difference here between WordPress and Drupal is that for Drupal you are able to see all modules installed, even those that are part of the core software. Modules are also nicely grouped which nicely organizes the large list.

Installing new modules isn’t nearly as easy in Drupal. Unlike WordPress, Drupal doesn’t include a module library browser within the backend interface. Instead, users must search for modules within a web browser and manually install them. Finding modules can be difficult if you’re not familiar with the process.

Edge: WordPress

While both platforms have a massive library of extensions, WordPress offers users a much friendlier and intuitive way of finding and installing extensions that users of any skill level can appreciate. This may or may not be an issue for you if you have a capable IT team or development partner, but for small teams WordPress has the clear edge.

WordPress & Drupal comparison summary

I hope after going through this comparison you now have a good understanding of the differences and similarities between WordPress and Drupal. As you can see, both platforms out-of-the-box have different strengths and weaknesses, but it’s important to know that all of the weaknesses can be overcome through platform extensions and experience. In extreme cases, both platforms support custom development to overcome unique problems.

For convenience, here is a quick summary showing which CMS has the edge in the 10 categories compared. However, I would recommend that you go back and read the edge summary for each category, if you haven’t done so already.

Comparison category WordPress Drupal Admin toolbar   ✓ Login dashboard ✓   Managing media ✓   Creating pages ✓   Editing pages   ✓ Managing widgets and blocks   ✓ Managing menus   ✓ Managing users, roles and permissions   ✓ Site status report   ✓ Plugins and modules ✓  

A final word of advice

In my opinion, you shouldn’t be turned off from one platform or the other simply because you’ve heard that one is better or easier to use. Both platforms are mature and constantly improving, user experience is top of mind, and usability gaps have become less of an issue in recent years.

My advice, select the platform you use based on your requirements. WordPress is a great authoring tool and is good for small and medium sized organizations. Drupal is fantastic for medium and large sized organizations or anyone who has complex workflows, products, and/or a need to integrate with other platforms. That’s a pretty general summary, but if you’re considering either of these platforms, first know what your requirements of the platform are and then start talking to the experts for each.

Acro Media is an ecommerce consultation and development agency who can help you in this regard. We specialize in open source ecommerce and a large part of our work is based around Drupal. Drupal typically works better for our clients but we know WordPress, too. If you’re researching your requirements or evaluating your options, hit us up for a quick chat, we would love to help. Otherwise, check out some of these related resources.

Contact Acro Media Today!

Related resources

Nov 05 2019
Nov 05

Shawn McCabe, Acro Media’s CTO, recently made waves when he proclaimed through our blog that Ubercart is dead. We received both praise and criticism from the Drupal community for saying it, but the truth of the matter is that Ubercart, once the primary module businesses relied on for adding ecommerce functionality into the Drupal CMS, has yet to have a stable Drupal 8 release (even though Drupal 8 was released 4 years ago in November, 2015). It’s currently stuck in “alpha” and overall usage has been steadily declining for years. Read the initial post for more information.

We put out that post as an attempt to inform businesses that are currently using Ubercart that they should be planning their migration to something else ASAP, before Drupal 7 reaches end-of-life. Our suggestion for these businesses is to move to the Drupal Commerce module for Drupal 8. Drupal Commerce is the successor to Ubercart and was founded by one of the Ubercart creators. It’s the natural choice for these businesses and overall it’s a much better platform in every way.

Of course, when you tell a business that they need to replatform because their ecommerce software is “dying,” that’s not an easy thing for business owners to hear. Many flat-out ignore it to be honest, but those who understand the warning want to know more about how it will affect their business. From the reaction we received to the initial post, we understood that more needed to be said. Businesses using Ubercart now have questions that need to be answered. Because of this, we held an “Ubercart is Dead Roundtable” webinar-style discussion where we put Shawn in the spotlight to answer the questions that have come in. The goal of this discussion was to be both informative and demystifying, a general discussion instead of a sales pitch.

So without further ado, here is the roundtable recap video. A list of timestamped discussion topics are shown below the video. If you have any other questions not mentioned here, send us a message. We would be happy to answer any questions you may have.

Watch the roundtable

[embedded content]

Host: Jace Anderson
Specialist: Shawn McCabe, CTO

00:00 - Introduction
00:45 - Who is Shawn McCabe
01:55 - Why do you [Shawn] think Ubercart is Dead?
03:07 - Why is Drupal Commerce the next platform of choice?
04:02 - Why should I move off of Ubercart when our business is currently operating fine?
05:58 - Is there a performance difference between Ubercart and Drupal Commerce?
08:06 - Is it possible to move off of Ubercart but stay on Drupal 7?
09:29 - How do we know Drupal Commerce won’t see the same fate as Ubercart?
11:00 - Is there a big difference in the features from Ubercart to Drupal Commerce? Is Drupal Commerce more robust?
13:35 - Is there a big learning curve for the backend administrators when using Drupal Commerce?
15:21 - How big of an undertaking is the migration from Ubercart to Drupal Commerce? Can an IT team of 5 complete it?
16:44 - What website components add to the complexity of a migration?
18:00 - Would a migration interrupt my business? Will it affect the customer experience?
18:54 - How would a migration impact my internal operations?
20:25 - How do we know Drupal Commerce won’t see the same fate as Ubercart (second part)?
21:26 - Currently we use multi-currency. Does Drupal commerce support this too?
22:41 - We use MailChimp for abandoned cart recovery. Can it still be used with Drupal Commerce?
23:10 - Are there other alternatives to Drupal Commerce? Is it the only option to continue using Drupal?
24:04 - How does Drupal Commerce perform on mobile?
25:02 - From your blog post, there looks to be companies using Ubercart on Drupal 8. What would prompt this?
25:57 - Can Drupal Commerce be used for custom customer experiences?
27:20 - Based on my research, Drupal Commerce is defined as having a difficult user interface. How can we ensure our team will be able to manage the backend?
28:28 - Can I manage my orders from my mobile device?
29:19 - What does Drupal Commerce offer for legacy software integration?
30:51 - What are the key specifications in a migration that attribute to an increased cost when doing a migration?
32:31 - Is my data migrated automatically? Can I also move order history, receipts and customer data?
33:40 - For a migration, where does one find support?
34:52 - What process is involved in managing coupons and promotions?
37:01 - How does bundling differ from Ubercart to Drupal Commerce?
38:00 - Does Drupal Commerce have subscription payment functionality?
40:05 - Is Drupal Commerce catalog taxonomy based?
41:10 - Shawn’s final words to those still on Ubercart who are not planning their move away from it yet.

Click to contact one of our ecommerce consultants

Aug 13 2019
Aug 13

Back in April, BigCommerce, in partnership with Acro Media, announced the release of the BigCommerce for Drupal module. This module effectively bridges the gap between the BigCommerce SaaS ecommerce platform and the Drupal open source content management system. It allows Drupal to be used as the frontend customer experience engine for a headless BigCommerce ecommerce store.

For BigCommerce, this integration provides a new and exciting way to utilize their platform for creating innovative, content-rich commerce experiences that were not possible via BigCommerce alone.

For Drupal, this integration extends the options its users and site-builders have for adding ecommerce functionality into a Drupal site. The flexibility of Drupal combined with the stability and ease-of-use of BigCommerce opens up new possibilities for Drupal that didn’t previously exist.

Since the announcement, BigCommerce and Acro Media have continued to educate and promote this exciting new headless commerce option. A new post on the BigCommerce blog published last week title Leverage Headless Commerce To Transform Your User Experience with Drupal Ecommerce (link below) is a recent addition to this information campaign. The BigCommerce teams are experts in what they do and Acro Media is an expert in open source integrations and Drupal. They asked if we could provide an introduction for their readers to really explain what Drupal is and where it fits in to the headless commerce mix. This, of course, was an opportunity not to be missed and so our teams buckled down together once again to provide readers with the best information possible.

So without further explanation, click the link below to learn how you can leverage headless commerce to transform your user experience with Drupal.

Read the full post on the BigCommerce blog

Additional resources:

May 28 2019
May 28

This is the second post in a two part series focused on specific platforms for experience-led ecommerce. The first post focused on Drupal, an open-source CMS, as an excellent option for creating content-rich customer experiences when combined with an ecommerce component of your choice. This post will focus on BigCommerce, an increasingly popular open SaaS ecommerce platform, and how its strengths in ecommerce can be complemented by an integration with Drupal.

A quick introduction

Like the last post, here’s a quick introduction to the main concepts and software discussed.

SaaS

Whether it’s accounting, marketing, ecommerce, etc., SaaS (software as a service) platforms are a great option for many businesses. With this service model, businesses simply sign up and pay a monthly fee to use the platform. This is an attractive option because the cost is generally quite reasonable and the onus is on the service provider, not the business, to host the service and keep it up and running. For a business, it’s hands-off and requires little to no IT staff to manage.

Open SaaS

Open SaaS is still a relatively new term and has a couple different meanings. For this post, I’m using open SaaS to describe a SaaS services that is also open for integration and innovation through APIs and webhooks. This means that a business can use the SaaS service as-is, but it’s not restricted by it. This will become more clear the further you read through this post.

BigCommerce

BigCommerce is gaining popularity as a SaaS ecommerce platform. As a service, BigCommerce provides everything a business needs to quickly create an online store and start selling products. It has a wide variety of customizable themes available, supports custom themes, and has an extension library to add additional functionality to the base platform. While this is all quite normal for SaaS ecommerce, what makes BigCommerce an exciting platform is it’s commitment to being open via APIs and webhooks. This allows BigCommerce to be used as a headless backend store management area with the front-end of your choice, opening up a world of possibilities for creating customer experiences not previously possible with other popular SaaS ecommerce solutions.

SaaS at different stages of growth

Ecommerce businesses can grow quickly. Being set up for scalability to handle this growth is extremely important early on to eliminate headaches later on. This is the main reason why all of us at Acro Media are always talking about the importance of utilizing the right commerce architecture. The right architecture will enable a business to scale effectively without bottlenecking operations with swivel-chair processes. BigCommerce is uniquely capable of handling this growth, from startup all the way up to enterprise powerhouse.

Click to discover your ideal architecture with our analysis.

SaaS for startup and small businesses

For many small ecommerce businesses, SaaS ecommerce platforms like BigCommerce provide a quick and cost-effective solution to get to market. These businesses typically have a low IT budget and are just looking for solutions that are easy to implement and use. In many cases, SaaS checks these boxes and is the perfect starting point. This is why platforms like BigCommerce, Shopify and SquareSpace have become so popular. We call this scenario commerce-led because the ecommerce platform used dictates what other software and integration are also used in combination.

SaaS for medium, large and enterprise businesses

While SaaS is typically great for startups and small businesses, established businesses are an entirely different situation. They’re now looking at technology as an enabler for reaching the next level. They see personalization and the customer’s experience as an area where they can differentiate themselves from their competitors. These businesses are now hitting the limitations and restrictions of their SaaS ecommerce platform due to the fact that SaaS is typically built for the most common use cases and is therefore rigid in allowing these businesses to add the unique functionality and the integrations that they need. As technological requirements for a business changes, the software used must change too. These businesses are now looking at investing in stable technology that increases efficiencies, automates time consuming tasks, and gives them the edge in defining their customer journey. This may mean moving away from a commerce-led architecture and into experience-led. Often, ecommerce replatforming is part of this move.

BigCommerce is different

So, where does BigCommerce and Drupal fit into the mix. As I mentioned earlier, BigCommerce as a SaaS service is an ideal ecommerce platform for startup and small business. Not only does it give these businesses the ecommerce tools and stability needed to easily conduct business online, but it’s uniquely capable of growing with these businesses further, all the way through to enterprise.

How? Through BigCommerce’s open APIs and webhooks, BigCommerce can be run headless as a robust and secure enterprise-level ecommerce backend that compliments the incredible content experience capabilities of Drupal as the frontend. This means that these businesses can start with a SaaS solution that works great and then replace the frontend with Drupal if and when it makes sense to do so. They integrate directly together, creating a SaaS & open source hybrid ready to disrupt the insanely expensive enterprise ecommerce space, finally giving companies a capable and cost-effective alternative solution that is built for growth, scalability and integration.

Why Drupal?

If you haven’t read the first post in this series, I’d recommend you take a moment to do that. It discusses the strengths of Drupal for experience-led ecommerce complete with some examples. In short, customer experience is seen as a major competitive advantage in established ecommerce and Drupal is able to provide that experience while also being able to integrate with the ecommerce component of your choice. One choices being BigCommerce.

How it works

Acro Media teamed up with BigCommerce to create the BigCommerce for Drupal integration, so we are very in-tune with the strengths of both platforms. Here’s a high-level breakdown of how the integration works.

  1. Set up a BigCommerce store
    The business signs up for an account with BigCommerce and adds products, payment gateways and shipping options as it normally would. The BigCommerce backend is used for all of the ecommerce functionality, so the store configuration happens here.

    As mentioned earlier, existing BigCommerce store’s don’t need to create a new store for this integration with Drupal to work. Drupal just replaces the frontend, so the integration can happen at the beginning or anytime in the future.

  2. Connect BigCommerce and Drupal
    Drupal is then installed separately and the BigCommerce for Drupal module is added along with any dependencies. The module’s settings page within Drupal is where the BigCommerce store is connected and products get synced. This brings the products into Drupal as content.
  3. Complete the Drupal website frontend
    The rest of the website is then built within Drupal like any normal Drupal website. This involves setting up additional content types, configuring the display of this content and imported products, and finally theming the site.

That’s it! Drupal is where the content lives and what customers interact with. Operational staff who manage the store and fulfill orders do so within BigCommerce. When customers decide to purchase products, they do so through an embedded BigCommerce secure checkout.

And there you have it, the best of both worlds!

Further information

Interested in learning how your business can leverage the strengths of BigCommerce and Drupal together?

Discover BigCommerce for Drupal

Or check out these related resources.

May 21 2019
May 21

This is the first of a two part series (UPDATE: part two here) discussing a couple of different platforms that we at Acro Media endorse for our clients. First up, I’ll talk about Drupal, a popular open-source content management system, and how it’s excellent content capabilities can be extended using an ecommerce component of your choice. For companies that require experience-led commerce architecture solutions, Drupal as an integration friendly content engine is an ideal open source choice.

A quick introduction

People who follow our blog will already know about open source technology and Drupal because we talked about them a lot. For those of you who don’t know, here’s a quick introduction.

Open Source

Wikipedia sums up open source software well.

Open-source software is a type of computer software in which source code is released under a license in which the copyright holder grants users the rights to study, change, and distribute the software to anyone and for any purpose. Open-source software may be developed in a collaborative public manner. Open-source software is a prominent example of open collaboration.

Open-source software development can bring in diverse perspectives beyond those of a single company. A 2008 report by the Standish Group stated that adoption of open-source software models have resulted in savings of about $60 billion (£48 billion) per year for consumers.

While that describes open source software as a whole, there are many advantages of open source specifically for content creation and ecommerce. No licensing fees brings the total cost of ownership down, businesses are fully in control of their data, and integrations with virtually any other system can be created. If you like, you can read more about the advantages of open source for ecommerce via this ebook.

Drupal

Drupal is a leading open source content management system that is known for being extremely customizable and ideal for creating rich content experiences. In a CMS world dominated by WordPress, Drupal is often overlooked because of its complexity and somewhat steep learning curve. Don’t let that stop you from considering it, however, as this complexity is actually one of Drupal’s greatest strengths and the learning curve is continuously improving through admin-focused UX initiatives.

The platform can literally be made to do anything and it shines when very specialized or unique functionality is required. It has a rich ecosystem of extensions and is very developer friendly, boasting a massive development community ensuring that businesses using Drupal always have support.

On top of this, Drupal has various strategic initiatives that will keep it modern and relevant now and into the future. One of the initiatives is for the platform to be fully API-first, meaning that a primary focus of Drupal is to be integration friendly. Developers can integrate Drupal with any other software that has an API available.

Drupal for experience-led commerce

Drupal is suited for any of the three main architectures (discover your ideal architecture here), but experience-led commerce is where it’s most capable. Experience-led is for businesses who keep the customer experience top of mind. These businesses want more than to just sell products, they want to also tell their story and foster a community around their brand and their customers. They want their customer experiences to be personalized and content rich. It’s these experiences that set them apart from their competitors, and they want the freedom to innovate in whatever way is best for their business.

Click to discover your ideal architecture with our analysis.More often than not, SaaS ecommerce platforms alone just don’t cut it here. This is simply because they’re built for ecommerce, not as an engine for other content. Although there are a lot of benefits to SaaS for ecommerce, businesses using SaaS must conform to the limitations set by the platform and its extensions. Robust content is just not typically possible. Sure, a business may be able to maintain a blog through their SaaS ecommerce platform, but that’s about it.

Drupal, on the other hand, is a content engine first. It was built for content, whatever that content may be. If you can dream it, Drupal can do. On top of this, Drupal, being integration friendly through its API-first initiative, allows businesses the freedom to integrate any compatible SaaS or open source ecommerce platform. At this point, a complete content & commerce solution has been created and the only limitation is your imagination and available resources to implement it. Implementation can be done in-house with an internal IT team or outsourced to one of the many service providers within the Drupal marketplace, Acro Media being one of them.

Let’s look at three widely different examples of Drupal based experience-led commerce.

TELUS Mobility

Website: www.telus.com

TELUS Mobility is one of Canada’s largest telecommunications companies. Imagine the missed opportunities when a customer’s online billing isn’t connected to your latest promotions and customer service can’t quickly or easily get this information in front of them. This was a problem that they faced and business restrictions, one being that they need to own all of their code and data, required that they look outside of the SaaS marketplace for a solution. Drupal, combined with a Drupal-native Drupal Commerce extension, was the solution that they needed. The open source code base of both Drupal and the Commerce extension meant that TELUS Mobility had the control and ownership that they needed. The result was huge, many important customers and customer service UX improvements were made which enabled TELUS Mobility to outperform their competitors.

You can read the full TELUS Mobility case study here.

Bug Out Bag Builder

Website: www.bugoutbagbuilder.com

Bug Out Bag Builder (BOBB) is a content-rich resource centered around preparedness. They generate a lot of different types of content and needed a way to do it that is easy and reusable. They also had a very unique commerce element that needed to tie in seamlessly. Here’s how we did it.

First is the content aspect. BOBB is full of content! They maintain an active blog, continuously write lengthy product reviews and provide their readers with various guides and tutorials. They’re a one-stop-shop for anything preparedness and have a ton of information to share. As you can see, a simple blog wouldn’t be sufficient enough for this business. They needed a way to create various types of content that can be shared and reused in multiple places. The Drupal CMS was easily able to accommodate. All of the content has a specific home within the site, but each article is categorized and searchable. Content can be featured on the homepage with the click of a button. Various blocks throughout the site show visitors the most recent content. Reviews can be attached to products within their online custom bug out bag builder application (more on this below). All of this is great, but what makes Drupal a fantastic content engine is that if BOBB ever needs to use this content in another way, all of the saved data can be reused and repurposed without needing to recreate the content. Just a little configuration and theming work would need to be done.

Second is the commerce aspect. BOBB is not a standard ecommerce store. At their core, they’re actually an Amazon Associate. They’ve developed a trust with their readers by providing fair and honest reviews of preparedness products that are listed on the Amazon marketplace. If a reader then goes and buys the product, BOBB gets a cut since they helped make the sale.

That’s all pretty normal, but what makes BOBB unique is that they also have a web-based Custom Bag Builder application. This tool has a number of pre-built “BOBB recommended” bag configurations for certain situations. Customers can select these bags (or start from scratch), view/add/remove any of the products, and finally complete the purchase. Since BOBB doesn’t need the full capabilities of ecommerce, it didn’t make sense for them to be paying monthly licensing fees. Drupal Commerce was selected for this purpose. It’s used as a catalog for holding the product information and creating a cart. Then, an integration between Drupal Commerce and Amazon transfers the cart information to Amazon where the customer ultimately goes through checkout. Amazon then handles all of the fulfillment and BOBB gets the commission.

BikeHike Adventures

Website: www.bikehike.com

BikeHike Adventures was founded as a way of bringing like-minded adventurers together through the unique style of world travel that they promote – activity, culture and experience. They provide curated travel packages that customers enquire about through the BikeHike Adventure website. Travel is all about experience and they needed to share this experience through their website. They also needed more than just a standard article page to do it since there is a ton of information to share about each package. Furthermore, they wanted to give customers a way to reserve a trip for pre-selected dates or through a custom trip planner. Again, Drupal was a perfect fit.

When you visit the site, you’re immediately thrown into the world of active travel through a rich video banner followed by a series of travel packages, a travel blog and more. There is a lot of exciting locations and vibrant imagery throughout.

Clicking into a package, you’re again hit with spectacular photography and all of the information you would need to make a decision. You can read about the trip, view the itinerary and locations marked on a map, learn about what’s included and where you’ll be staying, read interesting and useful facts about the country and location, see a breakdown of day-to-day activities, read previous traveler review, and more. When a customer is ready to book, they can submit an enquiry which is then handed off to the BikeHike Adventures travel agents.

A commerce component isn’t actually being used in this site, but it’s just a great example of content and customer experience that is used to facilitate a booking with a travel agent. If BikeHike Adventures wanted to in the future, they are free to integrate the booking and payment platforms of their choice to automate some, if not all, of that aspect of this process. By utilizing the open source Drupal CMS, this is an option that they can exercise at any point in time.

Who is Drupal best suited for?

Drupal could be used for any business, but it’s typically best suited for ecommerce businesses:

  • Who want to differentiate their brand through personalized shopping experiences
  • Who want to showcase products outside of a standard product page
  • Who want the power to develop a content-rich experience AND have an industry standard checkout process
  • Who want to sell across multiple channels and third-party marketplaces
  • Who need to develop and execute cohesive and synchronized marketing campaigns across multiple channels
  • Who want the freedom to integrate and connect their CMS and commerce platform with other components within their overall architecture
  • Who want to limit platform fees and instead invest in their own commerce infrastructure

In closing, there’s a reason why the ecommerce market is open to open source more than ever. Businesses are increasingly seeing that open source provides a quality foundation for which to build and integrate the solutions they need for today's new-age ecommerce. Customer experience is now seen as a competitive advantage and there are a handful of options that can provide this experience, Drupal being one of them. If you’re looking experience-led ecommerce solutions, consider Drupal. It might just be what you need.

UPDATE: Read part 2 of this series - BigCommerce & Drupal for Growing Ecommerce Businesses

Additional resources

If you liked this article, check out these related resources.

Click to discover your ideal architecture with our analysis.

Feb 19 2019
Feb 19
Performance and scale for all levels of digital commerce


Drupal Commerce is a fantastic open source ecommerce platform, but there is a common misconception that it is lacking when it comes to performance and scalability. This is not true! Drupal Commerce is extremely fast and is more than capable of scaling from small business all the way to enterprise level ecommerce. We have proof and it’s right here for you to view.

Download the Drupal 8 Commerce Performance Benchmarks Report (PDF)

About the report

Shawn McCabe, Acro Media’s CTO, put Drupal Commerce to the test to see how it performed on a number of different AWS configurations, ranging from single server setups all the way up to multi-server configurations.

He ran simulated traffic through Drupal Commerce, mimicking actual traffic as close as possible, testing concurrent users, site speed, transactions per second, and a number of other useful technical metrics.

The smallest server configuration tested was capable of handling 130 concurrent users flawlessly, with a throughput of 13.59 transactions per second. On the other hand, the largest configuration could handle 52,000 concurrent users with a throughput of 1,305.85 transactions per second.

The report goes further and includes how the tests were set up, their limitations and methodology, all of the server configurations details and, of course, the test results. This testing puts the performance and scalability question to rest, backed by hard data that anyone can reproduce. Drupal Commerce is a viable option for ecommerce that businesses of any size can use and grow with in the future.

Jan 07 2019
Jan 07
What we can learn from day one of legal online cannabis sales in Canada


On October 17, 2018, Canada took a progressive step forward as the sale of recreational cannabis became legal for the entire country. It was the end of a prohibition, sparking a wave of new business opportunity. It’s hard to find official numbers for Canada as a whole, but it’s estimated that there were about 212,000 first-day sales across the country worth approximately $28 million! We thought it would be a good opportunity to show some of the benefits of open source vs. SaaS solutions for online cannabis.

First off, It’s hard to say exactly how many transactions occurred online for Canada as a whole. It’s up to each province and territory to decide how they want sales to proceed and stats are quite limited at this point. We do, however, have solid information for a couple smaller provinces that we can start with. Then we can expand with speculation after that.

What we know

Cannabis Yukon

Cannabis Yukon, the Yukon government run retail outlet, had a combined online and in-store sales totalling about $59,900 (source). About 25% of that number, roughly $15,000, was transacted online. The online retail outlet uses the open source platform Drupal.

PEI Cannabis

PEI Cannabis, the Prince Edward Island government run retail outlet, had a combined online and in-store sales totalling about $152,000 (source). About 7% of that number, roughly $21,000, was transacted online. The online retail outlet uses the SaaS platform Shopify. It’s interesting to note that Shopify also runs the provincial online pot shops for Ontario, British Columbia and Newfoundland.

Functionality is the same

All ecommerce cannabis outlets in Canada, government or private, are going to have the same features. They need to block access to minors, they need to sell products based on weight and they need to restrict the maximum amount of cannabis an individual can purchase at one time. All other functionality required is standard ecommerce. Functionality-wise, Cannabis Yukon and PEI Cannabis do the same thing. Whether it’s open source or SaaS, there isn’t an edge either way there.

Where open source has the advantage

Where it gets interesting, and where the Yukon Government is in a great position to succeed, is commerce architecture and service fees. These are a couple of big reasons why open source is really catching fire in the ecommerce marketplace.

Commerce architecture

Yukon Cannabis is built on the Drupal platform. It’s open source software meaning there are no service fees to use and anyone who uses it can customize and innovate the software however they like. Development can be done in-house or with any 3rd party development agency familiar with the underlying code, mainly PHP.

An advantage to using a platform like Drupal is that it can integrate and talk to other services your operation may use for accounting, marketing, inventory, customer management, etc. Integrations and automation eliminate swivel chair processes that restrict business growth.

PEI Cannabis, on the other hand, is somewhat vendor locked using the Shopify platform. Shopify does have a rich ecosystem of integrations, but if there’s ever a need to develop a new integration, PEI Cannabis is restricted to dealing with only Shopify or their small group of partners. That usually means high cost.

Service fees

When a sale is made using a SaaS platform, a certain percentage of the sale is lost to taxes and additional platform specific transaction fees. In the case of Shopify Plus, the enterprise fee structure is $2,000 per month + 0.25% per transaction, capping at a maximum of $42,000 per month (source). You can optionally use ‘Shopify Payments’ instead which carries a transaction fee of 1.6% + 30 cents per transaction. This would be a better way to go only if you don’t require any other payment gateways, but in our experience that isn’t the case. Finally, in addition to Shopify’s fees, the platform has an extension library to extend the functionality to your store. Most of these extensions carry their own monthly fee and there’s a very good chance you would need some of them.

With SaaS ecommerce platforms like Shopify, year after year the cost of ownership increases. At minimum, the yearly fees paid to Shopify amount to $24,000 and can rise as high as $480,000. That doesn’t include any additional extensions that you use or any payment gateway fees. PEI Cannabis must pay these fees (and so do the governments of BC, Ontario and Newfoundland who also use Shopify).

Open source ecommerce platforms, on the other hand, don’t necessarily have any of these additional fees. Aside from the standard payment gateway fees and hosting fees, Yukon Cannabis pays no additional monthly or yearly licensing fee to use their ecommerce platform. Whether they sell $15,000 or $15 million, the investment that they’ve made into the development of their website should pay for itself quite quickly, potentially within a year.

Furthermore, provincial government cannabis retailers are essentially public companies. A large portion of the profit made is to be distributed at the provincial and federal levels to support various public services and initiatives. By utilizing open source technology and therefore avoiding platform-specific fees, the Yukon government will have more capital available for their public services and initiatives. Yukon constituents should be quite happy about that!

By utilizing open source technology and therefore avoiding platform-specific fees, the Yukon government will have more capital available for their public services and initiatives. Yukon constituents should be quite happy about that!

Service fee breakdown

Here’s a rough breakdown of potential monthly and annual platform service fees based on some of the numbers we know. We know the combined (online and in-store) sales from day one were elevated due to the hype of legalization, and we know that BC sales dropped by 70% on day two. For our fee breakdown, we’ll take the 70% reduced amount from the combined total numbers we know and use that to calculate a 30 day monthly sales estimate. We’ll use the combined total because most ecommerce platforms also support an official in-store point of sale component. This is all speculation of course, but it still shows realistic ecommerce sales numbers and how service fees accumulate based on them.

While the numbers shown below may appear to be quite large at first, Statistics Canada, the national statistics government agency, predicted back in September that legal cannabis sales for the first 3 months will be between $816 million and $1 billion nationwide. If that ends up being true, the numbers below would actually be grossly underestimated!

Est. Monthly Sales
Based on 30% of day one total x 30 days (XX/100 x 30) x 30 Open source
Annual and Monthly Fee: 0% Shopify Plus
Monthly including transaction fee
(calculator) Shopify Plus
Annual 
(monthly x 12)Yukon Cannabis
30 day est: $539,100
Day one: $59,900$0$2,994.31$35,931.72PEI Cannabis
30 day est: $1,368,000
Day one: $152,000$0$4523.13$54,277.56Nova Scotia
30 day est: $5,940,000
Day one: $660,000$0$12,955.69$155,468.28Alberta
30 day est: $6,870,000
Day one: $730,000$0$14,670.97$176,051.64All of Canada *
30 day est: $252,000,000
Day one: $28,000,000$0$40,000 (cap)  $480,000 (cap)

* The government agency Statistics Canada predicts that legal cannabis sales in Canada will be between $816 million and $1 billion (source).

Where SaaS has the advantage

The biggest advantage that SaaS such as Shopify has over open source is the speed at which you can get your product to market and the simplicity of use.

If you’re just starting out and need to get an ecommerce site up and running quick, these services are turn-key and can get your product to market fast. The website management interface is clean and easy to use, and most people can do what they need to do with little to no training.

There is a reason why companies like Shopify are quite dominant and it’s largely because of the simplicity. While we strongly believe that you shouldn’t choose your platform based on features, many people are willing to pay extra to be able to do it all themselves.

Takeaways

Watching a new industry unfold in Canada has been fun. It’s interesting to see that both open source and SaaS has found its way into the legal cannabis marketplace. Clearly both open source and SaaS work for this industry, it’s more about what you’re willing to pay and what ecommerce ecosystem you think is best for your business and its future growth.

If you’re thinking about online cannabis retail (or any other online retail for that matter), Acro Media has the expertise and processes in place to help guide you to online commerce success. Try our Digital Commerce Assessment Tool to uncover problematic areas within your digital commerce operations.

Complete Your Digital Commerce Assessment

Nov 27 2018
Nov 27

If you’re evaluating CMS platforms for an upcoming project, Drupal should be one platform that you consider. It was built for generating content and also has robust ecommerce abilities through the Drupal Commerce module. If you only need to publish content, it’s great for that. If you only need ecommerce, it’s great for that, too. The fact that it does both very well is a winning combination that will always be available to you, now or down the road. This post takes a look under the hood of Drupal to show you why you might want to take a first, or second, look at the Drupal CMS.

Drupal for Content

As mentioned in the introduction, Drupal was built for content creation and it is very good at that. But, if you’re unfamiliar with Drupal, you probably wouldn’t understand WHY it works so well for this. Here are some of the things that really separate Drupal from other platforms.

Content Types

At the core of Drupal content creation is something called a Content Type. A content type is a collection of fields that are used to generate a certain type of content, such as a general page, landing page, blog post, press release, etc. It’s one of the first pieces of a new Drupal site to be configured.

Demo Drupal Commerce today! View our demo site.Configuring content types is mostly done through Drupal’s admin user interface (UI). Through the interface, you add fields. If you think of any website form that you’ve seen in the past, the form is made up of fields for you to enter in your information. This is the same for Drupal, but you’re actually creating the fields that are used to generate content. For example, a blog post typically contains a title (text field), body (textarea field), header image (image field), publish date (date field), author and category (reference fields). For the blog content type, all of these fields would be added as well as any other that you need. The field options available a many. If you don’t see a field that you need, chances are someone has already created it and you just need to install a module that adds it in.

After all of the fields have been added, you then configure how the fields are displayed to your content creators and to the end user viewing the content. I won’t get into details here, but many fields have options for how that content gets rendered on the page. Using an image field as an example, you can choose to render the image as the original image, or as a processed image (like a thumbnail), or as the url path to the image on the server. Each option has its uses once you start theming the site.

Regions and Blocks

Keeping with the blog post example, when viewing a blog post you typically see other elements on the pages such as a subscribe form, list of recent posts, and call to actions. It doesn’t make sense to manually add these things to every single blog post, so instead we place this content in something called a Block and assign the block to a Region.

Regions are added to your page templates and are there for you to place blocks into. When adding a block into a region, each block can be configured independently of one another so that you can assign blocks to specific pages, content types, access levels (i.e. anonymous vs. logged in users), etc. A block can be many different things, but one type of block is similar to a content type in that you can add fields that are used to make up the block.

Views

A View is a powerful tool within Drupal for creating dynamic content based on other content. Views allow you to take existing content, manipulate it, and display it in another way. They can be used to create both pages and blocks.

Again, using the blog as an example, if you look at a page that is listing all of your blog posts at one time, this is most likely a view. The view is taking content generated using the blog content type, manipulating each post so that you’re only seeing specific information such as a date, title and introduction, and then adding a ‘Read More’ link after the introduction. Not only is the view manipulating each post like this, it’s also displaying the 10 most recent posts and showing you a ‘Load More’ button afterwards to load the next 10 posts.

This is a pretty simple example, but as you can see it’s quite powerful. You can use as much or as little of the content information as you need and it gives you fine-grained control to use and re-use your content in new ways. 

Metatags

Any serious content platform needs to include a robust set of metatag options. The built in metatag module for Drupal is excellent in this regard. You can set default options for every content type and override those defaults for individual pieces of content if needed. You can choose if your content should be crawled by search bots or not, how your post would appear on social media if shared, and more.

Workflows

This might not apply to you if you’re the only one creating content for your website, but, if you have a team of content creators, workflows let you assign specific permissions to your teammates. For example, you can allow your writers to draft content, your editors to approve the content, and finally a publisher can publish the content. Instead of explaining it all here, here’s a separate article and video that shows you how it works.

Modules

Anything that adds new functionality to the base Drupal platform is called a module. A module can be small (such as adding a new field type) or big (such as adding ecommerce functionality). You can separately Google “best modules for Drupal” and see a whole bunch of popular modules, but one of our favorites that I want to mention for content creation is the “Paragraphs” module. This module lets you create reusable sections of content that can be used within your content types and product pages. So, instead of just a body of text you can add cta straps, rich media, image galleries, forms, etc., all within your content. We use it on our own site to quickly make unique page layouts for our content.

Theming

Drupal’s theming engine enables your designers and front end developers to implement anything they can dream up. You have broad control over the look and feel of your site so that everything is consistent, but you can also create totally unique pieces of content or individual pages that may break away from your normal styleguide.

Say you have a new product lineup that you’re launching. You’re store branding is one thing, but this product has its own unique branding and personality that you want to convey. Well, you can give your designers full control over how the product should appear on your website and your front end developers can make it happen using the granular template override system.

Drupal for Commerce

The Commerce module for Drupal turns your Drupal site into a fully fledged ecommerce platform that is 100% capable of running any size of ecommerce site you throw at it. And remember, this is adding functionality to Drupal, so you still maintain the ability to do all of the content side of things mentioned above. 

In fact, not only can you still generate other content, but all of the things that make content creation great on Drupal also apply to the ecommerce side of your site. Your product pages are totally fieldable and themable, just like the content. You can assign blocks to your project pages. You can use views to set up your catalog and create blogs that filter out featured products or related products. Everything is fully customizable. 

There are also many modules available specifically for Commerce that give you even more functionality and integrations, and this is actually where ecommerce on Drupal becomes a “big deal”. Drupal Commerce is API first, which means that it was made to be able to connect to other services. So while you might run your ecommerce store on Drupal Commerce, you will most likely also use other software for your business accounting, marketing and customer relations, to name a few. Drupal Commerce can integrate with these services and share information in order to automate tasks.

We have a whole article that drills down on this topic and explains why ecommerce platforms like Drupal Commerce can be a great fit for your business. I would recommend reading it here.

Content and Commerce

We’ve really only scratched the surface on what Drupal can do from both a content and commerce perspective. I hope you’re beginning to see the whole picture. 

The truth is that most ecommerce platforms don’t do both content and commerce well. You can definitely find many great content creation platforms out there, but can they also do ecommerce? Likewise, there are a ton of ecommerce platforms that will sell your products, but how well can you create other content and do you have the flexibility to customize one or all product pages in the way that works best for your products. And, can you integrate that platform with other services?

These are all important questions to ask even if you don’t think you need a robust content platform or an ecommerce component now. If you think you might need it in the future, planning ahead could save you a headache later. While there are a lot of options out there and I encourage you to explore them, Drupal should be high on your list of possible options.

Try A Demo

It’s one thing to say Drupal is great at all of these things, but why not give it a try. We’ve actually created a complete Drupal demo that showcases both content and commerce together. Click the link below to check it out and see what you think. If you’re interested in exploring how Drupal can fit with your business, feel free to Contact Us. We’d be happy to have that discussion with you.

Demo Drupal Commerce today! View our demo site.

Nov 20 2018
Nov 20

A while ago we introduced a Live Component Guide to our corporate website that gives our designers and content creators and quick way to lay out content on new and existing pages. It’s worked out great so far and has generated quite a bit of interest. A couple months old now, that initial blog post explaining why we did it and how it works has had over 400 views and the recorded demonstration on YouTube has been watched for more than 1500 minutes. Not bad considering it’s a very Drupal specific, niche post.

While I was working on our corporate site components, others at Acro Media were working away on adding similar components to our internal Drupal 8 framework. Our corporate website is currently running on Drupal 7, and so, in some of the feedback that we received, people naturally wanted to see an example of the Live Component Guide in Drupal 8. After all, that’s the latest version of the Drupal platform that all new Drupal sites are being built using it.

I’m happy to announce now that those components have made their way into Acro Media’s Drupal Commerce demo site, Urban Hipster! Want to see it? I know you do. Check out the video demonstration below or go straight to the Urban Hipster’s Live Component Guide and take look for yourself.

[embedded content]

Demo Drupal Commerce today! View our demo site.

Oct 09 2018
Oct 09

It was recently announced that 2020 will be the year Drupal 9 is officially released into the wild. The exact date hasn’t been set, but we can now look forward to the 9.0 release that year. The announcement also gave us an official End of Life date of November 2021 for Drupal 7 AND Drupal 8. So, what does this mean if you’re currently running or developing a site on one of those versions? In this post, I’ll explain.

What this means for Drupal 8?

Drupal 8 is built around a concept of continuous innovation. What this means is that new features and backwards-compatible changes are continuously added. When an old system or code is depreciated, instead of removing it, it stays in the codebase. This ensures that custom code and contributed modules will continue to work and have time to update. Eventually, there will be an excess amount of depreciated code and dependencies and there will be a need to remove it. That is one of the reasons for the release of Drupal 9. All that old stuff gets removed and we start fresh with the latest and greatest technology.

The great thing about Drupal 8 is that by the time Drupal 9 is released all of the modules and custom code in your site should be up-to-date. Therefor, updating from 8 to 9 is no different than from 8.5 to 8.6. Clean and painless!

And that’s the point. This method of building and releasing versions will continue for the foreseeable future which is why we like to say that a migration to the latest Drupal will be the last migration you ever need.

What this means for Drupal 7?

Unfortunately, Drupal 7 is a different story. When Drupal 7 reaches end of life in November of 2021, it will no longer be supported by the community at large. There are plans to release a Drupal 7 version that uses the latest version of PHP. There is also a paid support program planned (similar to Drupal 6 LTS) that will allow people and organizations unable or unwilling to migrate to continue to keep their sites secure. But really, your best course of action is to plan for a migration to Drupal 8 by 2020. This keeps your site current and guarantees it’s security moving forward.

The codebase between 7 and 8 is entirely different so a migration to Drupal 8 is a pretty big undertaking. You could call it replatforming. Drupal 8 does however include a built in data migration tool that will make the move easier. You might still need some help though depending on your site requirements and edge cases. Plus, data is one thing, but you would also need to move your theme, too. The silver lining is that migrating presents an opportunity to freshen up the look of your site and increase site speed with the latest software. For more information on what is involved in a migration, check out this post.

Like I mentioned earlier in this post, a migration to Drupal 8 may likely be the last migration you ever need since subsequent major version updates (i.e. from 8 to 9) should be very quick and easy. Once you’ve made that initial investment migrating to Drupal 8, you can rest assured that you won't have to go through that process again, possibly forever.

Migration experts

Acro Media is a Drupal agency specialized in eCommerce. We help build and maintain successful eCommerce websites as well as the underlying Drupal Commerce platform. We are also heavily involved in the development of Drupal’s migration tools. If you want to discuss what a migration might look like for your business, talk to us! We’re happy to help.

Contact us to discuss your migration!

Oct 02 2018
Oct 02

The Media module made its way into Drupal core for the Drupal 8.4 release a while back. It gives Drupal users a standardized way for managing local media resources, including image, audio, video, and document files. We wanted to add using this module into our Drupal Commerce demo site to give an example of how this module could potentially be used in a Commerce setting.

In this Tech Talk video, I’ll quickly show you how we updated our digital download Commerce product example to use the Media module, giving us the flexibility to add audio samples to the product page and access to the full download after purchase.

[embedded content]

Background

The product I wanted to update is the Epic Mix Tape by Urban Hipster digital download example product. This is a fake album featuring all of your favourites by artists you’ve never heard before. The idea is to showcase that you can add digital products to a Drupal Commerce based online store, not just physical products.

Originally we were using just a standard file field that, when checkout was completed, gave the customer access to download the file. This was done before the Media module made its way into core. Now that the Media module is in core, we figured it’s time to update it.

Setting up an Album media type

When the Media module is installed you get some new admin menu items. The first is a section called Media Types (under Structure) where you can configure your media entities like any other Drupal content entity. Here I created an ‘Album’ media type with two unlimited file fields, one for sample audio tracks and one for the full audio tracks. This is the basis for creating my downloadable albums.

The second admin menu is under Content. Here you get a new Media tab which is where you can add, edit and remove any media items. Since I already created the Album media type I can now add the Epic Mix Tape album files here. This completes the media side of the updated digital download product. All I need to do now is update the product configuration to use it.

Completing the digital download product configuration

Now that the media type has been added and I’ve uploaded an album, I need to set up a way to use it. It’s pretty easy to do. First, for the digital download Product Type, I add an entity reference field to give a way for selecting the album media entity to use for the product samples.

I then do the same thing for the Product Variation Type. This one, however, will be used to give access to the full files after purchase.

Finally, some template updates. The Drupal Commerce demo site has some pretty custom template files for the products. In the template, I access the media entity directly and loop through the items, printing each audio sample and track title onto the product page. I do the same thing for the checkout complete page but print out the full tracks instead.

Depending on your templates and display settings, you can get similar results without manually accessing the files in the template file, however I wanted to print out the file description with the audio player right on the page. Showing the description unfortunately is something you don’t have the option of doing using the standard audio display widget.

And that’s it! Check out the Urban Hipster Drupal Commerce demo site below to see it in action.

Demo Drupal Commerce today! View our demo site.

Sep 25 2018
Sep 25

The Urban Hipster Drupal Commerce demo site was built to showcase what Drupal 8 and Commerce related modules can do. While the main focus has been Commerce, recently I started enhancing the content side of the site, mainly the blog. After all, Drupal is a content publishing platform at its core, so why not show how content and commerce can work on the same platform together. In the ecommerce world, that’s actually a pretty big deal!

In this Tech Talk video, I’ll show you how the Drupal core Comments module is used for blog commenting and product reviews. I also go into detail on how you can configure a role based publishing workflow using core’s Workflows and Content Moderation modules.

[embedded content]

Comments and reviews

All of the blog posts and products on the demo site use the core Comments module for customer feedback. This allows any level of user (anonymous, authenticated, etc.) to add comments or reviews to these content items. The configuration and permissions for the Comments module controls whether or not the comments need to be approved by an administrator before they appear on the site. When logged in, an administrator who has permissions to manage the comments can use both the frontend interface as well as a backend interface for deleting, approving, editing and finally replying to the comments.

Like any content entity in Drupal, comments are fieldable. This means that you can configure fields to allow for additional functionality for your comments. It’s not covered in this video, but it’s worth mentioning that this is how I was able to get a 5 star review system easily integrated into the product comments.

Content moderation workflows

Drupal core also has a couple modules for letting you define a process for adding specific types of content to your site. The Urban Hipster blog is now setup to be an example for this. 

The first aspect to configure is the workflow. Workflows is where you determine what content will make use of the workflow, the “states” that the content will transition through, and finally the transitions that can happen at any given state. These things all need to be configured first before moving on to permissions.

The second aspect is assigning role based permissions to use the workflow. Permissions for workflows are found in the usual permissions backend page where all other permissions are set. Each workflow transition has a permission attached to it and so you just simply check the role that can perform each transition. You can create new roles if you need to.

View the live example

As mentioned, the Urban Hipster Drupal Commerce is an example of what can be done. Try it out yourself and see what you think. Here are some username/password combinations that will let you check out the workflows in action. The site refreshes every night so you don’t need to worry about breaking anything.

Role based workflow logins:

  • Blog author: blogauthor/blogauthor
  • Blog reviewer: blogreviewer/blogreviewer
  • Blog publisher: blogpublisher/blogpublisher

Administrator login (for viewing the configuration):

  • Administrator: demoadmin/demoadmin
Demo Drupal Commerce today! View our demo site.
Sep 11 2018
Sep 11

There is a lot of talk out there right now about “decoupled” or “headless” open source eCommerce platforms. I won’t get into why that is in this article, but I will show you how easy it is to enable a full REST API for your Drupal 8 and Drupal Commerce platform in JSON format. It’s literally the enabling of a module… that’s it! Let’s take a look.

[embedded content]

In this Acro Media Tech Talk video, you’ll learn a little bit about the module used to expose the API, where to find documentation, and see an additional module that enhances the experience working with the API. Using our Drupal Commerce demo site as an example, you’ll see where you can view and modify the site resources as well as how to view the data for each resources in JSON format.

The data structure of Drupal is well suited to the JSON API which makes Drupal an excellent choice as a backend content-creation area for a decoupled application. This video will get you started, but what you ultimately do with that data is up to you!

Demo Drupal Commerce today! View our demo site.

Additional details:

Sep 05 2018
Sep 05
The making of Acro Media’s website content creation framework


It’s common place for brands to create guides so that there is a constant standard to follow when working with the brand’s identity. These are generally called Style Guides. We have one ourselves that we use when designing internal documents and printed layouts. This is great when it comes to branding, but how do you go about maintaining a level of consistency for something larger, such as a website? We recently underwent a fundamental shift in the way we create our website content, and with it, the Live Website Component Guide was born.

The Content Type Crux

For those familiar with Drupal, creating something called a Content Type is a common way to go about setting up a type of content - think your standard web page, blog post, frequently asked questions, rich media slider, etc. That content type can then be used to generate the pages of your website.

This works well enough if your site doesn’t need to change, but our marketing team is constantly looking to adapt to new trends, change content layouts, and A/B test. A website should ideally be dynamic and quick to change, however, changes ended up taking a lot of time because they need to first be designed and then built. The standard Drupal content type is rigid and the layout is fixed, so if you want to change the layout, the change is going to cascade to any page that uses that Content Type. Because of this, we often needed to create a whole new Content Type, template and styling. Something that should be quick ends up taking weeks because our process just wasn’t efficient. And furthermore, the more code we introduced, the more difficult the site was to maintain.

Eureka! Paragraphs

In February of 2017, we had a “eureka” moment while attending the Pacific Northwest Drupal Summit in Vancouver, BC, Canada. Here we learned about a new (to us) content creation module called Paragraphs. I know many people have been using this module for a while now, but it was new to us and we immediately saw the potential. As stated on the Paragraphs module’s Drupal.org project page:

“Paragraphs is the new way of content creation! It allows you — Site Builders — to make things cleaner so that you can give more editing power to your end-users.”

And it DOES do that! Instead of thinking in ‘pages’ we can now think in ‘components’. The graphic below illustrates this. On the left, a representation of a standard Drupal page layout using a Content Type. On the right, the same page broken out into individual Paragraphs components.

Content Type vs Paragraphs

Drupal paragraph vs content type example

What this module allowed us to do is to remove the rigid structure of the Content Type and instead build out a set of individual, standalone components that can then be inserted into a page wherever we want. If we want to add a new component to a page, we just select the component from a list and place it on the page. To remove one, we just click a remove button. To change the order, all we need to do is drag and drop the component where we want it. If there is a component that we need, but doesn’t yet exist, we can now create just that one component. It makes things fast!

The content creation aspect is incredible dynamic and easy to use. The best part of all is that once the components are built, the only need for a developer is to create new components later on. The actual content creation can easily be done by anyone with a very small bit of training.

From a design point of view, our designers can now piece a layout together knowing exactly what components are available to them. They know that if we’re missing a component, they can come up with something new and it’s not going to take weeks to implement. Plus, we already loosely follow the Atomic Design methodology by Brad Frost, so the whole concept was easy for them to grasp and got them excited. In fact, our Creative Director jumped on this concept and we now include a full set of content creation Paragraphs components in every new project that we build.

live-component-guide_02
An example of how easily we can generate page layouts using component driven design.

Things get very easy from a code maintenance point of view too! We created each of our components to have a standalone template and styling. This means that things stay consistent throughout the site no matter how a page has been setup. If we need to make a visual change to a component, we make it once and the change cascades throughout the site. The code base is small and logical. Anyone new to the project can jump in and get up to speed quickly.

Our Live Website Component Guide

So, if you’ve read this far, I bet you want to see it in action? You’re in luck! I recorded a quick video that shows you how it works using our corporate website’s Live Website Component Guide. You can watch the video below or view the page in all its glory.

UPDATE: Part 2 of this post is now available showing a Drupal 8 live component guide. 

[embedded content]

Contact us and learn more about our custom ecommerce solutions

Jul 30 2018
Jul 30
Comparing Drupal POS, Shopify POS and Square POS


If you need to accept card payment in a physical location, you need a point of sale (POS) system. There are many different POS systems out there so knowing how to choose the right one for your business can be challenging. All systems claim to be everything you need, however this might not be the case for all businesses. Most POS systems are designed around “industry best practices,” meaning that they try to serve the majority of businesses based on the most common needs. Many systems start to fail when the requirements of the business break away from the norm.

How do you choose the right point of sale for your business? The best way I’ve found is to look at three or four different examples and do a direct comparison. Today I’ll compare 3 different web-based point of sales systems - Drupal POS, Shopify POS, and Square POS. I’ll look at features, costs, usability, integrations, and more. In the end, I’ll try to understand the strengths and weaknesses of each and ultimately determine what business types they work best with.

All of the POS systems I examine today are web-based (or cloud-based). This means that these systems are connected to the internet and all of the data is kept online. Web-based systems are increasingly becoming more popular because they are generally easier to setup and require less time and knowledge to maintain. They can also integrate with your eCommerce store. You can read more benefits here.

The point of sale systems

Here is an introduction to the three POS systems I’ll be comparing.

Drupal POS

Drupal POS is a free add-on to the popular Drupal content management system. Drupal is open-source and completely free to use. It’s known as a very developer-friendly platform to build a website on and has a massive community, over a million strong, helping to advance the software and keep it secure. The open-source eCommerce component for Drupal is called Drupal Commerce. While Drupal Commerce has a relatively small market share, the platform is very powerful and can be a very good choice for businesses that have demanding requirements or unique product offerings.

Shopify POS

Shopify POS integrates with the popular Shopify SaaS eCommerce platform. Unlike Drupal Commerce, Shopify is a standalone product and stores running on the platform pay a monthly subscription fee to use it. With that said, business owners are given a well developed tool out-of-the-box that has all of the bells and whistles most stores require to get up and running fast. Shopify aims to serve the common needs of most businesses, so very unique business requirements can be hard to achieve.

Square POS

Square POS is an add-on point of sale service for your business and is not really a platform for running your entire store, although it does now offer a basic eCommerce component. It can also integrate with many eCommerce platforms, including Drupal Commerce. Square aims to make the process of accepting card payment easy to do, without bulky equipment.

Service comparison

Below is a side-by-side comparison of each service (as of July, 2018). Note that some of the information below applies to stores who also have an eCommerce component. If you don’t need eCommerce, you can ignore those items.

Note for mobile viewers: Swipe the table side-to-side to see it all.

 

Drupal logo

Drupal POS

Shopify logo

Shopify POS

Square logo

Square POS

Service philosophy

Open-source 

ProprietaryProprietaryService support Yes *
* via Drupal Commerce, in-house IT or third-party support  Yes *
* via Shopify or third-party support Yes *
* via Square Setup costs for basic service  $0 *
* The software doesn’t cost anything to use, however you may need to pay someone to set it up for you

$29 USD *
* Basic package pricing

$0 Ongoing costs for basic service $0 *
* The software doesn’t cost anything to use, however you may need to pay someone to apply occasional software updates. Third-party transactions fees may apply. Website domain and hosting also required $29/mth plus transaction fees and add-on product fees. Monthly fee increases with package Transaction fees and add-on product fees Payment gateways Third-party Shopify or third-party Square Accept cash payments Yes  Yes Yes  Accept card payments Yes Yes Yes Save cards (card on file) Yes  Yes  Yes Process recurring payments (i.e. subscriptions) Yes Yes *
* Third-party add-on required with separate monthly fees Yes Accept mobile payments Yes *
* Third-party hardware required Yes *
* Monthly fee for service hardware Yes *
* $59 USD one time price for service hardware Built in invoicing Yes *
* Using free add-on Yes Yes Apply discounts and promotions Yes Yes Yes Use with gift cards & coupon codes Yes Yes *
* Not available for basic plan  Yes  Printed gift cards provided by service  No *
* Add-on could be created to allow this functionality, but does not currently exist Yes *
* Additional fee for printing  Yes *
* Additional fee for printing Integrated taxes  Yes *
* Advanced taxes can be handled via third-party add-ons or configured directly within the platform Yes Yes *
* Third-party add-ons required
  Apply additional custom fees (i.e. environment fees, tipping, donations, etc.) Yes Yes Yes *
* Limited to tipping Built-in eCommerce Shop Yes *
* Drupal POS is an add-on for Drupal Commerce Yes *
* Shopify POS is an add-on for Shopify Yes *
* Basic Square store or integrate with third-party platforms Built-in website and blog Yes Yes  Yes  Multi-business (separate businesses using same platform or account) Yes No *
* Separate account required for each business No *
* Separate account required for each business/bank account Multi-store (multiple locations or stores of the same business) Yes  Yes  Yes  Number of products allowedUnlimited 2000-7000 *
* Number depends on device used to manage inventory Unlimited *
* Square eCommerce store only displays 1000 products. Third-party platform needed to run a larger store Number of product variations allowedUnlimited 4000-10,000 *
* Number depends on device used to manage inventory Unlimited * 
* Square eCommerce store only displays 1000 products. Third-party platform needed to run a larger store Number of registers allowedUnlimitedUnlimited  UnlimitedNumber of cashiers accounts allowedUnlimited  2 *
* Number of accounts increase with service plan Unlimited  Access controls Yes Yes  Yes *
* Additional fee of $6/employee  Create new user roles for advanced access controls Yes No Yes *
* Grouped with additional fee above. Mobile POS (i.e. use at trade shows, markets, etc.) Yes Yes Yes Sync inventory between online and offline stores Yes Yes Yes *
* Third-party platforms may not be able to sync inventory  Sync user accounts between online and offline stores Yes Yes Yes Sync orders between online and offline stores Yes Yes Yes  Park & retrieve orders Yes  Yes  Yes  Abandoned cart recovery (eCommerce) Yes *
* Using free add-on or third-party solutions Yes Yes *
* Requires third-party solutions Generate product labels Yes Yes Yes Print receipt Yes  Yes  Yes  Email receipt Yes Yes Yes  Customize receipt information Yes Yes *
* No layout customization, only the information shown Yes *
* No layout customization, only the information shown Process returns Yes Yes Yes  Basic reporting Yes Yes *
* Not available for basic plan Yes  Advanced reporting Yes *
* Using free add-on Yes *
* Not available for basic or mid-tier plans Yes  Supported operating systems Any *
* Requires only a web browser to use  Android, iOS *
* Requires app. iPad recommended with limited support for iPhone and Android Android, iOS *
* Requires app Themable (i.e. brand the POS interface) Yes  No No Customer facing display Yes No No Integrate with accounting/bookkeeping services? Yes Yes  Yes Integrate with other eCommerce sales platforms (Amazon, Ebay, etc.)? Yes Yes Yes *
* Only if using third-party eCommerce platform that supports this Integrate with marketing services (MailChimp, HubSpot, etc.)? Yes Yes Yes *
* Only if using third-party eCommerce platform that supports this Integrate with shipping providers (FedEx, UPS, etc.)? Yes Yes Yes Third-party calculated shipping rates Yes Yes *
* Not available for basic or mid-tier plans No Generate shipping labels Yes Yes Yes *
* Integration with ShipStation adds this functionality for an extra monthly cost Custom integrations with third-party services Yes Yes Yes Use offline (and have your transactions sync once back online)No *
* This is a requested feature currently in discussion Yes *
* Can only accept cash or other manual payments Yes Personalized customer feedback/support Yes Yes Yes

Hardware Requirements

Cashier terminal Third-party *
* Can be anything that runs a web browser (computer, tablet, phone, etc.) Third-party *
* iPad recommended with limited support for iPhone and Android Third-party *
* Any device running Android or iOS Card reader Third-party Provided Provided  Contactless payment Third-party Third-party Proprietary only  Cash drawer Third-party Third-party  Third-party  Barcode scanner Third-party *
* Can be a traditional barcode scanner or anything with a camera (i.e. phone, tablet, webcam, etc.) Third-party Third-party  Receipt printer Third-party Third-party  Third-party  Barcode printer Third-party Third-party None  Customer facing display Third-party *
* Can be anything that runs a web browser (computer, tablet, phone, etc) None None Custom/DIY hardware Yes No No

What business is best suited for each POS?

As you can see, all three options have most of the same features. Most businesses would probably be fine with any of them, but let’s see if we can distil down where each system fits best.

Drupal POS

Who’s it for?

If you have a medium to large business with unique business requirements, Drupal POS could be the ideal platform for you to work with. For small business, Drupal POS and Drupal Commerce might not be for you. The initial cost to get a site built might be too high for your budget, however, if you look at the long term fees charged month by month from the other venders, this upfront cost will be saved in a matter of time. Also, if you have a really obscure need that no other platform will accomodate, Drupal Commerce can.

If you’re already running a Drupal Commerce store and now want to add point of sale to your physical locations, Drupal POS is probably a no-brainer. It’s built on-top of the existing Commerce architecture, so you know it will integrate properly in every way, and you can utilize your existing web development service provider to help you set it up.

Demo Drupal Commerce today! View our demo site.Additional details:

If you’re not already using Drupal then you have some larger questions to consider. Do you already have an ecommerce website? Would you be willing to invest in replatforming? Since Drupal Commerce is an eCommerce platform, you would ideally be running your whole operation from Drupal Commerce. That’s not necessarily a bad thing though. Drupal can readily handle any business case you can throw at it. It can integrate with virtually any third-party service, it can provide you with a single location to manage all of your products, orders, customer accounts, etc., it’s built to scale with your business, and on top of all that it’s a powerful content management system that will run your blog and any other content need you might have.

From a support point of view, because Drupal is open-source, you don’t have a single source of support to contact. Instead, you would need to utilize your current web development service provider (if you have one), or work with one of the many Drupal agencies out there who are specialized in Drupal development. This means you can shop around and find the company will work best with you.

Another advantage to Drupal POS (and Drupal as a whole) is that because it’s free, open-source software, you don’t actually have any type of fee to use it. Not one cent. You can have as many stores, products, staff accounts, transactions, registers, etc. as you need, and the price is still $0. Instead of spending your hard earned money on platform fees, you can now redirect those funds to developing your website and POS to do whatever you need it to, or towards marketing, or staffing, or growing your business.

Shopify POS

Who’s it for?

If you’re a small to medium sized business who is just getting started, you don’t have a large budget, and you want the best eCommerce site with POS capabilities, Shopify and Shopify POS is probably your best bet. Also, if you’re already running a Shopify site and happy with it, the Shopify POS is probably ideal for you.

If your business is growing, or you run a large, enterprise level company, Shopify and Shopify POS probably won’t cut it. For one, the fees associated with this level of company can be significant. If you’re at that point, replatforming to something like Drupal Commerce can recuperate a lot of lost earnings and give you full control of your development path, without restrictions.

Additional details:

Shopify has built their business around being easy. Whether it’s opening up a new store or managing your inventory and customers, the Shopify interface is clean and straightforward. As mentioned earlier, it’s ideal for small and medium sized companies just getting started.

However, where Shopify starts to fail is when your business growth is strong and your requirements start to become more complicated. With Shopify, the number of products and product variations you’re allowed can limit your growth. As you start adding more staff, your costs go up. You can pretty quickly go from a $29/mth plan to a $300+/mth plan in short order. 

Another possible deal-breaker is if your product offerings have very unique requirements. Shopify is built to work around the most common business requirements. When your business breaks out of this mold, the platform isn’t designed to accommodate. However, if you can stay within the “typical” business requirements, Shopify probably has everything you need as long as you’re willing to pay for it.

Square POS

Who’s it for?

Square POS is great for small businesses and food service businesses. It’s an easy to use, low-cost option that doesn’t really require anything more than your phone and the provided card reader. Their software interface is clean and easy to understand.

If you’re a medium to large business, or you have very high traffic, Square POS might not be for you. Square is mainly an add-on service to existing businesses, so don’t expect much from an eCommerce perspective. 

Additional details:

Square has become a pretty common sight around town these days, especially when you’re at small business such as cafes or walking around a farmers/artisan market. Square has been able to provide a very good product that allows people to jump in to card transactions easily. It fills this need.

When your business grows and you start having multiple stores and an eCommerce component, you may quickly grow beyond Square’s capabilities. Drupal POS and Shopify POS both have native eCommerce that they work with. This is important when you’re talking about inventory management and other integrations. While Square does have a basic eCommerce component and can integrate with various eCommerce platforms (Drupal Commerce being one of them), you may struggle to get some of the features that Drupal Commerce and Shopify have by default.

Your point of sale integrator

Acro Media is an open-source eCommerce development agency. Our experience in this area is vast and we would love to share it with you. If you have a project that you’d like to discuss, one of our friendly business developers are always available to have that discussion at no cost to you.

Contact Acro Media Today!

Jun 14 2018
Jun 14
Official 8.0 Version Now Available


The Drupal Point of Sale provides a point of sale (POS) interface for Drupal Commerce, allowing in-person transactions via cash or card, returns, multiple registers and locations, and EOD reporting. It’s completely integrated with Drupal Commerce and uses the same products, customers, and orders between both systems. You can now bring your Drupal 8 online store and your physical store locations onto the same platform; maintaining a single data point.

The Drupal 7 version has been in the wild for a while now, but today marks the official, production ready release for Drupal 8.

Release Highlights

What features make up the new version of Drupal Point of Sale 8? There are so many that it will probably surprise you!

Omnichannel

Omnichannel is not just a buzzword, but a word that describes handling your online and offline stores with one platform, connecting your sales, stock and fulfillment centers in one digital location. Drupal Commerce has multi-store capabilities out of the box that allow you to create unique stores and share whatever product inventory, stock, promotions, and more between them. Drupal Point of Sale gives you the final tool you need to handle in-person transactions in a physical storefront location, all using your single Drupal Commerce platform. That’s pretty powerful stuff. Watch these videos (here and here) to learn more about how Drupal Commerce is true omnichannel.

Registers

Set up new registers with ease. Whether you have 1 or 1000 store locations, each store can have as many registers as you want. Because Drupal Point of Sale is a web-based solution, all you need to use a register is a web browser. A touch screen all-in-one computer, a laptop, an iPad; if it has a web browser, it can be your register. The Point of Sale is also fully open source, so there are no licensing fees and costs do not add up as you add more registers.

Customer Display


While a cashier is ringing through products, the Customer Display uses WebSocket technology to display the product, price, and current totals on a screen in real-time so the customer can follow along from the other side of the counter. Your customers can instantly verify everything you’re adding to the cart. All you need for the Customer Display is a web browser, so you can use an iPad, a TV or second monitor to display the information in real-time as the transaction progresses.

Barcode Scanning

Camera based barcode scanning
Don’t have a barcode scanner? No problem. With this release, any browser connected camera can be used to scan barcodes. Use a webcam, use your phone, use an iPad, whatever! If it has a camera, it works. This is helpful when you’re at an event or working a tradeshow and you don’t want to bring your hardware along.


Traditional barcode scanning
A traditional barcode scanner works too. Simply use the barcode scanner to scan the physical product’s barcode. The matching UPC code attached to one of your Drupal Commerce product variations will instantly add the product to your cashier’s display.

Labels

Generate and print labels complete with barcodes, directly from your Drupal Point of Sale interface. Labels are template based and can be easily customized to match any printer or label size so you can prep inventory or re-label goods as needed.

Receipts

Easily customize the header and footer of your receipts using the built in editor. Add your logo and contact information, return/exchange policy, special messaging or promotions, etc.

Drupal Point of Sale cusomized receipts

When issuing receipts, you can choose to print the receipt in a traditional fashion or go paperless and email it to your customer. You can do either, both, or none… whatever you want.

Returns

Whether online or in store, all of your orders are captured in Drupal Commerce and so can be returned, with or without the original receipt. A return can be an entire order or an individual product.

End of Day (EOD) Reports

When closing a register, you cashiers can declare their totals for the day. You can quickly see if you’re over or short. When finished, an ongoing daily report is collected that you can look back on. On top of this, Drupal Point of Sale is integrated with the core Drupal Commerce Reporting suite.

Drupal Point of Sale end of day reporting

Hardware

Use Drupal POS 8 with anything that supports a browser and has an internet connection.

Technical Highlights

Adding to all of the user highlights above are a number of important technical improvements. It’s the underlying architecture that really makes Drupal Point of Sale shine.

Themable

Cashiers login to Drupal Point of Sale via a designed login page. Once logged in, the theme used is the default Drupal admin theme. However, like any other part of Drupal, your admin theme can be modified as much as you like. Keep it default or customize it to your brand; it’s yours to do with as you please.

Drupal Point of Sale themable cashier login screen

Search API Enabled

The search API is a powerful search engine that lets you customize exactly what information is searchable. Using the Search API, your cashiers are sure to quickly find any product in your inventory by searching for a product’s title, SKU, UPC code (via barcode scanner), description, etc. Search API is completely customizable, so any additional unique search requirements can be easily added (brand, color, weight, etc.). The search API references the products on your site, and at any other store or multi-warehouse location to allow for you to serve customers in real-time. 

Fully Integrated with Drupal Commerce

The Drupal Point of Sale module seamlessly integrates into the existing Drupal Commerce systems and architecture. It shares products, stock, customers, orders, promotions and more. This makes Drupal Point of Sale plug-and-play while also making sure that the code base is maintainable and can take advantage of future Drupal Commerce features and improvements.

Permissions and Roles

When Drupal Point of Sale is installed, a “cashier” user role is created that limits the access users of this type have with your Drupal Commerce backend. Use Drupal’s fine grained permissions and roles system to manage your cashiers and give different permissions to employees, managers, marketers, owners, IT, etc. Any way you want it.

Custom Hardware

As mentioned above, all you need to use Drupal POS 8 is anything that supports a browser and has an internet connection. This opens the door for all kinds of custom Point of Sale hardware such as branded terminals, self-serve kiosks, tradeshow-ready hardware, and more.

Drupal Point of Sale Raspberry Pi custom hardware

We’ve been having fun prototyping various Raspberry Pi based POS hardware solutions. You can see some of them here and stay tuned for more. Drupal Point of Sale is open source, so why not open up the hardware too?

Drupal Point of Sale 8, Ready for your Drupal Commerce platform

We’re excited to finally release the production ready version of Drupal Point of Sale 8.0. There are many ecommerce-only platforms out there, but almost none of them can ALSO run in your physical store too. This is a BIG DEAL. Drupal Point of Sale gives you the last piece needed to run your entire store using Drupal Commerce allowing for centralized data and a single system for your team to learn and manage.

One admin login, one inventory list, one user list, one marketing platform, ONE. True omnichannel, without the fees.

Next Step

Watch a Demonstration
Mike at Acro Media recorded a quick video to show Drupal Point of Sale in action. He shows the interface, how it's configured, and some of the features.

[embedded content]

Commerce Kickstart
Starting a Drupal Commerce project from scratch? Use Commerce Kickstart to configure your install package (including Drupal Point of Sale).

Install with Composer
Already using Commerce for Drupal 8? Install Drupal Point of Sale with Composer.

$ composer require drupal/commerce_pos

Let Acro Media help
Acro Media is North America’s #1 Drupal Commerce provider. We build enterprise commerce using open source solutions. Unsure if Drupal Commerce and Drupal Point of Sale meet your business requirements? A teammate here at Acro Media would be happy to walk you through a replatforming evaluation exercise and provide you with the Point of Sale workbook to help you make your decision.

Contact Acro Media Today!

More from Acro Media

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web