The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 03-09-2015, 07:08 AM
1UP Gaming Lounge's Avatar
1UP Gaming Lounge is offline
 
Join Date: Feb 2015
Posts: 3
Default

Use the store invoice as a shipping label


Just wanted to share something:

With the new features that lets us edit the store invoice, we can edit it so it serves as a shipping label! Aint it awesome?!

I edited mine so it fits my country's postal rules, so it may not be apropriate to you, but here you have it. I hope it is of some use to you!

----------------------------------------------------------------------------------------------
HTML Code:
<!-- Invoice styles -->
<style type="text/css">
html,body {
	min-height:100%;
	margin:0;
	padding:0;
}

body {
	background-color:#fff;
	width:210mm;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:20mm 10mm 15mm;
}

body > div {
	height:100%;
}

body p:empty {
	display:none;
}

body a {
	text-decoration:none;
	color:#000;
}

body table {
	border-collapse:collapse;
	border-spacing:0;
}

body .body {
	height:100%;
	width:150mm;
	margin:0 auto;
}

body .body td {
	vertical-align:top;
	height:0;
	font-family:Arial, Helvetica, "Sans Serif";
	font-size:12pt;
	line-height:14pt;
	color:#000;
	padding:0;
}

body .body td.footer {
	height:100%;
	text-align:center;
	vertical-align:bottom;
}

body .body td.footer div {
	border-bottom:1px solid #000;
	padding:10mm 0 5pt;
}

body .body .invoice td td {
	vertical-align:top;
	padding:0;
}

body .body .invoice p {
	margin:2pt 0;
}

body .body .invoice .store-info {
	width:100%;
	margin-bottom:16pt;
}

body .body .invoice .store-info .invoice-logo {
	max-height:25mm;
	max-width:100%;
	width:auto;
	display:block;
	margin:0 0 5mm;
}

body .body .invoice .store-info .store-title {
	font-size:12pt;
	line-height:12pt;
	font-weight:600;
	padding:5pt 0;
}

body .body .invoice .store-info .store-main-info {
	width:60mm;
	padding-right:5mm;
}

body .body .invoice .store-info .store-main-info .title-detached {
	margin-top:5pt;
	margin-bottom:5pt;
}


body .body .invoice .store-info .store-customer-info {
	vertical-align:top;
}

body .body .invoice .store-info .store-customer-info p {
	max-width:60mm;
	word-wrap:break-word;
}

body .body .invoice td.invoice-row,body .body .invoice .invoice-row > tr:first-child > td {
	border-top:1px solid #000;
}

body .body .invoice .order-comment {
	padding-bottom: 12pt;
}

body .body .invoice .order-info {
	margin-bottom:11pt;
	padding:0;
}

body .body .invoice .order-items {
	margin-bottom:16pt;
	padding:0;
}

body .body .invoice .order-info td,body .body .invoice .order-items td {
	width:42mm;
	padding-right:5mm;
}

body .body .invoice .order-info td:last-child,body .body .invoice .order-items td:last-child {
	width:auto;
}

body .body .invoice .order-info .title,body .body .invoice .order-items .title {
	font-weight:600;
	padding-top:5pt;
	padding-bottom:12pt;
	margin:0;
}

body .body .invoice .order-info td:last-child {
	padding-right:0;
}

body .body .invoice .order-info p {
	max-width:100mm;
	word-wrap:break-word;
}

body .body .invoice .order-info .order-comment p {
	max-width: 100%;
	word-break: break-all;
	white-space: pre-wrap;
}

body .body .invoice .order-comment-title {
	margin-bottom: 4pt;	
}

body .body .invoice .order-items table tbody tr:last-child td {
	padding-bottom:3pt;
}

body .body .invoice .order-items .title {
	padding-bottom:5pt;
}

body .body .invoice .order-items .order-item-desc {
	width:87mm;
}

body .body .invoice .order-items .order-item-count {
	width:11mm;
}

body .body .invoice .order-items .order-item-count,body .body .invoice .order-items .order-item-total {
	text-align:right;
	padding-right:1mm;
}

body .body .invoice .order-items .order-item-total {
	padding-right:2mm;
}

body .body .invoice .order-items .order-total td {
	padding-top:1pt;
	padding-bottom:1pt;
}

body .body .invoice,body .body .invoice .order-items table {
	width:100%;
}

body .body .invoice td,body .body .invoice .order-items table td {
	padding:0 1mm;
}

body .body .invoice .text-uppercase,body .body .invoice .order-info .title::first-letter,body .body .invoice .order-items .title::first-letter {
	text-transform:uppercase;
}

body .body .invoice .text-bold,body .body .invoice .order-items .order-item-title {
	font-weight:600;
}

body .body .invoice .store-info .store-main-info .url,body .body .invoice .order-info .title-detached,body .body .invoice .order-items .title-detached {
	margin-bottom:5pt;
}

body .body .invoice .store-info .store-main-info p,body .body .invoice .order-items .order-item-desc p {
	max-width:87mm;
	word-wrap:break-word;
}

body .body .invoice .order-items .order-item-desc .order-discount-coupon {
	max-width: 64mm;
}

body .body .invoice .order-items table tbody tr td,body .body .invoice .order-items .order-total tr:first-child td {
	padding-top:7pt;
}

@media print{
	* {
		-webkit-print-color-adjust:exact;
	}

	html,body {
		height:100%;
	}

	body {
		padding:0;
	}

	@page {
		margin:20mm 0 15mm;
	}
}
</style>

<!-- Invoice body markup -->
<table class="body">
	<tbody>
	<tr>
		<td>
			<table class="invoice">
				<tbody>

				<!-- Your company information -->
				<tr>
					<td>
						<table class="store-info">
							<thead>
							
							<!-- Invoice logo -->
							<#if store.invoiceLogoUrl?has_content>
							<tr>
								<td colspan="2">									
										<img class="invoice-logo"  src="${store.invoiceLogoUrl}" />
								</td>
							</tr>
							</#if>
							
							<tr>
								<td colspan="2" class="store-title">
									<!-- Store name -->
									<span>${store.name}</span>
								</td>
							</tr>
							</thead>
							<tbody>
							<tr>
								<!-- Company information: store URL, tax ID, company name, address and contact information -->
								<td class="store-main-info">
									<p class="url">${store.storeUrl}</p>
									<#if store.businessRegistrationID.value?has_content>
										<p class="title-detached">${store.businessRegistrationID.name}: ${store.businessRegistrationID.value}</p>
									</#if>
									<p>${store.companyName}</p>
									<p>${store.officeAddress.street}</p>
									<p><#if store.officeAddress.city?has_content>
									<p>${store.officeAddress.postalCode} ${store.officeAddress.city} </p>
									</#if>
								</td>
								<td class="store-customer-info">
									<p><font size="3" color="white"><b>${textLabels.customerService}</b></p>
									<p><font size="3" color="white">${store.officeAddress.phone}</p>
									<p><font size="3" color="white">${store.companyEmail}</p>
								</td>
							</tr>
							</tbody>
						</table>
					</td>
				</tr>

				<!-- Shipping and billing information -->
				<tr>
					<td class="invoice-row">
						<table class="order-info">
							<thead>
							<tr>
								<!-- Order date -->
							</tr>
							</thead>
							<tbody>
							<tr>
								<!-- Customer shipping address -->
								<#if order.shippingMethod?has_content || order.paymentMethod?has_content>
								<td colspan="2">
									<!-- Shipping option chosen to deliver the order -->
									<#if order.shippingMethod?has_content>
										<p><font size="3" color="white">This is some text!</font></p>
									</#if>
									<!-- Payment option that customer used to pay for the order -->
									<#if order.paymentMethod?has_content>
										<p><font size="3" color="white">This is some text!</font></p>
									</#if>
								</td>
								</#if>
								<#if order.shippingMethod?has_content || order.paymentMethod?has_content>
								<td colspan="2">
									<!-- Shipping option chosen to deliver the order -->
									<#if order.shippingMethod?has_content>
										<p><font size="3" color="white">This is some text!</font></p>
									</#if>
									<!-- Payment option that customer used to pay for the order -->
									<#if order.paymentMethod?has_content>
										<p><font size="3" color="white">This is some text!</font></p>
									</#if>
								</td>
								</#if>
								<#if order.shippingMethod?has_content || order.paymentMethod?has_content>
								<td colspan="200">
									<#if order.shippingAddress?has_content && order.billingAddress?has_content && !order.isSameShippingAndBilling>
										<p class="title-detached">${textLabels.shipTo}</p>
									</#if>
									<p><font size="3" color="white">This is some text!</font></p>
									<p class="text-uppercase">${order.shippingAddress.name}</p>
									<p class="text-uppercase">${order.shippingAddress.companyName}</p>
									<p class="text-uppercase">${order.shippingAddress.street}</p>
									<p class="text-uppercase">${order.shippingAddress.postalCode} <#if order.shippingAddress.city?has_content>${order.shippingAddress.city} </#if></p>
									<p><font size="3" color="white">This is some text!</font></p>
									<p><font size="3" color="white">This is some text!</font></p>
									<p><font size="3" color="white">This is some text!</font></p>
									<p><font size="3" color="white">This is some text!</font></p>
									<p><font size="3" color="white">This is some text!</font></p>
                                                                        <p><font size="3" color="white">This is some text!</font></p>
									<p><font size="3" color="white">This is some text!</font></p>
								</td>
								</#if>
							</tr>
							</tbody>
						</table>
					</td>
				</tr>

				<!-- Order comments -->
				
				
				<!-- Order information -->
				<tr>
					<td class="order-items">
						<table>
							<tbody class="invoice-row">
							<tr>
								<td colspan="3" class="title">
									<!-- Order number -->
									<span>${textLabels.order}<#if order.number?has_content> #${order.number}</#if></span>
								</td>
							</tr>
								
								<!-- Ordered items list -->
								<#list order.items as orderItem>
								<tr>
									<td class="order-item-desc">
										<p class="order-item-title">${orderItem.name}</p>
										<p>${textLabels.sku}: ${orderItem.sku}</p>
										<p>${orderItem.formattedOptions}</p>
									</td>
									<td class="order-item-count">
										<p>${orderItem.quantity}</p>
									</td>
									<td class="order-item-total text-bold">
										<p>${orderItem.price}</p>
									</td>
								</tr>
								</#list>
							</tbody>

							<!-- Order totals -->
							<tbody class="invoice-row order-total">

							<!-- Order subtotal -->
							<tr>
								<td class="order-item-desc"></td>
								<td class="order-item-count">
									<p>${textLabels.items}</p>
								</td>
								<td class="order-item-total">
									<p>${order.subtotal}</p>
								</td>
							</tr>

							<!-- Order shipping cost -->
							<tr>
								<td class="order-item-desc"></td>
								<td class="order-item-count">
									<p>${textLabels.shipping}</p>
								</td>
								<td class="order-item-total">
									<p>${order.shippingCost}</p>
								</td>
							</tr>

							<!-- Order tax -->
							<#list order.taxes as tax>
							<tr>
								<td class="order-item-desc"></td>
								<td class="order-item-count">
									<p>${tax.name}</p>
								</td>
								<td class="order-item-total">
									<p>${tax.value}</p>
								</td>								
							</tr>
							</#list>
							
							<!-- Order discounts total -->
							<#list order.discounts as discount>							
							<tr>
								<td class="order-item-desc"></td>
								<td class="order-item-count">
									<p>${discount.name}</p>
								</td>
								<td class="order-item-total">
									<p>-${discount.value}</p>
								</td>
							</tr>
							</#list>

							<!-- Order total cost -->
							<tr>
								<td class="order-item-desc"></td>
								<td class="order-item-count text-bold">
									<p>${textLabels.total}</p>
								</td>
								<td class="order-item-total text-bold">
									<p>${order.total}</p>
								</td>
							</tr>
							</tbody>
						</table>
					</td>
				</tr>
				</tbody>
			</table>
		</td>
	</tr>
	<!-- Invoice footer -->
	<tr>
		<td class="footer">
			<div>${textLabels.footerMessage}</div>
		</td>
	</tr>
	</tbody>
</table>

Last edited by Qetzal; 03-09-2015 at 02:32 PM.
The Following 8 Users Say Thank You to 1UP Gaming Lounge For This Useful Post:
Arthur Belostotsky (03-09-2015), Colleen Mitchell (03-25-2015), Cyril D (12-14-2015), nuke.ru (03-10-2015), Qetzal (03-09-2015), river (03-11-2015), Sergio87 (03-09-2015), Wendy (05-12-2015)
  #2  
Old 03-11-2015, 01:25 PM
river's Avatar
river river is offline
Ecwid Team
 
Join Date: Feb 2015
Posts: 452
Default

Quote:
Originally Posted by 1UP Gaming Lounge View Post
Just wanted to share something:

With the new features that lets us edit the store invoice, we can edit it so it serves as a shipping label! Aint it awesome?!

I edited mine so it fits my country's postal rules, so it may not be apropriate to you, but here you have it. I hope it is of some use to you!

----------------------------------------------------------------------------------------------
Hi,

Thank you very much for such a creative solution! Indeed, editing the Invoice template like that may be very helpful for our clients! This work of yours is greatly appreciated!

Thanks again,
Ecwid team.
__________________
Roman I.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
  #3  
Old 12-13-2015, 01:33 PM
Fish123's Avatar
Fish123 Fish123 is offline
 
Join Date: Jan 2013
Posts: 7
Default Shipping labels - preview?

Hello. Have stumbled on your solution whilst looking for label printing. It sounds good but would love to see the preview of the amended html file. I'm a bit of a novice when it comes to html but should be able to move things around following your advice if I can see what the end result is supposed to look like.
  #4  
Old 12-13-2015, 03:54 PM
1UP Gaming Lounge's Avatar
1UP Gaming Lounge 1UP Gaming Lounge is offline
 
Join Date: Feb 2015
Posts: 3
Default

The end result is supposed to look like a normal envelope with the sender and recipient information.

Copy and paste the html code I pasted above and it should be about it. Then, cut the bottom half of the page and you're ready to go!
The Following User Says Thank You to 1UP Gaming Lounge For This Useful Post:
Cyril D (12-14-2015)
  #5  
Old 12-14-2015, 10:21 AM
Fish123's Avatar
Fish123 Fish123 is offline
 
Join Date: Jan 2013
Posts: 7
Question 'This is some text'?

Hello. I really liked the look of this but not being proficient with html I first saved everything I had into a plain text file so that I could copy it back in if neccessary, including a few adaptations I'd already made. When I dropped in your coding and chose the print preview there were a lot of 'This is some text!' lines that came up in the address label. I guess this would be fun for people who are used to html but for someone who isn't, it made me nervous that there might be other things in there that I couldn't see immediately. I also couldn't see, on the preview, where the billing address fell when it's different to the shipping address. So I've gone back to my original and will try to work out how to do the same thing you have done with the address - which is a brilliant workaround for the labels - without copying the coding given. Your text was also a larger point size to the default one and that threw my page length given that I'd added additional text at the foot of the invoice for our Returns procedure. I need to learn how to put the dividing lines in and then I should be OK - it's a learning curve. But thanks for the idea.
  #6  
Old 12-14-2015, 03:11 PM
Antea's Avatar
Antea Antea is offline
Ecwid Team
 
Join Date: Nov 2015
Posts: 381
Default

Quote:
Originally Posted by Fish123 View Post
Hello. I really liked the look of this but not being proficient with html I first saved everything I had into a plain text file so that I could copy it back in if neccessary, including a few adaptations I'd already made. When I dropped in your coding and chose the print preview there were a lot of 'This is some text!' lines that came up in the address label. I guess this would be fun for people who are used to html but for someone who isn't, it made me nervous that there might be other things in there that I couldn't see immediately. I also couldn't see, on the preview, where the billing address fell when it's different to the shipping address. So I've gone back to my original and will try to work out how to do the same thing you have done with the address - which is a brilliant workaround for the labels - without copying the coding given. Your text was also a larger point size to the default one and that threw my page length given that I'd added additional text at the foot of the invoice for our Returns procedure. I need to learn how to put the dividing lines in and then I should be OK - it's a learning curve. But thanks for the idea.
Hello!

You can change your existing Invoice Template into a Shipping Label using the code given above. To edit the template, please

1.Log in to your Ecwid Control Panel
2.Go to Settings > Invoice > Edit Invoice Template
3.Copy the code given above and paste it in the field instead of the default code.
4.Save the changes.

This is what the printed preview of the invoice is going to look like when you apply the changes.



Notice that every time you customize the default Ecwid Templates (Invoices, E-mail notifications, etc), it is possible to cancel the changes and revert to the default template by clicking the “Revert to default” option (see the screenshot below).



If you have any more questions, we will be glad to help.
__________________
Anna,
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

Please click Thanks if my reply helped you.
  #7  
Old 12-14-2015, 04:45 PM
Fish123's Avatar
Fish123 Fish123 is offline
 
Join Date: Jan 2013
Posts: 7
Default

Hello. Yes, that's what I did and, yes, the preview you show was the same one I got in the 'Preview' window - but when I actually hit 'Print Preview', and printed the invoice, it included a lot of text that had been hidden in the preview - namely the words 'This is some text!' dotted a few times around the address panel. Also, as I said, the text on the code above is a larger font size than the default so my invoice became too big for one page.
  #8  
Old 12-15-2015, 04:32 PM
Antea's Avatar
Antea Antea is offline
Ecwid Team
 
Join Date: Nov 2015
Posts: 381
Default

Quote:
Originally Posted by Fish123 View Post
Hello. Yes, that's what I did and, yes, the preview you show was the same one I got in the 'Preview' window - but when I actually hit 'Print Preview', and printed the invoice, it included a lot of text that had been hidden in the preview - namely the words 'This is some text!' dotted a few times around the address panel. Also, as I said, the text on the code above is a larger font size than the default so my invoice became too big for one page.
Hello!

I understand your situation. The lines “This is some text!” do exist in the code given above. Though they are set to be displayed white, your printer still detects the lines so you can read them if printed.

I made some changes in the code so the lines “This is some text!” are not displayed anymore. Also, the size of the text in the code below is the same as the one in the default template now.

Code:
<!-- Invoice styles -->
<style type="text/css">
html,body {
	min-height:100%;
	margin:0;
	padding:0;
}

body {
	background-color:#fff;
	width:210mm;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:20mm 10mm 15mm;
}

body > div {
	height:100%;
}

body p:empty {
	display:none;
}

body a {
	text-decoration:none;
	color:#000;
}

body table {
	border-collapse:collapse;
	border-spacing:0;
}

body .body {
	height:100%;
	width:150mm;
	margin:0 auto;
}

body .body td {
	vertical-align:top;
	height:0;
	font-family:Arial, Helvetica, "Sans Serif";
	font-size:10pt;
	line-height:14pt;
	color:#000;
	padding:0;
}

body .body td.footer {
	height:100%;
	text-align:center;
	vertical-align:bottom;
}

body .body td.footer div {
	border-bottom:1px solid #000;
	padding:10mm 0 5pt;
}

body .body .invoice td td {
	vertical-align:top;
	padding:0;
}

body .body .invoice p {
	margin:2pt 0;
}

body .body .invoice .store-info {
	width:100%;
	margin-bottom:16pt;
}

body .body .invoice .store-info .invoice-logo {
	max-height:25mm;
	max-width:100%;
	width:auto;
	display:block;
	margin:0 0 5mm;
}

body .body .invoice .store-info .store-title {
	font-size:12pt;
	line-height:12pt;
	font-weight:600;
	padding:5pt 0;
}

body .body .invoice .store-info .store-main-info {
	width:60mm;
	padding-right:5mm;
}

body .body .invoice .store-info .store-main-info .title-detached {
	margin-top:5pt;
	margin-bottom:5pt;
}


body .body .invoice .store-info .store-customer-info {
	vertical-align:top;
}

body .body .invoice .store-info .store-customer-info p {
	max-width:60mm;
	word-wrap:break-word;
}

body .body .invoice td.invoice-row,body .body .invoice .invoice-row > tr:first-child > td {
	border-top:1px solid #000;
}

body .body .invoice .order-comment {
	padding-bottom: 12pt;
}

body .body .invoice .order-info {
	margin-bottom:11pt;
	padding:0;
}

body .body .invoice .order-items {
	margin-bottom:16pt;
	padding:0;
}

body .body .invoice .order-info td,body .body .invoice .order-items td {
	width:42mm;
	padding-right:5mm;
}

body .body .invoice .order-info td:last-child,body .body .invoice .order-items td:last-child {
	width:auto;
}

body .body .invoice .order-info .title,body .body .invoice .order-items .title {
	font-weight:600;
	padding-top:5pt;
	padding-bottom:12pt;
	margin:0;
}

body .body .invoice .order-info td:last-child {
	padding-right:0;
}

body .body .invoice .order-info p {
	max-width:100mm;
	word-wrap:break-word;
}

body .body .invoice .order-info .order-comment p {
	max-width: 100%;
	word-break: break-all;
	white-space: pre-wrap;
}

body .body .invoice .order-comment-title {
	margin-bottom: 4pt;	
}

body .body .invoice .order-items table tbody tr:last-child td {
	padding-bottom:3pt;
}

body .body .invoice .order-items .title {
	padding-bottom:5pt;
}

body .body .invoice .order-items .order-item-desc {
	width:87mm;
}

body .body .invoice .order-items .order-item-count {
	width:11mm;
}

body .body .invoice .order-items .order-item-count,body .body .invoice .order-items .order-item-total {
	text-align:right;
	padding-right:1mm;
}

body .body .invoice .order-items .order-item-total {
	padding-right:2mm;
}

body .body .invoice .order-items .order-total td {
	padding-top:1pt;
	padding-bottom:1pt;
}

body .body .invoice,body .body .invoice .order-items table {
	width:100%;
}

body .body .invoice td,body .body .invoice .order-items table td {
	padding:0 1mm;
}

body .body .invoice .text-uppercase,body .body .invoice .order-info .title::first-letter,body .body .invoice .order-items .title::first-letter {
	text-transform:uppercase;
}

body .body .invoice .text-bold,body .body .invoice .order-items .order-item-title {
	font-weight:600;
}

body .body .invoice .store-info .store-main-info .url,body .body .invoice .order-info .title-detached,body .body .invoice .order-items .title-detached {
	margin-bottom:5pt;
}

body .body .invoice .store-info .store-main-info p,body .body .invoice .order-items .order-item-desc p {
	max-width:87mm;
	word-wrap:break-word;
}

body .body .invoice .order-items .order-item-desc .order-discount-coupon {
	max-width: 64mm;
}

body .body .invoice .order-items table tbody tr td,body .body .invoice .order-items .order-total tr:first-child td {
	padding-top:7pt;
}

@media print{
	* {
		-webkit-print-color-adjust:exact;
	}

	html,body {
		height:100%;
	}

	body {
		padding:0;
	}

	@page {
		margin:20mm 0 15mm;
	}
}
</style>

<!-- Invoice body markup -->
<table class="body">
	<tbody>
	<tr>
		<td>
			<table class="invoice">
				<tbody>

				<!-- Your company information -->
				<tr>
					<td>
						<table class="store-info">
							<thead>
							
							<!-- Invoice logo -->
							<#if store.invoiceLogoUrl?has_content>
							<tr>
								<td colspan="2">									
										<img class="invoice-logo"  src="${store.invoiceLogoUrl}" />
								</td>
							</tr>
							</#if>
							
							<tr>
								<td colspan="2" class="store-title">
									<!-- Store name -->
									<span>${store.name}</span>
								</td>
							</tr>
							</thead>
							<tbody>
							<tr>
								<!-- Company information: store URL, tax ID, company name, address and contact information -->
								<td class="store-main-info">
									<p class="url">${store.storeUrl}</p>
									<#if store.businessRegistrationID.value?has_content>
										<p class="title-detached">${store.businessRegistrationID.name}: ${store.businessRegistrationID.value}</p>
									</#if>
									<p>${store.companyName}</p>
									<p>${store.officeAddress.street}</p>
									<p><#if store.officeAddress.city?has_content>
									<p>${store.officeAddress.postalCode} ${store.officeAddress.city} </p>
									</#if>
								</td>
								<td class="store-customer-info">
									<p><font size="3" color="white"><b>${textLabels.customerService}</b></p>
									<p><font size="3" color="white">${store.officeAddress.phone}</p>
									<p><font size="3" color="white">${store.companyEmail}</p>
								</td>
							</tr>
							</tbody>
						</table>
					</td>
				</tr>

				<!-- Shipping and billing information -->
				<tr>
					<td class="invoice-row">
						<table class="order-info">
							<thead>
							<tr>
								<!-- Order date -->
							</tr>
							</thead>
							<tbody>
							<tr>
								<!-- Customer shipping address -->
								<#if order.shippingMethod?has_content || order.paymentMethod?has_content>
								<td colspan="2" style="visibility: hidden">
									<!-- Shipping option chosen to deliver the order -->
									<#if order.shippingMethod?has_content>
										<p><font size="3" color="white">This is some text!</font></p>
									</#if>
									<!-- Payment option that customer used to pay for the order -->
									<#if order.paymentMethod?has_content>
										<p><font size="3" color="white">This is some text!</font></p>
									</#if>
								</td>
								</#if>
								<#if order.shippingMethod?has_content || order.paymentMethod?has_content>
								<td colspan="2" style="visibility: hidden">
									<!-- Shipping option chosen to deliver the order -->
									<#if order.shippingMethod?has_content>
										<p><font size="3" color="white">This is some text!</font></p>
									</#if>
									<!-- Payment option that customer used to pay for the order -->
									<#if order.paymentMethod?has_content>
										<p><font size="3" color="white">This is some text!</font></p>
									</#if>
								</td>
								</#if>
								<#if order.shippingMethod?has_content || order.paymentMethod?has_content>
								<td colspan="200">
									<#if order.shippingAddress?has_content && order.billingAddress?has_content && !order.isSameShippingAndBilling>
										<p class="title-detached">${textLabels.shipTo}</p>
									</#if>
									<p style="visibility: hidden"><font size="3" color="white">This is some text!</font></p>
									<p class="text-uppercase">${order.shippingAddress.name}</p>
									<p class="text-uppercase">${order.shippingAddress.companyName}</p>
									<p class="text-uppercase">${order.shippingAddress.street}</p>
									<p class="text-uppercase">${order.shippingAddress.postalCode} <#if order.shippingAddress.city?has_content>${order.shippingAddress.city} </#if></p>
									<p style="visibility: hidden"><font size="3" color="white">This is some text!</font></p>
									<p style="visibility: hidden"><font size="3" color="white">This is some text!</font></p>
									<p style="visibility: hidden"><font size="3" color="white">This is some text!</font></p>
									<p style="visibility: hidden"><font size="3" color="white">This is some text!</font></p>
									<p style="visibility: hidden"><font size="3" color="white">This is some text!</font></p>
                                                                        <p style="visibility: hidden"><font size="3" color="white">This is some text!</font></p>
									<p style="visibility: hidden"><font size="3" color="white">This is some text!</font></p>
								</td>
								</#if>
							</tr>
							</tbody>
						</table>
					</td>
				</tr>

				<!-- Order comments -->
				
				
				<!-- Order information -->
				<tr>
					<td class="order-items">
						<table>
							<tbody class="invoice-row">
							<tr>
								<td colspan="3" class="title">
									<!-- Order number -->
									<span>${textLabels.order}<#if order.number?has_content> #${order.number}</#if></span>
								</td>
							</tr>
								
								<!-- Ordered items list -->
								<#list order.items as orderItem>
								<tr>
									<td class="order-item-desc">
										<p class="order-item-title">${orderItem.name}</p>
										<p>${textLabels.sku}: ${orderItem.sku}</p>
										<p>${orderItem.formattedOptions}</p>
									</td>
									<td class="order-item-count">
										<p>${orderItem.quantity}</p>
									</td>
									<td class="order-item-total text-bold">
										<p>${orderItem.price}</p>
									</td>
								</tr>
								</#list>
							</tbody>

							<!-- Order totals -->
							<tbody class="invoice-row order-total">

							<!-- Order subtotal -->
							<tr>
								<td class="order-item-desc"></td>
								<td class="order-item-count">
									<p>${textLabels.items}</p>
								</td>
								<td class="order-item-total">
									<p>${order.subtotal}</p>
								</td>
							</tr>

							<!-- Order shipping cost -->
							<tr>
								<td class="order-item-desc"></td>
								<td class="order-item-count">
									<p>${textLabels.shipping}</p>
								</td>
								<td class="order-item-total">
									<p>${order.shippingCost}</p>
								</td>
							</tr>

							<!-- Order tax -->
							<#list order.taxes as tax>
							<tr>
								<td class="order-item-desc"></td>
								<td class="order-item-count">
									<p>${tax.name}</p>
								</td>
								<td class="order-item-total">
									<p>${tax.value}</p>
								</td>								
							</tr>
							</#list>
							
							<!-- Order discounts total -->
							<#list order.discounts as discount>							
							<tr>
								<td class="order-item-desc"></td>
								<td class="order-item-count">
									<p>${discount.name}</p>
								</td>
								<td class="order-item-total">
									<p>-${discount.value}</p>
								</td>
							</tr>
							</#list>

							<!-- Order total cost -->
							<tr>
								<td class="order-item-desc"></td>
								<td class="order-item-count text-bold">
									<p>${textLabels.total}</p>
								</td>
								<td class="order-item-total text-bold">
									<p>${order.total}</p>
								</td>
							</tr>
							</tbody>
						</table>
					</td>
				</tr>
				</tbody>
			</table>
		</td>
	</tr>
	<!-- Invoice footer -->
	<tr>
		<td class="footer">
			<div>${textLabels.footerMessage}</div>
		</td>
	</tr>
	</tbody>
</table>
I hope this is helpful.
__________________
Anna,
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

Please click Thanks if my reply helped you.
  #9  
Old 12-15-2015, 05:24 PM
Fish123's Avatar
Fish123 Fish123 is offline
 
Join Date: Jan 2013
Posts: 7
Red face Thank you

Thanks for your help. Much appreciated. Still trying to get to the layout I'm looking for so will need to look carefully at what the code contains and doesn't contain. It looks as though the country isn't given in the shipping address. Is it? I cannot see the billing information in the code either. I'd need that, or at least the name of the buyer, as sometimes our products are bought as gifts.

I'm not sure why 'This is some text!' needs to be in the code. I can still see it. Is there a reason? I agree it didn't print out but why is it there?

When I printed it out this new coding invoice still printed in a larger text and ran to two pages rather than the one I printed from the default. I've added a couple of paragraphs to the footer and on the new code given here that footer text goes to a second page - it doesn't on the default.

I'm sure I can work all this out in time if you are busy with other stuff. I'm really pleased to have had your input so far.
  #10  
Old 12-16-2015, 06:16 PM
Antea's Avatar
Antea Antea is offline
Ecwid Team
 
Join Date: Nov 2015
Posts: 381
Default

Quote:
Originally Posted by Fish123 View Post
Thanks for your help. Much appreciated. Still trying to get to the layout I'm looking for so will need to look carefully at what the code contains and doesn't contain. It looks as though the country isn't given in the shipping address. Is it? I cannot see the billing information in the code either. I'd need that, or at least the name of the buyer, as sometimes our products are bought as gifts.

I'm not sure why 'This is some text!' needs to be in the code. I can still see it. Is there a reason? I agree it didn't print out but why is it there?

When I printed it out this new coding invoice still printed in a larger text and ran to two pages rather than the one I printed from the default. I've added a couple of paragraphs to the footer and on the new code given here that footer text goes to a second page - it doesn't on the default.

I'm sure I can work all this out in time if you are busy with other stuff. I'm really pleased to have had your input so far.
Hello!

You are always welcome!

Yes, the custom code given above does not contain billing information and destination country info. Although, it is possible to add the corresponding parameters to the code. You can find the list of the available parameters and more information on how to change invoices in our Knowledge Base.

The lines “This is some text!” are used in the code above just for formatting the customer’s info section, it could be any text.

I’m sure that with the help of the info given in the article you will successfully customise the invoice template so it works best for you.
__________________
Anna,
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

Please click Thanks if my reply helped you.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
invoice, shipping labels

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:45 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.