Overriding template properties results in weird nested markup
thomasfrobieter opened this issue · comments
I guess i followed the documentation correctly, but i am unable to get the awaited result.
If i do this:
"product": {
"iframe": false,
"templates": {
"title": `<div class="h3">Title {{data.title}}</div>`,
"price": `<div class="h2">Hello world {{data.selectedVariant.price}}</div>`,
},
"contents": {
"button": false,
"buttonWithQuantity": true
},
"text": {
"button": "Add to cart"
}
},
The price markup and everything else is wrapped into the div.h3 from the title markup and i have no idea why.
Result:
<div class="h3">Title PRODUCTNAME XY<div class="h2">Hello world 113.00<div class="shopify-buy__btn-and-quantity" data-element="product.buttonWithQuantity">
<div class="shopify-buy__quantity-container " data-element="product.quantity">
<input class="shopify-buy__quantity" type="number" min="0" aria-label="Quantity" value="1" data-element="product.quantityInput">
</div>
<div class="shopify-buy__btn-wrapper" data-element="product.buttonWrapper">
<button class="shopify-buy__btn shopify-buy__beside-quantity" data-element="product.button">Add to cart</button>
</div>
</div>
</div>
</div>
Its some side effect with Drupal (+ iframe: false), but still no solution. Tested the same snippet on Codepen, everything worked as expected.
@thomasfrobieter: Just had a look at the code that was output from the block / webform using the exaample code and there's the reason!
Drupal strips away the closing elements!
So the browser receives:
"templates": {
title: `<div class="h3">{{data.title}}`,
price: `<div class="price">{{data.selectedVariant.price}}`,
},
where the closing div's are missing!
I think I saw a related issue in the past... will post an update here, but we can surely close this as it's not a bug in shopify.
Okay, found the reason in Drupal:
The "Correct faulty and chopped off HTML" Drupal input filter removed the closing div's in the JavaScript. Here are some more or less related issues: