VQMod add html inside div not working

Question

I've got this original code:

<div class="heading">
      <h1><img src="view/image/customer.png" alt="" /> <?php echo $heading_title; ?></h1>
      <div class="buttons"><a href="<?php echo $cancel; ?>" class="button"><?php echo $button_cancel; ?></a></div>
    </div>

My VQMod file looks like this:

<modification>
    <id>Backorder</id>
    <version>1.0</version>
    <vqmver>1.2.3</vqmver>
    <author>Author</author>

    <file name="admin/controller/sale/order.php">
        <operation>
            <search position="after"><![CDATA[$this->data['heading_title'] = $this->language->get('heading_title');]]></search>
            <add><![CDATA[
            $this->data['backorder_text'] = 'Backorder';
            $this->data['backorder_link'] = $this->url->link('backorder/backorder', 'token=' . $this->session->data['token'] . '&ouid=' . $order_id, 'SSL');
                ]]></add>
        </operation>
    </file>

    <file name="admin/view/template/sale/order_info.tpl">
        <operation>
            <search position="after"><![CDATA[<?php echo $button_cancel; ?></a>]]></search>
            <add><![CDATA[<a href="<?php echo $backorder_link; ?>" class="button"><?php echo $backorder_text; ?></a>]]></add>
        </operation>
    </file>

</modification>

If I understand VQMod right, should this be the outputted HTML:

    <div class="heading">
            <h1><img src="view/image/order.png" alt=""> Bestellingen</h1>
            <div class="buttons">
                <a href="leLink" target="_blank" class="button">Factuur printen</a>
                <a href="leLink" class="button">Annuleren</a>
                <a href="leLink" class="button">Backorder</a>
            </div>
        </div>

But this is generated:

    <div class="heading">
            <h1><img src="view/image/order.png" alt=""> Bestellingen</h1>
            <div class="buttons">
                <a href="leLink" target="_blank" class="button">Factuur printen</a>
                <a href="leLink" class="button">Annuleren</a>
            </div>
            <a href="leLink" class="button">Backorder</a>
        </div>

As you can see, is the link I insert is out of the div. This is ruining the layout. Does anybody knows what i'm doing wrong?

Answer 1

The problem is that you are using the after position, when the whole of the buttons div is actually a single line if you check its source code. Instead, use replace like so:

    <operation>
        <search position="replace"><![CDATA[<?php echo $button_cancel; ?></a>]]></search>
        <add><![CDATA[<?php echo $button_cancel; ?></a><a href="<?php echo $backorder_link; ?>" class="button"><?php echo $backorder_text; ?></a>]]></add>
    </operation>

Note that you could also use iafter in place of after if you're using vQmod 2.4.0 or above