{"type":"doc","content":[{"type":"paragraph","content":[{"text":"In order to support a structured way to manage a/b testing and personalization, we highly recommend integrating Boxalino’s JSON Styles in your templates.","type":"text"}]},{"type":"paragraph","content":[{"text":"What this means is, in addition to the template content to be provided by Boxalino Narrative API, the selection of the style works simply with an additional parameter(s) of the template.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"This will enable a structured way to manage many variations of the styles of your templates without “opening pandora’s box” and let the administrator type any style they want (and possibly break or at least make unsustainable your front-end over time).","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"What are JSON Styles?","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Let’s start with dynamic content but no JSON Styles","type":"text"}]},{"type":"paragraph","content":[{"text":"Let’s imagine you integrated the title of the page with a Boxalino Narrative Layout Block, like here:","type":"text"}]},{"type":"codeBlock","content":[{"text":"

\n {{ title }}\n

","type":"text"}]},{"type":"paragraph","content":[{"text":"(in this case, “my-title-class” represents the class you decided to use for your title template).","type":"text"}]},{"type":"paragraph","content":[{"text":"If you leave it like this, then you have made the content of the template dynamic with Boxalino Narrative (as Boxalino Narrative can return a different value in the variable {{ title }} but you have not made the styling of your template dynamic.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"What ","type":"text"},{"text":"NOT TO DO","type":"text","marks":[{"type":"textColor","attrs":{"color":"#ff5630"}}]},{"text":" next","type":"text"}]},{"type":"paragraph","content":[{"text":"You could of course make it configurable either by making the class dynamic and/or adding a dynamic style attribute like this:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

\n {{ title }}\n

","type":"text"}]},{"type":"paragraph","content":[{"text":"But this is not a practice we recommend for the following reasons:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Adding (and possibly extending) classes as template parameters forces you to add more parameters to your narrative templates and rely on the hope that the administrator will know what class to define","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Letting the administrator type whatever he wants as a style is clearly the step too and the risk that your page will get bad rendering (or that the layout might break) is too high.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"The solution with JSON Styles","type":"text"}]},{"type":"paragraph","content":[{"text":"What Boxalino recommends is, instead to create a separate JSON structure that connects your template to one of many styles of the template:","type":"text"}]},{"type":"codeBlock","content":[{"text":"

\n {{ title }}\n

","type":"text"}]},{"type":"paragraph","content":[{"text":"with the following JSON styles:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"{\n \"default\": {\n \"title\": {\n \"class\": \"my-title-class\"\n }\n },\n \"red\": {\n \"extends\": \"default\",\n \"title\": {\n \"class\": \"my-title-red-class\"\n }\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"This way, you will have one parameter in your Narrative template to return the style, but it will only indicate the name of the style (in this example: “default” or “red”).","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"As indicated here, we indicated that “red” extends “default”. This doesn’t do anything in this case (as there is only one class defined), but it is very helpful for cases where only a small subset of the classes are changed in a style (as in the full example below with “simple-red” extending “simple”).","type":"text"}]}]},{"type":"paragraph","content":[{"text":"The selected style would then be passed in a “style” template variable which would render the templates with the desired styles, but without ever letting the customer make changes that are uncontrolled and untested.","type":"text"}]},{"type":"panel","attrs":{"panelType":"success"},"content":[{"type":"paragraph","content":[{"text":"As per the full example below, we recommend you to structure your JSON Styles exactly with the same structure as your HTML, this will make them easy to read, map to your HTML, and maintain (for example, we defined “product.style.class” and to define the global style of the product template, “product.style.form.class” to define the class of the form component of the template and “product.style.form.title.class” to define the class of the title component of the form. Such direct mapping of the HTML and JSON Styles structure will make things much cleaner and easier to maintain.","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Automatically generate the separation","type":"text"}]},{"type":"paragraph","content":[{"text":"While it is well suited for many cases to define your HTML templates and JSON Styles directly separately, there might be cases where it is not easily suitable, or creates an additional burden in the preparation of the templates.","type":"text"}]},{"type":"paragraph","content":[{"text":"For such a case, we recommend generating the two separated files (template with JSON Styles variables and JSON Styles) automatically with a script.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Boxalino can help you set-up scripts to generates these automatically to match your specific situation and needs. Don’t hesitate to reach out to us!","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Expose your Template Schemas and JSON styles through git","type":"text"}]},{"type":"paragraph","content":[{"text":"Boxalino Intelligence Admin has a view called the “Layout Blocks” where they can be defined manually.","type":"text"}]},{"type":"paragraph","content":[{"text":"However, we also support automated integration through git with the following conditions:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A git repository managed by you provides (at least read-access over the cloud) to Boxalino Platform","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"A folder with all the templates is defined (can be anywhere in the repo)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Each template has a folder with its name (names will appear in the Narrative admin as Layout Blocks)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Each template folder has the following files and sub-folders:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"template.* (extension might vary) : the HTML template file","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"schema.json: the JSON Schema of the Template","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"parameters.json: the JSON with the Layout Parameters (as would be defined in the Boxalino Admin)","type":"text"},{"type":"hardBreak"},{"text":"e.g.: ","type":"text"},{"type":"hardBreak"},{"text":"[{","type":"text"},{"type":"hardBreak"},{"text":"\"name\": \"magento_block_type\",","type":"text"},{"type":"hardBreak"},{"text":"\"values\": [\"Boxalino\\Intelligence\\Block\\Journey\\Product\\ProductList\"]","type":"text"},{"type":"hardBreak"},{"text":"},{","type":"text"},{"type":"hardBreak"},{"text":"\"name\": \"magento_block_function_setTemplate\",","type":"text"},{"type":"hardBreak"},{"text":"\"values\": [\"Boxalino_Intelligence::journey/product/list.phtml\"]","type":"text"},{"type":"hardBreak"},{"text":"},{","type":"text"},{"type":"hardBreak"},{"text":"\"name\": \"bx-hits\",","type":"text"},{"type":"hardBreak"},{"text":"\"values\": [\"accessor\"]","type":"text"},{"type":"hardBreak"},{"text":"},{","type":"text"},{"type":"hardBreak"},{"text":"\"name\": \"position\",","type":"text"},{"type":"hardBreak"},{"text":"\"values\": [\"main\"]","type":"text"},{"type":"hardBreak"},{"text":"}]","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"sub-folder “json-styles” with one file per JSON style with the content of the json inside (e.g.: file name “default.json” with content:","type":"text"},{"type":"hardBreak"},{"text":"{ \"title\": { \"class\": \"my-title-class\" } }","type":"text"}]}]}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Check-out a concrete example","type":"text"}]},{"type":"paragraph","content":[{"text":"You can find here a concrete single-page HTML example using Nunjucks as a template engine and Tailwind CSS to show you what it means in practice to apply JSON Styles.","type":"text"}]},{"type":"paragraph","content":[{"text":"In this example:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The HTML uses Tailwind & NunJucks (and jQuery, but only for the logic of the display)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the variable “product” represents a layout block returned by Boxalino Narrative API with the style “simple-red” selected","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"product_styles represent the map of all the defined product styles, with “simple-red” only extending one of the classes of “simple”, and “playful” showing a completely different style than “simple”","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the Javascript Function ","type":"text"},{"text":"extendStyle","type":"text","marks":[{"type":"code"}]},{"text":" renders the styles (calling the ","type":"text"},{"text":"applyExtension","type":"text","marks":[{"type":"code"}]},{"text":" to apply the effects of extensions is one is defined)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The HTML defines the template itself (rendered with NunJucks by a jQuery call to ","type":"text"},{"text":"renderProduct","type":"text","marks":[{"type":"code"}]},{"text":")","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"Single Page HTML example with NunJucks & Tailwind CSS"},"content":[{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n\n\n \n \n \n \n\n \n \n \n \n\n\n\n

\n\n\n\n

\n The output will be rendered here\n

\n\n

\n \n \n\n","type":"text"}]}]}],"version":1}

Browser not supported