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 Last revision Both sides next revision | ||
integration_documentation:customize_smart_suggest [2018/02/01 18:12] dominik First implementation for product placement |
integration_documentation:customize_smart_suggest [2020/06/16 15:37] amil |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ===== Smart Suggest customization ===== | + | ====== Smart Suggest customization ====== |
- | ==== API ==== | + | <note important>This documentation article is not only available as API-specification. [[:smart_suggest_new|Click here]] to see the article as normal documentation.</note> |
+ | |||
+ | ===== API ===== | ||
Here you can find everything you need to know about our Smart Suggest API and even can directly try it yourself! | Here you can find everything you need to know about our Smart Suggest API and even can directly try it yourself! | ||
Line 9: | Line 11: | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
- | <title>FINDOLOGIC Service API</title> | + | <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/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"> | <link rel="stylesheet" href="/smart_suggest_documentation/styles/api-console-light-theme.css" type="text/css"> | ||
Line 33: | Line 35: | ||
</head> | </head> | ||
<body ng-app="ramlConsoleApp" ng-cloak> | <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-vendor.js"></script> |
<script src="/smart_suggest_documentation/node_modules/api-console/dist/scripts/api-console.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 src="/smart_suggest_documentation/node_modules/highlight.js/lib/highlight.js"></script> | ||
Line 47: | Line 49: | ||
{{tag>Smart_Suggest Autocomplete v2 v3}} | {{tag>Smart_Suggest Autocomplete v2 v3}} | ||
- | ==== Styling examples ==== | + | ===== Styling examples ===== |
The Smart Suggest styles can be overwritten by the CSS from the shop. \\ | 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. \\ | Here you can find some examples for style selectors in order to style basic stuff. \\ | ||
+ | |||
+ | ----- | ||
==== Selectors ==== | ==== Selectors ==== | ||
Line 63: | Line 67: | ||
} | } | ||
</code> | </code> | ||
+ | |||
+ | ----- | ||
=== Style all product placements text === | === Style all product placements text === | ||
Line 72: | Line 78: | ||
</code> | </code> | ||
+ | ----- | ||
=== Style a certain product placement === | === Style a certain product placement === | ||
Line 80: | Line 87: | ||
} | } | ||
</code> | </code> | ||
+ | |||
+ | ----- | ||
=== Add a badge to a certain product placement === | === Add a badge to a certain product placement === | ||
Line 88: | Line 97: | ||
} | } | ||
</code> | </code> | ||
+ | |||
+ | ----- | ||
==== Live examples ==== | ==== Live examples ==== | ||
The following examples will show the code and the result in a live shop visually. | The following examples will show the code and the result in a live shop visually. | ||
+ | |||
+ | ----- | ||
=== All product placements should have an fading background === | === All product placements should have an fading background === | ||
Line 101: | Line 114: | ||
/* Optional hover color change for product placements */ | /* Optional hover color change for product placements */ | ||
.fl-autocomplete li.ui-menu-item[data-fl-product-placement] a.ui-state-focus { | .fl-autocomplete li.ui-menu-item[data-fl-product-placement] a.ui-state-focus { | ||
- | background-color: #ffced7; | + | background-color: #ffced7; /* Light pink */ |
} | } | ||
</code> | </code> | ||
{{:integration_documentation:style_example.png|}} | {{: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]]. |