Drupal Commerce: revised related Products Guide using Views and Entity Reference

There's a great tutorial on drupal.org, written by Jim Bova, explaining how to create a "related products" block in Drupal Commerce.

In his tutorial, Jim is building the relations between the product nodes with Entity Reference moudle and is using Views PHP module in order to filter the correct relations based on the currently viewed node. While I was building a similar Views block based on this tutorial, I've found some improvements that are imho both cleaner and more performant, completely relinguishing the use of Views PHP module.

As I don't want to make that kind of major changes to his original article, I will copy and paste his tutorial here in our blog, adjust it to my approach and propose the changes to Jim afterwards:

Install the necessary modules

Creating the Reference Field

  1. Create your product types and product display content types. For this example, the product display content types is labeled "Product Display".
  2. Navigate to Structure -> Content Types -> Product Display -> Manage fields
  3. Add a new Entity Reference field. For this example, the field is labeled "Related Products", and named "pd_related_products". The widget type is Autocomplete.
  4. Choose the number of values. For this example, this is set to "Unlimited".
  5. Select the "Target type" of "Node".
  6. Select the target bundles. For this example, there is only one product display. Therefore, we highlight "Product Display".
  7. Optionally, set the sort options. For this example, the field is sorted by the Title property in ascending order.

Configure the "Related Products" field in the display

  1. Navigate to Structure -> Content Types -> Product Display -> Manage display
  2. For this example, the Related Products are shown in a block. Therefore, we hide this field from the display.

Add one or more Related Products to a Product Display

  1. If it hasn't already been done, add a few sample products, and the accompanying product displays.
  2. On at least one product display edit screen, choose the references to the product displays that will be listed as Related Products.

Initial View Creation

  1. Navigate to Structure -> Add new view
  2. Choose a view name. In this example, the name is "Related Products".
  3. Choose Show: "Content", of type "Product Display", sorted by "Newest first".
  4. Uncheck the box reading "Create a page"
  5. Check the box reading "Create a block".
  6. Give the block a title, for this example the title is "Related Products".
  7. Select the desired number of items to display and pager settings.
  8. Click "Continue & edit".

Configure Filter Criteria

This section differs from the original post:

  1. Expand the "Advanced" settings of the view configuration.
  2. In the "Relationships" heading, add a new relationship to "Entity Reference: Referencing entity" for your related product field
  3. In the "Contextual filters" heading, add a new contextual filter to "Content: Nid"
  4. In the opening dialog choose your relationship you've just created in step 2.
  5. In section "When the filter value is NOT available" of the dialog, choose "Provide default value" and further "Content ID from URL" as type

Configure Relationship from the Product Display to its Products

  1. Expand the "Advanced" settings of the view configuration.
  2. In the "Relationships" heading, add a new relationship to "Content: Referenced product".
  3. Give this reference an identifier, for this example "Product Reference" was used.
  4. Apply this setting. Fields from the product entity will now be available as fields in the view.

Configure the Format

  1. In the "Format" heading, choose Format: "Unformatted list", Show: "Fields".

Configure the Fields

In the "Fields" heading, add the following fields:

  1. Content: Nid
    Choose "Exclude from display" for this field. The Node ID is only needed for the filter settings above.
  2. Content: Title
  3. Commerce Product: Image
    Choose Relationship: "Product".
    Uncheck Create a label.
    Formatter: "Image"
    Image Style: [your desired image style]
    Link image to: "Content"
  4. Commerce Product: Price
    Choose Relationship: "Product".
    Formatter: Formatted amount
    Choose "Display the calculated sell price for the current user.".

Configure Aggregation Settings

I skipped this step because I didn't need id (maybe it's necessary when operating with Views PHP?)

Disable SQL Query Rewriting or set Permission

Due to issue #1276450: Views results empty for unprivileged user when using Relationship: Content: Referenced Product, you must either disable SQL Rewriting in the view, or allow all roles access to "View any [ProductType] Product" permission. To disable the SQL Rewriting, navigate to the Advanced -> Other -> Query Settings and check "Disable SQL Rewriting". If you choose to set the permission, then navigate to People -> Permissions and check all roles to grant access to "View any [ProductType] Product". Keep an eye on the issue to see if a better solution arises.

Save the View

Configure the Block

  1. Navigate to Structure -> Blocks.
  2. Locate the "View: Related Products" block.
  3. Choose the desired display region for this block.
  4. While this would be enough to show the block only on article pages, on which product relations are defined, I'd recommend to restrict the block's appearance in the "Visibility settings" area to content type "Product display" (or whatever your node type(s) are named that have such a product relationship). So Views doesn't have to query for related products on any other page, where definitely no results would appear.

Finally, you can navigate to your product display, that has related products to confirm everything works as desired.

 

Kommentare

In Step Configure Filter Criteria 4. In the opening dialog choose your relationship you've just created in step 2. i had to select "Do not use a Relationship" in order to make this view word.

Without having more context, it's hard to say, why this works for you, and the other way not. I guess, there must be some other differences in the structure of your View. If I'd change this relationship too, I wouldn't get a correct result

Thanks for the tutorial.

I had to turn aggregation on (Advance | Other | Use aggregation) to get it to work as I wanted otherwise I was getting one row for every product variation.

I have written the code for a shop with no product variations, so this scenario was not considered nor tested.
 

Thanks for this useful step by step guide for setting up this customized related products block ! As one of my precedent commenters stated, i also had to aggregate my result set so only one commerce product variation is kept for display. Within the aggregation settings on each field, i was able to set the lowest prices from all variants and highest rating. Good commerce ! :)

Thank you for you guide. I tried to replicate these steps and i still have the same problem as in original guide of Jim Bova. The title link is pointing to the product display but the image link is pointing to admin page for editing the product. Is it only my issue ?

Hi,

that guide definitely worked at the time of writing. I'm a little bit out of practice regarding Drupal 7 sites, as we build every new project on Drupal 8 for about 15 months now. You have at least these choices:

  1. use the rendered entity in any (custom) view mode instead of field-based output
  2. override the output of the Views field. instead of checking the "link to content" checkbox, override the output using tokens. something similar like: <a href="node/[nid]">[NAMEOFIMAGEFIELD]</a>
  3. if you prefer code based approach, implement a preprocessing function in your module/theme and set the link yourself. Like in 2., you should also uncheck the "link to content" before

I guess, you may prefer 2., as you've already have your field-based View setup and you're only missing this last piece

Neuen Kommentar schreiben