Styling Matrix Attributes on Labels

Adrian SamuelAdrian Samuel Moderator, Lightspeed Staff Posts: 556 moderator
edited July 2018 in Tips, Tricks & How-to’s
Scenario: Sometimes the question is asked by customers, "How do I style the matrix attributes of my items differently on my product labels?"

A example screenshot similar to this was given as a visual representation of what they wanted:


To answer this I'll quickly explain the nature of the issue and then share a screenshot of my personal solution.

1. The Item description on the label that contains the description exists as a single unit and is not broken into separate HTML pieces.

This can be seen below:



If I use CSS to style that element, all of it will become styled and not just some of it. This can be seen below:


In addition, there's no way to place the attributes underneath each other. The HTML moves and is affected as a unit.


So my code will be an exploration as to how I would solve this issue:



Let me explain each line.

1. 
let firstElement = document.querySelector('.description');
- We create a variable called "firstElement" and select the HTML which contains the item description

2. 
 let item = firstElement.innerHTML;
-We create a variable called "item" and reference the firstElement variable to grab the text inside the HTML, which is T-Shirt Blue Large

3.
 let patt = /([\s\S]+\s{2,})\b([\s\S]+\b)/ig;
- We create a variable to called "patt" create a regular expression. This is the key, look at the screenshot and explanation below:



The above shows the JSON file given to us via the Label Template API (https://developers.lightspeedhq.com/retail/endpoints/DisplayTemplate-ItemAsLabel/).

Notice, the JSON shows that the POS inserts some additional spacing after the item description before it adds the matrix attributes. This is incredibly useful and is a pattern you'll notice that this pattern is followed for all items that have matrix attributes. Since we have a pattern, we can use a regular expression to match that pattern.

To avoid flooding this guide with content on how this regular expression works, you can read the details of this pattern here: https://regex101.com/r/cIc60K/1

Essentially all you'll need to recognize is that you're able to capture the description without the attributes separately to the attributes, this will be represented by the string $1 and $2 respectively in the code.

4.
let itemName = item.replace(patt, "$1"); 
We create a variable called "itemName" and do a string replacement where we use the regular expression to match only the item name, represented by "$1". So essentially itemName stores a variable which contains the text "T-Shirt"

5.
let attrName = item.replace(patt, "$2");

 We create a variable called "attrName" and do a string replacement where we use the regular expression to match only the attribute values, represented by "$2". So essentially itemName stores a variable which contains the text "Blue L"

6.
firstElement.innerHTML = itemName; 


- We reference the inside content of the original description "T-Shirt Blue L" and set that equal to the newly created variable itemName which has only the text content "T-Shirt"

7.
 firstElement.insertAdjacentHTML('afterend', 
`<p style=" font-weight: bolder; position: relative; bottom: 20px;
 font-size: 20px; left: 70px;"> ${attrName} </p>`);
 - We reference the element that contains the description and then insert the paragraph element containing the HTML content "BLue L" after it. We insert inline CSS to style that element how we want it on the label.

For the sake of simplicity, I've entered this code into the javascript console rather than in the template. Here is the screenshot of the resulting code afterwards:


You can see the changes in the Document Object Model in the screenshot below:



As you can see, we now have two separate HTML elements; one containing the base item description and the other containing only the attributes, all of which can be positioned and styled differently.

I hope you found this guide helpful and get some insight into how code might solve some of your questions :)


N.B. Lightspeed will not implement this solution as we do not support any template customizations and will advise you to seek third parties to make these customizations for you. Our sales team can point you in the direction of our trusted partners who can assist you with this.


Post edited by Adrian Samuel on

Adrian Samuel

API Integrations Consultant - Strategic Solutions

Lightspeed HQ

4 comments

  • smaz111smaz111 Member Posts: 1
    Does anyone have any recommendations on someone (3rd party) that can do this exact process for our label template? This is a little above my head.
  • ljohnljohn Member Posts: 4
    can't this be easily done with with CSS?

    Enter the value like:

    T-Shirt <span class="item">Blue L<span>

    and then style it with display: block; and so fort?
  • Adrian SamuelAdrian Samuel Moderator, Lightspeed Staff Posts: 556 moderator
    edited September 2018
    @smaz111 I’ve responded to your message :)

    @ljohn I wish! I addressed this question in the tutorial. To summarise, the template only has an object to display the description as a whole.

    So ```<p>{{Label.Item.Description}} </p> ``` is how it’s displayed in the HTML. It auto generates the whole description. The only way to split the title up is to use a regular expression since CSS styles whole HTML elements and not only a part of it.

    Adrian Samuel

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

  • Adrian SamuelAdrian Samuel Moderator, Lightspeed Staff Posts: 556 moderator

    To anyone who's interested, here is an example snippet a better working version of this solution:

    https://gist.github.com/Adrian-Samuel/e61527793e4c62f591487a3f733e8871

    Adrian Samuel

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

Sign In or Register to comment.