Overriding template properties results in weird nested markup

[thomasfrobieter]

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>

[thomasfrobieter]

Its some side effect with Drupal (+ iframe: false), but still no solution. Tested the same snippet on Codepen, everything worked as expected.

[JPustkuchen]

@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.

[JPustkuchen]

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:

• https://www.drupal.org/project/drupal/issues/2662770
• https://www.drupal.org/project/drupal/issues/1333730
• https://www.drupal.org/project/drupal/issues/2441811
• https://www.drupal.org/project/drupal/issues/2857273 (I linked the issue there)