integration_documentation:customize_smart_suggest

integration_documentation:customize_smart_suggest

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
integration_documentation:customize_smart_suggest [2018/01/24 12:12]
dominik
integration_documentation:customize_smart_suggest [2021/02/22 09:02] (current)
florian
Line 1: Line 1:
-===== Smart Suggest ​customization ​=====+====== Smart Suggest ​styling======
  
-Here you can find everything you need to know about our Smart Suggest API and even can directly try it yourself!+===== Styling examples =====
  
 +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. \\ 
  
-{{tag>​smart_suggest}}+-----
  
-<​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>
  
 +-----
 +
 +=== Style all product placements text ===
 +
 +<code css>
 +.fl-autocomplete li.ui-menu-item[data-fl-product-placement] a div {
 +   /* Styles here.. */
 +}
 +</​code>​
 +
 +-----
 +
 +=== 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]]. ​