Commerce Module Tuesday: Commerce Product Add-on
Welcome to another Commerce Module Tuesday! Today we are looking at Commerce Product Add-on, maintained by Matt Robison who is the Vice President of Louisville Web Group. While I was at Drupalcon Portland, I was approached by two different individuals looking to do something that this modules makes very easy: Add a product as a checkbox on the add-to-cart form for another product.
How simple is it? Fantastically simple. All you need to do is add an entity reference field, target the product type you want to have as “add ons” and boom! you have a set of products that are displaying within the add-to-cart form. Matt has done a great job at making something so powerful exactly that easy. Make a donation product for your favorite charity and allow your users to choose a donation before adding to cart. Or perhaps you are selling event tickets and would like to add on an inexpensive training the day before.
Enabling the module
Getting this module up and running with a bare-bones Drupal Commerce install was as easy as enabling the module and making sure you have the entityreference field installed (most sites will have this already installed). There isn’t a configuration screen for the module in general, but it does enhance the entity reference field and adds a display format for “addons”
Adding a Product Type
Go to admin/commerce/products/types/add (standard Commerce), or admin/commerce/config/product-variation-types/add (Commerce Kickstart 2). Call it “Donations” (or anything you want). Add two products with different prices. admin/commerce/products/add
Adding a Field
Go to the product type (not product display) that you want to have access to addons. Choose to add an “Entity Reference” field. You’ll want to change “node” to “Commerce Product”. Pick the bundle “Donations” or whatever you chose to call it.
Edit your product
Edit your product to reference your addons, and then view your final product and the checkboxes. Note that the design could definitely use some CSS love to make it look a little more fancy.
Changing the Display Format
Let’s simplify the experience a bit by tweaking the display of our addons and our products that display them. View the final result by going back to your product.
Comments or thoughts on what Commerce Module we should feature in next week’s Commerce Module Tuesday? Let us know in the comments!
Comments
Brilliant module, have been
Brilliant module, have been avoiding this functionality on a current build until found this. Useful video as ever (you were right, I missed the check-box on the field config haha) have you run into any problem with site search? I've raised the ticket on Drupal.org but was curious to see how you'd found it.
Thanks again,
Zach
I can't seem to get the
I can't seem to get the products to populate the list in the field. I am using kickstart 2.0 and I was never prompted by the "commerce products add-on settings." What am I overlooking?
You're adding an entity
You're adding an entity reference field to a product type, under your store settings?
Josh, do you know how to hide
Josh, do you know how to hide the label for the Title field? I can't find a way of doing this in manage display for the add-on.
Not sure what you're asking
Not sure what you're asking about. I'll ping Matt (the author of the module) on Twitter, see if we can get him to weigh in. Feel free to reply with more details.
You cannot completely hide
You cannot completely hide the label from the UI. This is simply a limitation of the product title field in Commerce under Manage Display. You just have to do it via CSS.
Having similar issues trying to use same Product Type for add-on
I followed the video with one exception: we would -prefer- to use the same Product Type for both the parent and the 'add-ons' if possible. But perhaps this creates a recursive problem?
1. On the Product Edit form, instead of getting a multi-select list to assign add-on products to the parent, I get a big 'Add New Product' button.
2. I tried with another field name and it 'sorta' worked... ie. the multi-select box appeared in the Product Edit form so I could assign 'add-ons' to the parent, but on the Product display, I get the field label and the add-on title but no checkbox.
Any ideas what could be going wrong?
Install this module for Kickstart2 is difficult
Where can we find the mentioned screencast for applying this module to Kickstart2?
The terminology between the KS 1 and KS 2 is different and hard to follow in this example using KS2.
KS2 has Variation Types under Products, Variation Types under Store Settings, and Content Types under Content,
Using the Kickstart 2 the admin menu doesn't follow the same naming conventions as KS 1 and it is confusing.
Would you make a KS2 screen cast applying this module, or if there is one refer us to it?
Thank you