Jul 20 2018
Jul 20

Illustration of workflow concept

Did you know that setting up a content workflow is included in Drupal 8 core? It can be easily set up by simply turning on the Workflow and Content Moderation modules. The Workflow module gives you the ability to define a workflow and the Content Moderation module sets up a simple workflow for drafts and the ability to create more content moderation workflows.

Introduction to Content Moderation

If you aren’t familiar with content moderation in Drupal, let’s fix that with a quick overview of what that means. Without this module, Drupal content can only be in one of two states, published or unpublished. The content is either available to the public or it isn’t. Different users with different permissions can manage the publishing status certain types of content. All of this combines to make a pretty useful and normal experience. This should also seem like a normal experience for anyone that has ever used content management system.

Where the Content Moderation module comes in is when this workflow needs to be more than just on or off. This can allow for content to be placed into different statuses or states. With built-in states available, like Draft, content can be staged by one editor and then approved by a user with different permissions. In the publishing world, this matches workflows that exist for paper content, so this is an attractive feature for those in that vertical.

Set up in 5 minutes

Content Moderation in core provides a very simple but useful workflow. Simply turning on the Workflows and Content Moderation modules adds the Editorial workflow. The Editorial workflow adds the Draft state and sets up the content workflow to go from Draft to Published and provides an admin view for drafts that need to be moderated. Using permissions you can restrict authors to only be able to create and edit drafts. Then grant the "Transition drafts to published" permission to your editors and boom!—you have content moderation set up in a matter of minutes.

View of content moderation in Drupal core

 

If you are running a Drupal 8 site and have multiple content contributors that need feedback, there is little reason to not use moderation. The out-of-the-box Content Moderation should be able to handle most situations. If that doesn’t quite fit the needs of your content workflow then there is still good news, you can create a custom workflow.

Custom workflows

If you need a more complex workflow, you probably still don’t need to write any custom code. If it’s just content type, block, or paragraph based entities that you are building a workflow for, you can just create a new workflow based on the "Content" moderation type. Different states can be defined, for example let's say you have the states draft, ready for review, ready for second review, reviewed, and published. Next you need to define the transitions, for example one transition for the above states would be “move ready for review to ready for second review”. These transitions are going to be what you give different user roles permission to do. After that is set up, you and your team are ready to roll with your new workflow.

Setting up a complex workflow in Drupal 8 Core

 

Another example of a custom moderation workflow could be for a site that publishes to multiple platforms. A workflow could be set up to allow the editors of different platforms to approve content onto the system they manage. Let’s say you have a front-facing site, a native app, and an internal portal. You can create a workflow that goes through moderation for the front-facing site and then adds content to a queue to be published or declined for each of the other outlets. This is just one of the many possible use cases for a custom workflow.

Illustration of workflow in Drupal 8 Core for publishing to multiple platforms

If you need to extend Workflow further, maybe for a custom entity, you can write a WorkflowType plugin that covers your needs. This can be used for any entity that needs to change states, so think beyond the idea of content moderation. It could be used for steps in a manufacturing process, or steps for ordering in a restaurant app, the possibilities are limitless.

Do you need it?

Workflows are super powerful and moderation comes mostly ready to go with Drupal core but does that mean you should always use them? On some sites with only a handful of admins and not a lot of roles, it may be more cumbersome than useful. Just because workflows are an option, it shouldn’t be implemented unless your users understand the human element of a workflow. Moderators should know their role in content moderation. If most of your authors have admin privileges and can just push content straight through the flow, then your workflow is mostly standing in the way of being efficient. Every good workflow should start with a meeting of your entire editorial team, and have things worked out on a whiteboard or Slack channel first. Workflows are amazing as long as everyone understands their role in the publishing chain. 

New Call-to-action

Jul 18 2018
Jul 18

Selecting a CMS for a university can be a challenging decision. There are so many needs and nuances to consider - costs of implementation and maintenance, a wide-range of technical ability among site administrators, developers and content editors, a variety of end users looking for different information and the list goes on and on. While your answer likely isn’t as easy as, “let’s just do what everyone else is doing,” by better understanding why other universities made the choice they did can shed light into your decision-making process. 

Drupal is far and above the most used CMS in higher education - 26% of all .edu domain sites are in Drupal, including 71 of the top 100 universities. 

So why are universities like MIT, Georgia Tech, Louisiana State University, Butler, Stanford, Harvard and the rest of the Ivy League universities choosing Drupal? 

Simply put, Drupal makes good business sense, especially with the added benefits of Drupal 8. At Mediacurrent, we believe your website is your greatest digital asset and can be leveraged to accomplish organizational-wide goals. Drupal makes that possible. Here’s how:  

Communicate With All Students - Prospective, Current, and Alumni 

If you want to reach your full recruiting and fundraising potential, you need to communicate with your entire audience. There are a variety of Drupal features that ease the stress of common communication challenges. 

Language:  Not only are their multiple languages spoken within the U.S., but our country hosts over a million international students. Drupal makes creating a multilingual digital experience simpler. Native language handling is built directly into Drupal 8’s core APIs, giving you over 100 languages to choose from. With that functionality it is easier than ever to engage with prospective students across the globe in a meaningful way.

Accessibility: The CDC estimates that 20% of U.S. adults identify as having a disability. These disabilities often hinder people’s ability to interact with the average website. Drupal is an inclusive community and has committed to ensuring that all features of Drupal conform with w3C and WCAG 2.0. Pair that with a strong higher-education focused accessibility strategy and your potential audience could grow by 20%. 

Technology: According to the 2017 College Explorer Market Research Study, the average college student owns 5.6 devices and spends 137+ hours on them! This may seem like common sense now, but if you want to engage with students, you need to account for a variety of screen sizes. Thankfully, Drupal 8 is designed with a mobile-first mentality and includes out-of-the-box responsive functionality. 

Personalization: Universities face added complexity when it comes to digital strategy due to the broad audiences they appeal to. With so many unique people coming to the same pages, content strategy, conversion path mapping and optimization, and defining strong call to actions can be a struggle. By incorporating personalization into your content strategy, whether that is personalized based on user authentication or by integrating tools like Acquia Lift or Salesforce Marketing Cloud, you can speak to the masses but make them feel like you’re speaking specifically to them. 

Reduce Overhead Costs + Increase Operational Efficiencies with Drupal

Drupal can have a dramatic impact on reducing overhead costs and increasing operational efficiency. Universities have a big need for multiple websites: departments, colleges, libraries, and student organizations all want their own website. The direct cost of supporting this many sites along with resourcing the training and support is expensive and encourages unnecessary technology sprawl. As an open source technology (no licensing fees!) along with the multisite feature, creating sites for these different groups is exponentially easier, more cost effective, and ensures brand consistency. 

You can also increase efficiency, ensure content consistency and improve the user experience by creating a “source of truth”.

Write content once and publish it anywhere it’s relevant.

Having to update content such as curriculum or an academic calendar on multiple pages is inefficient and unnecessary. Write once, publish everywhere, save time. 

Improve Brand Equity + Amplify Digital Strategy

As a university, your brand is a powerful asset. You spend significant energy and resources on building loyalty to bolster several organizational goals from recruiting efforts, engaging current students on campus and fundraising among alumni.

With your website being the hub of your marketing strategy, it is critical for your CMS of choice to play nice with your marketing efforts.

Drupal happens to be very SEO friendly out of the box, but there are also advanced configuration options available to support a more sophisticated SEO strategy. You can amplify your digital strategy by integrating your marketing tools and communication platforms directly with Drupal. And the 26% percent of other .edu sites using Drupal make integrating your university-specific tools to your website easier. 

Reduce Risk

I’d be remiss without mentioning security and GDPR compliance. As a university, you hold sensitive information about the students who have attended your school and they are trusting you to keep that secure.

The Drupal community is passionate about security and has an industry leading global security team to ensure your site is protected.

Additionally, as the landscape of privacy rights changes around the world (most recently, GDPR), it’s in your best interest to stay on top of it and reduce the risk of being penalized for data collection practices. 

Have questions about how Drupal can benefit your university? Let us know. We’d be happy to chat. 

Jul 18 2018
Jay
Jul 18

drupal 8 logo featured alongside drupal logos showing the growth of Drupal

Now that Drupal 8 has gained some momentum, it is time to start planning out your upgrade strategy. You want to upgrade to get the latest benefits and take advantage of the future stability that comes with the direction that Drupal will be taking from here on out. Before upgrading you will want to consider some things about what your current site has. In this article we will be covering some of those questions with some context to assist in the decision making process. Let’s determine if you website is adequately serving the current needs of your business and which content will need to be brought over to the new Drupal 8 site. There may be a difficulty in the switch, but being prepared will put you in position to handle whatever comes up.

So, you have a nice Drupal 7 site that's been running happily for years, and maybe you're thinking it's time to upgrade – or, if you haven't given it much thought yet, there's certainly plenty of reasons to do so now. But, Drupal 8 is a pretty big step forward from Drupal 7. What exactly is an upgrade going to entail? What do you need to consider before you do so? We've upgraded numerous sites now, and today I'd like to go over a few things that I think are important to know before starting on such a project.

Before You Start

Just because you've decided to upgrade, doesn't mean that you can do it right away and be done with it by dinner. Unfortunately, there isn't any one-click solution to take your site from Drupal 7 to Drupal 8 (although future upgrades should be closer to reaching that level of simplicity). Here are a few things to consider before you touch the first line of code or content:

Do you still want the same site? Doing a large upgrade such as this is an excellent time to re-evaluate your site's functionality and appearance. Now that you've had it for some time, is there anything you want to change? Any new features you want to add that maybe weren't feasible before because of how the old site was built? Although upgrading can be done in such a way that everything stays almost exactly the same for your site's visitors, it's good to at least consider what potential improvements you could make, perhaps by leveraging some of Drupal 8's great new features. Maybe your site just needs a facelift, or has some long-standing bugs you want to fix, or you want to take advantage of new CSS or JavaScript technologies which weren't available when you first built the site. Upgrading is the perfect time to take a fresh look at things.

How are you migrating? One critical part of most upgrades is to migrate content and user information from the old site to the new one. Databases for Drupal 8 are structured differently than they were in Drupal 7, which means that to upgrade the site you can't just swap out the code while keeping the same database… you have to actually move the content into a new database as well and adjust it to fit Drupal 8's slightly different structure. This is a pretty big departure from how Drupal upgrades worked in the past.

There are two main ways to do this migration. Drupal 8 includes a Migrate API, which is perfect for some simple sites. However, not all contributed modules have the plugins necessary to migrate their data in this way, and any data you might be storing in some customized way certainly doesn't. Although it is possible to write your own plugins, in our experience it's easier to take a different approach by writing an entirely custom migration. This does however require having some more familiarity with Drupal coding than the Migrate API route does. Generally, what a custom migration involves is writing a script and appropriate queries to first retrieve your information from the old database, and then to write it to the new Drupal 8 database in the appropriate format.

Do you know enough Drupal 8? If your site is mostly built using core and contributed modules and themes, you'll probably be good to go. Drupal 8's admin UI does have some changes from Drupal 7's, but none of them are very difficult to get used to and most introduce new ways to navigate and improve your site. However, if your site uses much in the way of custom modules or if it has a custom theme, then before upgrading you should make sure your developers and themers are familiar with Drupal 8, perhaps by working on some other simple Drupal 8 project first or by getting some training on the changes, either in-person or through an online course. The changes in how you code custom modules and themes in Drupal 8 are significant, so they may take some getting used to, but ultimately they are the foundation of what makes Drupal 8 leaps and bounds better than its predecessor. Knowing how to use them effectively is key to having a Drupal 8 site that continues to be maintainable for years to come.

Still Not Sure You're Ready to Upgrade?  Learn more about the benefits and our upgrade process. 

What to Expect

Alright, so you've gotten everything figured out. All that's left to do now is to, well, actually upgrade the site. Here are a couple of things you should plan for when starting most any upgrade.

Expect to have a few difficulties: Even if the upgrade seems like it will be a simple one, you should go into it expecting to have a few unexpected challenges come up, because they almost certainly will. Maybe it's one particular type of field that doesn't have the same settings in 8 as it does in 7. Maybe it's a combination of contrib modules which used to work together one way and don't anymore (one example: The Context module can no longer be used in conjunction with Metatags to set metadata in contextual circumstances). Maybe it's that your site uses a lot of different webforms, and although the submission data can get migrated without too much trouble, recreating the forms themselves can't be done automatically. 

Regardless of what it ends up being, plan to have some unexpected difficulties during the upgrade. In my experience, these challenges tend to be fairly easy to fix or work around through some combination of contributed modules and custom code, so although they can add some complexity to the upgrade it's rare to find a dealbreaker so late in the process.

Expect to have two sites for a little while: Your new Drupal 8 site is completely separate from your old Drupal 7 site, and that means that it needs to be installed somewhere other than where your old site is, and it probably has to have its own domain so you can access it during the upgrade process. You'll be able to keep your old domain though - once the upgrade is done and your Drupal 8 site is ready to go, all you should have to do is change your main domain's settings to point to the new website rather than the old one.

When you first start the upgrade, your Drupal 8 site is likely to be almost empty. If you have lots of custom modules to recreate or anything and the migration itself isn't done yet, then maybe it has some placeholder content to start with. Then, once the migration is done, all the relevant content from the old site gets migrated into the new one. At this point, your content and user information is being stored in both sites. It also means that, from now until the new version of the site launches, any changes you make to the content of the old site won't be automatically reflected in the new site and will be lost when you deploy the upgrade. For many sites, this problem can be mitigated by having a period of time in which changes get made to both sites, instead of just to one of them.

Still, it isn't ideal to have to enter new content twice for an extended period of time, so to solve this, one thing we like to do is to actually have two migrations. The first migration happens early on in the development of the Drupal 8 site, and we use the content from that migration while finishing most of the upgrade. Then, shortly before the upgrade goes live, we do a "final migration" to get any changes which have been made on the Drupal 7 site since the original migration. If all goes well, this results in only a day or two (or zero!) during which changes have to be made in both sites.

Once the upgrade is finished and your domain name settings adjusted so that the new site is live, it's worthwhile to do one last check of the old site to see if there are any recent changes or user registrations that may have been missed. Depending on how your migration script works, these could be migrated again with that, or they could be replicated manually. Once that's done though, huzzah! Your newly upgraded Drupal 8 site is finally ready for the world to see.

 Offer for a free consultation with an Ashday expert

Jul 17 2018
Jul 17

[embedded content]

In the video above, you’ll learn how to build powerful media management functionality using Drupal 8.5. I start the webinar with a review of what’s new in Drupal 8 and then jump right into a live demo.

If you prefer text, then read our tutorial on “Managing Media Assets using Core Media in Drupal 8“.

Modules

In the video we use the following modules:

Below is a time coded list of all the sections in the video. Just click on the time code and it’ll jump to that part of the video.

Video Sections

  • Agenda: (00:41)
  • What’s new in Drupal 8: (01:35)
  • Required Modules: (09:53)
  • Demo time: (11:02)
  • Install Media module: (11:49)
  • How to Upload and view assets: (12:34)
  • Overview of Media types: (14:42)
  • Create remote video media type: (15:34)
  • Field mapping in media types: (17:45)
  • Create remote video asset: (18:52)
  • Customize remote video formatters: (19:48)

Media Field

  • Attach media field to Article content type: (20:24)
  • Using Inline Entity Form on media field: (22:53)
  • Install Inline Entity Form: (23:27)
  • Configure IEF on media field widget: (24:46)

Entity Embed

  • Install Entity Embed: (27:44)
  • Create embed button: (28:37)
  • Configure text format for embed button: (29:40)
  • Testing embed button: (32:27)

Entity Browser

  • Install Entity Browser: (35:50)
  • Create entity browser: (38:21)
  • Integrating entity browser and entity embed: (39:45)
  • Create view for entity browser: (41:02)
  • Add IEF to entity browser: (47:35)

Entity Browser and DropzoneJS

  • Add dropzonejs to entity browser: (51:59)
  • Customize fields on media types using form modes: (54:26)

Drupal 8.6

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Jul 13 2018
Jul 13

Omeda and Drupal are a perfect match for managing customer relationships

As you may have figured out by now, Drupal is a great platform for 3rd party integrations. Whether it’s eSignatures with Hellosign, more sophisticated search with Solr, or a host of other options, Drupal works best when it’s not trying to reinvent every wheel and is instead used to leverage existing business tools by tying them all together into a robust and useful package. Today, we’re going to take a look at a new set of integration modules that Ashday has just contributed back to the Drupal community: Omeda, Omeda Subscriptions and Omeda Customers.

The Omeda Solution

If you haven’t heard of Omeda by now, let’s take care of that. They are a family-founded company who have been around for over 30 years and offer a host of Audience Relationship Management tools meant to properly leverage modern technology to properly segment and target your customer base. They are on top of their game and really know their stuff (they even collaborated on the brainstorming of these new modules). And best of all, they offer a very complete and well-documented API, which is key to any good integration.

While their API is extensive, much of it can be very tailored to a particular customer’s needs so we set out to build a contributable integration that covers some great typical use cases as well as allow for custom development where necessary. So far, this has taken the shape of three modules that potentially can be extended later on.

Omeda Base Module

The Omeda base module is meant to be a simple core module to get you wired up to Omeda so you can start doing things. It has settings to configure your connection to the API as well as a setting to work in testing mode. At its heart is a Drupal service that is meant to be injected into other contrib modules that can tackle specific Drupal solutions. This service provides the Comprehensive Brand Lookup, which the module uses to cache your Omeda brand config daily, as well as a generic utility for making API calls, which has the benefit of consolidating some basic error handling and formulation of HTTP requests. Here’s a little example of how simple it is to call the API using this service:

 

$brand_lookup = \Drupal::service('omeda')->brandComprehensiveLookup();

 

So that’s pretty easy, right? If anything is wrong with the API config or the service is down or something along those lines, the service throws an exception with a helpful message. Otherwise, it returns the Omeda API response to the caller. Again, it’s simple but provides the base functionality you need everytime you wish to connect with Omeda.

Omeda Subscriptions Module

The first module to leverage the Omeda base module is the Omeda Subscriptions module. This module adds a My Subscriptions tab to the user profile, for the roles you select, where users can manage their deployment subscriptions. You can also configure which Omeda deployments you wish to allow your users to manage. The available deployments come from the stored Comprehensive Brand Lookup data cached by the base Omeda module. This module includes a new Omeda Subscriptions service that adds functions to fetch a logged in user’s opt ins and opt outs as well as allow the user to opt in or opt out of a deployment. It’s a simple, specialized module (which is the best kind) to provide an out-of-the-box solution for the most common Omeda user subscription management needs.

Omeda Customers Module

The Omeda Customers module is another extension to the base Omeda module that allows you to map user fields to your Omeda customer entities and sync them on user updates. You can choose which roles will sync and which user fields will sync. Since field mapping can get quite hairy, we provide a solution for simple use cases where you need to simply tell Omeda that “this field = that field”. If it’s a standard base Omeda field like “First Name”, those are called base fields and are meant to be a simple hand off of the Drupal field value to Omeda. If it’s an email, phone number, or address field, you can choose that type and we will then ask you to determine which contact type it represents so that it gets into Omeda properly. It should be noted that for addresses, we only support Address fields from the Address module since mapping a bunch of individual Drupal fields to a single Address entity in Omeda is more complicated and likely needs a custom solution.

This mapping config also provides a simple solution for Omeda Demographic fields, which are more complex and dynamic fields that store IDs instead of literal values. It allows you to choose which demographic field a Drupal user field maps to and then create a mapping of possible Drupal field values with available Omeda field values. So if you have a field on the Drupal user called “Primary business role”, but you want to map it to the Omeda “Job Title” demographic field, you can do that. You would then hand enter a mapping that indicates that a Drupal field value of “President” maps to the Omeda value of “President / CEO” so that we can send Omeda it’s desired ID value of 5******* instead of the literal text of “President / CEO”, which would be invalid. Again, this is for more simple use cases; if your Omeda fields don’t map 1-to-1 to Drupal fields, the necessary business logic is wide-ranging and you will likely need custom programming. The great thing though is that we’ve included support for a custom hook (hook_omeda_customer_data_alter) to inject your own adjustments into the data mapping process and provide your own custom alterations.

In Conclusion

Hopefully these modules prove useful to you - especially if you’re already an Omeda client with a Drupal site - and the goal again is to provide some basic functionality that doesn’t require developer resources to integrate with some basic Omeda functionality. We ourselves have custom needs beyond what the modules can offer and find that it’s quite easy to extend them to do what we need for particular customer solutions, largely thanks to Drupal 8’s architecture. As always, if you need assistance please feel free to contact us and if you’d like to offer any module patches or report a bug, feel free to use the issue queues for each project and we’ll check it out!

 If you need to integrate Drupal with anything, talk to us! We can integrate just about anything with Drupal

Jul 12 2018
Jul 12

This tutorial will walk you through setting up an awesome Drupal Commerce product catalog using Search API and Solr, and then adding various ways of filtering the results (product search, sorting options and Facet categories). The end result of this guide will be a catalog that functions in the same way as our Urban Hipster Drupal Commerce demo site’s catalog. You can try it here. If you don’t already know why we use Search API, Solr and Facets for catalogs, 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 Sor 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 you 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 catalog 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 catalog 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 catalog

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 catalog with it, and then assign ways of filtering the catalog 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 catalog search field within the catalog 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 catalog 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 catalog 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 catalog 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 the 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 catalog

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 let 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 catalog 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 fields 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 catalog and you can expand on it with more datasource fields however you want. Cool!

Contact us and learn more about our custom ecommerce solutions

Jul 11 2018
Jul 11

Coffee is a magical thing. It gets you going, clarifies your thoughts, makes you feel all warm inside. I don’t know what I’d do without it. So when we consider installing the Drupal module named after this irreplaceable daily beverage, we see that it has a similar effect. It just makes things better. Am I overstating things? Probably. But I haven’t had enough coffee yet today and I need to get this blog going with some pizzazz.

So simply put, the Coffee module gives you a Mac-like live search experience of the Drupal admin menu. It is triggered by the shortcut of Alt+D on the Mac, or Alt+ctrl+D in Windows IE. When the search bar pops up, just start typing and you can do an ajax live search of that deeply nested admin menu and get to things in a hurry! 

Screenshot of Coffee Drupal Module

Now, it’s not perfect. It can’t dig beyond certain levels, such as actually finding the settings of individual contact forms, but it gets nearly everywhere in the first couple of layers and can save you a lot of clicks when in development and site building mode. Even cooler - you can add your own custom coffee commands in your custom module to make your actions discoverable. That’s great flexibility. 

So there you have it! A simple module that shaves off a few seconds of time all day long. Pretty awesome!

Time to refill my mug.

Jul 11 2018
Jul 11
July 11th, 2018

Someone recently asked the following question in Slack. I didn’t want it to get lost in Slack’s history, so I thought I’d post it here:

Question: I’m setting a CSS background image inside my Pattern Lab footer template which displays correctly in Pattern Lab; however, Drupal isn’t locating the image. How is sharing images between PL and Drupal supposed to work?

My Answer: I’ve been using Pattern Lab’s built-in data.json files to handle this lately. e.g. you could do something like:

footer-component.twig:

... {% footer_background_image = footer_background_image|default('/path/relative/to/drupal/root/footer-image.png') %} ... {%footer_background_image=footer_background_image|default('/path/relative/to/drupal/root/footer-image.png')%}

This makes the image load for Drupal, but fails for Pattern Lab.

At first, to fix that, we used the footer-component.yml file to set the path relative to PL. e.g.:

footer-component.yml:

footer_background_image: /path/relative/to/pattern-lab/footer-image.png footer_background_image:/path/relative/to/pattern-lab/footer-image.png

The problem with this is that on every Pattern Lab page, when we included the footer copmonent, we had to add that line to the yml file for the page. e.g:

basic-page.twig:

... {% include /whatever/footer-component.twig %} ... {%include/whatever/footer-component.twig%}

basic-page.yml:

... footer_background_image: /path/relative/to/pattern-lab/footer-image.png ... footer_background_image:/path/relative/to/pattern-lab/footer-image.png

Rinse and repeat for each example page… That’s annoying.

Then we realized we could take advantage of Pattern Labs global data files.

So with the same footer-component.twig file as above, we can skip the yml files, and just add the following to a data file.

theme/components/_data/paths.json: (* see P.S. below)

{ "footer_background_image": "/path/relative/to/pattern-lab/footer-image.png" }     "footer_background_image":"/path/relative/to/pattern-lab/footer-image.png"

Now, we can include the footer component in any example Pattern Lab pages we want, and the image is globally replaced in all of them. Also, Drupal doesn’t know about the json files, so it pulls the default value, which of course is relative to the Drupal root. So it works in both places.

We did this with our icons in Emulsify:

_icon.twig

paths.json

End of the answer to your original question… Now for a little more info that might help:

P.S. You can create as many json files as you want here. Just be careful you don’t run into name-spacing issues. We accounted for this in the header.json file by namespacing everything under the “header” array. That way the footer nav doesn’t pull our header menu items, or vise-versa.

example homepage home.twigthat pulls menu items for the header and the footer from data.json files

header.json

footer.json

Web Chef Brian Lewis
Brian Lewis

Brian Lewis is a frontend engineer at Four Kitchens, and is passionate about sharing knowledge and learning new tools and techniques.

Web Chef Dev Experts
Development

Blog posts about backend engineering, frontend code work, programming tricks and tips, systems architecture, apps, APIs, microservices, and the technical side of Four Kitchens.

Read more Development
Jul 09 2018
Jul 09

Strata Center at MIT

Strata Center at MIT

Nestled right off Main Street in Cambridge, Massachusetts lies the Ray and Maria Stata Center on the campus of the Massachusetts Institute of Technology (MIT).  This abstract building designed by Pritzker Prize-winning architect Frank Gehry was the perfect venue to house the longest running, front-end focused Drupal conference in the US, Design 4 Drupal.  It demonstrates that the modern and abstract design Cambridge and MIT has seen can work perfectly with the structure needed within.

The Design 4 Drupal conference highlights training sessions and seminars focusing on designing for, and building the “front-end” of websites, or what gets seen and used by end users.  This area of focus encompasses graphic design, user experience, accessibility, performance, tooling, and much more.

Like a lot of our Higher-Ed clients, MIT is a user of Drupal, and is proud to offer this space to the Drupal community to learn and share knowledge.  I was pleased to be asked to present two sessions at the conference, and even more pleased with the knowledge I was able to take away from attending the event.

Meta and Schema: Defining the Content about your Content

The first session I presented focuses on designing and implementing a metadata strategy for your website.  Metadata is the content that describes your content. It is very important in how web pages are found in search engines, and how they are displayed on social network sites.

The presentation is a deep dive into the different specifications for meta tags and Schema.org schemas, how to decide what to markup, and then how to text and validate that you’ve done it correctly.

This session was not recorded due to technical difficulties, but the slides are available at jimbir.ch/meta-schema-drupal

Building a Better Page Builder with Bootstrap Paragraphs

The second session presented reviews the Bootstrap Paragraphs module for Drupal 8 that I developed and how it combines the power of the world’s most popular front end framework, Bootstrap, with Drupal Paragraphs, the powerful module that allows content creators to build layouts and structured pages using content components.

Last session begins for #D4DBoston #Design4Drupal 2018 with @thejimbirch and Lego Uncle Jim explaining the Bootstrap Paragraphs pic.twitter.com/p1zBJv2bMZ

— Dwayne McDaniel (@McDwayne) June 28, 2018

I have been working on this module since I first presented it at the BADCamp 2016 Front-end Summit.  The module installs a suite of components that allow content creators to quickly build out pages.

I love giving this presentation because I always get great feedback from people who use the module; who are going to use the module; or who are going to use my methodology to create their own version that fits their specific needs.  The module currently has over 25,000 downloads, and has had users from all around the world.

You can watch a recording of the session here.

Need help designing your website? Contact us and we can help

The Keynotes

The Building Blocks Of The Indie Web – Jeremy Keith

The conference featured not one, but two great keynotes.  On the first day author and developer Jeremy Keith, who was also in town for An Event Apart Boston, presented a session in which he encouraged a return from social media publishing to independent publishing.  It was a great reminder that the web was ham radio before it was cable, and can still be so.

Learning about the IndieWeb principals from @adactio at @D4DBoston #D4DBoston #Drupal pic.twitter.com/nRDdbCKsld

— Jim Birch (@thejimbirch) June 27, 2018

Exploring the New Drupal Front-end with JavaScript – Dries Buytaert

The second keynote was given by founder and project lead of Drupal, Dries Buytaert.  Dries was the keynote at the very first Design 4 Drupal, so it was a special treat have have him back for the tenth anniversary.  His presentation reviewed the history of JavaScript on the web, API-first vs. API-only approaches and gave behind-the-scenes insights into Drupal’s JavaScript modernization initiative.

Exploring the New Drupal Front-end with JavaScript at @D4DBoston with Drupal founder @Dries #Drupal #Design4Drupal #D4DBoston pic.twitter.com/Eonj7XdAQz

— Jim Birch (@thejimbirch) June 28, 2018

The Sessions

Thanks to Kevin Thull, and the organizers of Design 4 Drupal,  most of the presentations were recorded and are available to anyone at Design 4 Drupal’s YouTube channel.  There was a broad mix of different types of sessions that covered developers, designers, User Experience (UX), Accessibility (A11Y), and Tools.  Below are some highlights of the sessions I went to.

Web Accessibility Tips and Tools – Abby Kingman

Abby gave a session that was near and dear to my heart.  We are always learning about how to make our websites more accessible, and Abby’s presentation covered where to find current guidelines and specifications, and then when onto to review tools for testing.  There are lots of great links to follow from this one.

This session validated the approach we take at Kanopi to accessibility in design and development.  A lot of the tools and testing techniques were all part of our processes, and I look forward to exploring the ones I didn’t know about!

Great detailed presentation reviewing the guidelines, laws, and tools used in Web Accessibility #a11y by @abbykinz at @D4DBoston !#Drupal #design4drupal #d4dboston pic.twitter.com/8QFlI4KFvx

— Jim Birch (@thejimbirch) June 28, 2018

Webform Accessibility – Jacob Rockowitz

Jacob is the current maintainer and a prolific blogger and thought leader in the Drupal-sphere.  We penned an article in advance of this presentation where he reviewed his thought process, and recorded his presentation.  My favorite takeaway from this presentation was:

“Learning about accessibility can be overwhelming. We don’t have to be accessibility experts. We just need to care about accessibility.”

Kanopi has a long history of both building new and retrofitting existing sites to be WCAG compliant.  This presentation showed me that our approach, ongoing learning and iteration have us on the right track.

“Learning about accessibility can be overwhelming. We don’t have to be accessibility experts. We just need to care about accessibility.” – @jrockowitz on working on #a11y in the Drupal Webform module at @D4DBoston #D4DBoston #Drupal #Design4Drupal pic.twitter.com/nEDIMdtyhs

— Jim Birch (@thejimbirch) June 27, 2018

Variable Fonts and Our New Typography – Jason Pamental

I’m a big fan of Jason’s body of work, from his book, Responsive Typography: Using Type Well on the Web, to his blog, and frequent appearances on the Talking Drupal Podcast.

Jason’s deep knowledge of typography truly shows in this presentation that gives a brief history of type, how it moved from paper to the screen, and how the future of digital typography will be with variable fonts.

I look forward to exploring more about variable fonts with the designers at Kanopi.  The design possibilities, and the performance gains make these new tools very attractive.

“Type is never neutral” and “Type is how we hear what we read”. Great thoughts from Variable Fonts and Our New Typography by @jpamental at @D4DBoston #Drupal #Design4Drupal #D4DBoston pic.twitter.com/v7TXhAFXRD

— Jim Birch (@thejimbirch) June 27, 2018

Building a Living Style Guide with Herman – in Your Sass! – Chris Wells

In this technical presentation, Chris Wells, CTO of Redfin Solutions gave a nice overview of Herman, which uses SassDoc to reads comments in your stylesheets to build a static website  that is your style guide. It is not as extensive as a full blown style guide like Pattern Lab, but can be very useful for smaller teams.

This presentation has me researching simple style guide solutions.  Not every project has the budget or need for a solution like Pattern Lab, but since I already try to comment style sheets and templates, it makes sense to do it in a way that something like Herman or KSS Node can parse.

Building a Living Style Guide with Herman presented by @sceo at @D4DBoston @Drupal #Design4Drupal #D4DBoston #Drupal pic.twitter.com/MOMct6Feld

— Jim Birch (@thejimbirch) June 27, 2018

Thanks!

Thanks to all of the volunteer organizers, especially Leslie Glynn, who was my point of contact before, during, and after the event, and in true New England fashion, made sure I took home some famous Boston cannolis for my mother.  Kanopians help organize a few different conferences across the states including BADcamp and MIDcamp, and we know putting on these conferences is a labor of love, so thank you!

Jul 03 2018
Jul 03

What’s the greatest entrepreneurship lesson that Mediacurrent partner Dave Terry has learned?

In a recent guest spot on the Good People, Good Marketing podcast, Dave weighs in on the evolution of open source technology and shares his path to building a leading Drupal-based agency.

Interview Sound Bites 

Technology should be shared and free. 

Giving back to the Drupal community is embedded in Mediacurrent’s DNA. Dave explains why that’s so important.

Culture is about people and who we hire. I know a lot of companies say that, but it’s really about putting the processes behind how you identify the right people within the company.

A successful company culture attracts great talent while also managing accountability with a distributed team. Here, Dave shares the three tenets of culture at Mediacurrent.

Tune in

Listen to the complete podcast, Episode 47: Interview with Dave Terry, on the Sideways8 blog.

Related Content 
Why Should Companies Support Drupal? | Blog
Drupal Contrib: Why it's Important | Video
Creating a Culture of Giving in Your Organization | Blog
 

Jul 02 2018
Jul 02

Recorded June 21st, 2018

This episode we welcome Jess Snyder who is on the planning committee for GovCon, coming up real soon in August, to talk about… GovCon.. Which is coming up real soon in August. We’ll cover some Drupal News, it looks like Bob has the Pro Project Pick this episode and Ryan will bring it to a close with The Final Bell.

Episode 38 Audio Download Link

Updates:

Jess Snyder from WETA, DC talking about Govcon

  • What do you do at WETA?

  • What got you into Drupal

  • What got you involved in GovCon

  • Any notable keynotes / sessions you’re looking at?

  • ** Random questions **

Drupal News:

Pro Project Pick:

Events: (https://www.drupical.com/?type=drupalcon,regional)

The Final Bell: (Ryan)

Jun 28 2018
Jun 28

The majority of Drupal's underlying code is PHP. As a Drupal developer, the better you know PHP, the better your code will be. In this Acro Media Tech Talk video, Drupal developer Rob Thornton discusses code nesting and how you can optimize your code in order to reduce unnecessary nesting. 

[embedded content]

Code nesting can basically be described as when a block of code is contained within another block of code. If you're code isn't well thought out, you can potentially end up with deep nesting that is both hard to read and difficult to maintain. Aside from reducing difficult to read code and making your code more maintainable, reducing the amount of nesting helps you find bugs and lets other developers contribute to your code easier. Rob uses a number of examples of common nesting scenarios, walking you through how to find and fix them.

If you liked this video, you might also like these posts too.

Contact us and learn more about our custom ecommerce solutions

Jun 27 2018
Jun 27
Go to the profile of Drupal Europe

Jun 27, 2018

Community. Sharing. Helping. This is the spirit of Drupal. These things bind us all together. Be a part of it by joining us during Drupal Europe between 10–14 September 2018 in Darmstadt, Germany.

photo credit Susanne Coates @flickr

The track dedicated to Social + Non-Profit will gather ambitious life stories about helping others and projects whose purpose is to invest everything in making the world a better place. You will have the opportunity to meet colleagues from your field of interest and join forces, learn how to use pre-configured Drupal distributions and get inspired by ambitious social impact projects built with Drupal. Also learn how Drupal can be used to ensure accountability, trustworthiness, honesty, and openness to every person who has invested time, money, and faith into a non-profit organization. Talk and share ideas, learn from each other, improve, innovate … and take a leap forward. There are a lot of things you will learn, no matter your technical skill level. From developers to people with a big heart, you will for sure find something that inspires you.

Interested in attending? Buy your ticket now at https://www.drupaleurope.org/tickets.

We are looking for submissions in various topics. Here are some ideas to share your experience on with the rest of the world.

  1. Every nonprofit organization must apply the 3 E’s: Economy, Efficiency, Effectiveness. Economy forces you to handle your project with low budgets, that is almost always the case with non-profit organizations. Efficiency is required also due to low resources available to most non-profit organizations. Effectiveness ensures you get the job done and complete your targets. How are you doing that? What tools and practices ensure this?
  2. We live in a world that is changing every day and technology is a big part of it. What are the new technologies you integrate in social projects? What do you need and what do you find on the market? How drupal is helping you achieve your goals?
  3. Transparency, accountability and full disclosure on operations is a must for all non-profit organizations. People will donate to and support campaigns only if they know exactly where the money goes and how are things handled. This way, they ensure their credibility in front of the world. How do you technically implement this?
  4. A lot of people talk about making the world a better place. But talking is not enough. You have to take action! How do you plan to do it? How do social activities raise the level of engagement in your community? How are people’s lives improved by your actions?
  5. Non-profit is done mainly from the heart. Volunteering is the key word. What are your life stories about helping others, inspirational first hand experiences? Why, what and how did you do it? What drives you? What are your goals?

We look forward to your submission sharing you experience with the other attendees.

See you in Darmstadt!

About industry tracks

As you’ve probably read in one of our previous blog posts, industry verticals are a new concept being introduced at Drupal Europe and replace the summits, which typically took place on Monday. At Drupal Europe these industry verticals are integrated with the rest of the conference — same location, same ticket and provide more opportunities to learn and exchange within the industry verticals throughout three days.

Now is the perfect time to buy your ticket for Drupal Europe. Session submission is only open for a few more days so please submit your sessions and encourage others who have great ideas.

Please help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

To recommend speakers or topics please get in touch at [email protected].

About the Drupal Europe Conference

Drupal is one of the leading open source technologies empowering digital solutions in the government space around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — which has a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

Jun 26 2018
Jun 26

There were a lot of amazing sessions at DrupalCon Nashville 2018, but one of the few sessions that sparked my interest was “PDFs in Drupal” presented by Dan Hansen. In this session, Dan goes through the importance of PDFs, gave a short introduction to some of the more popular PDF rendering libraries, and gave a demo on some tips and tricks that I found very useful for my future projects.

Most, if not all of us, have opened a PDF recently. PDFs are popular because they are universal as a document format and can easily be sent to others without having to worry about whether their machine can open them. Despite this, Dan notes that it feels like PDFs are behind in support, and it would be nice to have better PDF handling in Drupal core - similar to images in media libraries.

PDF Rendering Libraries

This session introduced a handful of popular PDF rendering libraries:

  • Print-to-PDF
  • jsPDF
  • FPDF
  • mPDF
  • TCPDF
  • FPDI
  • DOMPDF
  • Wkhtmltopdf
  • PDFtk

PDFs in Drupal

In Drupal 7, the most popular module for generating PDFs is the Print module - but does not support Drupal 8. Fortunately, there are options available for Drupal 8:

  • Printable - based on the Print module to allow generation of PDFs. It relies on the PDF API, which is currently not stable.
  • Entity Print (recommended) - allows for printing any Drupal entity or View (D8 only) to PDF. This module provides flexibility with PDF rendering libraries and is more lightweight compared to the Print module and has a stable release for both D7 and D8.
  • FillPDF - allows for filling PDF with values. This module can be used with the PDFtk library or a paid third-party service, and can help in reducing overhead of rendering PDFs.
     

Tips and Tricks

I found Dan’s demos to be the most interesting - as he showed some code examples of various (and seemingly common tasks) related to PDFs. The following examples from Dan’s session shows how simple and straightforward it is to work with PDFs:

Making a PDF from HTML

A custom controller can simply return the following output:

$dompdf = new Dompdf();
// Pass the HTML markup.
$dompdf->loadHtml($markup);
// Render the HTML as PDF.
$dompdf->render();
// Stream the generated PDF back to user via browser.
$dompdf->stream();

Combining 2 PDFs

Using the PDFtk library:

$pdf = new Pdf([ 
  'A' => '/path/file1.pdf', // A is alias for file1.pdf 
  'B' => ['/path/file2.pdf','pass**word'], // B is alias for file2.pdf ]);
$pdf->send();

Notice that you can specify a password for the PDF file (if there is one). You can also extract specific pages from the PDF files as well:

$pdf->cat(1, 5, 'A') // pages 1-5 from A 
  ->cat(3, null, 'B') // page 3 from B 
  ->cat(7, 'end', 'B', null, 'east') // pages 7-end from B, rotated East 
  ->cat('end', 3,'A','even') // even pages 3-end in reverse order from A ->cat([2,3,7], 'C') // pages 2,3 and 7 from C    
  ->saveAs('/path/new.pdf');

More of these examples can be found at https://packagist.org/packages/mikehaertl/php-pdftk.

Fill in a PDF Template

Using the FillPDF module:

$pdf = new Pdf([‘PATH_TO_PDF’]);
$pdf->fillForm([
  ‘name_of_text_field’ => ‘Some value’
])
->needAppearances()
->send(‘filled.pdf’);

I really enjoyed and learned a lot of useful tips from Dan’s session, and I encourage anyone who is looking to work with PDFs in Drupal to check out the session.

Related Content:
Accessibility: Let's Talk PDFs | Blog
Top Drupal 8 Modules | Blog
Mediacurrent Top Drupal 8 Modules: Drupalcon 2018 Edition | Blog

Jun 26 2018
Jun 26

The Block field module lets you insert a Drupal block as a field on your content.

A Drupal theme is divided into regions and you can place blocks or your own custom blocks into these regions. You accomplish this task by dragging and ordering blocks in the “Block Layout” screen. That means you can append blocks before or after the main content of your content type. This “Block Layout” screen will soon be cluttered if you have multiple content types and/or multiple single nodes, each one with a different custom block. Block Layout Screen

However, there’s a way to insert a block (or many blocks) directly into your content as a field. Thus, you don’t have to place the block in the “Block Layout” screen, instead, you insert the block as a field on the node.

Blocks as fields

In this tutorial, we’re going to cover the usage of the Block field module. Let’s start!

Installing the Block Field module

The first thing you’ll need to do is install the Block field module.

Using Composer:

composer require drupal/block_field

This module has no dependencies, so just install it and you’re good to go.

Enable Block Field module

Add Block Field to Content Type

Let’s start by adding a block field to the Article content type.

1. Go to Structure, “Content types”, click “Manage fields” on the Article now, then click on “Add field”.

2. Select “Block (plugin)” under the reference category and give it a proper label.

Adding a block field

3. Leave the “Allowed number of values” set to 1 and click “Save field settings”.

On the edit screen, you can add a default value for this field. There’s also a list of all blocks, which you can select or deselect in order to make them available to this particular field (custom blocks will appear here too). Click “Save settings” once again.

Availbale Blocks

Test Block Field

Click Content, “Add Content”, Article in order to create a test article. Choose a system block (for example the “Powered by Drupal” block) from the drop-down and click Save.

Creating content with a block field

You’ll see the selected block inserted as a field in the content. This block won’t appear in the “Block Layout” screen.

Block field inside the content

You can also use this module to insert a view via a block inside the content. Edit the article and select the “Who’s online” block under the “Lists (Views)” category, click Save and you will see this block in your content.

Please note: you won’t be able to use Views contextual filters with the Block Field module.

Display a view via a block in a field

Summary

The Block Field module lets you insert not only block views into a field but all types of blocks, even custom blocks. This allows the creation of complex content types and/or nodes and provides great flexibility when building a site.

Jorge Montoya

About Jorge Montoya

Jorge has been reading about Drupal and playing with it for almost 5 years. He likes it very much! He also likes to translate German and English documents into Spanish. He's lived in some places. Right now, he lives in the city of Medellín in his homeland Colombia.

Jun 26 2018
Jun 26
Go to the profile of Drupal Europe

Jun 26, 2018

photo: Paul Johnson @ flickr

Drupal is our business.

Regardless of being a freelancer, a two person shop or a hundred plus agency, Drupal is vital to our success in growing and supporting our business.

The business ecosystem is changing rapidly, thereby making it a necessity for agency leaders, managers and advisors to focus on a multitude of challenges and opportunities.

Understanding how the marketplace is evolving, driving innovation, fostering the right company culture, and adopting efficient project management methodologies, are all challenges faced by businesses today.

We all want to transform our business by working with the smartest team, create and deliver amazing projects, and have ideal customers lining up to work with us.

Any Drupal conference cannot be complete without in-depth discussions and debates about these challenges and more.

What is this track about?

The Agency Business track will provide insight, support and real stories from people running businesses and managing projects. Learn about other people’s experiences, and get tips and ideas on how to tackle the challenges faced in your business or project.

Come to this track to learn / speak about

Photo: Michael Cannon @ Flickr

Agency growth

Growing and scaling your business can be a tricky and daunting task. We need to consider strategies for how to grow our businesses, and how to do so sustainably.

With increased competition from both other agencies and other platforms, we need to look at not only how we generate new leads for our businesses, but how do we convince potential clients that Drupal is the best, that we are the best?

Leadership and Culture

What is the right company culture for my business? How can I better lead my agency through the challenges ahead? How can I provide good leadership to my team? How can we grow and scale our business, without losing our company culture along the way? These are just some of the questions we will look to answer in the Agency Business track.

Operations

Project management is a bit of a juggling act, with many different needs and tasks that need to be taken care of simultaneously. We’re always on the look-out for ways to increase a project’s effectiveness and efficiency, while reducing the risk of it getting out of control. Let’s share our experiences and ideas on how we can improve project planning, better manage timelines & budgets, and keep staff motivated, while all the time keeping clients happy and engaged in the process.

Diversification

Markets change faster and faster, so does our market. We need to adapt our products and offering to stay competitive and minimize our business risks. Perhaps it means diversifying your service offerings, perhaps it means developing a product, perhaps it means extending into new markets or verticals. However, we also need to consider how to keep clients happy and how to continue to meet their changing needs through innovation and/or diversification.

How to get involved

At Drupal Europe, we want to ensure that attendees get the most from this track through highly valuable and insightful sessions. We are looking for speakers to openly and honestly share stories about their challenges and how they solved it. We want to hear about your experiments, successes and failures, process discoveries, strategies, and tactics. We want real-life learnings, supported by facts and figures — prove to us that your way is best.

Want to submit a session under Agency Business Track?

Session submissions are open and will close on 30 June 2018.

Whatever your experience is, whether it be running a small 2 person operation or scaling to 30 and beyond, or managing projects and project teams, we want to hear from you. Your experience and insight is invaluable and we know others will think so too.

Come to Drupal Europe and share your experiences with us — submit a session to the Agency Business track today!

Know a great speaker?

Do you know someone who could be a great speaker? Or perhaps you know someone who has an interesting story to share? If so, please get in touch with the program team at [email protected].

And don’t forget to help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

We look forward seeing you in Darmstadt!

About Drupal Europe Conference

Drupal is one of the leading open source technologies empowering digital solutions in the government space around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — with a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

Jun 26 2018
Jun 26

This is part one of a two-part series on transitioning to HTTPS

For some time, major internet players have advocated for a ubiquitous, secure internet, touting the myriad benefits for all users and service providers of “HTTPS everywhere”. The most prominent and steadfast among them is Google. In the next week, continuing a multi-year effort to shepherd more traffic to the secure web, Google will make perhaps its boldest move to date which will negatively impact all organizations not securely serving their website over HTTPS.

To quote the official Google Security Blog

Beginning in July 2018 with the release of Chrome 68, Chrome will mark all HTTP sites as “not secure”

Chrome insecure message for HTTP
Google blog

Given the ambiguous “in July 2018”, with no clearly communicated release date for Chrome 68, it’s wise to err on the side of caution and assume it will roll out on the 1st. We have readied our partners with this expectation.

So what does this mean for your organization if your site is not served over HTTPS? In short, it’s time to make the move. Let’s dig in.

What is HTTPS?

HTTP, or HyperText Transfer Protocol, is the internet technology used to communicate between your web browser and the servers that the websites you visit are on. HTTPS is the secure version (s for secure) which is served over TLS: Transport Layer Security. What these technical acronyms equate to are tools for internet communication that verify you’re communicating with who you think you are, in the way you intended to, in a format that only the intended recipient can understand. We’ll touch on the specifics in a moment and why they’re important. Put simply, HTTPS enables secure internet communication.

Why secure browsing matters

Leaving aside the technical details for a moment and taking a broader view than communication protocols reveals more nuanced benefits your organization receives by communicating securely with its audience.

HTTPS improves SEO

Since Google accounts for 75-90% of global search queries (depending on the source) SEO is understandably often synonymous with optimizing for Google. Given their market domination, competitors are taking queues from Google and in most cases it’s safe to assume what’s good for SEO in Google is good for optimizing competing search engines.

In the summer of 2014, Google announced on their blog that they would begin to favorably rank sites who used HTTPS over HTTP. It’s already been nearly four years since we’ve known HTTPS to be advantageous for SEO. Since then, Google has consistently advocated the concept of HTTPS ubiquity, frequently writing about it in blog posts and speaking about it at conferences. The extent to which serving your site over HTTPS improves your SEO is not cut and dry and can vary slightly depending on industry. However, the trend toward favoring HTTPS is well under way and the scales are tipped irreversibly at this point.

HTTPS improves credibility and UX

Once a user has arrived at your site, their perceptions may be largely shaped by whether the site is served over HTTP or HTTPS. The user experience when interacting with a site being served over HTTPS is demonstrably better. SEMrush summarizes well what the data clearly indicate; people care a great deal about security on the web. A couple highlights:

You never get a second chance to make a first impression.

With engaging a participant of your target audience, you have precious few moments to instill a sense of credibility with them. This is certainly true of the first time a user interacts with your site, but is also true for returning users. You have to earn your reputation every day, and it can be lost quickly. We know credibility decisions are highly influenced by design choices and are made in well under one second. Combining these two insights, with the visual updates Chrome is making to highlight the security of a user’s connection to your site, drawing the user’s attention to a warning in the URL bar translates to a potentially costly loss in credibility. Unfortunately it’s the sort of thing that users won’t notice unless there’s a problem, and per the referenced cliché, at that point it may be too late.

Browsers drawing attention to insecure HTTP

Much like search, browser usage patterns have evolved over the last five years to heavily favor Google Chrome. Therefore, what Google does carries tremendous weight internet-wide. Current estimations of browser usage put Chrome between 55% and 60% of the market (again, depending on sources). Firefox has followed suit with Chrome as far as HTTP security alerts go, and there’s no indication we should expect this to change. So it’s safe to assume a combined 60-75% of the market is represented by Chrome’s updates.

Google Chrome HTTP warning roll out

Google (and closely mirroring behind, Firefox) has been getting more stringent in their display of the security implications of a site served over HTTP (in addition to sites misconfigured over HTTPS). They’ve shared details on the six-step roll out on their general blog as well as on a more technical, granular level on the Chrome browser blog.

In January 2017, they began marking any site that collects a password field or credit card information, served over HTTP as subtly (grey text) not secure.

Chrome insecure message for HTTP
Laravel News

Then, in October 2017, they tightened things up so that a site that collected any form information over HTTP, would have the same “not secure” messaging. They added the more action-based aspect of showing the warning on the URL bar when a user entered data into a form. This is an especially obtrusive experience on mobile due to space constraints, which more deeply engages the user cognitively as to exactly what is unsafe about how they’re interacting with the site.

Chrome insecure message for HTTP
Google blog

Next, in July 2018, all HTTP sites will be marked as not secure.

In September 2018, secure sites will be marked more neutrally, removing the green secure lock by default connoting a continuing expectation that HTTPS is the norm and no longer special.

Chrome insecure message for HTTP
Google blog

In October 2018, any HTTP site that accepts any form fields will show affirmatively not secure with a bold red label, much like a misconfigured HTTPS site does now.

Chrome insecure message for HTTP
Google blog

Though they haven’t yet announced a date, Google intends to show affirmatively not secure for all HTTP sites. The drive is clearly to establish the norm that all the web traffic should be served over HTTPS and that outdated HTTP is not to be trusted. This is a pretty strong message that if Google has their way (which they usually do) HTTPS will inevitably be virtually mandatory. And inevitably in internet years, may be right around the corner.

HTTPS vastly improves security for you and your users

Returning to the technical, as mentioned previously, HTTPS helps secure communication in three basic ways.

  • Authentication “you’re communicating with who you think you are”
  • Data integrity “in the way you intended to”
  • Encryption: “in a format that only the intended recipient can understand”

What authentication does for you

In order for the browser to recognize and evaluate an HTTPS certificate, it must be verified by a trusted certificate authority (CA). There are a limited amount of CAs who are entrusted to distribute HTTPS certificates. Through public-key cryptography, a fairly complex but interesting topic, through inherent trust in the CA who has provided the HTTPS certificate for a given site, the browser can verify any site visitor is positively communicating with the expected entity with no way of anyone else posing as that entity. No such verification is possible over HTTP and it’s fairly simple to imagine what identify theft would be possible if you were communicating with a different website than you appeared to be. In the event any of the major browsers cannot validate the expected certificate, they will show a strong, usually red warning that you may not be communicating with the expected website, and strongly encourage you to reconsider interacting at all.

Chrome misconfigured HTTPS

Therefore, the authentication gives your users the confidence you are who you say you are, which is important when you’re engaging with them in any way whether they’re providing an email, credit card or simply reading articles.

How data integrity helps you

Ensuring perfect preservation of communication over the internet is another guarantee HTTPS provides. When a user communicates with a website over HTTPS, the browser takes the input of that communication and using a one-way hashing function creates a unique “message digest”: a concise, alphanumeric string. The digest may only be reliably recreated by running the exact same input through the same hash algorithm irrespective of where and when this is done. For each request the user makes to the website, the browser passes a message digest alongside it and the server then runs the input it receives from the request through the hash algorithm to verify it matches the browser-sent digest. Since it is nearly computationally impossible to reverse engineer these hash functions, if the digests match, it proves the message was not altered in transit. Again, no such data integrity preservation is possible over HTTP, and there is therefore no way to tell if a message has been altered en route to the server from the browser.

What encryption does for you

Communicating over an unencrypted HTTP connection allows for some easily exploitable security risks in the case of authentication to a site. To demonstrate how easy it can be to take over someone’s account on an HTTP connection, a tool called Firesheep was developed and openly released in mid 2010. Major social media platforms Facebook and Twitter were both susceptible to this exploit for some time after Firesheep was released. The identity theft is carried out through a means called session hijacking. With Firesheep installed, a few clicks could log you in as another user who was browsing over WiFi nearby on any HTTP website. This form of session hijacking is possible when the authentication cookies, small identifying pieces of information that live in your browser while you’re logged into a site, are transmitted to the server on each request over HTTP. Over WiFi these messages are broadcasted into the air in plain text, and can be picked up by anyone listening. HTTPS prevents this since the communication is encrypted and unintelligible to eavesdroppers.

In the example of a CMS like Drupal or any other system in which there is a login, if an administrator with elevated site permissions is logged in over HTTP, they’re subject to the same risk if that traffic is monitored or “sniffed” at any point along its path from the browser to the server. This is especially easy over WiFi but is not relegated to only WiFi. The cookies are sent to the server upon every request, regardless of whether or not the user entered their password during the active session or not. Depending on the admin’s privileges, this access can be easily escalated to complete control of the website. Encryption is a big deal.

HTTPS is required for the modern web

One of the more promising developments of the last few years, is the pervasiveness and effectiveness of Progressive Web Apps (PWAs). PWAs is the name coined for a set of technologies that provide a feature-set for mobile browsing akin to native applications, yet is entirely served through the web browser. PWAs require all communication to be done over HTTPS. Some of the possibilities with PWAs that were previously relegated to native applications only are:

  • Providing content and services based on the user’s location data
  • Providing interaction with the user’s camera and microphone within the browsing experience
  • Sending push notifications
  • Serving off-line content

If you aren’t taking advantage of any of these features that are possible through PWAs, it’s something your organization should strongly consider to further engage users. Before the ambitions to be on feature parity with native applications are fully borne-out, PWAs will continue to evolve the power of layering deeper engagement with users on top of your existing mobile experience with minimal effort. PWAs simply do not work over HTTP. HTTPS is required to open the door to their possibilities.

Barriers to HTTPS have been lifted

Historically, considering a move to HTTPS has been held back by some valid concerns for webmasters whose job it was to select where and how their websites were hosted. A few of the fundamental apprehensions could be categorized as:

  • No perceived benefit. People often assumed if they weren’t collecting financial or personal information, it wasn’t necessary. We’ve covered why holding this belief in 2018 is a misconception. Savas Labs made the move in July 2017 to serve exclusively over HTTPS for our statically-generated Jekyll website even though at the time we had no forms or logins.
  • Performance costs. We know reducing latency is crucial for optimizing conversions and HTTPS does require additional communication and computation. However, with the broad adoption of the HTTP/2 protocol over the last few years, HTTPS now usually outperforms HTTP.
  • Financial costs. HTTPS was too complex and costly to implement for some. Large strides have been made across many hosting providers who now bundle HTTPS into their hosting offerings by default, often at no additional cost. Let’s Encrypt, a relatively new and novel certificate authority, first began offering free certificates (which they still do) and then made it easy to automatically renew those certificates, helping to ease the burden and cost of implementation.

We cover each of these in more detail in part two that will help guide you on how to make the move to HTTPS.

Conclusion

To revisit Google’s announcement:

Beginning in July 2018 with the release of Chrome 68, Chrome will mark all HTTP sites as “not secure”.

Interpreting that and providing our perspective:

You’re not part of the modern web unless you’re exclusively using HTTPS.

A bold, if slightly controversial statement, but for ambitious organizations like the folks we’re fortunate enough to work with each day, HTTPS-only is the standard in mid 2018 and beyond. Given the benefits, the lifted previous barriers, and the opportunity for the future, very few organization have a good reason not to exclusively serve their sites over HTTPS.

Have we convinced you yet? Great! Read part two for some assistance on how to make the move.

Additional resources

Jun 25 2018
Jun 25
Go to the profile of Drupal Europe

Jun 25, 2018

Drupal Europe is both a technology conference and a family reunion for the Drupal community. Bringing together 1600+ attendees, it is the largest community driven Drupal event taking place on the European continent this year. For anyone connected with Drupal this is a unique opportunity to share your experience, learn, discuss, connect and contribute back to the community.

Being a community driven conference, we wanted to focus on real life case studies and not the usual technology driven structure. So we’ve introduced industry tracks which focus on specific industry sectors.

Calling all college, university, and educational Drupalers!

Photo with CCO licence via Pexels.com from StartupStockPhotos

The Higher Education track is for anyone using Drupal or thinking of migrating to Drupal at a college or university who is looking to connect with other Higher-Ed Drupal users.

If you have experience of delivering Drupal solutions in the higher education sector or are looking for inspiration on how you continue to develop your CMS further, this is the right track for you.

Be inspired

Drupal is a popular choice in higher education, and many of us are using it in creative and inventive ways. With Drupal 8, the opportunities for exploration and experimentation expand even further — from headless Drupal to top-tier configuration management. Let’s showcase our successes and best-practices with Drupal 8!

We know many universities are still on Drupal 7 and are keen to migrate to Drupal 8, so come to share what works for you and see wins from your peers.

Share your experience

Photo with CCO licence via Pexels.com from StatusStockphoto

Have you launched a Drupal 8 project recently that you are proud of? Started a campus Drupal users group and have tips for others looking to create their own? Developed a great user support model for your content editors? Conquered decoupled Drupal with your frontend stack? Share your awesome projects and lessons learned with your peers.

Target groups:

  • Education sector

Example talks:

Photo with CCO licence via Pexels.com from Pixbay
  • Drupal in a Day (how Global Training Days got to be a localized event)
  • From CMS to LMS
  • Web accessibility in higher education
  • GDPR and childrens information
  • Javascript for higher education
  • Migration from Drupal 7 to 8
  • How Drupal 8 API-first helps to 
    integrate with existing IT-Infrastructure
  • Build your own Drupal Community

Session submission is open and we ask you to submit interesting session proposals to create an awesome conference. Session proposals are not limited to Drupal and all topics in relationship with Higher Education are welcome.

Please also help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

If you want to participate in the organisation or want to recommend speakers or topics please get in touch at [email protected].

About Drupal Europe Conference

Drupal is one of the leading open source technologies empowering digital solutions around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — with a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

Jun 25 2018
Jun 25
Cybercrime is a growing problem in today's community.


In 2017 alone, we saw the record-breaking attack of the WannaCry ransomware scandal bring plenty of businesses to their knees. In fact, the spread of the ransomware across 150 countries caused many professionals in the industry to call it the biggest offensive in cybercrime history.

As the digital world continues to evolve, it brings with it countless new opportunities for success, along with various vulnerabilities that modern entrepreneurs need to be aware of. If you're launching an eCommerce company in the current marketplace, you'll need more than just a solid USP and a great marketing strategy - you'll need a CMS (content management system) solution that keeps your online presence secure.

After all, if customers don't believe that your site is secure, then they're not going to buy your products. It doesn't matter if you sell the best products or services in the world, no-one's going to risk giving their details to an unsecured store.

Drupal Commerce is one of the most trusted and secure eCommerce solutions on the web today - used by organizations across the globe. To help boost your chances of a successful eCommerce venture, we're going to explore some of the ways you can develop a more secure site with Drupal Commerce.

1. Commit to Regular Updates

Updates are key to any cyber-security strategy. When a company rolls out an update for a piece of software, they're not just giving you new features to play with, they're also delivering bug fixes and patches that can protect your system against vulnerabilities that exist within the network.

People often postpone updates because they get in the way of day-to-day tasks. However, this could mean that you're leaving entry windows open for people who want to worm their way into your files. The developers of Drupal and Drupal Commerce regularly release timely updates that fix the security issues in your CMS. You should be making sure that these updates are being applied when they become available, either by doing it yourself or by contracting a company to do them.

2. Use the Right Login and Password Security

The login page at the front of your eCommerce site acts as the door to your organization. The best way to protect your future is to fortify that door with the correct security measures. While a great password and username is a great way to get started, some statistics suggest that around 35% of users have weak passwords - and many of the remaining 65% can still be cracked.

With Drupal as your CMS, from the moment you first install the system, the passwords on your database get encrypted and "salted". This means that your password becomes almost impossible to hack. Additionally, Drupal offers a range of user-contributed modules thanks to its open-source framework, which support everything from SSL certificates to two-factor authentication.

3. Configure Your eCommerce Access Controls

When it comes to securing your eCommerce site, there's only so much any CMS can do to help you. At the end of the day, you'll need to make sure that you're making full use of the control systems that solutions like Drupal provide to give you absolute authority over the accounts that have access to your website. For instance, a blog account might have access to write content on your site, but not change the price of products.

Drupal and Drupal Commerce have a range of access controls that allow you to choose authority levels throughout your website. You can create categorized accounts for specific parts of your website, ensuring that each person gets only the permissions they need and no more. Essentially, this reduces the risk of human error as you add more people to your eCommerce team.

Demo Drupal Commerce today! View our demo site.

4. Stay Ahead of the Curve

One of the most important things you can do to protect your eCommerce site is make sure that you're always aware of the latest DDoS attacks, web issues, and attacks facing your industry. The more you know about the threats you're facing every day, the easier it will be to establish a strategy that helps you to fight back against them.

Drupal helps eCommerce site owners to stay ahead of the curve, with one of the largest communities in the world, packed full of more than 1 million strategists, developers, and designers. This kind of attention ensures that any time an issue or error in the code might be subject to a new attack, it's duly reported and dealt with.

Aside from the support of the community, Drupal users can also access the "Status Report" function on their UI, which keeps you updated on any problems with the code on the site, this is the easiest way to keep on top of your website management, and make sure you're not falling behind on security.

5. Enable the Right Security Modules

When you want to make your home more secure, you add new alarm systems, motion detectors, and even locks. On the other hand, when you want to keep your eCommerce site safe, Drupal offers modules to help you accomplish specific security measures. For instance, there's:

  • The password policy module: This allows you to establish a specific rule for passwords. You might demand that all passwords have one capital letter and special character for instance.
  • Username enumeration modules: This module ensures that hackers can't gain access to your site by constantly trying to guess usernames.
  • Automated logout: This module allows you to choose a time limit for user sessions. If someone remains inactive for too long, they'll be automatically logged out.
  • Honeypot: This module helps to eliminate spam-bots from using website forms and spamming your administrators and users.

6. Add HTTPS

Building a secure Drupal Commerce website doesn't just protect your business from attacks, it can also give you a better reputation in your chosen eCommerce industry. Adding the HTTPS certificate to your Drupal hosting set-up is a great way to deliver that peace of mind. 

HTTP Secure is what you get when you install an SSL certificate onto your website server. It ensures that cybercriminals can't intercept and tamper with the information sent back and forth between you and a customer. Aside from the obvious protection they offer, SSL certificates give you those little green padlocks next to your URL that leaves your customers feeling confident and help you to achieve a better ranking in the search engines. 

In fact, there's no reason not to include and SSL certificate now since you can do this for free through Let's Encrypt!

Secure eCommerce Starts with a Trusted CMS

In the ever-evolving world of website security, it's difficult to guarantee any company's security. One moment, it can seem as though everything is running smoothly, then the next, you're struggling to retrieve your details from a hacker. The only thing you can do is take every possible step to protect yourself from an intrusion. 

Drupal, with its security modules, password protection, and state-of-the-art open-source software has earned the trust of everyone from industry giants to government agencies. The websites of UNESCO, the White House, Fox News, and Harvard University are all built on the Drupal framework. After all, just because it's open-source doesn't mean that Drupal isn't secure. Every module contributed by a user is thoroughly reviewed by the community. Drupal also has a dedicated security team that is always leading the security initiative. 

With this safety-first approach, Drupal ensures that every eCommerce site you build has the best chance of standing strong against attackers and delighting your customers in the process. 

Contact us and learn more about our custom ecommerce solutions

Raj Jana is the CEO and founder of the JavaPresse Coffee Company. As an eCommerce entrepreneur, Raj knows a thing or two about running a secure website, and he's always looking for new ways to keep his customers safe.

Jun 22 2018
Jun 22

Happy Friday everyone! In this episode Front End Developer, Grayson Hicks, joins the show to answer some questions about Gatsby.js, an up and coming static site generator that you can use with Drupal or any other data source. Video and full transcription below. 

[embedded content]

Jun 22 2018
Jay
Jun 22

One of the many things Drupal excels at is integrating with other services. Some popular integrations are made even easier by the existence of contributed Drupal modules (such as the one for Google Analytics). But, many times, there isn't a ready-built solution, or the one that's available doesn't quite suit your needs. At Ashday, we've built many integrations between Drupal and other systems, and although every integration is different, there are some things we've learned that are good to consider when writing most any integration.

Do You Need to Build Something New?

Even if there is an existing Drupal module for the integration that you need, it's important to determine if you actually want to use it. Sometimes, integration modules are written for certain use cases, which may not line up with exactly what you need the integration to do, and could in fact make things more complicated for you than not using a pre-existing module at all.

For instance, when we created a Solr integration, we had to evaluate whether to use the existing Search API Solr module or write our own integration, and in the end, we decided to write our own. Why? Because when we were evaluating our options, we found that the module wasn't designed to index the content of our site in the particular way we needed it to, and it also didn't quite properly support the "More Like This"-style search which Solr itself is capable of. Because of this, we only had a few options.

  • We could modify our site to fit the capabilities of the module, but most of the time, as in our case, that isn't really an option.
  • We could use the module and try to adapt it to our needs. This would mean not only installing the module and figuring out how to use it, but also digging into how it was written in order to make changes to it. With some modules, such as Search API Solr, this can be a pretty big task. It's a large, complicated module, and figuring out where and how to make the necessary changes can be a challenge… and that's assuming that the module is structured in such a way that the changes are easy to make.
  • We could write an entirely custom integration.

We wound up going with the third option. "But wait," you might wonder, "If the existing module is so complicated, wouldn't writing your own integration mean needing to create all of that same stuff yourself?"

And the answer to that is no. Whereas a Drupal contrib module usually has to be designed in a rather generic way, so that it can suit as many people's disparate needs as it possibly can, an entirely custom-coded integration can focus solely on the functionality that is needed for your particular use case. Just because the system you're integrating with supports something, doesn't mean you necessarily have to. With the Solr integration in particular, building exactly what we needed as a custom integration wound up being much faster and more maintainable than it probably would have been to take the existing module and modify it to suit our needs.

How Much Drupal Should You Use?

Depending on what sort of integration you're writing, one thing to consider is how much it should rely on Drupal. Drupal includes numerous powerful tools, such as its service architecture and Form API, which can be leveraged to make your integration more flexible, and even save time in the process. At the same time, tying your integration to Drupal makes it less portable. For instance, if you were creating an integration which would display content from a remote system on several different websites, and only some of those sites actually use Drupal, then it may be worth creating the integration mostly using regular ol' PHP. By creating the integration as a set of classes or functions that don't depend on Drupal, each site can then use those same functions, and add just the few things that are needed to make them work well on that site; for instance, a Drupal site may need routes and permissions set up "the Drupal way" separate from the reusable part of the integration.

Creating a more generic integration in this way can also make it more compatible between different versions of Drupal. If your main integration doesn't rely on Drupal, it will work on Drupal 7, 8, 9, and even more, with only the minimal code to make it actually work on each site needing to be changed between them.

Another example: Say you're integrating with an analytics tool. You could either create a complex configuration form that fits into the Drupal administration interface and uses Drupal's form API, config system, and permissions, or you could just hardcode the specific settings you need somewhere in your codebase. The former way is the more "Drupal" way of doing it and is more configurable (this is the approach taken by the Google Analytics module), but the latter method can be very fast to code, and if you only rarely need to change anything about your configuration, it can be a great time savings over creating a complex Drupal-specific integration module.

Can This Be Contributed?

If your integration ultimately does make use of Drupal's helpful built-in features, great! Now it's time to ask "Can I contribute this module so that other other people can use it on their own Drupal sites?" If you are integrating with some tool or remote system that other people might also want to integrate with in a similar fashion, then the answer should probably be yes.

Contributing your custom integration module to Drupal.org can have a number of benefits—not the least of which is that it is an excellent way to give back to the Drupal community as a way to say "thank you" for all they've done to make Drupal possible. But there's another benefit as well: If you contribute a custom integration module, that means that other developers may start using it, looking at the code, and making improvements to it. Maybe your integration is fairly small, and only accounts for the handful of use cases that you need. The next person who uses the module thinks that something could be added or changed to improve the module. Suddenly, you have other people making suggestions or even writing code for you, which you can then benefit from by including such changes in the integration you're already using.

This is what we did with our HelloSign module for creating eSignature requests; we built it for one site which needed such functionality, then we contributed it. Once we did so, other developers started looking at the module and helping us to make all sorts of improvements to the module, and some even submitted patches to help improve the module. We also got free t-shirts out of it, so hey, who knows what might happen when you contribute!

Conclusion

There are many things to think about when you're building a Drupal integration, and although I've only written about three of them today, I think they are the guiding questions which help to determine how your integration is built. If you can answer all three of these questions before getting too far into writing your integration, you're much more likely to end up with a system in place that will serve you well long-term, even if the exact requirements for the integration eventually changes—which, in my experience, they almost certainly well.

If you need to integrate Drupal with anything, talk to us! We can integrate just about anything with Drupal

Jun 22 2018
Jun 22
Go to the profile of Drupal Europe

Jun 22, 2018

The e-commerce industry continues to grow rapidly year over year, bringing more merchants online and driving larger profits. With that growth comes the increased need for rich content, innovative product merchandising, and integration into an ever increasing number of third party sales, marketing, and fulfillment tools. Drupal has always excelled as a platform for building unique customer experiences, and it continues to come into its own as an adaptive sales platform via projects like Drupal Commerce.

Photo by Mike Petrucci on Unsplash

This track includes content that helps merchants understand how to start and grow their online businesses, demonstrates to developers how to build ambitious e-commerce sites, and incorporates solution providers who improve the whole process via integrations.

In the e-commerce track you will learn how to start to sell online, how to grow your existing business and reach a wider audience, and the best tools to use for developing your platform.

The track is focused on the following topics:

  • Drupal vs other e-commerce solutions: comparison, the cost of entry and scale
  • What competitive advantages does Drupal bring to online merchants?
  • What are the benefits of Drupal-native eCommerce solutions vs. integrating external systems?
  • Case studies for unique or ambitious implementations of Drupal for e-commerce
  • Latest trends in eCommerce (e.g. payment, fulfillment, security, taxes, etc.)
  • Latest trends in building eCommerce websites (e.g. headless, multichannel, AI, etc.)

About industry tracks

As you’ve probably read in one of our previous blog posts, industry verticals are a new concept being introduced at Drupal Europe and replace the summits, which typically took place on Monday. At Drupal Europe these industry verticals are integrated with the rest of the conference — same location, same ticket and provide more opportunities to learn and exchange within the industry verticals throughout three days.

Now is the perfect time to buy your ticket for Drupal Europe. Session submission is only open for a few more days so please submit your sessions and if encourage others who have great ideas.

Please help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

To recommend speakers or topics please get in touch at [email protected].

About the Drupal Europe Conference

Drupal is one of the leading open source technologies empowering digital solutions in the government space around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — which has a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

Jun 21 2018
Jun 21

Drupal is built on PHP so any developer working with Drupal needs some PHP knowledge. PHP memory management is something that can initially be a difficult concept to grasp.

In this Acro Media Tech Talk video, Rob Thornton covers PHP arrays and how they use memory. He goes over various examples, helping to shed some light on how to use arrays effectively. Along the way, Rob discusses passing arrays by value vs. by reference and shares some tips about each.

If you find this video helpful, you may also be interested in these related topics:

Contact us and learn more about our custom ecommerce solutions

Jun 20 2018
Jun 20
Jeff Geerling @flickr

With Drupal 8 core now in full swing and the contrib space rapidly maturing, it is an excellent time to get more deeply involved with one of the world’s largest open-source development communities. The Drupal + Technology track is focused on educating developers on the latest techniques and tools for increasing the quality and efficiency of their projects.

The Drupal + Technology track is the place for Drupal experts actively working on and contributing to Drupal to share their knowledge and help attendees to grow their Drupal skills.

We expect deeply technical sessions that inspire developers to see what is possible with Drupal. We welcome sessions sharing knowledge about integrating Drupal with bleeding-edge technologies (blockchain, IoT, decoupled frontend, etc) to empower the audience to create amazing digital experiences.

This year, the Drupal Europe program is designed around the idea of industry verticals with sessions and workshops based on specific industries. We expect a huge amount of session submissions in the Drupal + Technology track and would kindly advise you to look if an industry track could be more appropriate for your talk to have a better chance of being accepted.

Be ready to sharpen your skills and connect with other tech-minded folks. Convince your boss to invest in your skills, and get you a regular Drupal Europe ticket before they increase in price on 12th of August.

There will also be plenty of contribution opportunities during the event. All expertises and energy levels are equally invited!

Susanne Coates @flickr

Location & Dates

The deadline for the call for papers is 30th of June. Share your skills and empower other developers at the Drupal + Technology track. Submit your session now!

About Drupal Europe 2018

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — with a 15 min direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 and will bring over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Jun 19 2018
Jun 19
Amazee labs @flickr

Drupal Europe brings a unique opportunity to connect, share and learn from the Drupal community and to talk about what holds us together. We grew to be the biggest open source community under the tagline “Come for the code and stay for the community” which we strive to uphold.

Join us on September 10–14, 2018 in Darmstadt, Germany to discuss and learn about growing and strengthening communities and the challenges that come with that.

Drupal has been a historic example of how Open Source communities can thrive and to maintain this leading position we need to learn from each other, include others and inspire everybody to be an active contributor. This might bring its challenges from time to time, so please come and share your stories, expertise and lessons learned with us. This is the only way to keep our community strong, diverse and open minded.

Who should attend?

You! This vertical topic will be the meeting place for everyone in Drupal and other communities.

Whether you want to organise events, you’re new to the community and want to know where you can get involved, or you want to share a success story from your community, you are welcome.

Target groups:

  • Members of the Drupal community
  • Other open source communities
  • Organisations and those interested in how communities work and prosper

Example talks:

  • Being Human
  • Challenges of contribution
  • Community help
  • Community retention
  • Growing leaders & influencers (by empowering, enabling and adding trust)
  • Growing the Drupal Community
  • Improving diversity
  • Mentorship, sponsorship and allies
  • Organizing events
  • Succession planning for organizers and leaders

As you’ve probably read in one of our previous blog posts, industry verticals are a new concept being introduced at Drupal Europe and replace the summits, which typically took place on Monday. At Drupal Europe. These industry verticals are integrated with the rest of the conference — same location, same ticket and provide more opportunities to learn and exchange within the industry verticals throughout three days.

Industry vertical icons by @sixeleven

Now is the perfect time to buy your ticket for Drupal Europe. Session submission is already open so please submit your sessions and encourage others who have great ideas.

Please help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

To recommend speakers or topics please get in touch at [email protected].

About Drupal Europe Conference

Drupal is one of the leading open source technologies empowering thousands of digital solutions around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — which has a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

Jun 19 2018
Jun 19

Omnichannel generally means the shopping experience is unified and seamless whether you do it on your laptop, in store, through your phone, etc. The team at Acro Media set out to demonstrate just how easy it is to give your customers a true omnichannel experience using Drupal and Drupal Commerce.

The omnichannel setup

As part of our demo at DrupalCon in Nashville, we did a pseudo T-shirt pre-order. Before the conference, attendees could use our Urban Hipster eCommerce demo site to pre-order a Drupal Commerce shirt in their size. When they completed their pre-order, they got an order number to bring with them to our booth. 

Check Out Our High Five Drupal Web SeriesPeople who didn't pre-order could also come to our booth and "purchase" (for free) a T-shirt using a self serve kiosk running the same demo site. 

So one side of the booth was the set up as the cashier/fulfillment area. The other side had the self-serve kiosk. We also had other laptops available so that we could bring up the admin interface as if we were a customer support person assisting a customer over the phone. The "support person" could find the customers order number or email address and fulfill the order. Easy peasy.

The whole time, our inventory of shirt sizes was counting down until the stock count hit 0. When our inventory reached 0 for a certain size, orders for that size could no longer be placed.

Why is this so amazing?

Some people were impressed but also a little puzzled, thinking that this sort of setup should just exist everywhere. Which it should, but it doesn't. With most retail stores, the online and in-store experiences are completely separate. They might as well be two different companies. If you buy something online and try to return it in store, it often can't happen. Loyalty points often don't transfer. The list goes on. Some places will let you buy online and pick up in store, but there might be a delay. They might say sure, you can pick it up in store, but not for 24 hours. In that case, you might as well just go to the store and find it yourself. Even knowing if an item is in stock can be tricky. The website might say there are three left, but that's just a snapshot from a certain point in time, and you don't know how often that gets updated. Maybe that was valid six hours ago, but that item has since sold out.

Why Drupal rocks

What makes Drupal so cool is that the point of sale and the Commerce module both use the same orders. A point of sale order is just a Drupal Commerce order. It has some specifics to the point of sale, but it can be loaded up in a regular interface. They use the same stock, the same products, everything. This is surprisingly rare. A lot of POS systems in particular are very antiquated. They date from pre-Internet times and have no concept of syncing up with things.

But we've created a true omnichannel experience. We've done it, and implemented it, and it's all open source and freely available. Anyone else could set up the same omnichannel setup that we did. We used a laptop, a cash drawer, a couple of iPads, nothing too fancy.

What's more, as the software matures, we're working on an even better demo with more smoothed out features, better integration, nicer interface, etc. Stay tuned.

Demo Drupal Commerce today! View our demo site.

More from Acro Media

Let's talk omnichannel!

We're always happy to help you understand how you can deliver a true omnichannel experience for you customers. Contact us today to talk to one of our business development experts.

Contact Us

Jun 18 2018
Jun 18
June 18th, 2018

Last month, Ithaca College introduced the first version of what will represent the biggest change to the college’s website technology, design, content, and structure in more than a decade—a redesigned and rebuilt site that’s more visually appealing and easier to use.

Over the past year, the college and its partners Four Kitchens and design firm Beyond have been hard at work within a Team Augmentation capacity to support the front-to-back overhaul of Ithaca.edu to better serve the educational and community goals of Ithaca’s students, faculty, and staff. The results of the team’s efforts can be viewed at https://www.ithaca.edu.  

Founded in 1892, Ithaca College is a residential college dedicated to building knowledge and confidence through a continuous cycle of theory, practice, and performance. Home to some 6,500 students, the college offers more than 100 degree programs in its schools of Business, Communications, Humanities and Sciences, Health Sciences and Human Performance, and Music.

Students, faculty, and staff at Ithaca College create an active, inclusive community anchored in a keen desire to make a difference in the local community and the broader world. The college is consistently ranked as one of the nation’s top producers of Fulbright scholars, one of the most LGBTQ+ friendly schools in the country, and one of the top 10 colleges in the Northeast.

We emphasized applying automation and continuous integration to focus the team on the efficient development of creative and easy to test solutions.

On the backend, the team—including members of Ithaca’s dev org working alongside Four Kitchens—built a Drupal 8 site. The transition to Drupal 8 keeps the focus on moving the college to current technology for sustainable success. Four Kitchens emphasized applying automation and continuous integration to focus the team on the efficient development of creative and easy to test solutions. To achieve that, the team set up automation in Circle CI 2.0 as middleware between the GitHub repository and hosting in PantheonGitHub was used throughout the project to implement, automate, and optimize visual regression, advanced communication between systems and a solid workflow using throughout the project to ensure fast and effective release cycles. Learn from the experiences obtained from implementing the automation pipeline in the following posts:

The frontend focused heavily on the Atomic Design approach. The frontend team utilized Emulsify and Pattern Lab to facilitate pattern component-based design and architecture. This again fostered long-term ease of use and success for Ithaca College.

The team worked magic with content migration. Using the brainchild of Web Chef, David Diers, the team devised a plan to migrate of portions of the site one by one. Subsites corresponding to schools or departments were moved from the legacy CMS to special Pantheon multidevs that were built off the live environment. Content managers then performed a moderated adaptation and curation process to ensure legacy content adhered to the new content model. A separate migration process then imported the content from the holding environment into the live site. This process allowed Ithaca College’s many content managers to thoroughly vet the content that would live on the new site and gave them a clear path to completion. Learn more about migrating using Paragraphs here: Migrating Paragraphs in Drupal 8

Steady scrum rhythm, staying agile, and consistently improving along the way.

In addition to the stellar dev work, a large contributor to the project’s success was establishing a steady scrum rhythm, staying agile, and consistently improving along the way. Each individual and unit solidified into a team through daily 15-minute standups, weekly backlog grooming meetings, weekly ‘Developer Showcase Friday’ meetings, regular sprint planning meetings, and biweekly retrospective meetings. This has been such a shining success the internal Ithaca team plans to carry forward this rhythm even after the Web Chefs’ engagement is complete.     

Engineering and Development Specifics

  • Drupal 8 site hosted on Pantheon Elite, with the canonical source of code being GitHub and CircleCI 2.0 as Continuous Integration and Delivery platform
  • Hierarchical and decoupled architecture based mainly on the use of group entities (Group module) and entity references that allowed the creation of subsite-like internal spaces.
  • Selective use of configuration files through the utilization of custom and contrib solutions like Config Split and Config Ignore modules, to create different database projections of a shared codebase.
  • Migration process based on 2 migration groups with an intermediate holding environment for content moderation.
  • Additional migration groups support the indexing of not-yet-migrated, raw legacy content for Solr search, and the events thread, brought through our Localist integration.
  • Living style guide for site editors by integrating twig components with Drupal templates
  • Automated Visual Regression
Aerial view of the Ithaca College campus from the Ithaca College homepage. From the Ithaca College Homepage.

A well-deserved round of kudos goes to the team. As a Team Augmentation project, the success of this project was made possible by the dedicated work and commitment to excellence from the Ithaca College project team. The leadership provided by Dave Cameron as Ithaca Product Manager, Eric Woods as Ithaca Technical Lead and Architect, and John White as Ithaca Dev for all things legacy system related was crucial in the project’s success. Ithaca College’s Katherine Malcuria, Senior Digital User Interface Designer,  led the creation of design elements for the website. 

Katherine Malcuria, Senior Digital User Interface Designer, works on design elements of the Ithaca.edu website

Ithaca Dev Michael Sprague, Web Chef David Diers, Architect,  as well as former Web Chef Chris Ruppel, Frontend Engineer, also stepped in for various periods of time on the project.  At the tail end of the project Web Chef, Brian Lewis, introduced a new baby Web Chef to the world, therefore the amazing Randy Oest, Senior Designer and Frontend Engineer, stepped in to assist in pushing this to the finish line from a front-end dev perspective. James Todd, Engineer, pitched in as ‘jack of all trades’ connoisseur helping out where needed.

The Four Kitchens Team Augmentation team for the Ithaca College project was led by Brandy Jackson, Technical Project Manager, playing the roles of project manager, scrum master, and product owner interchangeably as needed. Joel Travieso, Senior Drupal Engineer, was the technical lead, backend developer, and technical architect. Brian Lewis, Frontend Engineer, meticulously worked magic in implementing intricate design elements that were provided by the Ithaca College design team, as well a 3rd party design firm, Beyond, at different parts of the project.

A final round of kudos goes out to the larger Ithaca project team, from content, to devOps, to quality assurance, there are too many to name. A successful project would not have been possible without their collective efforts as well.

The success of the Ithaca College Website is a great example of excellent team unity and collaboration across multiple avenues. These coordinated efforts are a true example of the phrase “teamwork makes the dream work.” Congratulations to all for a job well done!

Special thanks to Brandy Jackson for her contribution to this launch announcement. 

Four Kitchens

The place to read all about Four Kitchens news, announcements, sports, and weather.

Jun 15 2018
Jun 15

As you may or may not have noticed, we’re having a lot of fun over here at Ashday building Drupal sites with React. Check out our own site, for example. We are really digging this new direction for front-end and you can learn more about why we did it how we approached it in other articles, but here we are going to talk about how we approached the Drupal editorial experience, because honestly - we just didn’t find a lot of great resources out there discussing how this might be done well in a decoupled experience.

Something about Gift-Horses

While we can’t speak with authority on the potential detriment of literally looking gift-horses in the mouth, we can speak to the idea that we should be grateful for what we’ve been given, and Drupal has given us a lot! If you were in this industry when most of us built everything from scratch, you’ll know that it’s a crazy pile of work to do the most basic things and nothing is taken for granted. Need a login form? Sure thing. Oh, now you need flood control? Um, ok. Captcha? Boy. Password reset? Ugh. Ok, I need a week just to get user authentication in place.

Drupal does so much out of the box and we aren’t about to throw it all away so we can call ourselves fully decoupled, which is the idea that Drupal isn’t providing any of the front-end at all. It’s worth noting that some are pursuing the concept of “Progressively Decoupled,” where only select components of the front-end site are managed with React, but we don’t prefer that approach in most cases because we don’t want the overhead of taking on traditional Drupal theming and a React build out, yet with less obvious design constraints, potentially extra hosting, multiple development workflows, duplicated styles, etc - leaving us short of many of the benefits of going decoupled at all.

We prefer to an approach that we’ve, for the moment, dubbed “Deliberately Decoupled.”

Deliberately Decoupled

What we mean by “Deliberately Decoupled” is that we aren’t decoupling purists, who see ourselves just as much evangelists of a particular approach as we are just software engineers, and we also aren’t operating by a FOMO (fear of missing out), where anxiety about not being on a bandwagon drives our decisions. We prefer to leverage what we think is beneficial for our clients and the site, and secondarily abide by our preferences. A good example is the Open Source philosophy. We love open source! But we aren’t for a minute going to bypass a proprietary library that does something really cool just because it’s not open source. It’s the same with decoupling. We want what gives us good bang for the buck - either in the deliverable, or the cost, or the UX, or whatever else is impactful - and it helps far more than it hurts. So, for the largely public facing ends of our sites, we hands-down love what React is giving us and rarely find Drupal’s out of the box front-end solution to be easier or more flexible. On the back-end? For the editorial and admin experience, we really have no interest in trying to replace everything Drupal provides unless there is a major overarching requirement or clear benefit that can justify hundreds or thousands of hours of additional work. There are some projects that do merit it, such as when you have highly dynamic and interactive forms, but if that’s not the case Drupal can do the job on its own.

Considering Outsourcing? Consider Ashday!  Request your free consultation today. 

One prime example of leveraging cool stuff in Drupal is the use of Paragraphs for content. If you haven’t heard of Paragraphs, you really must check it out. It’s been our favorite way to give editors the ability to create interesting and dynamic content creation without the cringe-worthy experience of complex WYSIWYG and HTML source editing, especially when it comes to the mobile experience. Nearly all of the Ashday.com pages are built with paragraphs, so that means an editor can do parallax, add related content boxes, throw in some CTAs, etc. Pretty cool! And as you’ll see later, we leverage React for our pages, but Drupal’s admin for editing the paragraphs and it creates a clean and intuitive editorial experience.

So does all this mean for editing we just hand over Drupal Admin accounts to our users so they can swim through the Sea Nettle-like admin experience say good luck? Hardly. Let’s get into the nitty gritty.

Our Philosophy - Less is More

Generally speaking, Drupal doesn’t matter much to the user. Of course Drupal matters, but not really to the end user just trying to do their editorial work. Not as far as they are aware. And they shouldn’t have to be “aware”. Do you remember when you first looked into Drupal? Do you remember how weird the world was as you learned that a “node” is “content”, but then so is a “block” (kinda), and a “view” is a query but maybe with a page attached, or a “taxonomy” is hierarchical data, but with display pages? All frameworks have to be abstracted sufficiently, which means making up generic terms and concepts that only make sense when you’ve spent time with them. Well, guess what? Most users would really rather not just learn all of those concepts and instead just easily write content and update their site. The key to that is to reduce, simplify and obfuscate.

Drupal’s admin is very friendly to developers, but unnecessarily verbose when it comes to editors. They don’t need half the contextual menus, vertical tabs, sidebars, etc most of the time. And the stuff they do need should be stripped down to the obvious and helpful. So let’s hide tons of help text on a WYSIWYG with multiple text format options and use Paragraphs + a simple WYSIWYG instead. Let’s rename any buttons or links that have the word “node” in them because really, who cares if it’s a node? Let’s put our field labels inline to save vertical space and use something like Field Group to organize them cleanly. And let’s take away that rats’ nest default Drupal menu and create an alternative that just gives them what they care about. Here is an example of what we’re talking about.

From this…

Example of Drupal admin showing contextual menus, vertical tabs, and sidebars.

To this. 

Example of streamlined Drupal Menu. 

In addition, let’s take the coolness of contextual admin, like Drupal provides, and make it more intuitive as well. If you hover over a block you can edit it or configure it. If you’re on a node page, you get view and edit links in the tab bar. And you can even sometimes use the new inline editing features in Drupal 8. The problem, though, is that once again the user has to understand what each of these elements are and why they’re all different in terms of the triggering UX. We are having a lot of fun in React finding more consistent and creative ways to manage content without understanding it.

So here’s a rudimentary example using Ashday.com.

Example of Drupal contextual admin, showing node page.

You see some sorting icons and some edit icons. That’s it. Technically, those sortable sections are paragraphs, which - thanks to React - can be sorted inline - but are also editable individually apart from the others. The “Free Consultation” button in the header is a React button tied to a few settings stored in some custom Drupal configuration in the back-end. Further, that edit icon in the page title area can be used to edit the entire page at once so you can change the page title and things like meta tags, although the next step is to probably provide more direct access to edit those things so that you don’t have to know what all is buried in a node form. So the goal here is for the user to have just some basic concepts to think about, like edit and sort, instead of Edit Node vs Configure Block vs Edit Block vs Sort Paragraph vs Some Other Drupal Configuration Buried Deep In the Admin or Form.

And by the way, here’s what happens when you click the edit link on the header button, vs the first paragraph. 

 

Edit link on header button

Intuitive Drupal 8 admin

  

Edit link on first paragraph

Screen shot of admin interface for Drupal page built with React.

 

So despite varied back-end architectural implementations, the user has a very similar experience contextually editing something. A simple page mask + offcanvas + clean form. Its cool stuff, all made easier with the ability to re-use display elements in React all while still getting a ton out of Drupal’s back-end for content management and forms. Simple, kinda easy, and totally user friendly.

Looking to use react for your next digital project? Find out how Ashday can use React to make your project a success.

Jun 14 2018
Jun 14
Empower your customers to customize products.


There is a high likelihood that the tshirt on your back or in your closet started life as someone’s idea that was being uploaded to an online tool. The idea that a person could not only buy tshirts, but design them in a tool and approve the proof before payment seems almost commonplace. Why aren’t more people talking about this? Your customers are expecting more tailored experiences when buying decorated apparel, signage and personalized promotional products from the small to medium web store fronts. Getting the “Web to Print” toolset just right on Drupal is not easy.

Here’s just a few of the expectations for ordering printed materials from the web on Drupal:

  • Drupal integration: Full integration with existing Drupal website
  • Intuitive editor experience: Drag and drop toolset, uploading of files (jpg, png, tiff, pdf, eps, ai, psd), cropping and quick fixes to pictures, lots of fonts, pop-over text formatting, white labelled branding with plenty of customizations, low resolution upload warnings, and mobile friendly web to print tool.
  • Proof and checkout workflow: Print-quality PDF proof, edit before purchase, edit after purchase, CMYK color space, super large files that need processing

Getting off the bespoke product editor island

An example of a bespoke web to print tool Acro Media built with Drupal and jQuery UI.

An example of a bespoke web to print tool Acro Media built with Drupal and jQuery UI.

Like many Drupal agencies, there’s rarely a problem we face that can’t be solved with in-house open source tools. Before we decry the problems, we are very proud of what we accomplished in the past given budget and available tools. With jQuery UI and html-to-pdf experience, we’ve built these kinds of tools before, to varying degrees of success. Every time we tackled a project like web-to-print, the struggle became very real. With minimal hours, the tools we knew and loved created a functional experience that was hard to maintain and very error prone.

Demo Drupal Commerce today! View our demo site.More often than not, we had trouble with converting HTML to PDF reliably enough for high-resolution print-quality, especially with customer supplied imagery and layout. Offering fonts in a customized product builder is challenging to get right, especially when you’re creating a PDF that has to have the font attached. The RGB colorspace doesn’t translate easily to CMYK, the most common four color process for printing. And all of our experience in software revolved around pixels, not these things called picas. In this crazy world resolution could go as high as 3200 dpi on standard printers, dimensions suddenly couldn’t be determined based on pixels.

When one of our clients that had a tool we had built with existing technologies asked for some (not all) of the features mentioned in the beginning of the article, we also wanted to solve all the technical challenges that we grappled with over a year ago. As the planning stage was coming to an end, it was clear the budget wasn’t going to support such a complicated software build.

Product Customization is not the right phrase

Example screenshot of keditor in action.

Example screenshot of keditor in action.

We started to look for product customization tools and found nada. Then we looked for web layout tools which would maybe give Drupal a better HTML editing experience, but found a disappointing lack of online web to print solutions. We did find grapejs, innovastudio, and keditor

But, almost universally, these javascript-based libraries were focused on content and not editing products that would be printed. We needed something that had the goal of creating a printable image or PDF with a tight integration around the editor experience. We had nearly convinced ourselves there wasn’t a vertical for this concept, it seemed like nearly all product builders in the wild were powered by one-off conglomerations of toolsets.

Web to Print using Customer’s Canvas works with Drupal, right?

Finally, via a project manager, an industry phrase was discovered that opened the floodgates: web to print. After a bit of sifting through the sales pitch of all the technologies, almost all tools were found to be cumbersome and hard to integrate in an existing Drupal website, save one. Customer’s Canvas checked all the boxes and then some:

  • SAAS (so we don’t have to host customer’s images, or maintain the technology)
  • White label
  • More than fully featured
  • Completely customizable
  • Iframe-friendly. Meaning we could seamlessly plop the product customization tool into an existing or new layout.

Example of Customers Canvas running in Drupal Commerce.

Example of Customers Canvas running in Drupal Commerce.

To make an even longer story short, we jumped on board with Customer’s Canvas and built the first (to our knowledge) third party web to print Drupal 7 module. We might make a Tech Talk regarding the installation and feature set of the module. Until then, here’s what you can do:

  1. Download and install the module
  2. Provide some API credentials in the form of a javascript link
  3. Turn on the Drupal Commerce integration
  4. Provide some JSON configuration for a product via a field that gets added to your choice of product types.
  5. Click on Add to Cart for a Customer’s Canvas product
  6. Get redirected to a beautiful tool
  7. Click “Finish” and directed to a cart that can redirect you back to edit or download your product.
  8. As a store administrator, you can also edit the product from the order view page.

web-to-print_customers_canvas_drupal_cart

Drupal 8 and Web to Print and the Future

Currently, the module is built for Drupal 7. Upgrading to Drupal 8 Commerce 2 is definitely on our roadmap and should be a straightforward upgrade. Other things on the roadmap:

  • Better B2B features
    You can imagine a company needs signs for all of it’s franchisee partners and would want the ability to create stores of customizable signage. With Commerce on Drupal 8, that would be pretty straightforward to build.
  • More download options
    Customer’s Canvas supports lower res watermarked downloads for the customers as well as the high res PDF downloads. Currently the module displays the high resolution for all parties.
  • Better administrative interface
    If you’re using Drupal 7, the integration for this module is pretty easy, but the technical experience required for creating the JSON formatting for each product is pretty cumbersome. So it would be awesome (and very possible) to build out the most common customizations in an administration interface so you wouldn’t have to manage the JSON formatting for most situations.
  • Improve the architecture
    Possibly support Customer’s Canvas templates like entities that are referenced so that you could create a dozen or so customizable experiences and then link them up to thousands of products.
  • Webform support
    The base module assumes your experience at least starts with an entity that has fields and gets rendered. We could build a webform integration that would allow the webform to have a customer’s canvas build step. T-shirt design content anyone?

Integration can be a game changer

One of the big reasons we work with Drupal and Drupal Commerce is that anything with an API can be integrated. This opens the doors to allow the platform to do so much more than any other platform out there. If an integration needs to be made, we can do. If you need an integration made, talk to us! We're happy to help.

Contact Acro Media Today!

Contact us and learn more about our custom ecommerce solutions

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
Jun 08 2018
Jun 08

Ashday Interactive Systems logo and React logo

Decoupled Deschmupled

Like many folks in the Drupal space we've been closely following the Decoupled Drupal conversation for the past few years, and occasionally a part of it.  And, again like many folks in the Drupal space, until recently we had felt that it was somewhat in its infancy and a lot of tough questions still remained as to whether it was even a good idea. The SEO implications have not been entirely clear, the impact on estimation has also been very hard to nail down, which decoupled framework to go with has not at all been a consensus, and what Drupal’s exact role is in the decoupled site has not been clear either. 

Choosing a JavaScript Framework: React vs Angular vs Ember

So like Stryder shuffling through the grass and reading the signs of what had happened to two of his favorite hobbits, we started to sense in the past year that maybe Decoupled Drupal was becoming suddenly not an odd-ball proposal but possibly a truly beneficial solution with a backbone. A key component for us? React. Heard of it? Probably. It’s been around for a few years now. The critical difference for us with this was momentum. After all, if you want to train up your staff on a whole new technology you better be certain it’s not dead in 12 months.

Let’s take a look at some Google Trends.

This is the last two quarters of 2017 Google Trends for the terms Angular, React and Ember, which were the three most talked about decoupled js libraries/frameworks at DrupalCon Baltimore last year.

Graph showing interest in Angular, React, and Ember in 2018.(blue = Angular, red = React, orange=Ember)

Result? Angular is solidly in first, React is reasonably behind in second, and Ember is a distant third. Hard to know where things are headed exactly, and coupling that with the fact that the theme in Baltimore was that Angular has the most attention, but people seemed divided about whether it was the long-term solution because React and Ember (and others) were growing trends. 3 distinct trending choices? Not sure which is best? And many were unsure this was even a good move, as were we. Better hold off a bit.

Now let’s look at the trends for 2018.

Google Trends graph demonstrating increased interest in React in 2018. (blue = Angular, red = React, orange=Ember)

Notice a difference? Look at that little red bar now. That’s React. So even though just a year ago Angular held a reasonably strong lead, it definitely held true that some newer frameworks were gaining momentum, and React has already caught up with Angular. And further, Ember has fallen further behind. When you factor in how much of Google searching is people looking for support for something they’ve already built, which heavily favors the 5-years older Angular, that makes the React climb even more impressive. Does it mean Angular is dead? Far from it. But React is exploding.

Then there’s this: https://dri.es/drupal-looking-to-adopt-react. Yep, those chiefly interested in and responsible for Drupal are favoring React as well. Further, the general feel on the interwebs was that across all web technologies, decoupling was growing as a plausible solution in leaps and bounds. Great ideas were being kicked around about specific solutions to the hard decoupling problems. And above all, we’ve been looking for an excuse to give it a whirl. Well that just about solves it. If we’re going taking the plunge on this decoupling adventure, let’s just roll up our sleeves, install React, aggregate and distill our two years of thoughts on the matter, and cannonball into the deep end of Decoupled Drupal.

Brainstorm your next development project with  an Ashday expert!  Request your free session today. 

React and SEO

When you decide to decouple - even if you’ve already picked a js foundation to build it on - you quickly realize that the solutions are as varied and complex as they are on the back-end of sites. If you’re going with React like we did, then that fortunately becomes much simpler still requires a lot of investigation, learning, experimenting and decision making. In order to not be plagued with decision paralysis, we decided our top priority was ensuring that none of what we were about to do was going to hurt our SEO. The flare and flash could come later. This was probably the one real deal-breaker for us in this endeavor.

SEO these days is rather complex and somewhat arbitrary, but there are some easy-to-overlook SEO principles when it comes to page rendering that must be addressed in a decoupled architecture. No one wants to tweak the heck out of their site and push on content editors to make sure everything is SEO friendly only to implement an architecture that keeps people from finding you. While a bit oversimplified, let’s look at three key principles that are to be followed when delivering page content if you don’t want to be punished.

  1. The content needs to be delivered to search engines and users even without JavaScript.
  2. The content needs to be delivered to search engines that do run JavaScript (i.e., Google), but won’t wait for asynchronous APIs to load.
  3. The content delivered to search engines needs to match closely what site visitors receive so that we don’t get punished for cloaking.

There are a few approaches to this problem. And while “I quit” was certainly on the table for us, we pushed through and are glad we did. So let’s take a look at our more courageous options.

Client-side Rendering

This is effectively the coolest part of React, but you have to be careful of the implications, especially when content is dynamic. So for example, you can load your whole front end “shell” in React nearly instantly and then let things like dynamic header menus, page content, footer content, etc all load asynchronously as soon as it’s available. This creates some neat opportunities to improve user experience. The problem is the SEO implications. As stated above, you really can’t do asynchronous rendering and have it delivered that way to search engines, so now you’ve got a problem. For us, this meant choosing to use client-side rendering approaches where it benefitted actual user interaction and leave the rest to the server.

Pre-rendering

In this approach, your site is rendered statically on a Node.js server somewhere and the pages are served to the end user with no JavaScript required for initial page load. This leads to blazing fast pages as it’s just raw HTML/CSS/JS and no API calls on the fly, but it also leads to some significant downsides depending on your requirements. For example, in pre-rendering you are caching entire pages so if you have thousands of them, perhaps with varied caching control on various pieces of the pages to optimize performance, you now have a very heavy pre-rendering load. This means the task of updating your pre-rendered pages whenever any element of that page might change can become substantial and also complicate your CMS. For us, this wasn’t an option because even in building Ashday.com, we wanted to work with an approach that we felt could be adapted to our biggest clients.

Server-side Rendering

This is ultimately where we landed for ashday.com and we’ve been quite happy with it (so far). With server-side rendering, your pages are still “live”, but they are generated on the Node.js server when requested so that search engines and users get the same experience. It also allows us to handle the caching of various API calls separately so that we can get great performance. It’s not going to be quite as fast as pre-rendered, but then again we also don’t have to tackle the complex task of figuring out how any element of the site might affect a rendered page and be sure to appropriately - and in timely fashion - re-render all of those pages. So on a site with 50,000 articles, a change to a menu link in the header would mean re-rendering every page when using pre-rendering, but with server-side rendering, it just means a cache reset on a single API call to get menu links. It’s a fair trade off, we think.

So with all of that, we decided to build a React app using Next.js. It’s not all that different from straight React, but it offers a few bells and whistles, notably the added synchronous getInitialProps lifecycle method, that make server-side ren

dering a snap. Other approaches, such as using the default Facebook React app, seem much more suited for static non-API-based websites because you really end up needing to implement your own server-side solution where you separate your server configuration from your client configuration. Given that there are already so many new problems to solve and new concepts to learn, we settled on Next.js for now so that we could move forward and get our hands dirty without killing our Google juice.

As a side note: We’re pretty stubborn about wanting the best experience here though so we’re actually hoping that either the upcoming version of Next.js that includes React Router or else another evolving React-based solution will make it much easier out-of-the-box to build a React-solution that both renders server-side for initial page loads and lets the client run the show after that. As of yet, it’s a bumpy road to get there with existing tech and you have to evaluate the cost and overhead of trying to make that work.

Looking to use react for your next digital project? Find out how Ashday can use React to make your project a success.

Jun 08 2018
Jun 08

Background

I am the sysadmin and developer for Art & Object, a Drupal 8 website built with the Drupal Composer project. The version pin in composer for Drupal was 8, which in hindsight was too broad for our usage. Meaning Drupal point releases (8.3 to 8.4) require study to ensure you understand all the implications, which wasn't something I did. I just blindly did a composer update, thinking everything would be handled automatically.

This really bit me when 8.4 came out because my server was running Debian Jessie, which runs PHP 5.6 and my composer didn't have a platform PHP configuration, so a lot of the underlying Symfony code updated to PHP 7. So I ended up doing a backgrade until I figured it out.

Then there were the critical security Drupal updates (SA-CORE-2018-002 and SA-CORE-2018-004) earlier this year that would not be released for 8.3, so I had to upgrade (or at least, at the time, I felt I had to, though I see now they have a patch for older 8.x releases). By that time, 8.5 was released, so I updated the composer to 8.5 and ran update and after some basic testing, moved on.

Then a few months later, I noticed the status error messages about running the contrib media module alongside the core and I knew I missed something and there was a problem.

I then started down a wicked rabbit hole of getting a local copy running and following the upgrade instructions, running into problem and going back to getting a local copy running fresh again and trying again. Lots of trail and error (mostly errors) and head-banging-on-the-desk. I looked for help on the #media IRC channel, but the best advice came from posting on Stack Overflow, where @sonfd pointed out that the media module needs to be uninstalled first. I thought I had tried that and ran into an error message that mentioned you can't uninstall the media module with media items already created.

The Fix

So after lots and lots (and lots) of local refreshes and trials and errors, here's the list I finally followed when it came time to upgrade production:
  1. First, put the site in maintenance mode. Then take a database backup and make a tarball of your project directory. Don't skip over this.
  2. drush pmu media crop_media_entity: pmu = pm-uninstall. Remove the media module (and crop_media_entity, if you have that, too). This was the tip from @sonfd that opened the rest of this process for me.
  3. composer remove drupal/media: Remove the contrib media module from the filesystem. I should add that I prefixed all my composer commands with /usr/bin/php -d memory_limit=-1 /usr/local/bin/ because I often ran into memory limits when running composer.
  4. composer require drupal/inline_entity_form drupal/crop:1.x-dev drupal/media_entity_instagram:2.x-dev drupal/media_entity:2.x-dev drupal/media_entity_slideshow:2.x-dev drupal/media_entity_twitter:2.x-dev drupal/slick_media:2.x-dev drupal/media_entity_actions: These modules are temporary to help upgrade the database records.
  5. composer remove drupal/video_embed_field: For some reason, I couldn't require video_embed_field:2.x-dev, so I removed it and then...
  6. composer update: When I ran this, it updated video_embed_field to 2.x-dev.
  7. composer require drupal/media_entity_image drupal/media_entity_document drupal/image_widget_crop: More temporary modules to help the upgrade process.
  8. drush cr: Clear cache to make sure Drupal picks up new modules and paths.
  9. drush updb: Run the database updates.
  10. drush pmu entity media_entity: Uninstall these modules (these were the old contrib modules)
  11. composer remove drupal/media_entity drupal/media_entity_image drupal/media_entity_document drupal/crop drupal/image_widget_crop
    /usr/bin/php -d memory_limit=-1 /usr/local/bin/composer require drupal/crop:2.x-dev drupal/image_widget_crop drupal/empty_page:2
    : Clean out the temporary modules from the filesystem.
  12. drush cr: Clear caches
  13. drush updb: Run database updates
  14. drush cex: Export the configuration (so you can commit it later).
  15. The blazy module had an error with the core media and hasn't been updated (as of this writing), but there is a patch to fix that. So I learned how to add patches to a composer file - turned out pretty simple. Add this to composer.json in the extra section:
            "patches": {
                "drupal/blazy": {
                    "Gets Blazy to work with Drupal Core Media": "https://www.drupal.org/files/issues/2881849-8.patch"
                }
            }
  16. composer update: This was odd, but I had to do an update, which picked up the patch, but didn't really install it. I can't remember exactly now, but I believe this actually deleted the blazy folder.
  17. composer remove drupal/blazy: So removing this actually installed it. Who knew? Whatever ... it's still in my composer.json and now the filesystem has the module and the patch.
  18. drush cr: Clear caches!
  19. For some reason, this upgrade created a new field called field_media_image_1 and assigned that as the source for the image media type, which broke some of the images on the site. So I edited media.type.image.yml file to revert source_field back to my original field_image.
  20. drush cim: Import my hack to get my media image type to work.
  21. I had a custom field formatter that I had to edit to change the namespace from media_entity to media.
  22. drush cr: Final cache clear!
  23. Test and make sure all is well. If so, take the site out of maintenance mode and commit your repo changes.

Advice / Conclusion

A lot of this pain could be negated by studying the release notes better. I own that and this counts as one of my many scars of lessons learned. I hope others can learn from my lesson, too. Someone may end up writing a meta post about this post to point out the high cost of maintaining a Drupal site and I don't think they'd be wrong about that, but that's the price you pay for running servers that are publicly accessible.
Jun 07 2018
Jun 07

The situation: I'm the primary maintainer of the Commerce Point of Sale module and have been building a customer facing display feature for the Commerce 2 version. So, I have two separate pages, one is a cashier interface where a cashier enters products, the second is a customer facing screen where the customer can watch what products have been scanned, review pricing, and make sure everything is correct.

The problem: Since products can be scanned through quite quickly, it was imperative that the customer facing display update very quickly. The display needs to match what's happening in near real-time so that there is no lag. Unfortunately, AJAX is just too slow and so I needed a new solution.

The solution: WebSockets seem like a great fit.

Design

AJAX - Too slow!

WebSocket - Fast!

The socket server can either not bootstrap Drupal at all, or bootstrap it only once upon load, making it able to relay traffic very quickly.

Dependencies

I only needed one dependency for this, Ratchet, which is a PHP library for handling WebSockets and is easily installed via Composer.

Setup

The WebSocket server is actually very simple, it finds and loads up the autoload script for Drupal, similar to how Drush does it.

We bootstrap Drupal, just so we can load a few config settings.

We terminate the Drupal kernel, since we don’t need it just for ferrying traffic back and forth and it will probably leak memory or something over a long time if we use it a bunch, since Drupal isn’t really meant to run for ages. I did try it with Drupal running the whole time and it did work fine, although this wasn’t under any real load and only for a couple days.

Now all that we have to do is setup the service.

All the details of our service come from the class we pass in, which basically hooks in the different server events. I’ll leave the details of that outside of this article as none of it is Drupal specific and there are lots of tutorials on Rachet’s site: http://socketo.me/docs/hello-world

Javascript

On the JavaScript end, we connect to the WebSocket using the standard interface.

I used a few mutation observers to monitor for changes and then passed the changes to the WebSocket to relay. You could do this however you want and probably some nicely integrated JS or even a React frontend would be a lot cleaner.

Resources

Related module issue: https://www.drupal.org/project/commerce_pos/issues/2950980
Ratchet PHP Library: http://socketo.me/

Contact us and learn more about our custom ecommerce solutions

Jun 06 2018
Jun 06
Mike MadisonAbout Mike Madison

Mike Madison is an Acquia Certified Drupal Developer and a technical architect at Acquia. With over a decade of experience in web and background in HCI, he has used open source technologies such as Drupal (and Wordpress and Semantic MediaWiki) to solve challenging problems for a variety of clients and organizations around the world. He also contributes to a variety of Drupal community organizations and projects such a Drupal4Gov, as a maintainer of the Conference Organizing Distribution (COD) and Acquia's Build and Launch Tools (BLT).

Recently Mike has been working on a Digital Signage project for a mass transit agency. This project uses Drupal 8 and Amazon's Internet of Things (IOT) service to provide real time transit data to millions of riders daily.

Jun 05 2018
Jun 05

Webform allows you to create powerful forms in Drupal without the need for any custom code. You can use it for a basic contact us form with a few fields such as name, phone and email, or it can also be used to create complex multi page forms with conditional fields.

If you want to allow your editors to create their own forms without the need of a developer then install and teach them how to use the module. If you want to learn more about webform we have a two part series which will help you get started; Getting Started with Webform in Drupal 8 and Moving Forward with Webform in Drupal 8.

Collecting submissions using Webform is easy, but what if you want to integrate the module with a 3rd party SaaS provider? What if you want to push all contact form submissions into your CRM system, or add a row into a Google Sheets spreadsheet.

Of course, this can be done by a developer through the right APIs but you can also do it without writing any code using a service called Zapier.

In this tutorial, you’ll learn how to send Webform submissions into Zapier which will then add it as a row into a Google Sheets spreadsheet.

What is Zapier?

Zapier is an automation platform which lets you create workflows based on an action. For example, you could create a workflow when a user subscribes to a MailChimp list it’ll add the contact in a CRM (if supported by Zapier) or a Google Sheets spreadsheet.

It has integration with over 1000 SaaS applications and I do recommend that you have a play around with the service if you’ve never used it. They do offer a decent free plan which is more than enough to get you started.

Personally, if I’m looking at using a new SaaS application the first thing I check is if it has Zapier integration that way you can move data around and you have more flexibility.

How Does Webform Send Submissions to Zapier

Submissions are sent to Zapier using a POST request. This can be configured by adding a “Remote post” handler to a form. When a submission gets added, Webform will send it via a POST request using the URL in the “Remote post” handler.

Getting Started

For this tutorial, I’m going to assume you know how to use Webform. So all we’re going to do is download the module and install Webform and Webform UI. We’ll use the default Contact form that comes with the module.

Using Composer:

Composer require drupal/webform

Step 1: Create Zap on Zapier and Get POST URL

If you haven’t already, go ahead and create an account on Zapier. It is a paid service but has a free plan.

The first thing we’ll need to do is create the Zap where we’ll define a trigger and action.

1. Click on “Make a Zap!” in the top right.

2. In the “Choose a Trigger App” page, click on Webhooks in the “Built-in Apps” section down the page.

3. Choose “Catch Hook” and click “Save + Continue”.

4. Click Continue on the “Pick off a Child Key” page.

5. Copy the POST url because we’ll need it for Webform.

Step 2 : Set up Remote Post Handler

Using the POST url from Zapier which we got in the last section, we’ll need to create a “Remote post” handler in Webform.

1. Go to Structure, Webforms and click on Settings on a Webform. For this tutorial, I’ll use the default Contact form that comes with Webform.

2. Click on the “Emails / Handlers” tab, then click on “Add handler”.

3. Click on “Add handler” on the “Remote post” row.

4. In the Completed section paste in the URL we got from Zapier and click on Save.

Note: You can add a URL if the submission is updated or deleted. That’s a nice bit of added flexibility. I should also note that this is all the configuration required on Webform’s part, cool isn’t it!

Step 3: Send Test POST to Zapier and Finish Configuring Trigger

Let’s now jump back into the Zap we started building in step one.

1. Once you’ve configured the “Remote post” handler click on “Ok, I did this”.

2. Now go back to your Drupal site and submit the actual form so it sends a POST to Zapier. This is a required step.

3. Once you’ve sent a test POST, you should be on the “Pick A Sample To Set Up Your Zap” section. You can view what was in the post by clicking on the down arrow.

When you’re ready click on Continue.

Step 4: Configure Action in Zap

At this point, we’ve configured the trigger in our Zap and sent a test submission. We know that the POST request from Webform worked because Zapier received it.

Now we need to configure the action; where the submission will be stored.

1. Click on Google Sheets on the “Choose an Action App”.

2. Choose “Create Spreadsheet Row” and click on “Save + Continue”.

3. Connect Zapier to your Google account, then click on “Save + Continue”.

4. From the Spreadsheet field select the actual spreadsheet you want the submissions saved into.

5. Select the Worksheet within the spreadsheet.

If you see the message below it means your spreadsheet doesn’t have any headers.

Go and add a header for each column you want to save in your Google Sheets spreadsheet.

6. Now go and map the fields with the values below the “Catch Hook”.

Then click on Continue.

7. Click on “Send Test to Google Sheets” to test everything out.

Check your Google Sheets you should see a new row in it.

Then click on Finish.

8. Don’t forget to name and Zap and switch it on.

Step 5: Test Webform Submission

Go to your Webform and create an actual submission. Once submitted you should see the submission as a row in the spreadsheet.

Debug Zapier

If you need to debug what’s coming into Zapier or you want to see all the submission data which has been pushed into Zapier, then go to the “Task History” page.

From this page you can view if the task was successful or if there was a error. You can sometimes get an error if the API is down and not working.

You can also see what data has come in and out by clicking on the Task.

This gives you some nice visibility into what Zapier is handling.

Summary

The combination of Webform and Zapier is powerful. Almost everyone can be trained to use Zapier and create Zaps which will open a whole new world of possibilities. You’ll finally be able to connect your CRM with Drupal and without the need for custom code.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Jun 01 2018
Jay
Jun 01

Illustration of a person signing a document electronically.

Previously, I wrote a bit about the HelloSign eSignature platform and how it can be integrated into a Drupal 7 website. As promised, a Drupal 8 version of the integration is now available and ready for use on cutting-edge websites everywhere. But this new version is much more than a one-to-one upgrade of the original module— we've leveraged some of Drupal 8's great new features to make using HelloSign with your site even easier than it was before. Here are just some of the highlights of the new release:

Composing Your Site

Installing the old HelloSign module could be a bit of a pain. In addition to needing to download the HelloSign module for Drupal, it was also necessary to download a separate HelloSign PHP SDK and put it in the right place in your site's code. Now, the HelloSign module can be installed easily using Composer. Instead of downloading two files from two different sites, unzipping them, and carefully making sure to put them in the right place in your site code, all you have to do is run one simple Composer command:

composer require drupal/hellosign

That one command will install the module in the right place, and it also installs all of the module's dependencies, including the HelloSign PHP SDK and the Encryption module (more on that in a moment), making it even easier to get started with HelloSign in Drupal 8 than it was in Drupal 7.

Need to Integrate Drupal with HelloSign, or with Anything Else?  Request your free consultation with an Ashday Drupal integrations expert today. 

Security by Default

Many Drupal modules are available which, like the HelloSign module, help make it simpler to integrate with other services. One thing common to most such modules is that they add a configuration form on the Drupal site, which administrators can use to set up the integration by entering essential information such as credentials and API keys. The HelloSign module is no different; integrating with HelloSign requires the use of an API Key and a Client ID, and the module provides an easy way to set these (and other useful settings) through the administration interface.

One thing that often gets overlooked by integration modules, however, is the security of this saved information. Once the API key is configured, it is stored as plain text both in the database and (if you are using Drupal 8's configuration management feature) in the code of the site. Unfortunately, that means that if any ill-intentioned person somehow gained access to most any part of your site, they'd have access to your secret API key.

To mitigate this common issue, the HelloSign module in Drupal 8 makes use of the Encryption module to store this private information in a secure, encrypted format, decrypting it only when necessary to interact with the HelloSign API. This feature is on and enabled by default and, in fact, can't be disabled, because having such an option would make for inherently weaker security.

Built for the Modern Web

One issue with Drupal 7 was that it was not, on the whole, built with modern object-oriented PHP coding practices, and the modules built for Drupal 7 often followed suit. Drupal 8, however, is a whole new object-oriented world, and that's as true of the HelloSign module as it is of Drupal Core.

The Drupal 7 version of the HelloSign module had most of its features buried in a number of disparate functions, many of which were ultimately just wrappers for functionality made available in an object-oriented fashion by the HelloSign PHP SDK. For Drupal 8, we've simplified this. The HelloSign module provides a

service which, in addition to allowing the creation of signature requests, also provides direct access to the rest of the HelloSign API. Instead of making assumptions about what bits and pieces of the API's many features a site might need, now, all of it is available. The service also automatically establishes the necessary connection info, so that your developers never have to worry about how to connect to HelloSign.

In Conclusion

The HelloSign Module for Drupal 8 has all these improvements (the use of composer, enhanced security, and a modern object-oriented design) and many more, including vastly expanded documentation and more granular permission handling. We hope that it will be of use to you on your next Drupal project which needs to support eSignatures.New Call-to-action

May 30 2018
May 30
Photo by Drupal Association

Government touches the lives of us all in fundamental ways. It is essential that government is able to communicate with its citizens in an effective and inclusive manner.
This communication requires high quality tools and special considerations regarding:

  • exchange of information with each other and citizens in an open manner
  • providing ability of citizens to see how their government is run
  • protecting citizens’ data and privacy
  • providing modern and easy to use technologies for both citizens and authorities
  • contributing back their code and data, because it’s paid for by the citizens

Therefore, we have dedicated a special government track at the Drupal Europe Conference.

As you’ve probably read in one of our previous blog posts, industry verticals are a new concept being introduced at Drupal Europe and replace the summits, which typically took place on Monday. At Drupal Europe. These industry verticals are integrated with the rest of the conference — same location, same ticket and provide more opportunities to learn and exchange within the industry verticals throughout 3 days.

The Government vertical track of the Drupal Europe Conference is focused on trends and innovations as well as all aspects of the current developments and challenges within the government space.

In an exciting mix of case-studies, panel-discussion and thematic sessions the following, most burning topics will be discussed

  • Open access, data, government and standards
  • Accessibility / Inclusivity
  • Digital-by-default citizen services
  • User experience design for digital services
  • Hosting and Security
  • Content Management and Usability of digital tools
  • and more

We strive to provide the best possible lineup of speakers and session with a great variety of interesting topics to create the best conference for attendees working within and who are interested in government.

Session submissions is open / Call for Sessions is open and we ask you to submit interesting session proposals to create an awesome conference. Session proposals are not limited to Drupal and all topics in relationship with the above are welcome.

Please also help us to spread the word about this awesome conference. Our hashtag is #drupaleurope.

If you want to participate in organisation or want to recommend speakers or topics please get in touch at [email protected].

In any case we look forward to seeing you at Drupal Europe on September 10–14 in Darmstadt Germany!

About Drupal Europe Conference

Drupal is one of the leading open source technologies empowering digital solutions in the government space around the world.

Drupal Europe 2018 brings over 2,000 creators, innovators, and users of digital technologies from all over Europe and the rest of the world together for three days of intense and inspiring interaction.

Location & Dates

Drupal Europe will be held in Darmstadtium in Darmstadt, Germany — with a direct connection to Frankfurt International Airport. Drupal Europe will take place 10–14 September 2018 with Drupal contribution opportunities every day. Keynotes, sessions, workshops and BoFs will be from Tuesday to Thursday.

May 29 2018
May 29

Part 3: The Final Installment

This is the final installment of Drupal Taxonomy that we feel is important for one unfamiliar with Drupal to know! At this point, hopefully, you understand some of the key language that is regularly used in the Drupal Community.  For reference, our first two blogs, Part 1 and Part 2, should provide you any background you may not already have.  Mobomo is the team that is behind NASA, the solar eclipse with NASA, the USGS store, and NOAA Fisheries, all of which are Drupal sites.  Similar to these organizations, Drupal is the CMS system for you if your needs are more complex, you are developing an e-commerce portal, or if you have a large amount of content to maintain.  If you have a Drupal project in the works or are about to migrate versions or CMS systems, Mobomo has some of the best and brightest Drupal developers in the DC area.

Key Terms:

  1. Permissions – This is a tool for controlling access to content creation, modification, and site administration at the application level.
    1. Administrators can assign permissions to roles, then assign users to these roles.
    2. The first user receives all permissions.
  2. Template – This refers to a file to express presentation
    1.  These are mostly written with a markup language that has variables representing data provided to the template.
  3. Theme Engine – This is a set of scripts that interprets code and makes theming a site easier. These scripts take the dynamically generated content and output it to HTML.
    1. The default theme engine is PHPTemplate
  4. Theme Hook – This is an identifier used by the calls to the theme() function to delegate rendering to a theme function or theme template.  Modules which extend Drupal may declare their own theme hooks to allow editors to control the markup of that module in their theme.
  5. Trigger – These typically result from a characteristic change in an entity maintained by a module.
    1. Types:
      1. Deleting content
      2. Adding a comment that a user has logged in
      3. Adding a term
  6. Triage – A new issue is assigned a priority based on its severity, frequency, risk, and other predetermined factors.
  7. Zebra Striping – This refers to the to the alternating colors between rows of data. It is most common for rows of data to alternate background colors between white and gray.
  8. Testbot – A continuous integration service for testing patches submitted to project issues on Drupal.org.
  9. Roles – A name for a group of users, to whom you can collectively assign permissions. There are two predetermined, locked roles for every new Drupal installation:
    1. Authenticated User – anyone with an account on the site.
    2. Anonymous User – those who haven’t yet created accounts or are not logged in.
    3. Additional roles can be added and users can belong to multiple roles.
  10. Path – This is the final portion of the URL that refers to a specific function or a piece of content.

Please reference Drupal.org for more information!

May 29 2018
May 29

Did you know that Drupal has a Point of Sale (POS) module that pairs with the widely used Commerce module? That's right, Drupal Commerce is now the full end-to-end platform for a complete omnichannel ecommerce experience. Whether you're running an online store, a physical store, or both, you can do it all with Drupal Commerce!

One of the great things about a web-based POS is that all you need is a web browser for it to work. This opens the door to new POS hardware options. You can use an iPad, a laptop, or anything that has a browser. You don't need any expensive or specialized hardware from Moneris, nor do you need a branded solution such as Square. Instead, you now even have the option to build your own POS hardware for very little cost. Today we're featuring a Raspberry Pi based prototype that WE built! The whole setup cost about $250 CAD.

Watch the video below, or keep reading to learn more.

[embedded content]

As mentioned above, we bought a simple touchscreen and mounted a Raspberry Pi on the back. Once up and running, all you have to do is plug it in, connect it to the Internet, and it will automatically boot up into the POS login screen. If your staff has a problem, all they have to do is unplug it and plug it back in. There's no messing with settings or anything. Just reboot. Easy!

Once you get the hardware working, the display can be used in 3 different ways depending on how you need it:Check Out Our High Five Drupal Web Series

  1. The administrative view, which is what the cashier would use.
  2. A customer display view, which shows what the cashier has added so the customer can see the products and prices entered in real-time. Remember: all you need is a browser and something that can display a browser. The customer display is especially easy because it doesn't have to be a touchscreen; you could just use any monitor, a TV, etc, and run it off of the cashier hardware.
  3. A kiosk view, which is basically just running the front end of the site like your customers would do on their home computers. You could set that out in your store and let customers browse products and make purchases.

So, for a shoestring budget, we created a working point of sale that could be used in a store (see the video above). Aside from looking a little silly, our example is perfectly fine and works great. Plus, there are endless options for inexpensive enclosures to make it look better. You could even build or 3D print your own.

The do-it-yourself (DIY) route is a lot cheaper and gives you the freedom to do whatever you want. We will post further details soon on how to do all this yourself, including specific links to the components we used. And remember: it's Drupal, so it's open source, and all the software is free.

Integrated Drupal Ecommerce Solutions

May 25 2018
May 25

Illustration of search function on a website.

Search is an important facet of any large website these days. We’d talked previously about why you want to take full control of your site search. Bombarding your users with a mess of links won’t do anyone any favors. One of our favorite solutions for this problem is Apache Solr and recently we had the opportunity to set it up on Drupal 8. Let’s take a moment to go through a bit of what that solution looked like and some thoughts along the way.

Setting the stage

Before we dive too far into the how, we really ought to give a bit of time to the why. More specifically we need to cover why we didn’t simply use one of the existing modules contributed to Drupal by the community. At the time, there was one prominent module group for implementing Solr search in Drupal 8. The Search API module in tandem with the Search API Solr Search module were really the most direct way to implement this advanced search on your site. These are great modules and for a different situation would have worked just fine. Unfortunately, the requirements we were working with for the project were more specific than these modules were equipped to handle.

There were three key things that we needed control over and we aren’t keen on hacking a module to get something like this done. We needed to have specific control over what was indexed into Solr. The Search API module allows for you to generically specify how fields are translated to the Solr index, but if you need some different handling you would either need multiple indexes or you would need to sacrifice some of that customization. The site also needed to make use of a fairly complicated feature of Solr, the more like this query. (Warning, incoming search jargon!) This query allows you to search the index for content relevant to another indexed piece of content. This relevancy is determined by fields you specify in the query and results can be limited to content that meets a certain relevancy score threshold.

The last thing we had to have in this was the ability to manage how often content was indexed. The existing modules allowed for this action to happen on a periodic cron, but wasn’t able to have the index updated as soon as changes were made to content. This project was going to have a lot of content updated each day and that meant we couldn’t afford to wait for things to be indexed and updated. With these three things creating hurdles to getting Solr implemented in this project it seemed like we were going to have to go another way, but after looking at some documentation we determined that creating our own implementation would not be so difficult.

Brainstorm your next development project with  an Ashday expert!  Request your free session today. 

Solr search with Solarium

Before we get too far ahead of ourselves, we should note that this wasn’t done with a contributable module in mind. That isn’t because we don’t like giving back the the community, we totally do, it was because it was created for a very specific client need. There will likely be a more generic version of this coming out down the road if demand is high enough. Also, we are under the impression that most use cases are covered by the modules mentioned above, so that would be where most would start. Enough with the disclaimers; let’s talk Solarium.

We went with Solarium as the Solr client to use for this. That is what most of the existing Drupal modules use and it seemed to be the most direct way to do this with PHP. Installing Solarium is pretty simple with Composer and Drupal 8. (If you aren’t using Composer yet, you really should be.) Using a client for communicating with a Solr instance isn’t specifically required. Ultimately, the requests are just simple HTTP calls, but the client saves you from having to memorize all of the admittedly confusing query language that comes with using Solr.

Installing Solarium can be done as simply as composer install "solarium/solarium". You could also do this by adding a line to your composer.json file in the require section for "solarium/solarium": “3.6.0”. Your approach on this part may vary, but this should be done from the root of your Drupal site so that this library goes into the global dependencies for the project. These instructions are also detailed a bit more in the official docs for Solarium, here. The official docs also have a bunch of example code that will help if you dive into this like we did.

For this implementation, we opted to create a Solr PHP class to do the heavy lifting and made use of a Drupal service for calls to it from the rest of the app.


namespace Drupal\my_module\Solr;
use Solarium\Core\Client\Client;


class SolrExample {

  /**
   * Connection to the solr server
   *
   * @var Client
   */

  protected $solr;
}

The heart of the class is going to be the connection to Solr which is done through the Solarium client. We will make use of this client in our constructor by setting it up with the credentials and default settings for connection to our Solr instance. In our case, we used a config form to get the connection details and are passing those to the client. We wanted to use the configuration management system so that we could keep those settings consistent between environments. This allowed more accurate testing and fewer settings for developers to keep track of.


/**
* Solr constructor.
*/
public function __construct() {
 $config = \Drupal::config(‘example.solr_config’); //Normally we’d inject this, but for this example we’ll ignore that
 $settings = [
   'endpoint' => [
     'default' => [
       'host' => $config->get('host'),
       'port' => $config->get('port'),
       'path' => $config->get('path'),
       'scheme' => $config->get('protocol'),
       'http_method' => 'AUTO',
       'site_hash' => TRUE,
      ]
    ]
  ];
 $this->solr = new Client($settings);
}


We are doing this in the constructor so that we don’t have to create a new client connection multiple times during a given call. In our case, we ended up using this as a Drupal service which allows us to only have the Client object created once per call and gives a simple way to use this class throughout the app.

The next part is the actual search method. This does a lot and may not be clear from the code below. In this method, we take parameters passed in and build a Solr query. We have a helper function in this that does some specific formatting of the search terms to put it in the right query syntax. For most sites, this code would serve fine for doing generic searching of the whole index or having multiple versions for searching with specific filters

/**
* General Search functionality
*
* @param array $params
*
* @return mixed
*/
public function search($params = []) {

 $query = $this->solr->createSelect();

 $default_params = [
   'start' => 0,
   'rows' => 20,
   'sort' => 'score',
   'sort_direction' => 'DESC',
   'search' => '*:*',
   'time' => '*'
 ];

 $params = array_merge($default_params, $params);

// Building a proper solr search query with the search params
 $search_string = $this->getTextSearchString($params['search'], $params['time']);

 $query->setQuery($params['search']);
 $query->setStart($params['start'])->setRows($params['rows']);
 $query->addSort($params['sort'], $params['sort_direction'] == 'ASC' ? $query::SORT_ASC : $query::SORT_DESC);

 try {
   $results = $this->solr->select($query);
   return ['status' => 1, 'docs' => $results->getData()['response']['docs']];
 }
 catch (HttpException $e) {
   \Drupal::logger('custom_solr')->warning('Error connecting to solr while searching content. Message: @message',['@message' => $e->getMessage()]);
   return ['status' => 0, 'docs' => [], 'message' => 'Unable to reach search at this time. Try again later.'];
 }
}

The code we’ve presented so far isn’t breaking new ground and for the most part does a similar job to the existing search modules available from the Drupal community. What really made us do something custom was the more like this feature of Solr. At the time that we were implementing this, we found that piece to be not quite working in one module and impossible to figure out in another, so we put our own together. 

Thankfully with Solarium, this was a pretty simple query to tackle and we were able to have related content on the site without much other setup. We can create a new more like this query and submit an id so Solr knows which content to compare against for similarity. The rest of it behaves very similar to the search method presented previously. The results are still returned the same and we are able to do some other filtering to change the minimum relevancy score or number of rows.

$query = $this->solr->createMoreLikeThis();
$helper = $query->getHelper();
$query->setQuery('id:' . $id);
$query->setRows($params['rows']);
$query->setMltFields($params['mltfields']);
$query->setMinimumDocumentFrequency(1);
$query->setMinimumTermFrequency(1);
$query->createFilterQuery('status')->setQuery($params['queryfields']);

We didn’t share all of the code used for this here, obviously. The point of this post isn’t to help others create an exact duplicate of this custom implementation of Solarium in Drupal 8. At the time of this writing, it seems that the existing Solr modules might be in great shape for most use cases. We wanted to point out that if you have to dip into code for something like this, it can certainly be done and without an insane amount of custom code.

MIKE OUT

New Call-to-action

Pages

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