Sep 11 2018
Sep 11

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

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

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

Demo Drupal Commerce today! View our demo site.

Additional details:

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


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

The Content Type Crux

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

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

Eureka! Paragraphs

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

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

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

Content Type vs Paragraphs

Drupal paragraph vs content type example

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

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

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

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

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

Our Live Website Component Guide

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

[embedded content]

Contact us and learn more about our custom ecommerce solutions

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


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

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

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

The point of sale systems

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

Drupal POS

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

Shopify POS

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

Square POS

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

Service comparison

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

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

 

Drupal logo

Drupal POS

Shopify logo

Shopify POS

Square logo

Square POS

Service philosophy

Open-source 

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

$29 USD *
* Basic package pricing

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

Hardware Requirements

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

What business is best suited for each POS?

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

Drupal POS

Who’s it for?

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

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

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

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

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

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

Shopify POS

Who’s it for?

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

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

Additional details:

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

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

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

Square POS

Who’s it for?

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

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

Additional details:

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

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

Your point of sale integrator

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

Contact Acro Media Today!

Jul 26 2018
Jul 26

Encryption is an important part of any website that needs to store sensitive information. Encryption takes sensitive data that is in a readable form and encodes it, making it unreadable. This essentially hides the information from anyone who might try to access it without permission to do so. The encoded information can only be decoded by an entity that has a paired decryption key.

Our requirements for this particular Drupal website build included:

  • Acquia Cloud - One of the leading Drupal hosting providers.
  • Libsodium - Because of Acquia Cloud, we needed a custom compiled php extension
  • Encrypt - A Drupal module that exposes encryption APIs to other modules.
  • Key and Lockr.io - Drupal modules for managing the encryption key.
  • Sodium - A Drupal module to provide libsodium to the encrypt module.

Why use libsodium instead of mcrypt?

Libsodium is a portable, cross-platform implementation of NaCl. Experts recommend libsodium for its simple interface and strong cryptography. The sodium Drupal module takes an easier approach, which is to use a high-level package, paragonie/halite, to work with libsodium.

The other choice for encryption in PHP is mcrypt. It's the default method in the Drupal 7 version of the encrypt module. Despite that, it's a bad choice because it's difficult to use correctly. Mcrypt is deprecated in PHP 7.1 and removed in PHP 7.2.

Contact us and learn more about our custom ecommerce solutions

Installing Libsodium on Acquia's PHP 7.0

PHP 7.2 has libsodium built in and if you're on 7.1 or below you can install it from PECL. We're going to be using Acquia Cloud, so we can't yet run PHP 7.2 and we can't install any PHP extension we want - not as easily as we'd like to.

Acquia requires that extensions be compiled including their dependencies. The php-libsodium extension depends on libsodium itself and we have to produce one binary for both libraries. We'll be compiling libsodium the crypto library as a static library and php-libsodium the php extension that provides bindings to libsodium for PHP applications as a dynamically linked library so it can be loaded by a regular PHP install.

Let's get started!

  1. Download the latest libsodium from https://github.com/jedisct1/libsodium/releases.
  2. Compile libsodium so it's static, not shared. Put it in a directory we'll use later.

    $ ./configure --libdir=/home/me/sodium/library --disable-shared --enable-static--enable-static makes it static, not shared. It'll be a part of the php extension when we build it instead of a separate dependency.

    --disable-shared prevents creating a shared library version of the library.

    --libdir puts it in a directory where we'll use it later.

  3. Compile with PIC (Position Independent Code).

    $ make CFLAGS='-g -O2 -fPIC'
    $ sudo make install
    Here's our sodium library and a pkgconfig directory we'll need to point the php extension at.

    $ ls /home/me/sodium/library
    libsodium.a libsodium.la pkgconfig

  4. Download the latest version 1 release of the libsodium php extension from https://github.com/jedisct1/libsodium-php/releases.

    Use phpize to get the extension ready to compile. Normally a PHP extension is compiled as part of PHP. This script is used to set up things up so it's like we're doing that. You need the -dev version of PHP to get phpize, so install php7.1-dev or the equivalent for your situation.

    $ phpize7.1
    Configuring for:
    PHP Api Version: 20160303
    Zend Module Api No: 20160303
    Now you'd notice a lot more files in the directory, like the configure script.

  5. Set the package config directory to the one where we installed libsodium.

    $ export PKG_CONFIG_DIR=/home/me/sodium/library/pkgconfig

  6. Configure libsodium-php with the path to libsodium.

    $ ./configure --with-libsodium=/home/me/sodium/library --libdir=/home/me/sodium/library--with-libsodium tells it where to find the dependency we just created.

  7. Check that libsodium.so is not looking for a shared libsodium library.

    $ ldd modules/libsodium.so
    linux-vdso.so.1 => (0x00007ffcdd68e000)
    libc.so.6 => /lib/x86_64-linux-gnu/libc.so.6 (0x00007f71f26eb000)
    /lib64/ld-linux-x86-64.so.2 (0x00007f71f2d0f000)
    There's no libsodium dependency there, so we're good to use our libsodium.so PHP extension! Deploy the file and configure PHP to load the extension. Since we're on Acquia Cloud, Acquia does that after we provide the file.

Get encrypted!

If you're running Drupal and need encryption setup, or if you're looking to start a new project and exploring options and requirements, get in touch with us! One of our business developers will be happy to help.

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/serach_api
    • Solr
      NOTE: This module requires you're running Solr 6.4+ and PHP 7
      composer require drupal/serach_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: 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

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 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 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 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 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 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

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.

May 24 2018
May 24

In this video, Josh Miller shows you how to install Drupal Commerce 2 using a local development tool called Lando. Further instructions are included below the video.

Timestamps:

  1. Commerce Kickstart download: 0:51
  2. “composer install” command: 8:00
  3. “lando init” command: 12:56
  4. “lando start” command: 15:06
  5. “Drupal install” screen: 17:04
  6. “lando stop” command: 21:18

Prerequisites:

  1. Download and install Composer
  2. Download and install Lando

Code generated during this video:

https://github.com/AcroMedia/install-commerce-lando 

Installing Drupal Commerce 2 locally using Commerce Kickstart, Composer, and Lando

Getting Drupal up and running on your computer is an important first step as an evaluator. Good news is that there’s a lot of tech that makes this easier than ever before. We’re going to walk you through how to install Commerce 2 using the Kickstart resource, Composer, and Lando. 

  1. Download and install Composer
  2. Download and install Lando
  3. Next go to Commerce Kickstart to create and download your customized composer.json file

    Visit Commerce Kickstart

     Drupal Commerce Kickstart

  4. Run ‘composer install’

    Composer install command

  5. Run ‘lando init’

    Lando init command

  6. Run ‘lando start’

    Lando start command

  7. Visit your local URL and install Drupal

    Lando - 5 CommerceKickstart-ChooseLanguage

  8. Start building!

    Lando - 6 Congratulations

What is Drupal Commerce

Drupal Commerce is an ecommerce focused subset of tools and community based on the open source content management system called Drupal. Drupal Commerce gives you the ability to sell just about anything to anyone using a myriad of open source technologies and leveraging hundreds of Drupal modules built to make that thing you need do that thing you want.

We use Commerce Kickstart to get things started.

Try the Commerce Kickstart 2.x Installer

What is Composer

Composer is the PHP dependency manager that can not only build and bring in Drupal, Drupal Commerce, and Symfony, but is the technology behind the newest Drupal Commerce Kickstart distribution. We leverage the composer.json file that commercekickstart.com gives us to bring in all of the Drupal code necessary to run a Drupal Commerce website.

To get started, we run “composer install” and that command brings in all the requirements for our project.

What is Docker

Docker is a virtualization software that brings together App services like Apache, Nginx, MySQL, Solr, Memcache, and many other technologies so that it can run on your own computer. This installation video uses a tool that runs on top of Docker in an abstract, and frankly easier, way.

If you want to learn more about Docker and the many different types of tools that run on top of it, we recommend John Kennedy’s 2018 Drupalcon presentation about Docker.

Another great resource that compares using Docker tools is Michael Anello’s take on the various technologies. 

What is Lando

Lando is a thin abstraction layer of tools on top of Docker that makes creating an environment as easy as “lando init” followed by “lando start.” Lando keeps the often confusing devops work of creating a local virtual environment to a few very well documented variable settings that it turns into full docker-compose scripts that Docker, in turn, uses to create a local environment where everything just works together. We’re very excited to see how Lando and Drupal Commerce start to work together.

Contact us and learn more about our custom ecommerce solutions

May 10 2018
May 10

The hardest part of Drupal Commerce 2 is the configuration of it all. Luckily, most store managers and administrators don't need to worry about that part. What they DO need to worry about is how to actually add new products to their stores and manage existing ones. For some ecommerce stores, keeping your product offerings fresh and up-to-date can mean the difference between success and failure. If you're using Drupal Commerce 2, managing your store content is easy!

In this Acro Media Tech Talk video, we user our Urban Hipster Commerce 2 demo site to show you the Drupal Commerce 2 product interface and how to add and edit products. The products shown will be configured differently than your own, but the same principles will apply no matter what type of product you sell.

Its important to note that this video was recorded before the official 2.0 release of Drupal Commerce useing a beta release of the Commerce Shipping module. You may see some differences between this video and the current releases. The documentation is also evolving over time.

Check Out Our High Five Drupal Web Series

Urban Hipster Commerce 2 Demo site

This video was created using the Urban Hipster Commerce 2 demo site. We've built this site to show the adaptability of the Drupal 8, Commerce 2 platform. Most of what you see is out-of-the-box functionality combined with expert configuration and theming.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media

Drupal modules in this demo

Contact us and learn more about our custom ecommerce solutions

May 03 2018
May 03

Most customer will manage their own accounts on an ecommerce website just fine. However, sometimes you need to create new accounts for your customers, or edit their existing account. For example, if you have both an online store and a brick-and-mortar store running on the same platforms (which Drupal Commerce can do), your in-person cashiers may have reasons for creating or updating your customers account. Likewise, if you offer support by phone, a customer service rep may also need to create or update accounts.

Check Out Our High Five Drupal Web SeriesIn this Acro Media Tech Talk video, we user our Urban Hipster Commerce 2 demo site to show you how you can manage your customers online accounts. These are things like finding specific users, adding new users, blocking users, modifying a users payment methods and viewing their previous orders, etc. It's super simple.

Its important to note that this video was recorded before the official 2.0 release of Drupal Commerce. You may see some differences between this video and the current releases. The documentation is also evolving over time.

Urban Hipster Commerce 2 Demo site

This video was created using the Urban Hipster Commerce 2 demo site. We've built this site to show the adaptability of the Drupal 8, Commerce 2 platform. Most of what you see is out-of-the-box functionality combined with expert configuration and theming.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media

Drupal modules in this demo

Contact us and learn more about our custom ecommerce solutions

May 01 2018
May 01

A lot of universities use Drupal in some capacity. Universities don't typically have just one site; they're made up of a ton of different pieces put together for course registrations and calendars and events and alumni and so on. So a couple of those pieces might use Drupal. Or one or two departments might use Drupal even if others do not.

Many educational institutions like Drupal because it's open source. Universities are often publicly funded and favor open stuff more than proprietary products. Plus, they need to manage a ton of content by a ton of different people, so they need a really big robust CMS.

[embedded content]

Introducing OpenEDU 3.0

The new OpenEDU 3.0 is a Drupal distribution setup for educational institutions. The older version was mostly a set of custom configurations, whereas 3.0 actually has unique functionality. It has analytics and monitoring built right into it, for instance. There's a new analytics dashboard that allows a central admin to see what's going on in all the different sections without having to check a while bunch of different accounts, which is pretty cool. There's also new functionality related to content management, workflows and editing flows that universities need to handle.

OpenEDU is also being integrated into the Commerce (keep an eye out at commercekickstart.com), so you can have both of them together.

The Commerce Disconnect

Strangely, a ton of universities are using Drupal, but they are not using Commerce. Even those they use Drupal and perform ecommerce are typically using pretty terrible antiquated systems, if they have a system at all.

Check Out Our High Five Drupal Web SeriesLack of awareness is a big factor in this. A lot of universities are so focused on the publishing end that they don't even think about commerce. Another stumbling block is security—they don't want to deal with the compliance issues around online payments, so they just keep doing what they're doing (i.e. accepting cash or taking credit card details over the phone, which is even less secure).

The reality is that businesses or organizations within a university could really benefit from using Commerce, particularly if they already use Drupal. They could just tack on a bit of Commerce and easily sell club memberships and accept donations (remember: Commerce has a built-in point of sale). There could be one central system that IT could maintain and keep secure, and everyone could still spin up their own customized version of it.

TL:DR - Educational institutions already use Drupal and so should really adopt Drupal Commerce to replace their old, antiquated payment systems.

More from Acro Media

Chat with us

Our team understands that one-size does not fit all, especially in the education space, so we listen and work together to bring your students and staff the most secure and integrated open source solution available in the Commerce arena. Contact us today to discuss how Drupal Commerce can fit it with your existing systems.

Contact Acro Media Today!

Apr 26 2018
Apr 26

 

If all you run is a single eCommerce store using Drupal Commerce, adding store fields isn't something you really need to worry about. However, if you start adding additional online stores (multi-store) and/or run a brick-and-mortar store location in tandem with your online store, being able to separate the stores is important. In the case of brick-and-mortar stores, you probably want your customers to be able to view information about them that is unique to a physical store, such as location, hours, contact details, etc. With Drupal Commerce 2, you can do this easily and manage all of your stores from the same interface!

Check Out Our High Five Drupal Web SeriesIn this Acro Media Tech Talk video, we use our Urban Hipster Commerce 2 demo site to show you how to add and configure a new store using the default store fields. We don't go into adding new fields, but if you're familiar with configuring Drupal then it's not much different than any other type of content. This should get you started. The rest of Drupal Commerce works with multiple stores seamlessly.

Its important to note that this video was recorded before the official 2.0 release of Drupal Commerce. You may see some differences between this video and the current releases. The documentation is also evolving over time.

Urban Hipster Commerce 2 Demo site

This video was created using the Urban Hipster Commerce 2 demo site. We've built this site to show the adaptability of the Drupal 8, Commerce 2 platform. Most of what you see is out-of-the-box functionality combined with expert configuration and theming.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media

Drupal modules in this demo

Contact us and learn more about our custom ecommerce solutions

Apr 19 2018
Apr 19

DrupalCon Nashville 2018 Session

Join Acro Media's technical Drupal Commerce veteran, Josh Miller (all things programming) and Business Developer, Becky Parisotto (all things business) as they walk through the wild world of physical commerce that is powered by and paired with a Drupal web interface. Both Josh and Becky work together with a number of physical commerce clients. Through our client’s requirements, we have gained a better understanding of the iceberg that is building an interface for retail, and allowing for that true omni-channel experience for both customer, and (sometimes more importantly) the business owner.

Josh will review the state of Point of Sale as it integrates with Drupal Commerce 2 on Drupal 8, compare and contrast fulfillment in the new shipping and inventory modules, and talk about a new module that handles requesting products from your suppliers and updates store stock when its received. Additionally, Becky will walk us through what Drupal Commerce is capable of in the way of “powering your business” and truly being the end to end backend brain for finances, accounting, product management, customer management, shipping, fulfillment, stock, inventory and community. Drupal Commerce is a big box of legos, come and learn how we build fully integrated businesses, from the web to the storefront to the back of house, to the warehouse, and more.

This is meant to be a practical review with easy to digest client examples and micro case studies of how we merge an online tool with a physical store. Setting clients in digital stone, all powered by Drupal.

Talk to us

Acro Media is a Drupal Commerce development agency that specializes in enterprise-level ecommerce. We are committed to building strong strategic partnerships and using our ecommerce expertise to help clients create a dynamic web presence that engages audiences, generates revenue, and boosts brand awareness.

Contact Acro Media Today!

Contact us and learn more about our custom ecommerce solutions

Apr 19 2018
Apr 19

DrupalCon Nashville 2018 Session

Join Shawn McCabe, Acro Media CTO, as he goes behind the scenes and teaches a bit about how PHP uses memory when it runs your code. PHP's ease of use and low barrier to entry also have some side effects to how memory is used, sometimes using memory differently and in places you didn't expect. If you're doing small pages that load quickly, for a low traffic site, this probably won't even be noticeable unless things go quite wrong. Once you get into heavy pages on high traffic sites, or even worse, long running background processes, then knowing a bit more about the memory you're using can help a lot.

Check Out Our High Five Drupal Web SeriesIn PHP, variables have a lot of meta-data they need to store, since they can be any size and of any type. They need all this meta data to store information like how much data they hold, what type of data it is and how it is stored. Often this "hidden" meta data cost will use more memory than the actual info you are storing, although recent versions of PHP have improved on this.

The idea isn't to learn every low level detail, just to have a little knowledge of what is happening with memory usage when you're programming so you can be cognizant of the choices you make and a bit more efficient in your usage.

Hopefully this talk will be interesting to even experienced developers, but you only need some programming basics to follow along.

Talk to us

Acro Media is a Drupal Commerce development agency that specializes in enterprise-level ecommerce. We are committed to building strong strategic partnerships and using our ecommerce expertise to help clients create a dynamic web presence that engages audiences, generates revenue, and boosts brand awareness.

Contact Acro Media Today!

Apr 12 2018
Apr 12

Drupal Commerce 2 shipping module let you quickly add and configure various shipping methods for your site. Out-of-the-box, you can easily set up basic shipping methods for flat-rate per-order or per-item shipping options. The plug-in based system allows for more advanced shipping integrations with suppliers for real-time rate calculation.

In this Acro Media Tech Talk video, we user our Urban Hipster Commerce 2 demo site to show you just how easy it is to create a simple flat-rate shipping fee for your eCommerce store. We set it up and then run through the checkout so that you can see exactly what your customers would see.

Its important to note that this video was recorded before the official 2.0 release of Drupal Commerce useing a beta release of the Commerce Shipping module. You may see some differences between this video and the current releases. The documentation is also evolving over time.

Check Out Our High Five Drupal Web Series

Urban Hipster Commerce 2 Demo site

This video was created using the Urban Hipster Commerce 2 demo site. We've built this site to show the adaptability of the Drupal 8, Commerce 2 platform. Most of what you see is out-of-the-box functionality combined with expert configuration and theming.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media

Drupal modules in this demo

Contact us and learn more about our custom ecommerce solutions

Apr 10 2018
Apr 10

Automated testing is like flossing your teeth: you know you should do it, you might even tell people you do it, but chances are you don't do it nearly as often or as consistently as you ought to. Maybe you only run one automated test. On five percent of your code. Sometimes.

Manual testing vs automated testing

Manual testing—where a real live person clicks around and verifies that the code does everything it's supposed to do—has its uses. But for large-scale projects, or in cases where you need to test the same code repeatedly, automated testing can be both more cost-effective and more fruitful. You know how your eye can look at the same spelling error six times without seeing it? Automated testing can catch issues like that. It's great for rote, boring tasks that humans gloss over.

Check Out Our High Five Drupal Web SeriesIn test-driven development, you actually build the tests first and then write the code that fulfills those tests. But you don't necessarily have to do automated testing that way. Tests can be written afterwards. Sometimes it's old code that gets automated tests built for it, for instance.

Writing the test probably takes more time than it takes to initially test it. But then it's done, and you can re-run the test any time you make any change to that site. Even if you don't change anything near that code, you can run the test anyways and catch those instances where you're like, "I'm sure it won't break that"…but it does.

Drupal maintainers try to be really strict about the automated tests. Since lots of people use the modules, and lots of people contribute to them, you have all these different people submitting code. Having a good test suite can really improve your confidence in a module. If each submission comes with new tests that you can run and verify, you can be far more confident in the quality of that code.

Time savings

Say you do 10 hours of manual testing for each release. If, on the other hand, you spend 10 hours writing automated tests for each release, then for release #2, you're actually doing 20 hours of testing, and for release #3 you're doing 30 hours of testing. You're only putting in 10 man hours each time, but your test suite keeps growing, and the scope of what you're testing increases exponentially because you can rerun the same tests each time.

Why is automated testing such a hard sell?

Going back to the flossing example: why don't you floss? It takes 60 seconds. But you only really get the benefits if you do it all the time.

More to the point: not doing it takes time to become bad. Skipping automated testing on your first release is maybe not a big deal. Your code base is small, it's probably only doing a couple things, so manual testing is very feasible. But as the project grows and gets more complex, manual testing becomes increasingly unwieldy, and then you get to a point where you think, we're too far into this to add automated testing now.

But the truth is you can start at any point. It's never too late to start proactively doing things that will benefit your site.

Contact us and learn more about our custom ecommerce solutions

What prevents people from getting started?

Usually the thing that stymies people is that they're not set up for automated testing: they don't have a continuous integration environment or a nice testing environment to run the tests on. Or maybe they've neglected it for so long that the regular tests don't work anymore; they write their first test and they have all these other problems because they've let things languish, so they give up.

What is continuous integration, you ask? It means every time you do a change and you push it out, it attempts to integrate it in with the whole project. It will deploy it to a server, it will compile the code if necessary, it will run code standards and automated tests and so on. When you have that stuff all set up to run automatically, you just make the code, push it to your version control, and forget about it. If something goes south, it'll send you an email saying this didn't pass. Otherwise, you don't have to think about it again.

How much of your code should be covered by automated testing?

You kind of want to be in that 95% range, although it's true that you can have parts that aren't easily testable. You can cover a lot of code, but you might still be missing use cases. Maybe you test taxes, and you test discounts, but you don't test taxes and discounts together. So technically you have full code coverage, but you're not using them in combination. So code coverage is a nice metric, but it doesn't tell the whole story.

TLDR: Automated testing is like flossing. You should really do it.

More from Acro Media

Chat with us

If you'd like to talk about adding automated testing to your Drupal Commerce website, or if you just want to to discuss how Drupal Commerce fits into your ecommerce solution, give us a shout. We're happy to chat.

Contact Us

Apr 05 2018
Apr 05

Drupal Commerce 2 comes with promotions sub-module that lets you manage store promotions in so many different ways. One common promotion method is to give your customer coupon codes. Coupon codes "unlock" a specific deal for the customer. For example, if you're trying to get a customer to complete an abandoned cart, you may offer a coupon code for 20% off the entire order to try and push them. Maybe you have a weekly newsletter and you want to reward your subscribers with a deal just for them. A custom coupon code with a discount is a great way to do this.

In this Acro Media Tech Talk video, we user our Urban Hipster Commerce 2 demo site to show you just how easy it is to create a promotion and assign a coupon code to it. We'll also show you how you can set additional conditions so that the coupon is only available to use when the conditions are met.

Its important to note that this video was recorded before the official 2.0 release of Drupal Commerce, and so you may see some differences between this video and the current release. The documentation is also evolving over time.

Check Out Our High Five Drupal Web Series

Urban Hipster Commerce 2 Demo site

This video was created using the Urban Hipster Commerce 2 demo site. We've built this site to show the adaptability of the Drupal 8, Commerce 2 platform. Most of what you see is out-of-the-box functionality combined with expert configuration and theming.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media

Drupal modules in this demo

Contact us and learn more about our custom ecommerce solutions

Apr 02 2018
Apr 02

The development of Drupal Commerce 2 has come a long ways. We've had an official release for a while now and many of the sub-modules and add-on modules are coming along nicely. However, with all of the focus being on development, it can be hard to find good documentation for Drupal developers and Technical Managers who want to know more about the underlying systems and design.

Look no further!

Check Out Our High Five Drupal Web SeriesA while ago we contact Steve Oliver and asked him to help us out. Steve has been developing Drupal for a long time (at the time of writing, his Drupal.org profile is 12 years, 3 months old). He's contributed to all aspects of Drupal, including Commerce, and is quite active in IRC and Slack, providing support. We asked him if he would be interested in providing us with one document that contained everything you might want to know about Drupal Commerce from a technical perspective. We're talking about the systems, design patterns, concepts, core modules, contrib modules, and more. Steve blew us away, coming back to us with a 22 page document that has it all. We've taken all of that wonderful information and put it on our site for everyone to enjoy. It's a great starting point or general refresher.

So without further delay, take a look for yourself. I bet you'll be happy that you did!

View Drupal Commerce 2: A Comprehensive Overview

You may also like

Contact us and learn more about our custom ecommerce solutions

Mar 29 2018
Mar 29

Debugging a website (Drupal or otherwise) can be challenging. In this video, I go through a recent situation I faced where a client had reported their Drupal Commerce site completely slowing down every hour or so. I'll discuss the process I followed to figure out the problem and get it fixed.

Here's a breakdown of what happened

  1. I first used New Relic to see where the slowdown was happening. It could be a database issue, a PHP issue, maybe an external service call, who knows? New Relic can help determine this and I was able to determine that it was a database load issue that I was facing.
  2. Then I checked the system logs. Every hour or so, there were a lot of database insertions happening on a number of tables. It seemed really out of place and initially I couldn't narrow down why. I checked the logs and found that system cron was running at the exactly same time as the slowdown. It was also running for a similar amount of time that the slowdown was taking place. Normally, system cron only takes 1-20 seconds, but here it was running for about 3 minutes!
    Check Out Our High Five Drupal Web Series
  3. Now I can review cron's code to see what should be happening. I found that cron will generate a list of tables and flush out the expired cache. Generating the list is a very resource intensive process and on this particular site, the list being generated was very large and complicated. After the list is generated, it should get permanently cached in the database and therefor it doesn't become a resource issue later. However, for some reason it was being deleted every time. This ended up being the issue I needed to find out, what was deleting the list.
  4. Since I needed to determine why it was being deleted, I attached logging to the general function used for deleting cache. From here I was able to trace it back to Drush, but I still didn't understand why Drush would be deleting this list of tables. I had to dig further.
  5. Eventually, I discovered what was happening. It turned out that the version of Drush that was being used was doing a call to try and find the system logging. However, it couldn't find it and as a side effect it cleared the cached list that cron had generated. Cron, which ran every hour, then couldn't find the cached list and so need to build it again. It was a cycle that just kept repeating itself every hour. I now understood the problem!
  6. And now for the fix. I needed to know why Drush was doing this and if I could prevent it. I first looked around the Drush project issue queue on Drupal.og and talked to a Drush maintainer. I wanted to know if this was an issue others were also experiencing. It turns out that it WAS a known issue and that it was resolved in a later release! The version on the site that I was working on was a few major versions behind. I bought the site up to the latest release and the issue was fixed! Cron ran and took only about 5 seconds, the generated list of tables was being cached and staying cached, and Drush was not clearing it out.

A good debugging exercise

The bug ended up being one that was with Drush, and not the website. The result, through an odd chain of events, ended up bringing the clients site to a standstill nearly every hour. Now that it's resolved, I can look back and see that it was a good exercise in debugging. Even though I didn't need to build the fix myself, it still took a lot of time and understanding to arrive at the fix, and it was great to have it resolved. Hopefully, if you find this because of a similar issue, maybe I can save you a little bit of time.

We can help

If your experiencing issues with your Drupal Commerce website, the good news is that we can help! Contact us if you would like to discuss your options.

Contact us and learn more about our custom ecommerce solutions

Related Links

Mar 28 2018
Mar 28

Acro Media recently launched a demo ecommerce site called Urban Hipster that exhibits the incredible range of out-of-the-box functionality you get with Drupal Commerce 2 (check it out here). To make the demo even more amazing, we've also created a “Plus” version that shows you what's possible with a bit of extra work.

Some background

If you have an ecommerce business or have a product that you're trying to sell online, a product catalog could be just what you need. But if you produce your own product or you only have a few different products, a product showcase is actually a better way to demonstrate and sell your wares. It's like buying something on Amazon vs buying something on Apple: Amazon has an enormous list of products and all the pages look the same, whereas Apple has fully customized, unique pages for each item it sells.

UH Axe builder product page

When you go to buy the UH Axe on the demo, you'll bring up a unique UH Axe builder product page in the Apple style. The page talks about what the UH Axe is and what its purpose is, and then you're able to choose the type of handle you want, the handle length, how heavy the axe head should be, whether you want a sheath, etc. By the time you add it to your cart, it has become a completely unique product with all the variations that you've chosen. But it exists and is configured the same way that any other product would.

Check Out Our High Five Drupal Web SeriesIt's actually a very similar configuration as the White and Wood Chair example on the demo; it just looks completely different.

The functionality behind a lot of the extra content is a module called Paragraphs. It's similar to Panels (which a lot of people use), but a bit simpler and more streamlined. It doesn't have the same breadth of functionality, but it's easier to work with, and it lets you do all those customizations like deciding where you want to put it on the page and so on. It looks very custom, but it is surprisingly configurable through the back end.

(A note of caution: while it's mostly out-of-the-box functionality, some of the more complex design elements did require a bit of custom code. That’s why it’s on the “Plus” demo.)

Keep in mind that it's not uncommon to have both ways of viewing the product: a fancy customized page as well as a more standard catalog. People can get to the product through either route.

The bottom line

You can make awesome product pages through Drupal Commerce without a lot of effort.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media

Chat with us

If you'd like a personalized tour to discuss how Drupal Commerce fits into your ecommerce solution, give us a shout. We're happy to show and tell.

Contact Us

Mar 23 2018
Mar 23

Matthew Grasmick, grasmash on drupal.org and twitter.com, has written another inspiring post on documentation. As our CTO, Shawn McCabe has often said before, give Acro an easy button, and we’re 100% behind better documentation.

shawn-tweet-001

You can read Matthew’s original blog post for a more thorough and somewhat more roundabout explanation of his proposal. Below I’ve edited the heart of his post into 6 distinct proposals and responded to each one.

In general, I think we can all agree the documentation for Drupal has needed a breath of fresh air and is constant source of frustration for new and experienced users alike.

Proposal #1A: 

Elevate some docs to "official"

Elevate the Drupal 8 User Guide to the status of "Official Documentation"

The idea of creating a tiered documentation has been implemented partially already with the new documentation migration initiative. I think Matthew’s proposal goes one step further by wanting to introduce a new taxonomy term called “Official” for the “documentation page” and “documentation guide” that carries more weight. This idea is very drupally, as we currently do this exact same thing with marking modules as covered by the security policies. Providing a level of assurance that a certain module is produced by people who know what they’re doing and backed up by a team of specialists who voluntarily deal with logistics and other high-level situations.

In general, I think Matthew’s first proposal is a good one. We should implement it by “blessing” certain documentation pages and guides with a stamp of approval / official.

Proposal #1B: 

Prominently Feature "Official Docs"

Update the UX on Drupal.org to prominently feature the Official Documentation on major site entry points.

Along with the “stamp of approval” we would “red light / green light” these pages. Essentially flagging pages as “red light, unofficial” and “green light, official” would go a long way to signalling to the community at large that we take documentation seriously and only greenlight the best of the documentation.

To take Matthew’s proposal seriously, though, we would also need to implement new call-to-actions on non-documentation pages that point to the “official” pages. Maybe revamp the navigation of header and footer on drupal.org to clarify the difference between “official” documentation and “unofficial.”

Proposal #2: 

Adopt Best Practices

We should adopt the following as best practices for all Official Documentation:

This is the heart of the proposals. Matthew wants to constrain the carrot, that “official” stamp of approval, through a high-level checklist of best practices. Agreed. Below is a quick run down of the best practices Matthew is proposing.

  1. A governance process
  2. Use version control
  3. Use and follow documentation standards
  4. Write documentation in markdown format
  5. Use continuous integration process to generate and update screen shots of Drupal interfaces (Additional Info).

Contact us and learn more about our custom ecommerce solutions


Proposal #3: 

Integrate Semantic Versions

Let's integrate the semantic versions (8.5.x, 8.6.x, 9.0.x, etc.) into the Official Drupal.org Documentation UX, much in the way that Symfony and Laravel do.

This is absolutely critical but also a huge technical task (high risk). It means that official documentation would need to have it’s status coupled with minor releases of Drupal. The bigger our official documentation grows, the larger the task will be to maintain it adequately between minor versions. I think the manpower needed to make this idea happen might just burn out the individuals interested in stepping up to make it happen. If we, the Drupal community, can stomach the high risk nature of such a claim, then by all means, we need this.

Perhaps a way to reduce risk is to “evergreen” stamp certain pages, clarifying the fact that certain pages would not likely need updated between minor releases. We could also reach out to Symfony to ask how they manage minor releases and documentation.

Proposal #4: 

Lower Contribution Barrier

Lower the contribution barrier.

Decoupling the documentation contributors could impact the early adopters positively and long term users negatively. I think think the primary way to achieve the goal set out in this proposal is tightly coupled with the next proposal, by letting users of an open source git-powered platform make the edits, we essentially open source our documentation and our processes at the same time.

Check Out Our High Five Drupal Web SeriesI helped spearhead the move of Drupal Commerce’s documentation to the subdomain “docs” for the same reason. We have much better documentation because of this move. Anecdotally, for Drupal Commerce 1, we had maybe a handful of contributors to Drupal’s documentation. Now, for version 2, we have a myriad of contributors (51!!). Scaling documentation is hard, and this is one way to increase involvement.

Personally, I absolutely love this part of Matthew’s proposal. Professionally, I think the community is divided and people are picking sides. They are rightly asking: Why can't Drupal do this very content heavy thing better? Perhaps the answer is: Drupal can do this! We just have to accept this content lives in a version-controlled repo and not in the database.

Proposal #5: 

Host Docs on Repo

Use a repository that is hosted on GitHub (or GitLab) to manage the official Drupal documentation.

Agreed. I’m looking forward to learning how drupal.org will move to one of the git-based hosting services. I’d throw my hat into the github arena, but the initiative for drupal.org has already chosen bitbucket. So let’s use bitbucket.

Proposal #6: 

One Pager

Create a new class of documentation that we're lacking: "The Official One Pager."

Cool, love the idea. I think we could take or leave this. If I were proposing these changes to a client, I would mark this proposal as optional. This helps communicate that this proposal is a lower priority (unless the decision makers want to make it a higher priority) and helping the decision makers understand that this scope increase, while very beneficial, would impact the delivery and bottom line and could easily be moved on to a different delivery schedule.

Mar 22 2018
Mar 22

If you're familiar with the Urban Hipster Drupal Commerce demo site, you may have come across the UH+ Axe product page and wondered how it was built. Well, today I'll give you a bit of a technical demonstration on how it was created, what modules were used, and some of the custom work that went into it.

The Urban Hipster Drupal Commerce 2 demo site showcases what the Commerce 2 module can do basically out-of-the-box, with added theming and configuration. The product pages within the demo are setup in a way that rivals any other ecommerce platforms, and this suits most ecommerce store owners who want to show a whole bunch of different products in a familiar way.

However, there are cases where you might want a fully custom product page that is an experience all in itself. Apple is a good example of this. Viewing an iPhone on the Apple website isn't just a cookie-cutter product page, it's full of content and rich graphical elements. The page itself is a powerful marketing piece. The Apple website wasn't built on Drupal, but the flexibility that is the Drupal platform allows us to do much more than just the standard. The UH+ Axe "builder" type of product page was created to show just that, how you can push the boundaries with your Drupal Commerce product pages.

Visit Our Drupal Commerce 2 Demo Site

Related Links

Contact us and learn more about our custom ecommerce solutions

Mar 20 2018
Mar 20

There is now an easier way to install Drupal Commerce! And the best part is that you don't have to do any type of crazy spinup. It does involve a little bit of pseudo-programming, but if you know your way around a command line, you should be OK.

A Bit of Background

Commerce Kickstart logoThere's a Commerce Kickstart that exists for Drupal 7. It's Drupal Commerce and all the standard add-ons put together into a mock store. It shows you the power of Commerce and provides a bunch of examples. That can be helpful because Drupal is so modular and can be a bit daunting at first. You install just Commerce, but then if you want, say, gift cards, that's a separate module you need to add. There are all these little bits and pieces you have to get, and not all of them have intuitive names, and it can be very confusing. Commerce Kickstart was meant to solve that problem. Which it did, to some extent.

But the Drupal 7 Commerce Kickstart tried to be both a demo and a base for you to build from. It was primarily a demo, but lots of people used it as a base. The problem was that the demo was already so customized that many people ran into issues because they needed to delete or remove different things instead of starting from a clean setup.

A Better Way for Drupal 8

For Drupal 8, we decided to build two separate things: a demo, and a kickstart that would truly assist developers in getting started. It covers Drupal Commerce and all the normal add-ons you would typically add. With the original Commerce Kickstart, you got all the add-ons as a complete package, and you would have to remove whatever you didn't want. For Drupal 8, Commerce Kickstart is an actual builder.

And it's easy to use. You select a region, for instance. If you say that you're based in North America and only ship there, you're not going to see the options for integrating with the Royal Mail, because that's irrelevant to you. Then you go through the different sections. What do you need for payments? For shipping? You select all the options you want, and Commerce Kickstart uses Composer to build an install file for you.

Screenshot of the Commerce Kickstart Installer

Why Is This Cool?

For one thing, it saves you time. For another, it's a great introduction for people who aren't familiar with the Commerce ecosystem. That latter point is key, as that was the biggest hurdle Commerce Kickstart was trying to overcome. If you're new to Commerce and you don't know about all the add-on options, you might install Drupal Commerce and just get stuck. This gets you much farther in the process.

Check Out Our High Five Drupal Web Series

Demo Content On the Way

You will eventually be able to choose whether you want a clean install, or whether you want to use demo content. With example content, you could see what a nicely configured product looked like, for instance. Or see a sample tax item, or a sample shipping method. This could be great for people who aren't super technical or who just aren't familiar with Drupal Commerce conventions.

This functionality isn't out there yet, but it is coming down the pipe soon. You can see the status of the Demo Content module here.

We also have pre-set-up migrations. So it's becoming easy to migrate from an Ubercart site or a Commerce site on Drupal 7. Options for Magento and Shopify are also coming.

The Bottom Line

If you're building a Drupal Commerce website, use Commerce Kickstart 2.x Installer. It's the best ad easiest way to get Drupal Commerce installed with everything you need.

Try the Commerce Kickstart 2.x Installer

More from Acro Media

Chat with us

If you'd like a personalized tour to discuss how Drupal Commerce fits into your ecommerce solution, give us a shout. We're happy to show and tell.

Contact Us

Mar 13 2018
Mar 13

In a previous post, we covered the basics of the Urban Hipster demo that Acro Media put together to showcase the amazing out-of-the-box functionality available with Drupal Commerce 2. Let us now turn our attention to some of the "plus" features that are still possible with Drupal Commerce, but that aren't quite so easy right out of the box.

Recurring subscriptions

Recurring subscriptions are really two things: recurring payments (payments that happen on a schedule) and also licensing (getting access to something). Those two things usually have to go together. For instance: you automatically pay $10 every month (the recurring payment) and you get Netflix (the license).

But there are things to think about. What if a customer's credit card doesn't process because they cancelled it and got a new one? Do they stop getting access immediately? Is there a grace period? You might not want to cancel outright; you might want to try to encourage renewal. Drupal Commerce 2 can handle all of that.

Digital products

A digital product can be a download, or access to a site, or a key that activates a trial. In the Urban Hipster demo site, Sir Mix-a-Bit is the digital product. When you go through the sales funnel, you can choose from three different subscription lengths (one month, three months, six months). You're able to add it to your cart, and it displays exactly the same way as any other product. The difference is that once you purchase it, Drupal Commerce knows it's a digital good, so it's handled slightly differently.

Drupal Commerce has two default product types: physical and digital. It understands that it doesn't need shipping or dimension details for digital products, and there is no fulfillment necessary on the back end (although you can if you need it).

The recurring subscription functionality is not limited to digital products, by the way. It could be a donation, in which case there is no product. Or it could be amortized payments, where customers pay for a product over time.

How different is this from Commerce 1?

It's simpler and more streamlined. In Commerce 1, you needed a whole suite of modules because you had to have the card-on-file functionality and so on; now, you just add two modules and all the functionality is there. It's much easier to work with.

Check out the Sir Mix-A-Bit recurring subscription digital product page.

More from Acro Media

Check Out Our High Five Drupal Web Series

Chat with us

If you'd like a personalized tour to discuss how Drupal Commerce fits into your ecommerce solution, give us a shout. We're happy to show and tell.

Contact Us

Mar 08 2018
Mar 08

The Urban Hipster (UH) Drupal 8 Commerce 2 demo site has been gaining a lot of traction lately due to some fanfare and sweet promo videos. An increasing number of people are trying it out and viewing the code (which is publicly available on GitHub). It was time for a bit of a content overhaul. Here's what's changed.

Public Domain Images

All of the imagery and icons used in the site are now created by Acro Media or taken from Unsplash.com. If you're not aware of Unsplash, they provide high quality images that are freely available to use in any way, shape or form. It's a pretty awesome service and supports the open source philosophy we in the Drupal community share.

Product Page Galleries

The biggest feature we added in this release has to do with the product pages. Products can now display a gallery of images on the product page instead of just showing the current variation. I won't get into the details here, but you can watch the video for more information. Here's an example.

More "Full" Product Examples

The UH demo was originally intended to be a sales tool for our staff. Because of this, we added a bunch of products, but only a handful were fully filled out with attributes, sample reviews, related products, etc. The rest were just placeholders to fill out the store. Now that more people are looking at it, we felt we needed more (if not all) of the products to be more robust so that it didn't matter which product you happen to look at. This was something we did in this content overhaul. Almost every product now includes multiple images, related products, variation options, etc. Here's an example.

Configuration Cleanup

Since we were adding all new content anyway, it was a good opportunity to clean up some of the attributes, product types and product variation types that weren't really needed or not well represented. A lot of people are looking to this demo for examples of configuration, so it's important that we try to keep it as clean as possible.

And that's about it! Enjoy the video and the site updates.

Visit Our Drupal Commerce 2 Demo Site

Contact us and learn more about our custom ecommerce solutions

Related Links

Mar 07 2018
Mar 07

Background

It’s amazing how, just a couple of years ago, Drupal 8 was in its initial stages and was getting ready for its first stable release. But now, in 2018, we have stable releases and contributed module development on D8 has been progressing rapidly (as of this writing, we’re at nearly 5,000 D8 modules). CiviCRM, the best open source customer management tool, is one such community contributed integration that has been making such Drupal 8 strides.

When one of our clients needed their D7 CiviCRM ported over to their new D8 site, the prospects were not good: CiviCRM seemed to be lagging behind and the general online consensus was that things weren’t working, and boy are we glad the internet was wrong. The people behind the open-source content management framework has gotten its D8 version out and interestingly, most of it works beautifully. To our surprise (and relief!), the integration with the D8 site went incredibly well, of course, with a few kinks here and there. Those kinks are primarily due to the fact that Civi ships with its own Symfony version, which is a different version than what Drupal uses and that causes a conflict. For more information on it, read here.

We were able to do our Civi installation by following the steps mentioned in the wonderful blog by David Snopek. So, even though it was a bit complicated, it was definitely a learning experience for us and we thought we would share some of that knowledge here. In this blog we’ll be detailing how to install the richly packed Customer Relationship Management tool called CiviCRM on an existing Drupal 8 Commerce 2 ecommerce store. However, if you’d like to install a new Vanilla Drupal Commerce 8 site with CiviCRM already setup, we’d suggest you follow the easy-to-use instructions in Snopek’s blog.

Steps for Installing CiviCRM (Existing Installation)

In Drupal 8, installing CiviCRM is a bit more complicated than doing just a simple...

$ composer require drupal/civicrm

...like you would for other modules.

If you are waiting for a more standardized policy/process for installing Civi, it might not be in the near future, as the maintainers feel that we already have a process that works and they want to spent their time concentrating on getting the actual module more stable and fixing functional bugs. They also need to come together and agree upon what is the best way to organize the code and do its build. So, the process to get it installed on a D8 installation requires quite a few steps, but if you do it right, it will work.

Below we’ve tried to slim down those steps and made it a bit more concise, so that, essentially, all you would need to do is copy and paste the commands and be on your way to using a fully integrated CiviCRM on top of Drupal 8. It took us a couple of attempts to get it right when we first installed it as some of the steps were in different places and missing a step would mean you had to start over.

Installing CiviCRM on an existing D8 site

Prerequisites:

  • Composer - not just the tool, but your Drupal 8 site should be using composer to manage dependencies.
  • Bower - another package management tool. Yes, we are rich with package managers in this process.
  • Git - Source control (managing the code that runs your site) is an essential part of every build, but particularly, it’s a requirement of Composer, because it uses that source control to lock down which packages you are building on.

Note: as CiviCRM Core hasn’t been added to Packagist yet, we’ll be using David Snopek’s fork.

  1. In your D8 installation, ensure that your "Vendor" directory is outside of your document root. So your directory structure would be like this:

    your_d8_site_directory
    ├─ composer.json
    ├─ composer.lock
    ├─ vendor
    └─ web (your document root)

  2. Create a backup of your database.
  3. Go to our github repository, civicrm_d8_install_script, and copy the .env and civicrm_setup.sh files to your Drupal 8 project root directory.
  4. Run civicrm_setup.sh from your project root directory.
    bash ./civicrm_setup.shThis will download all the necessary modules and dependencies needed to install CiviCRM.
  5. Now, go to the "Extend" page (at /admin/modules) and install the CiviCRM module.
    1. This will create a civicrm.settings.php in your "/sites/default directory" which contains information about where the database is, etc.
    2. This will also create all the necessary tables in your Drupal database.
  6. Logout of Drupal and log back in again.
    1. Say what? Yeah, this is needed to sync your logged-in account with CiviCRM contacts.
  7. Get the Civi theme to apply by going to "/civicrm/admin/setting/url?reset=1" and set the CiviCRM Resource URL to "/libraries/civicrm" and click “Save”.

    Drupal 8 CiviCRM Resource URLs settings

  8. If everything worked correctly, you should see a CiviCRM link up at the top.

    Drupal 8 CiviCRM menu link

  9. Click on the CiviCRM link and you should be taken to a page like this:

    Drupal 8 CiviCRM Home screen

  10. You can also confirm that the module is actually working by typing in the email of the user that you are logged in as, and it should bring up the contact in CiviCRM. This means that contacts are automatically being synced between Drupal and CiviCRM.

    Drupal 8 CiviCRM contact search

And that is it, you can throw your hands up in the air to celebrate, as you’ve just installed CiviCRM in a matter of minutes.

More from Acro Media

Need a hand?

Would you like Quickbooks integrated into your Drupal Commerce website, but need a hand doing it? We've done it many times and would love to help.

Contact Acro Media Today!

Feb 27 2018
Feb 27

Background

When I was tasked with integrating QuickBooks accounting software with an existing Commerce 2.x installation, instead of asking questions a normal Drupal developer would, I was asking myself one question, what exactly is QuickBooks? Though I’m a bit embarrassed, I’m not going to shy away from admitting that I have not ever had an opportunity to explore or be exposed to the QuickBooks accounting software. So, doing an integration first required me to do some research on QuickBooks.

quickbooks-enterprise-logoFor the unaware (which I doubt there are any), QuickBooks is an accounting software used by businesses to manage sales and expenses and keep track of daily business transactions. It’s often used to invoice customers, pay bills, generate reports, and for tax filing purposes.While there are many applications like it, QuickBooks is thought of as one of the better options in its class. This fully-developed software takes care of all the different aspects of accounting. Thus, quite a few small to medium-scale businesses use QuickBooks because it makes life easy for them. However, if you’re doing business online, the process becomes a little trickier.

For a lot of customers who have an online store, a big pain for them is syncing their sale transactions like order, customer, tax and payment data into QuickBooks for bookkeeping. Basically, how do you transfer over your online transactions to QuickBooks?

We’ve had customers in the past who just assign a staff to sit and enter the days transactions, manually, at the end of each day. When you have hundreds of orders a day, especially, like during the holidays, this can be a huge headache. Not only are you wasting time and money by entering the duplicate data but you’re also exposing yourself to human errors. Because, at the end of the day, all this data is used for filing taxes, generating invoices, re-ordering products, etc., and any error in the data can wreak havoc.

So, out of this dilemma, quite a few Drupal modules came up which paved the way to integrating Commerce/Ubercart transactions into QuickBooks. But most of them are for Drupal 7. How do we integrate a Drupal 8 site running Commerce 2.x into QuickBooks? Essentially, that was my task. It was an excellent learning experience and I’m hoping that I can shed some light on the procedure for syncing your commerce data into QuickBooks.

Setup Drupal Commerce 2 to sync with QuickBooks Enterprise

Our job today will be trying to integrate a Drupal 8 Commerce 2 installation with QuickBooks Desktop. Before we start, I’d like to thank everyone who created the commerce_qb_webconnect module for all their awesome work and especially, Lucas Hedding (heddn), for supporting me in this endeavor.

Essentially, commerce_qb_webconnect, under the hood, uses migrate to export from D8 to a SOAP service destination. This also means that we have more flexibility, because any of the means to work and interact with a migration lets us interact and alter the exported details of a QuickBooks export as well.

The initial setup is as follows (I’m assuming that you already have been using QuickBooks Enterprise Desktop):

  1. Download and install QuickBooks Enterprise Desktop (we used the 2017 Retail version)
    • Note: QuickBooks Desktop, currently, only works on the Windows operating system. Also, be very careful about which version you are purchasing. Make sure you select the correct country version based on where you’re doing business because each version is fitted to a specific country and its tax system, and unfortunately, you cannot just switch countries in the software.
    • Setup all your accounting details on QuickBooks
    • Go to Payments and click on the PMT. Method select list and add the following payment methods depending on the payment gateways enabled on your site (these are the gateways on my test site):
      - Example
      - Default
  2. Download and install QuickBooks Web Connector 2.2.0.80
  3. Download the Drupal module commerce_qb_webconnect

    $ composer require drupal/commerce_qb_webconnectAt the time of this writing, the module has an 8.x-2.0 alpha version out and it contains most of the functionality required to get the commerce data into QuickBooks.

  4. Go to your Drupal installation
    • Note: If it's a local installation, make sure the url of the site starts with http://localhost (yes it has to have the words localhost, it’s hardcoded). Else, if it's a public site, you have to make sure it has an https certificate.
  5. Go to /admin/people and add the password for **quickbooks_user ** in Drupal and note that password as we’ll be using it in the Web Connector application.
  6. Go to /admin/commerce/config/commerce_quickbooks_enterprise/qwc and make sure your config looks like this:

    quickbooks-integration-01

  7. Now, Download QWC file (click that button).
  8. Open QuickBooks Web Connector and click on 'Add an application' and upload the .qwc file.
  9. Click 'Yes' to all the prompts and your file should be successfully added.
  10. Now, go to /admin/commerce/config/commerce_quickbooks_enterprise/quickbooksadmin and add the following configs and leave everything else as it is:

    quickbooks-integration-02

  11. Make sure to replace the Income, COGS, and Assets accounts with the appropriate ones matching your accounting information.

Syncing the Data with QuickBooks Enterprise

  1. Assuming you have create some products on your site, add a product to the cart, finish checkout and complete the order.
  2. Go to /admin/reports/dblog and notice you'll see messages like: "Added Invoice Order to export queue!"
  3. Now, go to the Web Connector and select the application we just uploaded with the .qwc file and hit 'Update Selected'. Make sure you enter the same password that we saved earlier (See setup step 5) for the password field.

    quickbooks-integration-03

  4. The order (invoice/sales receipt), product, payment, and customer will automatically be imported to your QuickBooks Desktop.
  5. Check QuickBooks Desktop to verify they have been added by clicking on 'Customer' and finding the name on the order there and then 'Recent Transactions' and then, Invoice/Sales Receipt. You can see the product in the 'Item' section. You can see the payment in the 'Payment' section by clicking on the 'Received From' select list and selecting the name on the order.

    quickbooks-integration-04-441335-edited-494921-edited

    And voila! If everything worked, you should see all the details from the new transaction synced in your QuickBooks Enterprise Desktop. The need for wasting time and money on manual entry and chances of user errors all vanish by integrating QuickBooks with your online Drupal 8 Commerce 2 store(s).

More from Acro Media

Need a hand?

Would you like QuickBooks integrated into your Drupal Commerce website, but need a hand doing it? We've done it many times and would love to help.

Contact Acro Media Today!

Feb 21 2018
Feb 21

Drupal Commerce 2 comes with a payment gateway system that allows for all kinds of payment methods to be added into your ecommerce site. Many of the standards you're used to seeing, Authorize.net, PayPal, Stripe, etc., are already good to go. On top of that, Commerce 2 has a fantastic API making it easy for developers to connect new gateway plugins.

What if you also want to allow your customers to pick up their order in-store? Or maybe you want to accept email money transfers or some other manual payment method. No worries! Drupal Commerce 2 is so adaptive that setting up these methods is also easy to do.

In this Acro Media Tech Talk video, we user our Urban Hipster Commerce 2 demo site to show how you can add, and manage, your payment gateways. 

Its important to note that this video was recorded before the official 2.0 release of Drupal Commerce, and so you may see a few differences between this video and the current release. The documentation is also evolving over time.

Urban Hipster Commerce 2 Demo site

This video was created using the Urban Hipster Commerce 2 demo site. We've built this site to show the adaptability of the Drupal 8, Commerce 2 platform. Most of what you see is out-of-the-box functionality combined with expert configuration and theming.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media
Drupal modules in this demo

Contact us and learn more about our custom ecommerce solutions

Feb 15 2018
Feb 15

In part one and two of this Acro Media Tech Talk video series, we covered how you set up a new product attribute and used rendered fields, in Drupal Commerce 2. Parts three and four then to set up a product variation type and a product type, both with custom fields. This completes our new product configuration.

In part five, the last of this series, we'll finally get to try out the new product! We'll add a product to the store as if we are a store administrators (end user) who is creating content. We'll try out all of the fields and properties we've configured, make a product, and view it on the site. Afterwards, we'll cover how an administrator can then go in and edit the product to make content changes.

This entire video series, parts one through five, show you how to set up a new product in Drupal Commerce 2, from start to finish. The video is captured using our Urban Hipster Commerce 2 demo site.

Its important to note that this video was recorded before the official 2.0 release of Drupal Commerce and so you may see a few small differences between this video and the official release now available.

Urban Hipster Commerce 2 Demo site

This video was created using the Urban Hipster Commerce 2 demo site. We've built this site to show the adaptability of the Drupal 8, Commerce 2 platform. Most of what you see is out-of-the-box functionality combined with expert configuration and theming.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media
Drupal modules used in this video

Contact us and learn more about our custom ecommerce solutions

Feb 13 2018
Feb 13

In part one and two of this Acro Media Tech Talk video series, we covered how you set up a new product attribute and used rendered fields, in Drupal Commerce 2. In part three we set up a product variation type with custom fields. 

In part four of this series, we'll complete our overall product configuration by setting up a product type. The product type defines the type of product that you're creating (i.e. hat, shirt, shoe). This is what your store administrators will see when they add a new product to their catalog. By default, a product type will consist of a title, body, and variation type. We'll add some additional custom fields for things like taxonomy reference (for categorization), short description, specifications, product review, etc. 

This entire video series, when complete, will show you how to set up a new product in Drupal Commerce 2, from start to finish. The video is captured using our Urban Hipster Commerce 2 demo site.

View part 5: How to Add and Modify Product Content

Its important to note that this video was recorded before the official 2.0 release of Drupal Commerce and so you may see a few small differences between this video and the official release now available.

Urban Hipster Commerce 2 Demo site

This video was created using the Urban Hipster Commerce 2 demo site. We've built this site to show the adaptability of the Drupal 8, Commerce 2 platform. Most of what you see is out-of-the-box functionality combined with expert configuration and theming.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media
Drupal modules used in this video

Contact us and learn more about our custom ecommerce solutions

Feb 06 2018
Feb 06

Because Drupal has so many options and so much flexibility, it can be a bit intimidating to newcomers. It doesn't show you examples of what it can do, and it kind of seems to do nothing by default. We realized people needed to be shown just how cool it really is, so we built a demo site to do just that.

The setup

We focused on making it only with out-of-the-box stuff, restricting ourselves to the features and functionality that exist within Drupal Commerce ecosystem itself. No custom code or modifications other than normal theming. That's right: Using only what's available out there now, we came up with a pretty amazing ecommerce site, if we do say so ourselves.

One caveat: we did make a custom theme for the demo, which you'll probably want to do anyway. There are the default Drupal themes, but most people are going to want to create a custom one. But that's a relatively simple task for a front-end developer; you don't need a back-end developer as well.

All the other setup can be done through basic Drupal UI point-and-click configuration. If you're somewhat savvy with configuring Drupal, you can do it all yourself in a very short time, and produce a truly phenomenal site.

Sometimes you need some guidance

Many people wonder how it could possibly be so easy. We've been getting a lot of questions like, "How did you build this big amazing catalog?" And the truth is we didn't actually do that much. We just enabled and configured the functionality that was already available. Drupal has this great Search API (and associated modules, Solr and Facets) that lets you do a ton of search customizations for anything that's stored in Drupal (blog articles, users, products, whatever), so all you have to do is tweak the configurations and you get this amazing catalog.

It's not that hard, but it's not that intuitive either; you just need a little guidance and direction. Sometimes just seeing an example is enough to make you realize how easy it can be. And that's exactly what the demo provides. It features a checkout, tax configurations, some shipping options, and even a sample payment system. You can click around and check it out without fear of breaking things, the database resets every night.

When you go to the demo site initially, a popup is preseted with a bunch of guided tours, but you are of course free to ignore that and just play around with it yourself. We're also releasing a bunch of tutorial videos to help you. We also have a resources page that shows a lot of the different features you can check out.

Plus, all the source code for the demo, including the custom theme, is available on GitHub. Within the repo is a full database dump so you can set up the entire thing yourself locally (see the README.md). AND one of the Commerce module maintainers, Bojan Živanović, is taking some of the content and configuration from the demo and turning it into an installable demo store module.

It's seriously awesome. Check it out!

Chat with us

If you'd like a personalized tour to discuss how Drupal Commerce fits into your omnichannel solution, give us a shout. We're happy to show and tell.

Contact Us

Feb 01 2018
Feb 01

In part one and two of this Acro Media Tech Talk video series, we covered how you set up a new product attribute and used rendered fields, in Drupal Commerce 2. A product attribute is used to define options that customers would select when buying a product, such as colour. Rendered fields let the customer see the actual colour instead of just seeing the colour name.

The overall product in Drupal Commerce 2 consists of a product type, a product variation type, and product attributes. The product type defines the type of product that you're creating (i.e. hat). The product variation type is contained within the product type and defines the individual variations of the product, based on attributes (i.e. large blue hat).  In part three of this series, we'll move away from attributes and show you how you can configure your product variations type. A product variation type will always have a title, sku and price, but we'll take it a step further and add in some custom fields.

This entire video series, when complete, will show you how to set up a new product in Drupal Commerce 2, from start to finish. The video is captured using our Urban Hipster Commerce 2 demo site.

View part 4: Set up a Product Type with Custom Fields

Its important to note that this video was recorded before the official 2.0 release of Drupal Commerce and so you may see a few small differences between this video and the official release now available.

Urban Hipster Commerce 2 Demo site

This video was created using the Urban Hipster Commerce 2 demo site. We've built this site to show the adaptability of the Drupal 8, Commerce 2 platform. Most of what you see is out-of-the-box functionality combined with expert configuration and theming.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media
Drupal modules used in this video

Contact us and learn more about our custom ecommerce solutions

Jan 30 2018
Jan 30

Sprint Date: January 11 & 12, 2018

I knew it was going to be a good few days of sprinting when the first of our team (Vicki Spagnolo) pinged the group in IRC saying she was getting started. You see, this was a virtual sprint and Vicki, being in New Zealand, starts well before the rest of us. The excitement she had going into the sprint was contagious.

Bright and early, we had our first stand-up call on Google Hangouts. We discussed all of the tasks for the next few days and dove right into working on code. A lot of the benefit of a sprint is having others around with focus to review code, so we did a lot of reviews of each other's work. Lots of issues made it from “Needs Review” to “Reviewed and Tested by the Community” (RTBC), and we had several Core committers hanging out to assist us. Special thanks to Gabor Hojtsoy, Lee Rowlands and Jess Myrbo for all their commits over the 2 day sprint.

Some progress stats. We went into the sprint with 3 Core migrate modules that weren't marked as stable. The Migrate API module went stable during the sprint. The Migrate Drupal User Interface module had one blocking issues resolved, leaving a single blocker remaining (UPDATE: this has been resolved, too). Finally, the big one, the Migrate Drupal module itself has only a few limited blockers remaining, all related to i18n/multilingual use cases.

A great benefit of sprinting with a group is that we had people available who can provide guidance and direction on architecture. With the group, we landed on a good plan of action for all the remaining i18n/multilingual issues. We opened the sprint and saw significant progress on the first step in that plan. It isn't RTBC yet, but it should go soon. After which, we have to leverage the building blocks it provides for the remaining i18n/multilingual issues.

Yes, it's down to just a few issues. Once they are wrapped up (and we saw great progress, so I'm hoping soon), all of Migrate Drupal will go stable. I also expect that the Migrate Drupal UI module will go stable at the same time.

Summary:

  • 5 Critical blockers across the entire Migrate sub-system.
  • Migrate API module went stable! Only two more to go.
  • 25 issues worked on; all with significant progress seen during the sprint.
  • 15 commits, of which 10 were serious improvements in API documentation.
  • Remaining release blockers can be found here. Filter issue priority to ‘critical’. Feel free to jump in and help!

Modules involved:

Special thanks:

A huge thanks to all the sprinter: GaborHojtsy (Gabor Hojtsy), heddn (Lucas Hedding), xjm (Jess Mybro), larowlan (Lee Rowlands), masipila (Markus Sipilä), maxocub (Maxime Turcotte), phenaproxima (Adam Hoenich), quietone (Vicki Spagnolo).

Another big thanks to all the corporate sponsors: Acquia, Acro Media and Savoir-Faire Linux.

Migrate your site!

Do you have an ecommerce site that you want to migrate to Drupal 8, but not sure how? We can help! Contact us to discuss your migration with one of our experts, no strings attached.

Contact Acro Media Today!

Jan 25 2018
Jan 25

In part one of this Acro Media Tech Talk video series, we covered how you set up a new product attribute in Drupal Commerce 2. A product attribute is used to define options that customers would select when buying a product. For example, a hat might have various sizes (small, medium, large) and colours available. These are attributes.

In part two, we'll now take a colour attribute that was set up in part one, but change it into a "rendered attribute". By default, the customer would select the option by seeing the name of the colour. A rendered attribute lets us instead show a colour swatch. So, instead of seeing the work "blue", the customer would see the actual colour. Cool!

This entire video series, when complete, will show you how to set up a new product in Drupal Commerce 2, from start to finish. The video is captured using our Urban Hipster Commerce 2 demo site.

View part 3: Set up a Product Variation Type with Custom Fields

Its important to note that this video was recorded before the official 2.0 release of Drupal Commerce and so you may see a few small differences between this video and the official release now available.

Urban Hipster Commerce 2 Demo site

This video was created using the Urban Hipster Commerce 2 demo site. We've built this site to show the adaptability of the Drupal 8, Commerce 2 platform. Most of what you see is out-of-the-box functionality combined with expert configuration and theming.

Visit Our Drupal Commerce 2 Demo Site

More from Acro Media
Drupal modules used in this video

Contact us and learn more about our custom ecommerce solutions

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