Product widget

Summary of product widget endpoints

• GET /admin/api/product_widgets - list all available product widgets for the current site.
• GET /admin/api/product_widgets/1 - get data for a single product widget.
• PUT /admin/api/product_widgets/1 - update attributes of a product widget.

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,
      "show_navigation_buttons": true,
      "mobile_columns": 1,
      "show_cart_button": true,
      "show_price": true,
      "show_product_filters": true,
      "product_count": 32,
      "show_discount_label": false,
      "show_discount_percentage": false,
      "show_product_alt_image": false,
      "show_product_modal": false
    },
    "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,
      "show_navigation_buttons": true,
      "mobile_columns": 1,
      "show_cart_button": false,
      "show_price": false,
      "show_product_filters": false,
      "product_count": 8,
      "show_discount_label": false,
      "show_discount_percentage": false,
      "show_product_alt_image": false,
      "show_product_modal": false
    },
    "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,
    "show_navigation_buttons": true,
    "mobile_columns": 1,
    "show_cart_button": false,
    "show_price": false,
    "show_product_filters": false,
    "product_count": 8,
    "show_discount_label": false,
    "show_discount_percentage": false,
    "show_product_alt_image": false,
    "show_product_modal": false
  },
  "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,
    "show_discount_label": false,
    "show_discount_percentage": false,
    "show_product_alt_image": false,
    "show_product_modal": false
  },
  "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.
  • show_navigation_buttons – toggle displaying the navigation buttons, 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.
  • show_discount_label – toggle showing label indicating that product is on sale.
  • show_discount_percentage – toggle displaying discount percentage on discount label.
  • show_product_alt_image – toggle showing alternative image on hover.
  • show_product_modal – toggle showing product modal on click.