integration_documentation:customize_smart_suggest
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
integration_documentation:customize_smart_suggest [2018/02/01 16:41] dominik |
integration_documentation:customize_smart_suggest [2021/02/22 09:02] (current) florian |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Smart Suggest customization ===== | + | ====== Smart Suggest styling====== |
| - | ==== API ==== | + | ===== Styling examples ===== |
| - | Here you can find everything you need to know about our Smart Suggest API and even can directly try it yourself! | + | The Smart Suggest styles can be overwritten by the CSS from the shop. \\ |
| + | Here you can find some examples for style selectors in order to style basic stuff. \\ | ||
| + | ----- | ||
| - | <html> | + | ==== Selectors ==== |
| - | <head> | + | |
| - | <meta charset="utf-8"> | + | |
| - | <title>FINDOLOGIC Service API</title> | + | |
| - | <link rel="stylesheet" href="/smart_suggest_documentation/node_modules/highlight.js/styles/darcula.css" type="text/css"> | + | |
| - | <link rel="stylesheet" href="/smart_suggest_documentation/styles/api-console-light-theme.css" type="text/css"> | + | |
| - | <style> | + | |
| - | .raml-console-meta-button-group { | + | |
| - | display: none; | + | |
| - | } | + | |
| - | label[for^="autocompleteblocks["] { | + | The following selectors give a general hint in how to style product placements in the Smart Suggest. |
| - | display: none; | + | |
| - | } | + | |
| - | label[for="autocompleteblocks[1]"] { | + | |
| - | display: block; | + | |
| - | } | + | |
| - | label[for^="group["] { | + | === Style all product placements === |
| - | display: none; | + | |
| - | } | + | |
| - | label[for="group[1]"] { | + | |
| - | display: block; | + | |
| - | } | + | |
| - | </style> | + | |
| - | </head> | + | |
| - | <body ng-app="ramlConsoleApp" ng-cloak> | + | |
| - | <script src="/smart_suggest_documentation/node_modules/api-console/dist/scripts/api-console-vendor.min.js"></script> | + | |
| - | <script src="/smart_suggest_documentation/node_modules/api-console/dist/scripts/api-console.js"></script> | + | |
| - | <script src="/smart_suggest_documentation/node_modules/highlight.js/lib/highlight.js"></script> | + | |
| - | <script> | + | |
| - | $.noConflict(); | + | |
| - | </script> | + | |
| - | <raml-console-loader src="/smart_suggest_documentation/api.raml"> | + | <code css> |
| - | </body> | + | .fl-autocomplete li.ui-menu-item[data-fl-product-placement] { |
| - | </html> | + | /* Styles here.. */ |
| + | } | ||
| + | </code> | ||
| + | ----- | ||
| - | {{tag>Smart_Suggest Autocomplete v2 v3}} | + | === Style all product placements text === |
| - | ==== Customize styling ==== | + | <code css> |
| + | .fl-autocomplete li.ui-menu-item[data-fl-product-placement] a div { | ||
| + | /* Styles here.. */ | ||
| + | } | ||
| + | </code> | ||
| - | The Smart Suggest can be styled via CSS from the shop itself. Styles can be overwritten. | + | ----- |
| + | |||
| + | === Style a certain product placement === | ||
| + | |||
| + | <code css> | ||
| + | .fl-autocomplete li.ui-menu-item[data-fl-product-placement="New shoe"] a div { | ||
| + | /* Styles here.. */ | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | ----- | ||
| + | |||
| + | === Add a badge to a certain product placement === | ||
| + | |||
| + | <code css> | ||
| + | .fl-autocomplete li.ui-menu-item[data-fl-product-placement="New"] a div::after { | ||
| + | /* Styles here.. */ | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | ----- | ||
| + | |||
| + | ==== Live examples ==== | ||
| + | |||
| + | The following examples will show the code and the result in a live shop visually. | ||
| + | |||
| + | ----- | ||
| + | |||
| + | === All product placements should have an fading background === | ||
| + | |||
| + | <code css> | ||
| + | .fl-autocomplete li.ui-menu-item[data-fl-product-placement] { | ||
| + | background: linear-gradient(to right, #ffffff, #ffc0cb); /* white to pink */ | ||
| + | } | ||
| + | /* Optional hover color change for product placements */ | ||
| + | .fl-autocomplete li.ui-menu-item[data-fl-product-placement] a.ui-state-focus { | ||
| + | background-color: #ffced7; /* Light pink */ | ||
| + | } | ||
| + | </code> | ||
| + | {{:integration_documentation:style_example.png|}} | ||
| + | |||
| + | ----- | ||
| + | |||
| + | === Give all products from the product placement "New" a badge === | ||
| + | |||
| + | <code css> | ||
| + | /* Product placement "New" */ | ||
| + | .fl-autocomplete li.ui-menu-item[data-fl-product-placement="New"] a div.col.label::after { | ||
| + | content: "New"; /* Badge name */ | ||
| + | float: right; | ||
| + | transform: rotate(-15deg); /* Rotation */ | ||
| + | font-weight: 700; /* Bold text */ | ||
| + | line-height: 1; | ||
| + | color: #fff; /* Text color white */ | ||
| + | text-align: center; | ||
| + | white-space: nowrap; | ||
| + | vertical-align: baseline; | ||
| + | border-radius: .25em; | ||
| + | background-color: #ff0000; /* Badge color red */ | ||
| + | padding: 4px; | ||
| + | margin: 1em; /* Horizontal center */ | ||
| + | } | ||
| + | </code> | ||
| + | {{:integration_documentation:new_badge.png|}} | ||
| + | |||
| + | ----- | ||
| + | |||
| + | If you need any help with stylings, please contact our [[support@findologic.com|technical support]]. | ||