Modify visual tile

Instead of embedding text and buttons directly into the visual image, you can define them as seperate elements. This allows for better scaling, improved readability, and a more consistent user experience on various screen sizes.

Currently it's not possible to edit the visual tile using Plugin Studio. To change the appearance of the tile, use the twn.product.visible hook.

Follow these steps:

Add title & button text to the visual items feed
Extend API reponse with the attributes
Use the twn.product.visible hook to create and display the elements:


window["twn-starter-config"].on = {
  
  "twn.product.visible": function (event) {
    
    const item = event.data;
    if (item.type !== "visual") return;
    
    const visual_title = item.attributes.find((o) => o.name == "visual_title").values[0];
    const visual_button = item.attributes.find((o) => o.name == "visual_button").values[0];
    
    var title = createElement("div", "tw__visual-title", visual_title);
    var link = createElement("a", "tw__visual-button", visual_button);
    
    const target = event.targetElement.querySelector(".twn-content-tile__link");
    const container = createElement("div", "tw__visual-container", "");
    
    container.append(title);
    container.append(link);
    target.append(container);
    
  }
};


.tw__visual-container{
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.tw__visual-title {
    position: relative;
    z-index: 100;
    color:#fff;
    text-decoration: none;
    font-size: 2rem;
    border: none;
    font-weight: bold;
}

.tw__visual-button {
    position: relative;
    z-index: 100;
    display: inline-flex;
    background: #fff000;
    color: #222;
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    text-align: center;
    align-items: center;
    justify-content: center;
}