cancel
Showing results for 
Search instead for 
Did you mean: 

Changing the layout of new order email

Changing the layout of new order email

Hello,

Thank you for always helping me a lot.

 

We want to change the layout of new order email like the image below.

And also we need to add one letter(for example "#") to the customer's name.

So we separate the customer's name and address as follows;

                        <p><span class="no-link">{{var order.getBillingAddress().getName()}}#<br>
                        {{var order.getBillingAddress().getStreet2()}}

                                        {{var order.getBillingAddress().getStreet1()}}

                                        {{var order.getBillingAddress().getCity()}}

                                        {{var order.getBillingAddress().getRegion()}}</span></p>

But there is a big space before the address when I receive test mail.

How can I fix it?

 

The following is a part of the customized new order email;

            {{layout handle="sales_email_order_items" order=$order}}
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="address-details" align="left">
                        <h6>Billing address:</h6>

                            <p><span class="no-link">{{var order.getBillingAddress().getName()}}#<br>
                          {{var order.getBillingAddress().getStreet2()}}

                                        {{var order.getBillingAddress().getStreet1()}}

                                        {{var order.getBillingAddress().getCity()}}

                                        {{var order.getBillingAddress().getRegion()}}</span></p>

                    </td>
                </tr>
                <tr>
                    {{depend order.getIsNotVirtual()}}
                    <td class="address-details" align="left">
                        <h6>Shipping address:</h6>

                              <p><span class="no-link">{{var order.getShippingAddress().getName()}}#<br>
                          {{var order.getShippingAddress().getStreet2()}}

                                        {{var order.getShippingAddress().getStreet1()}}

                                        {{var order.getShippingAddress().getCity()}}

                                        {{var order.getShippingAddress().getRegion()}}</span></p>


                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    {{depend order.getIsNotVirtual()}}
                    <td class="method-info">
                        <h6>Shipping method:</h6>
                        <p>{{var order.shipping_description}}</p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    <td class="method-info">
                        <h6>Payment method:</h6>
                        {{var payment_html}}
                    </td>
                </tr>
            </table>

 

New-Order.jpg

3 REPLIES

Re: Changing the layout of new order email

Hello,

Thank you for your attention.

I tried from the beginning with the original magento mail template and it was successful.

The following is the code;

 

 {{layout handle="sales_email_order_items" order=$order}}
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="address-details">
                        <h6>Billing address:</h6>
                        <p><span class="no-link">{{var order.getBillingAddress().getName()}}様<br>
                        {{var order.getBillingAddress().getStreet2()}}{{var order.getBillingAddress().getStreet1()}}{{var order.getBillingAddress().getCity()}}{{var order.getBillingAddress().getRegion()}}</span></p>
                    </td>
                </tr>
                <tr>
                    {{depend order.getIsNotVirtual()}}
                    <td class="address-details">
                        <h6>Shipping address:</h6>
                        <p><span class="no-link">{{var order.getShippingAddress().getName()}}様<br>
                        {{var order.getShippingAddress().getStreet2()}}{{var order.getShippingAddress().getStreet1()}}{{var order.getShippingAddress().getCity()}}{{var order.getShippingAddress().getRegion()}}</span></p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    {{depend order.getIsNotVirtual()}}
                    <td class="method-info">
                        <h6>Shipping method:</h6>
                        <p>{{var order.shipping_description}}</p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    <td class="method-info">
                        <h6>Payment method:</h6>
                        {{var payment_html}}
                    </td>
                </tr>
            </table>

Re: Changing the layout of new order email

Hello, DavidStephan.

 

Thank you for your advice.

It seemed that at first magento didn't neglect the space after <br> tag in the code below. That's why there were space before the address in the mail.

<p><span class="no-link">{{var order.getBillingAddress().getName()}}#<br>
                          {{var order.getBillingAddress().getStreet2()}}

 

But as I wrote in the second post, I was successful to fix the strange layout of new order email by editing the original magento template again from the beginning.

 

Now I have another problem showing my shop's logo in the sales mail.

So I can study it from the sites that you introduced me. I will post a question if I can't fix it.

Thank you very much!