Related products block
Last updated on
27 October 2017
This HowTo will show how to display related products on a product node page. The products to be shown can be selected by the store admin and can contain any mount of fields from just a Node Title to Full product with buy button.
You can view a demo here http://www.ubercartdemo.com/node/1 Look for the Related Products block on the right bar below the cart block.
- Download http://drupal.org/project/references and install References and Node References modules
- Go to admin/structure/types/manage/product/fields and add in a new field called Node Reference and call it say Related Products.
- Choose Select List for the widget type (or what ever widget you'd prefer).
- Where is says "Content types that can be referenced" select the UC content types. In a stock install it would be called Product. Save the field to be taken to the next page.
- Scroll down to the bottom where is says Number of values and choose "Unlimited" for Maximum number of values users can enter for this field.
That should be it for the References module setup.
Now to create a view.
- At /admin/structure/views click Add new view.
- Give it a name
- Choose Show "content type" of type "Product"
- Sorted by leave it as is.
- Un check the page view and select block at the bottom
- Display format choose fields.
- Click continue and edit.
- Click on the Advanced link to expand it.
- Under Contextual filters click add Content: Nid and click Add and configure contextual filter.
- Select Provide default value and select Content ID from URL Click apply.
- Now look for Relationship and click on Add
- Select Content: Related Products (field_related_products) Appears in: node:product. (if you named your field Related Products)
- Select Require this relationship and click add.
- Go to Filter criteria and remove all the filters.
- Go to Sort Criteria and remove all sort filters.
- Go to Fields and for testing purposes click on Content: Title.
- Look for Relationship and choose field_related_products. Click apply. It should now show (field_related_products) Content: Title
- Go to Fields and for testing purposes click on Content: Image.
- Look for Relationship and choose field_related_products. Click apply. It should now show (field_related_products) Content: Image
- Go to Fields and for testing purposes click on Content: Add to cart form.
- Look for Relationship and choose field_related_products. Click apply. It should now show (field_related_products) Product: Add to cart form
That's basically it for the view. You can go into the Grid setting and choose one column to show all products one under another. If not you can select any view type you want. Go to any of your products and edit one.
Scroll down till you see Related Products field and select the products you want to reference. Click save.
Now were gonna go into the block section at admin/structure/block
Scroll all the way down and look for View: Related Products and select the region you want it to appear in like say a side bar. Click on save.
So go back to your product and in the region where you put the block you should see a new Related Products block showing the nodes you selected on the Edit Node page. After that you can style the block any way you want. So that's the basic setup to get you going. You can do this with any node type you want to relate to.
https://www.drupal.org/docs/7/modules/ubercart/howtos/related-products-block