Create an Eshop 4: Orders

Learn about eshop orders and how to process them, make your Terms of Service accessible during checkout, and add some useful extras to your right column, such as a login panel and search field.
This time begin directly on the actual eshop. Open your Internet browser and enter your eshop address - in this case the example eshop is
Place an Order
Put some products in your shopping cart. You’ll find yourself in the shopping cart details. Here customers can check the products they’ve ordered and, if they want to, it’s still possible to change the quantities or remove an item. Once you are satisfied with the order, click on CONTINUE in the lower right-hand corner.
01 Add something to the cart with marks.png
On the next screen, enter an email address and select the option to continue without registering.
02 Enter your email with marks.png
Customers are registered globally to Webgarden’s database. It is therefore possible that they already have an account as a result of registering on another Webgarden website. If this is the case, they will be prompted to enter their password in order to continue.
Choose a delivery and a payment method. Webgarden only allows customers to choose from the payment methods which you have designated as valid under the particular delivery method. CONTINUE.
03 Choose delivery and payment methods with marks.png
Enter the DELIVERY ADDRESS. The required fields are marked with an *. It’s also possible to enter a separate INVOICE ADDRESS - otherwise the invoice address will be the same as the delivery address. CONTINUE.
04 Enter contact info with marks.png
Review the ORDER DETAILS and then click on SUBMIT ORDER.
05 Submit order with marks.png
At the end there is a page with payment information. The instructions you entered in the payment method settings will be shown according to the payment method that was chosen. If the customer has chosen to pay cash on delivery, like in this example, there is no need for immediate action. If he/she has chosen to pay with PayPal, she will be instructed to click on the suitable payment gateway which will have the items in the cart automatically forwarded to it.
06 Optional - Final order screen.png
After the order has been submitted, an email confirming the order and payment details will be sent to both the customer and the eshop administrator.
Add Your Terms of Service
Eshops are required by law to present their customers with a Terms of Service. Make your Terms of Service accessible to customers during checkout, and notify them with the statement “By submitting your order, you agree to the Terms of Service” located just above the SUBMIT ORDER button.
To add your Terms of Service to the eshop, first create a new category called Info with a blank document inside it called Terms of Service.
07 Add blank document edited with marks.png
Insert the text of your Terms of Service into the newly created document using a PARAGRAPH TEXT element. You can write the Terms of Service yourself or use one of the many Terms of Service generators online.
08 Add paragraph text element edited with marks.png
Just paste the text into the field and SAVE.
09 Insert terms of service edited with marks.png
Now create a link from the checkout screen to your new Terms of Service. To do this, first copy the Terms of Service url.
10 Copy url edited with marks.png
Then paste it under the tab ESHOP, in GENERAL eshop settings, in the field LINK TO TERMS OF SERVICE.
11 Paste terms of service url edited with marks.png
Great. Now a link to the Terms of Service will be displayed during the last step of ordering.
Process Orders
Webgarden allows eshop administrators to easily view, invoice, and track the progress of all customer orders.
In Webgarden administration, go to the ESHOP tab and select ORDERS. This page shows a list of existing orders. There will be at least one here - the one you created as a customer. Look at the important details - the order number, date, customer name, total price, and status of the order. Click on the eye icon to see even more details for a particular order.
12 Orders edited with marks.png
The detail provides a comprehensive overview of the order, a list of items, delivery and invoice addresses, the payment method, etc.
13 Order details edited.png
Go back to the main ORDERS screen. If you would like to use the invoices generated by Webgarden for your accounting, click on the invoice icon on the right to open the invoice in a new window.
14 Open invoice with marks.png
Print out the invoice to send along with the products.
15 Invoice.png
After you’ve sent the products to the customer, go back to the ORDERS screen and click on the checkbox next to the word NO in the column SHIPPED. This will change the status to YES.
16 Check shipped with marks.png
If you also use Webgarden’s services to manage your stock, then click on the checkbox in the STOCK column. This will deduct the product from your stock inventory.
17 Check stock edited with marks.png
Once you’ve received payment for the order, click on the checkbox in the column PAID. Then it will say that YES in that column as well.
Finally, save any screens that you would like to keep for your records before using the dropdown menu to change the STATUS of the order to CLOSED. Finalize the status change by clicking on the OK button. When you close or cancel an order it will disappear.
18 Close order edited with marks.png
Manage Your Stock
In this situation the customer ordered the all the Costa Rican coffee beans we had. Under the ESHOP tab, go to the category STOCK where you’ll find an inventory of all your products. Notice that the NUMBER of Costa Rican Tarrazu is currently 0.
19 No more Costa Rican beans edited with marks.png
Imagine that you really don’t have any more Costa Rican Tarrazu available and that it will take up to 5 days to get more.
Click on the product name in STOCK to go to the product. Not far from the top of the product screen, you’ll see the AVAILABILITY dropdown. Select WITHIN ONE WEEK from the dropdown, and SAVE.
20 Change the product availability edited with marks.png
TIP: Click on the AVAILABILITY link to go to the AVAILABILITY OF GOODS settings where you can edit the availability dropdown options or even add more.
Hover over the yellow edit icon in the upper right-hand corner and select SHOW to see how the availability information looks on the actual eshop. The product can still be purchased, but the customer has to count on the delay specified.
21 Product showing availability edited.png
Let’s fast forward five days. You’ve received new supplies. In the product Costa Rican Tarrazu, update the NUMBER IN STOCK to 48. SAVE.
22 Add new stock edited with marks.png
TIP: You can also edit the number of items in stock under the ESHOP tab in STOCK.
Have another look at your actual eshop. The availability has changed to Availability: In Stock.
23 Product in stock.png
Consider adding the availability to all the products in your eshop.
Filter Your Data
It’s possible to filter products on the STOCK and DISCOUNTED PRODUCTS pages and to filter orders on the ORDERS page.
Let’s look at an example from the STOCK page. If you need to see all of the products which you no longer have in stock or have just one left, then at the top of the column NUMBER use the dropdown to select less than or equal to (< =), enter 1 in the field to the right, and click on FILTER. The results will include only the records which match the criteria.
24 Filter edited with marks.png
Filter by any individual column (PRODUCT CODE, NAME, etc.) or combination thereof in the same way. Words and phrases, however, must be entered exactly. If you enter “Ethiopian” you’ll find the product “Ethiopian Yirgacheffe,” but if you enter “Ethiopia” you won’t find anything.
25 Filter by name edited with marks.png
Do the same to filter orders and products on the ORDERS and DISCOUNTED PRODUCTS pages.
What If Products Will Be Unavailable Long Term?
Under certain circumstances you may find that some products will be unavailable long term or even discontinued. You could delete those products, but a better option is to just move them to a product archive. There are a number of ways to do this, and here’s one of them.
Under the CONTENT tab, create a new section using + NEW SECTION in the content tree.
26 Add a new section edited with marks.png
The new section will initially be called NEW CATEGORY, but it is on the first level of the content tree and therefore a section.
Go to the new section and change the title to Archive. Then use the green + icon in the upper right-hand corner to add a CATEGORY to the new section.
27 Add a category to the archive edited with marks.png
Rename the new category 2016.
Even though you can see the new section with its category in administration, it is not visible on the eshop because it’s not part of any menu. The section only exists on the website database, and there isn’t any way to click through to it from the actual website.
Imagine that Jamaican Blue Mountain is unavailable this year, so you want to remove it from your eshop. Go to the product, hover over the yellow edit icon, and select LOCATION.
28 Go to Jamaican location edited with marks.png
Then find the category Archive/2016 and click on MOVE, because you want to remove it from the original locations.
29 Move Jamaican Blue Mountain edited with marks.png
Now Jamaican Blue Mountain is no longer available on the eshop. But if you decide to sell it again in the future, you can simply move the product back to the eshop the same way you moved it to the archive.
Add Some Extra Features to the Right Column
In this part, you’ll add a few useful odds and ends to the right column on your eshop.
Would You Like to Have Registered Users?
If so, you need a login panel.
In administration, go to the RIGHT COLUMN. Since you’ll want to add a larger amount of content to the right column, don’t just slap it all in there. Rather create special categories for it called PANELS. To add a panel, hover over the green + icon in the upper right-hand corner of your screen and select PANEL.
30 Add a panel edited with marks.png
TIP: Panels are practically the same as other categories; it’s possible to move them and rearrange them easily. The only real difference is that with the panel, the focus is on the description, whereas with categories, the focus is on the detail. Therefore Webgarden has it set up so that you will primarily be editing the description for panels.
Rename the panel Log In.
Click on the green + icon in the new panel. Go to the MORE OPTIONS tab, and select the element LOGIN PANEL.
31 Add a login window edited with marks.png
In the next dialog box, just hit SAVE.
32 Just save with marks.png
Display the actual eshop to get a look at your new panel. There’s a place for customers to log in, and they can register by clicking on NEW USER.
33 New login panel.png
TIP: If you don’t want it to say Log In at the top of the panel, you can either change the name to something else or leave it blank. If you leave it blank, it will be called UNNAMED in administration.
Try out your new login panel as a fictitious customer. After logging in you can click on the link MY ACCOUNT to adjust your user details, change your password, etc. If users click on SAVE CHANGES here, they will be added to your registered user list, even if they originally registered somewhere else.
34 My account.png
As the administrator, you can manage your registered users and the registration form under the SETTINGS tab, in the categories regarding USERS.
35 Manage your users edited with marks.png
Let Customers Search Your Eshop
Add a search field to your eshop.
Go to the RIGHT COLUMN and create another PANEL. Delete the title of the panel. It will appear in administration as Unnamed.
Use the green + icon in the panel to insert a SEARCH element, which you can find under the MORE OPTIONS tab.
36 Add a search element edited with marks.png
37 Select a primary search engine with  marks.png
Add a Panel with Contact Information
Add one more PANEL, as you did before. Delete the panel name. Then use the green + icon in the panel to add a HEADING element.
38 Add a heading edited with marks.png
In the dialog box, enter Call Us, and change the SIZE to SMALL. SAVE.
39 Call Us dialog box with marks.png
Then add a second HEADING element below the first one.
This time enter your telephone number as the HEADING TEXT, and change the SIZE to SMALL. Then move to the ADVANCED tab.
40 Add your phone number with marks.png
Change the ALIGNMENT to CENTER and SAVE.
41 Advanced tab with marks.png
Take a look at your new right column.
42 Final appearance.png
To be continued...
05/02/2016 04:26:50
Or visit this link or this one