HTML without {{item.xyz}} function!?

romacasa · August 1, 2026, 4:34pm

Hello

I placed the following code in a Markdown file because this feature only works there.

The code:

<!-- Product -->
<div class="shop-product"
    data-shop-product
    data-artikel="{{item.artikelnr}}">

<input
    type="number"
    value="1"
    min="1"
    max="1000"
    class="shop-qty"
    data-qty>

<button class="shop-button" data-add-cart>
    Add to cart
</button>

</div>

The issue concerns data-artikel="{{item.artikelnr}}". Unfortunately, this does not work in an HTML component, even though the HTML is nested under the “ITEM” – see image. Is this intended behavior? Formatting also presents a challenge – Image 2 – though it can be resolved with the following CSS:

.prose .shop-product{
    display:flex;
    align-items:center;
    gap:12px;
}

.prose .shop-product p{
    margin:0 !important;
    padding:0 !important;
    display:flex;
}

.prose .shop-qty{
    width:70px;
    height:44px;
    margin:0;
}

.prose .shop-button{
    height:44px;
    margin:0;
    flex:1;
}

In the HTML component, this works more simply and correctly right from the start.

Image 3 shows the transfer of the item number; this works with the Markdown component but not with the HTML component. I believe it would be beneficial if an HTML component within the CMS item could also access these fields. Perhaps there is another way I am unaware of – if so, please let me know. Thanks for your help. Greetings Romano