Drupal Commerce is a set of modules in Drupal 7 that are used to increase e-commerce flexibility when using Drupal. Common features including personalized checkout forms and shopping carts; dynamic product displays and pricing as well as a powerful administrative back end courtesy of Views and Rules-contributed modules.

Very few assumptions concerning your business regulations are made within Drupal Commerce core modules, which make it much easier to create tailor-fitting applications. Almost all aspects of the front and back end are customizable; from admin interfaces and checkout pages to shopping carts and product displays. In addition, rules can be applied to automatically configure automated order processing, taxes, discounts and payment methods among others.

Just like in Drupal 7, Commerce modules’ versatility makes them  ideal for a host of e-commerce endeavors, but with it comes a new level of complexity users may find challenging. While project roadmaps include improvements to make friendlier user interfaces, the current complexity makes it necessary to shed light on important aspects of the configuration process.

Product Display Setup

Configuration of the product display when creating new e-commerce sites in Drupal 7 is one of the most complex aspects of the process. Each product represents an entity that has inbuilt characteristics, like product ID, SKU, default price fields and title properties. Each of these can be further customized to include extra fields and types.

Products can be seamlessly added within the admin interface, but this does not automatically translate to view-ability for your front end users. Drupal Commerce has separated the display and definition aspects of e-commerce products, which means that you can construct custom displays using tools provided within the project itself.

The same separation allows you to display one product in multiple places without having to think about data synchronization for all the displays; which is a problem across multi-domain stores and multi-lingual sites. You can also build your display by simply referencing multiple products, or display product information directly using Views and Panels and similar methods.

In Drupal e-commerce, the easiest product display to build is one selling one product or product group e.g. the same dress in different sizes. For this to work, a product display with product reference fields needs to be created. Here’s how to go about it:

1.   Commerce module download and installation<

In order to gain access to Drupal Commerce, you must already have installed Drupal 7 along with a series of dependent modules, which include Rules 2, Views 3. Addressfield. Chaos tool Suite and Entity API. You can get links to the latest Commerce module versions as well as their dependencies here. Every module in the Commerce package should be downloaded and installed in order to proceed.

2.   Product creation

You can use the Product UI module which creates a simple product type at the time of installation, which can be used to create your own product for sales purposes. To gain access, go to Administration>>Store>>Products page and then select the option to Add a Product. Assign an SKU, title and price to your test product and then save the form.

If you are familiar with Field UI, follow the same procedure to add all the other products you have, as well as include additional fields for specific details on product types or to include product images.

3.   Product display content type addition

Go to Administration>>Structure>>Content Types and then click on the option to Add Content Type. You can give it a simple name like “Product Display” and include a brief description such as “Uses product displays to give Add to Cart forms to your customers for each product”. Your content type’s name should deliberately emphasize that you are merely creating a place of display for the product; it is not the actual product definition. You can customize your content type settings according to your needs and then use the SaveandAdd Fieldbuttons to submit the form.

4.   Product Reference field addition

Move to the Manage Fields tab to view the field management interface, where you can customize your display’s content type further. By default, the Title and Body fields are usually listed, then you can use the Add New Field row near the bottom to insert a product reference field.  Use “Product” as your label and also the name, then enter “Product Reference” in the field type and “Select List” for your widget.

Use the Save button to submit the form and move on to the field settings form. You  don’t need to make any alterations in the succeeding settings forms, so just submit them the way they are and move along to step 5.

5.   Field display settings configuration

Move to the Manage Display tab in order to specify configurations for the display of your content types. Take note of two important elements: One, there will be extra fields listed in the Manage Display tab which were not listed in the Manage Fields tab, specifically Product Price as well as any custom fields you added to the Product Type.

You can use the field display settings on product type to display fields from referenced products together with fields from the actual settings by choosing the formatter and label settings on referencing multiple products, fields displaying on any page will be automatically updated to fit the product that has been chosen on the Add to Cart form by a user. As such, you can easily change your product fields like images and pricing without having to generate custom JavaScript.

Second, note that the display formatter of your Add to Cart form also includes a few settings to modify the quantity widget’s visibility, as well as the default quantity setting on the Add to Cart form.

Conclusion: Product display creation

Having all your configuration settings in place, navigate back to Administration>>Content and click on the Add Content option to add to your product display. Ensure that the display title corresponds with the product title, and then include a complete product description in the Body section.

Once the product has been saved, it should be accessible on the Add to Cart form, where you can complete the purchase and make your first-ever sale.

Author Bio

Jack Dawson is a web developer and UI/UX specialist at http://BigDropInc.com/. He works at a design, branding and marketing firm, having founded the same firm 9 years ago. He likes to share knowledge and points of view with other developers and consumers on platforms.

Tags: , ,

Comments are closed.