The receipt page, like most Etsy pages, is made from many nested tables. I've tried to apply IDs and class names where they will be useful, without filling the page with redundant attributes. Most of the IDs and class names are on row or cell elements. If you need to apply styles to an element within one of these elements, you can use CSS selectors. If you think there's an element that needs a specific ID that doesn't have one, let me know.
It was tricky to come up with a decent naming convention for the elements. There are a lot of elements, especially withing the buyer and seller sections, that have similar names. I tried to strike a balance between descriptive and not-overly-long.
Hopefully this guide will be useful, but a page inspector tool is very useful for investigating elements on pages like this. I strongly recommend the FireBug extension for Firefox - its page inspection tools are excellent.
The whole page is contained within three nested tables. These are given the IDs #rootTable1, #rootTable2, and #rootTable3, the last containing the real content. Its child rows are labelled as follows:
- The row with the Etsy logo
- #titleRow [more]
- The grey bar with the "Invoice for Etsy order..." text.
- #sellerBuyerRow [more]
- The row containing the seller and buyer info tables.
- #orderSectionHeaderRow [more]
- The rows containing the orange text header for the section. All of these have the class name .headerRow.
- #orderDetailsRow [more]
- #paymentDetailsRow [more]
- #shipToDetailsRow [more]
- #notesDetailsRow [more]
- The rows containing the actual content for that section. All of these have the class name .detailsRow.
- #spacerRow1 ... #spacerRow9
- The rows between each of these rows, spacing the sections out. All of these have the class name .spacerRow.
- The cell containing the order number and associated text.
- The cell containing the link to the original receipt.
- The row containing the orange section headers. Class name is .headerRow.
- The cells containing the relevant header text.
- Space row after the header. Class name .spacerRow.
- The row containing the details tables. Class name .detailsRow.
- Table of user details. Class name .greyBorder.
- The cell containing the user icon. Class name .userIconCell
- The actual icon image element. Class name .userIcon.
- The cell containing the table of details. Class name .userDetailsCell.
- The actual table with the details. Class name .detailsTable.
- The row with the user name and profile link. Class name .userProfileRow.
- The row with the user's rating. Class name .userRatingRow.
- The row with the user's location. Class name .userLocationRow.
- The row with the user name and profile link. Class name .userEmailRow.
- The cell containing the orange header text.
- The cell containing the currency text.
The items are contained in a table with class name .greyBorder. Each item is in its own table, with the id #itemTable_1, #itemTable_2, etc. The contents of the table are described with class names, rather than IDs.
- Cell containing the item image.
- Cell containing the item link.
- An empty spacer cell.
- Cell containing the item price.
- Cell containing the item transaction ID.
- Cell containing the label "quantity".
- Cell containing the item quantity.
- An empty spacer cell.
- Cell containing the label "shipping".
- Cell containing the item's shipping cost.
The last row in the table contains the totals, and has the ID #itemsTotalRow. It contains a sub-table, whose cells have the IDs #itemsTotalLabel and #itemsTotalValue.
The payment details are in a table with class name .greyBorder. The contents of the table depends on what payment state the order is in, and how it got there. I'm limited as to what states I can see, and so I've only defined IDs for states I've tested, and I've tried not to assign incorrect IDs in other states. If you find there's something not right, or something you need, let me know.
If payment has been received through PayPal during the Etsy checkout process, the following IDs are applied:
- The cell containing all the details of the payment.
- The green check mark cell.
- "Paid using PayPal".
- Amount paid and date.
- The cell containing the "payment received" and "shipped" flags.
If you've manually clicked the "payment received" checkbox, the following IDs are applied:
- The green arrow icon.
- The "contact your buyer" message.
The shipping details are in a table with class name .greyBorder. The actual address is in a cell with ID #addressCell and the address itself is in a span with ID #address.
If payment was received through PayPal as part of the Etsy checkout process, then there will be a note "Please cross reference this address with the one on your paypal receipt" in red after the address. If present, this will be in a separate span with ID #crossReferenceWarning.
The notes are in a table with class name .greyBorder.
- "Message from the seller".
- The seller message.
- A spacer row, class name .spacerRow.
- "Message from the buyer".
- The buyer message.
Questions, comments, and feedback welcomed.
- Email: ian at etsyhacks dot com
- Twitter: etsyhacks
- Google Talk: etsyhacks
- Yahoo IM: etsyhacks
- AIM: etsyhacks
- MSN: ian at etsyhacks dot com
- ICQ: 376144688
- Etsy: ehax
- Facebook: etsyhacks.com
You can also sign up for email announcements for hack releases, updates, and general Etsyhacks news.
The code provided at etsyhacks.com is free. However, if you find it makes your life better, and you'd like to support future development, you can send me money via PayPal by clicking on the "Donate" button to the right.
If you'd like to put an Etsyhacks button on your blog or web site, you can use one of these.
The term "Etsy" is a trademark of Etsy, Inc. This website is not endorsed or affiliated by Etsy, Inc. Please see http://www.etsy.com/trademark_guidelines.php for more information about using Etsy's trademarks. Anything provided on these pages is done so free of charge, and with no warranty. Use at your own risk.