Models
Product thumbnail model
| Index | Type | Buttstock | Description |
|---|---|---|---|
| stock | Array | { "text": "In stock", "color": "green" } |
Text on mіnіatyurі product according to the visibility of the product. |
| button_cart | boolean | true | false | Show "add to cart" button. |
| stickers | Array | [ { "text": "text", " image": "https://site.com/ex.png", "color": "danger" }, { "text": "text2", " image": "https://site.com/ex2.png", "color": "success" } ] |
Vіdobrazhaє stickers to the product, like stench. They are rendered like images and text. |
| product_id | string | "331" | Product ID |
| thumb | string | "https://site.com/ex.png" | Signed on the head of the image |
| images | Array | [ "https://site.com/ex3.png", "https://site.com/ex2.png" ] |
Additional images |
| name | String | "Iphone 99" | Product name |
| model | String | "Iphone 99" | The product model |
| price | String | "$900" | The base cost of the product |
| special | String | false | "$600" | Promotional price |
| rating | number | false | 4 | Product rating |
Module model
Below is a general model of ocionic modules that can be displayed on any page using the API
| Index | Type | Example | Description |
|---|---|---|---|
| heading_title | String | "Recommended products" | The title of the module is displayed in the program |
| config | Array | { "module": "RelatedPath", "links": [ { "type": "internal", "url": "/catalog/custom-page/blog_category/69", "description": "..", "title": "News (10)" }, { "type": "internal", "url": "/catalog/custom-page/blog_category/70", "description": "..", "title": "Reviews (4)" } ], "template": "list", "heading_title": "Categories", "title": "Categories" } |
Module configuration array. The "module" parameter is required and must match the name of the ocionic component. Other parameters are individual for each component (see below) |
Models for application modules
RelatedProducts
The module displays a list of products.
| Index | Type | Example | Description |
|---|---|---|---|
| module | String | "RelatedProducts" | |
| path | String | false | "/product-list/category/96" | Internal link of the program to get a list of all products of the group. |
| heading_title | String | false | "Popular Laptops" | Module title |
| template | String | "slideshow" |
Module output template. Valid default values are:
slideshow grid list |
| productsPerRow | String | false | "3.5" | Number of slides on one screen. Only used if the "slideshow" template is selected |
| products | Array | [] | An array of product thumbnails. |
ViewedProducts
The module displays a list of recently viewed products.
| Index | Type | Example | Description |
|---|---|---|---|
| module | String | "ViewedProducts" | |
| heading_title | String | false | "Popular Laptops" | Module title |
| template | String | "slideshow" |
Module output template. Valid default values are:
slideshow grid list |
| productsPerRow | String | false | "3.5" | Number of slides on one screen. Only used if the "slideshow" template is selected |
CustomHtml
Outputs custom HTML
| Index | Type | Example | Description |
|---|---|---|---|
| module | String | "CustomHtml" | |
| heading_title | String | false | "Our benefits" | Module title |
| html | String | "<div>Hello world</div>" | HTML code. |
RelatedPath
Displays a list of links in various templates
| Index | Type | Example | Description |
|---|---|---|---|
| module | String | "RelatedPath" | |
| heading_title | String | false | "Manufacturers List" | Module title |
| links | Array | { "links": [ { "type": "internal", "url": "/product-list/category/32", "title": "Laptops", "subtitle": "Subtitle", "description": "Any description", "image":"https://site.com/image/cachewebp/catalog/1249289_main-200x50.webp" }, { "type": "internal", "url": "/tabs/tab2", "title": "Personal cabinet", "subtitle": "Subtitle", "description": "Any description", "image":"https://site.com/image/cachewebp/catalog/175435404-200x50.webp" } ] } |
An array of references. Valid values of the type parameter:
internal - internal link of the program, external - external link to a third-party site, disabled - the link click event is disabled |
| template | String | "list" |
Module output template. Valid values:
grid - grid, card - full width cards, list - a vertical list of links slideshow - slideshow horizontal - a horizontal list of links |
| slideOpts | Array | { "slideOpts": { "slidesPerView": 2, "slidesPerGroup": 1, "pager": true } } |
Slider configuration for slideshow template |
Slideshow
| Index | Type | Example | Description |
|---|---|---|---|
| module | String | "Slideshow" | |
| images | Array | "images": [ { "path": "1", "path_id": "https://demo.site.com", "image":"https://tiptop.uno/image/cachewebp/catalog/demo/banners/Apple2-600x400.webp" }, { "path": "2", "path_id": "/tabs/tab2", "image":"https://tiptop.uno/image/cachewebp/catalog/demo/banners/Apple-600x400.webp" } ] |
List of slides. The path parameter is responsible for the type of link (0 – disabled, 1 – external, 2 – internal). The path_id parameter is responsible for the url link. |
Search
Displays a product search widget on the site.
| Index | Type | Example | Description |
|---|---|---|---|
| module | String | "Search" | |
| heading_title | String | "Find product" | Placeholder |
QuickPath
The module displays a widget for quick surfing of various product lists. Documentation is being developed.