Wednesday, 13 February 2013

Inline Entity Form Module

http://vimeo.com/40933753 - I hope this transcript is copied and improved by others. http://lbt.me/Wyw is another page on the same subject, mentioned on the module download page.

http://commerceguys.com/blog/commerce-module-tuesday-inline-entity-form


Hi!. I'm Bojan and I work for Commerce Guys.  This is Commerce Module Tuesday. Today I will show you the  Inline Entity Form Module. [included in some commerce kickstart installations]
It provides a complex widget for reference fields that allows to modify and delete reference entities inline, as well as at
For Drupal Commerce, this means that it solves two important use-cases.
  1. First of all it unifies the management of product-displays and products, allowing you to handle both, from the product display, and edit pages.
  2. Secondly, it also provides more flexible line-item functionality, giving you the ability to modify custom fields that you attach to the line items.

The management of Product Displays and Products

[there is a comment below which might make sense of this]

Let me show you what I mean. I have here a Commerce Kickstart 1 installation [the one with Product One, Product Two, Product Three on the front and a standard Drupal admin menu] , and I have already downloaded and enabled the Inline Entity Form module - the Beta 1 version. [which is included in Commerce Kickstart 2 by default].

Lets imagine for a moment that we are building a website for a  company that sells T shirts.

I already went-ahead and created a new
Store > Products
 + Add product type
product type called T shirt. Aside from the usual fields like Image and Price, it also has the Color and Size fields, which point to the vocabularies which hold the allowed colours and sizes for a T shirt.

In e-commerce language, a product can have several variations. So a sample T shirt can have a new variation for each of the combinations of Color and Size, and each of those variations has a different SKU [part number]. So in Drupal Commerce this means that for each variation, you create a new Product, and then you create a new Product Display that references all those variations, and allows the user to select the correct one. So I have four sizes and four colours. I need to go to the add product page [clicks "create T shirt"]
Store > Products
 Create Product
   a basic product type.
 Create T shirt
 ...and create sixteen different products. Then I would need to go to the...
Products > Actions > Add a product
  Add Product Display
...page, and reference the sixteen products that I have created.

The product display field looks like this, at the bottom of the product page.
I can't find it on the page though. This is where, for me, the video is ambiguous and I do not know how to follow it in order to set-up shop, even after transcribing it carefully. It is better than average among the videos transcribed here, but I guess that the people making the videos do not know where they make sense or don't make sense, and that's why there is often a bit that's impossible to follow for some people watching.

Product
Choose the product(s) to display for sale on this node by SKY. Enter multiple SKUs using a comma separated list.


I'm going to go to Structure > Content Types > Product Display > Manage Fields (which is 2nd tab) &
you will see here (4th line) that we have a Product Reference Field. I am going to edit it.

The first thing is that I am going to change the label to Product Variations because it is slightly more user-friendly in my opinion. We are going to delete the help text because it is not going to be shown anyway.

And I am going to limit the product types that can be referenced to T Shirts alone,
Product types that can be referenced
Product
T-shirt
[using a tick box under the help text field labelled "product types that can be referenced" and un-ticking "Product"]
and save that [using the grey save button at the bottom of the page]
Now I am going to edit it again [using the edit tab to change screens],
Structure > Content types > Product display > Manage Fields > Product Variations

and change the widget to the Inline entity form.
CHANGE WIDGET
Widget type

Done.

So:
36'36" Let's go ahead and add a new product display now. [does so on screen]

You will see when you scroll-down that, instead of having a simple product reference field, I now have the complex vision that is provided by the inline product entity form. I have a product-variation inline-form opened by default. And that form contains three groups for all  the product information. So,
in the first group, I have product atributes,
in the second group I have the SKU, [types on in] the price, and then any other custom fields that might be added under 'attributes', and
in the third group I have variation image. [uploads image]
So I click
...and the first variation is there.
Let me go-ahead and add a few more.
[does so]
So: all of my variations are now here.
I have added all of them from the same screen: not leaving the product display add-product page, and not needing to know anything about Drupal Commerce architecture underneath.

If I need to, of course, I can delete a specific variation. For example this one
And of course I can edit the ones that I have already added
Clicking the edit button opens a form right below the row being edited, and allows me to change the inforation that I want to change. [changes a price on screen as an example].

So, I go ahead and save that [using a button at the bottom of the screen]

5'32" And you will see that it now works!

And I also want to make it possible for the user to reference multiple product types. In which case they can go back and enable the...
Product types that can be referenced
Product
 ...product as well. And now when I go back, [clicking to another browser tab] you will see that the widget has changed.


Instead of just having an "add variation" button, I also have a drop-down option to select the appropriate product type. If I click "select product" and click "add", I will get an add form for this product type. Which for example does not have any attribute fields. Different product types have different attributes, which are not shown in the table itself. Instead I have the variation title. And this one is automatically generated by the ???? form, by taking the node title and appending any attributes, if they exist.
6'30"

Of course, you can turn this functionality off if you want to. So...
I can, once again, go to the INLINE ENTITY FORM field set, and disable auto-generating of the product title.

INLINE ENTITY FORM: COMMERCE PRODUCT
Auto generate the product title

press save

So now [going back to the previous page] I now get an actual Variation Title field on the add and edit screens, allowing you full control over the product variation type.

7'00"

We currently don't have a UI (user interface) for detirmining which columns should be shown in the table. There is an open issue in the issue queues (on the Commerce web site discussion board). Feel free to comment on that. And that's it for managing products!


modify custom fields that you attach to the line items.

Lets take a look at various cases.


So: these T shirts might have the customer's name printed on them.

So I have added a custom field to the line items called Print Name which allows the customer to enter the name which they want to be printed on the T shirt. [this shows to customers next to color and size. We act like a customer fill it in with the name Bojan, then press order buttons to take this T shirt through the shopping cart]

Now, the problem occures when the store administrator looks at the orders
Store > Orders EDIT Tab
So he sees one and goes to edit it [an edit link on the line leads us to tab two of three], but he has no way to edit the print name field, and if he tries to add a new T-shirt, he can only select the product, but not actually fill-in the print-name-field or other custom fields that might be added.

One again, the inline entity form helps-out here. So I can go to
Store > Configuration > Order settings> MANAGE FIELDS tab
[looking at a table ith columns LABEL, NAME, FIELD] - you will see that I have a line-item reference here, with the line item editor widget. [the last two columns are WIDGET and OPERATIONS, which included EDIT and DELETE]. [Clicking on "edit" leads to another tabbed page - EDIT, FIELD SETTINGS, WIDGET TYPE, DELETE. We click the WIDGET TYPE tab and see a drop-down menu.
and change the widget to the Inline entity form.
CHANGE WIDGET
Widget type

And now when I go back to the same
Store > Orders
page, you will see that the widget has changed it. [the culumns for each line shown under the EDIT tab are
LABEL, UNIT PRICE, QUANTITY, TOTAL OPERATIONS, with

showing in the last column. I now have a proper edit button allowing me to change all the information on this line item, including the print name field. I can also add new items, and fill-in all the relevant information.

So: that's it for the inline entity form [module of included in Kickstart 2]. Feel free to provide feedback with the issue queue, Internet Relay Chat - and see you next week!.
 

Transcribed videos: -
[Drupal 7 / Ubercart video tutorial 7 of 10 showed how to use the default catalog module]
[Drupal 7 / Ubercart video tutorial 8 of 10 showed an alternative flexible method of showing a catalog]
[Drupal 7 / Ubercart video tutorial 9 of 10 shows how to use product kits, stock, and order states]
[Drupal 7 / Ubercart video tutorial 10 of 10 shows a simple checkout, reports, and suggests a theme]


2 comments:

  1. The video doesn't explain how to create and find a "product display" because it comes default with the kickstart installation.
    If you installed comemrce module you need to create a "product display" content type.
    here I found a good tutorial.
    http://drupalwatchdog.com/1/1/building-commerce-product-display

    Hope it could be helpful
    Bye
    Fabio

    ReplyDelete
  2. quote:
    3. Add a product display content type.

    From the Administration » Structure » Content types page,
    [or >Content >structure > content types on the new admin layout]

    click the Add content type link. Give it the name Product display and a simple description such as, “Use product displays to present an Add to Cart form for products to your customers.” The name of this content type intentionally reinforces that this is purely a point of display for a product, not the product definition itself. Customize the other content type settings as you see fit and submit the form using the Save and add fields button.

    ReplyDelete