• Log in
  • Sign up
  • Contact Us

Discuss your project  
Blog • Flows | Products

Create related products with Flows

Last updated: 05 Jul 2019

This is a walkthrough on how to show the customer items that are related to the product they're viewing.

When creating a store it is useful to show the customer items that can be related to the product you are viewing. For example if you were to buy a pair of boxing gloves you may also want to buy a gum shield or some wraps for your hands.

By displaying these related products a customer can conveniently add them to a cart without having to search through your product catalogue. One way we can achieve this is by using the flexibility of Flows and the relationship field.

In this example, we are going to create a related-products feature for an online fishing and tackle store. You can follow along with this example and modify the calls to use products and images relevant to your store.

Prerequisites

  • Moltin account

Summary of steps required

  • Create products
  • Add product images
  • Create a relationship between images and products
  • Link products as related item:
    • Extend the existing resource, products with Flows
    • Create related item Field
    • Create Product relationship
  • Display related items

Get your access token

You will need to get a client_credentials access token to follow along making the API requests outlined below.

curl -X POST https://api.moltin.com/oauth/access_token \
     -d "client_id=XXXX" \
     -d "client_secret=XXXX" \
     -d "grant_type=client_credentials"

Create products

You can create your products via the API or the Moltin dashboard, and in fact, adding product and images via the dashboard is quick and simple; however, in this example, we will create our products via the API for consistency with the later calls, where the direct API communication is needed.

When purchasing a fishing rod you may want to purchase other accessories such as a reel, tripod, tackle box, etc. First, we will create our fishing rod product, and then add the products that will be related.

Fishing Rod:

curl -X "POST" https://api.moltin.com/v2/products \
  -H 'authorization: XXXX' \
  -H 'content-type: application/json' \
  -d '{
    "data": {
      "type": "product",
      "name" : "Penn Rampage II Surf Rod",
      "slug": "penn-rapage-II-surf-rod",
      "sku": "PRIISR",
      "manage_stock": true,
      "description": "PENN RAMPAGE II rods",
      "status" : "live",
      "commodity_type": "physical",
      "price": [
        { "amount": 9999, "currency": "GBP", "includes_tax": true}
      ]
    }
  }'
Next, we will add some accessories:

Fishing Reel:

curl -X POST https://api.moltin.com/v2/products \
  -H 'authorization: XXXX' \
  -H 'content-type: application/json' \
  -d '{
    "data": {
      "type": "product",
      "name" : "Shimano Ultegra XSD Reel, Size: 14000",
      "slug": "shimano-ultegra-xsd-reel-size-14000",
      "sku": "SUXSD-RS14000",
      "manage_stock": true,
      "description": "Product description",
      "status" : "live",
      "commodity_type": "physical",
      "price": [
        {   "amount": 9999, 
          "currency": "GBP", 
          "includes_tax": true
        }
      ]
    }
  }'

Tackle Box:

curl -X POST https://api.moltin.com/v2/products \
  -H 'authorization: XXXX' \
  -H 'content-type: application/json' \
  -d '{
    "data": {
      "type": "product",
      "name" : "Tackle Box Combo with Black Harness & Side Tray",
      "slug": "grandslam-hi-vis-seat-and-tackle-box-combo",
      "sku": "GHVS-TB",
      "manage_stock": true,
      "description": "Product description",
      "status" : "live",
      "commodity_type": "physical",
      "price": [
        { 
        "amount": 3999,
        "currency": "GBP",
        "includes_tax": true
        }
      ]
    }
  }'

Beach Shelter:

curl -X POST https://api.moltin.com/v2/products \
  -H 'authorization: XXXX' \
  -H 'content-type: application/json' \
  -d '{
    "data": {
      "type": "product",
      "name" : "Imax Storm Safe Beach Shelter",
      "slug": "imax-storm-safe-beach-shelter",
      "sku": "ISS-BS",
      "manage_stock": true,
      "description": "Product description",
      "status" : "live",
      "commodity_type": "physical",
      "price": [
        { 
        "amount": 7999,
        "currency": "GBP",
        "includes_tax": true
        }
      ]
    }
  }'

Once we have a list of products, we can then add their images.

Add images for products

We can add image files to our store via the files endpoint. We need to add files for each product by using the following call:

curl -X POST https://api.moltin.com/v2/files \
  -H 'authorization: XXXX' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -F file=@gslam.jpg \
  -F public=true

We can repeat this for every product image we need to upload, changing the file path for each call.

Main Images to Product Relationships

Now that we have our image files uploaded, we need to link them to their respective products, so that they can be included with our product calls for display.

The following code example shows how to create a relationship between a product and a main image file. The product ID is submitted via the URL, and the file ID via the request body.

If we do a GET request on our product, we can see that the relationship has been created in the call response.

curl -X POST https://api.moltin.com/v2/products/:product-id/relationships/main-image \
  -H 'authorization: XXXX' \
  -H 'content-type: application/json' \
  -d '{
    "data": {
      "type": "main_image",
      "id": "FILE-ID"
    }
  }'

We can now rinse and repeat for each of our products and images, until all the relationships are created, and that is our products set up!

Create Related-Items

We need to create the Flow functionality to link products together as related items.

Create Product Flow

As we are extending the functionality of our products resource, we need to create a products flow.

Also see: Extending an existing resource with Flows

curl -X POST https://api.moltin.com/v2/flows \
  -H 'authorization: XXXX' \
  -H 'content-type: application/json' \
  -d '{
    "data": {
      "type": "flow",
      "name": products",
      "slug": "products",
      "description": "creates a flow for related item",
      "enabled": true
    }
  }'

Create Related-Items Field

To store our related product IDs, we need to create a new field and relate it to our Flow.

curl -X POST https://api.moltin.com/v2/fields \
  -H 'authorization: XXXX' \
  -H 'content-type: application/json' \
  -d '{
    "data": {
      "type": "field",
      "name": "Related Items",
      "slug": "related-items",
      "description": "Items related to a given product",
      "required": false,
      "unique": false,
      "enabled": true,
      "field_type": "relationship",
        "relationships": {
          "flow": {
            "data": {
              "type": "flow",
              "id": "FLOW-ID"
              }
            }
        },
        "validation_rules": [{
          "type": "one-to-many",
         "to": "product"
          }]
      }
    }'

You may have noticed in the call we just made that there are some validation rules.

"validation_rules": [
  {
  "type": "one-to-many",
  "to": "product"
  }
]

As a product may have several or "many" related products, we need to specify that we want this relationship field to be a one-to-many relationship.

Create Product Relationships

Now that we have set up our flow and our relationship field, we can begin linking our products to create the related products data model.

We take the product we want to relate items to, in this case the Rampage fishing rod, and put it in the URL of the request.

We then specify which product we wish to relate to it in the request body, and repeat this for every product we wish to relate to the product specified in the request URL.

curl -X POST https://api.moltin.com/v2/products/:product-id/relationships/related-items \
  -H 'authorization: XXXX' \
  -H 'content-type: application/json' \
  -d '{
     "data": [{
        "type": "product",
        "id": "add95435-7d5e-4bb0-b498-5719c4965373"
        }]
      }'

With each request, you should see your related items being added to the response.

{
  "data": [
    {
      "type": "product",
      "id": "add95435-7d5e-4bb0-b498-5719c4965373"
    },
    {
      "type": "product",
      "id": "c4dc0875-ffed-44b2-8979-e331c7de0b72"
    },
    {
      "type": "product",
      "id": "91000863-337b-4482-a4a1-10866b5229c6"
    }
  ]
}

Once we have our products related, we can display them in our web applications.

If we do a GET request on our main product, we should see a response containing the product information and the IDs of the related products.

Display Related Items


const Moltin = moltin.gateway({
      client_id: 'xxxx'
    })

    new Vue({
      el: "#app",
      data() {
        return {
          product: {},
          relatedItems: []
        }
      },
      created() {
        this.fetchMoltinData({ id: '7ca12065-7155-4d4c-93fd-a978844adc5d' })
      },
      methods: {
        async fetchMoltinData({ id }) {
          const product = await this.fetchProduct({ id })

          this.product = product
          this.relatedItems = await this.fetchRelatedProducts({ product })
        },
        async fetchProduct({ id }) {
          const { data, included: { main_images } } = await Moltin.Products.With('main_image').Get(id)

          const imageId = data.relationships.main_image.data.id

          return {
              ...data,
              image: main_images.find(img => img.id === imageId).link.href
        }
        },
        fetchRelatedProducts({ product }) {
          const { relationships: { 'related-items': { data: products } } } = product

          return Promise.all(products.map(({ id }) => this.fetchProduct({ id })))
        }
      }
    })

Further reading