Developers

Product widget

Summary of product widget endpoints

List all available product widgets for the current site

GET /admin/api/product_widgets

Example response:

Status: 200 OK

[
  {
    "id": 1,
    "created_at": "2021-11-29T14:05:00.000Z",
    "updated_at": "2021-11-29T14:05:00.000Z",
    "content_settings": {
      "category_ids": [1, 2],
      "sort-order": "name-asc"
    },
    "design_settings": {
      "layout": "grid",
      "columns": 2,
      "item_width": 300,
      "item_height": 600,
      "mask_content_overflow": false,
      "mobile_columns": 1,
      "show_cart_button": true,
      "show_price": true,
      "show_product_filters": true,
      "product_count": 32
    },
    "url": "http://helloworld.voog.co/admin/api/product_widgets/1",
    "content": {
      "id": 1,
      "name": "body",
      "created_at": "2021-11-29T14:05:00.000Z",
      "updated_at": "2021-11-29T14:05:00.000Z",
      "position": 1,
      "url": "http://helloworld.voog.co/admin/api/pages/1/contents/1"
    },
    "parent": {
      "id": 1,
      "title": "Products",
      "created_at": "2021-11-29T14:05:00.000Z",
      "updated_at": "2021-11-29T14:05:00.000Z",
      "type": "page",
      "url": "http://helloworld.voog.co/admin/api/pages/1"
    }
  },
  {
    "id": 2,
    "created_at": "2021-11-29T14:10:00.000Z",
    "updated_at": "2021-11-29T14:10:00.000Z",
    "content_settings": {
      "category_ids": [1],
      "sort-order": "name-asc"
    },
    "design_settings": {
      "layout": "grid",
      "columns": 4,
      "item_width": 300,
      "item_height": 600,
      "mask_content_overflow": false,
      "mobile_columns": 1,
      "show_cart_button": false,
      "show_price": false,
      "show_product_filters": false,
      "product_count": 8
    },
    "url": "http://voog.voog.computer:3000/admin/api/product_widgets/2",
    "content": {
      "id": 2,
      "name": "body",
      "created_at": "2021-11-29T14:05:00.000Z",
      "updated_at": "2021-11-29T14:05:00.000Z",
      "position": 1,
      "url": "http://helloworld.voog.co/admin/api/pages/1/contents/2"
    },
    "parent": {
      "id": 1,
      "title": "Products",
      "created_at": "2021-11-29T14:05:00.000Z",
      "updated_at": "2021-11-29T14:05:00.000Z",
      "type": "page",
      "url": "http://helloworld.voog.co/admin/api/pages/1"
    }
  }
]

Parameters

  • per_page - elements per response (default: 50; maximum: 250).
  • page - requested page (default: 1).

Get data for a single product widget

GET /admin/api/product_widgets/1

Example request:

GET http://helloworld.voog.co/admin/api/product_widgets/2

Example response:

Status: 200 OK

{
  "id": 2,
  "created_at": "2021-11-29T14:10:00.000Z",
  "updated_at": "2021-11-29T14:10:00.000Z",
  "content_settings": {
    "category_ids": [1],
    "sort-order": "name-asc"
  },
  "design_settings": {
    "layout": "grid",
    "columns": 4,
    "item_width": 300,
    "item_height": 600,
    "mask_content_overflow": false,
    "mobile_columns": 1,
    "show_cart_button": false,
    "show_price": false,
    "show_product_filters": false,
    "product_count": 8
  },
  "url": "http://helloworld.voog.co/admin/api/product_widgets/2",
  "content": {
    "id": 2,
    "name": "body",
    "created_at": "2021-11-29T14:05:00.000Z",
    "updated_at": "2021-11-29T14:05:00.000Z",
    "position": 1,
    "url": "http://helloworld.voog.co/admin/api/pages/1/contents/2"
  },
  "parent": {
    "id": 1,
    "title": "Products",
    "created_at": "2021-11-29T14:05:00.000Z",
    "updated_at": "2021-11-29T14:05:00.000Z",
    "type": "page",
    "url": "http://helloworld.voog.co/admin/api/pages/1"
  }
}

Update attributes of a product widget

PUT /admin/api/product_widgets/1

Example request:

PUT http://helloworld.voog.co/admin/api/product_widgets/2

Example data:

{
  "product_widget": {
    "design_settings": {
      "product_count": 32,
      "show_product_filters": true
    },
    "content_settings": {
      "category_ids": [2, 3],
      "sort_order": "created_at-asc"
    }
  }
}

Example response:

Status: 200 OK

{
  "id": 2,
  "created_at": "2021-11-29T14:10:00.000Z",
  "updated_at": "2021-11-29T14:15:00.000Z",
  "content_settings": {
    "category_ids": [2, 3],
    "sort_order": "created_at-asc"
  },
  "design_settings": {
    "layout": "grid",
    "columns": 4,
    "item_width": 300,
    "item_height": 600,
    "mobile_columns": 1,
    "show_cart_button": false,
    "show_price": false,
    "show_product_filters": true,
    "product_count": 32
  },
  "url": "http://helloworld.voog.co/admin/api/product_widgets/2",
  "content": {
    "id": 2,
    "name": "body",
    "created_at": "2021-11-29T14:05:00.000Z",
    "updated_at": "2021-11-29T14:05:00.000Z",
    "position": 1,
    "url": "http://helloworld.voog.co/admin/api/pages/1/contents/2"
  },
  "parent": {
    "id": 1,
    "title": "Products",
    "created_at": "2021-11-29T14:05:00.000Z",
    "updated_at": "2021-11-29T14:05:00.000Z",
    "type": "page",
    "url": "http://helloworld.voog.co/admin/api/pages/1"
  }
}

Parameters

  • product_widget - product widget data.
    • content_settings - affect which products are filtered out to be included in this widget.
    • category_ids - List of product category ID-s to be included.
    • sort_order – The sorting for the widget (by price, by title etc).
      • name-asc – sorted by products' names alphabetically from A-Z (default)
      • name-desc - sorted by products' names alphabetically from Z-A
      • price_min-asc - sorted by the products' (minimum) price from smaller to higher
      • price_min-desc - sorted by the products' (minimum) price from higher to smaller
      • created_at-asc - sorted by the products' creation date from oldest to newest
      • created_at-desc - sorted by the products' creation date from newest to oldest
    • design_settings - affect how products are shown in this widget.
    • layout - style of products collection view.
      • catalogue – catalogue view
      • grid - grid view (default)
      • masonry – masonry view
      • list - list view
    • columns - number of columns to display, supported in grid layout.
    • item_width – width of the widget item in catalogue layout (in px)
    • item_height – height of the widget item in catalogue layout (in px)
    • mask_content_overflow – contain the content into the widget's container, supported in catalogue layout
    • mobile_columns - number of columns to display in mobile view, supported in grid layout.
    • show_cart_button – toggle showing "Add to cart" vs "Look closer".
    • show_price - pick whether to show price next to products.
    • show_product_filters – toggle showing the product filters (sorting and search).
    • product_count - number of products to display in product widget.