For VisionCart to work properly you will need a template and some resources, without them (especialy the resources) there is nothing to show in the front end.
In this example we're going through 1 possible way of achieving this. You can also use the template you have configured for your current website.
h2. Creating a template
{code:lang=html}<html>
<head>
<title>[[++site_name]] ([[+vc.shop.name]] :: [[+vc.product.name:default=`[[+vc.category.name]]`]])</title>
<base href="[[++site_url]]" />
<link rel="stylesheet" type="text/css" href="assets/components/visioncart/web/css/style.css" />
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2"><h1>[[+vc.shop.name]] <span>[[+vc.category.name]] <span>[[+vc.product.name]]</span></span></h1></td>
<td><div id="visioncart-shoppingcart"></div></td>
</tr>
<tr>
<td width="300">[[!vcWayfinder]]</td>
<td>[[*content]]</td>
<td width="200">[[!Login?]]<hr />[[!vcGetBasket]]</td>
</tr>
</table>
</body>
</html>
{code}
h2. Creating the resources
VisionCart needs 6 resources,
h3. Webshop
Create a resource that has the name of the webshop or just 'webshop' and place this in the content field:
{code}[[!vcGetCategories?parents=`0`]]{code}
And set the template to the Template we just made and set it as folder.
This will be the root of your web-shop
*In that resource create the following 5 resources:*
h3. Product
Create a resource called 'Product' and place this in the content field:
{code}[[!vcGetProduct]]{code}
And set the template to the Template we just made and hide in menu.
h3. Category
Create a resource called 'Category' and place this in the content field:
{code}[[!vcGetCategory?id=`[[+vc.category.id]]`&shopId=`[[+vc.shop.id]]`]]
<table>
[[!vcGetProducts?parents=`[[+vc.category.id]]`]]
</table>
[[!vcGetProductList?id=`[[+vc.category.id]]`&shopId=`[[+vc.shop.id]]`&sortBy=`Product.name`]]{code}
And set the template to the Template we just made and hide in menu.
h3. Order
Create a resource called Order and place this in the content field:
{code}[[!vcOrderProcess]]{code}
And set the template to the Template we just made.
h3. View order
Create a resource called 'View order' and place this in the content field:
{code}[[!vcOrderView]]{code}
And set the template to the Template we just made.
h3. Order history
Create a resource called 'Order history' and place this in the content field:
{code}<h2>Order history</h2>
[[!vcOrderHistory?viewOrderResource=`id from the view order resource we just made`]]?{code}
And set the template to the Template we just made.
h1. Modify shop-settings
Go to Components \-> VisionCart \-> Shop management, right-click your shop and select 'update'.
Select settings-tab and then Templates / resources. Then select the resources we just created.
!Afbeelding 7.png|border=1!
{scrollbar}
In this example we're going through 1 possible way of achieving this. You can also use the template you have configured for your current website.
h2. Creating a template
{code:lang=html}<html>
<head>
<title>[[++site_name]] ([[+vc.shop.name]] :: [[+vc.product.name:default=`[[+vc.category.name]]`]])</title>
<base href="[[++site_url]]" />
<link rel="stylesheet" type="text/css" href="assets/components/visioncart/web/css/style.css" />
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2"><h1>[[+vc.shop.name]] <span>[[+vc.category.name]] <span>[[+vc.product.name]]</span></span></h1></td>
<td><div id="visioncart-shoppingcart"></div></td>
</tr>
<tr>
<td width="300">[[!vcWayfinder]]</td>
<td>[[*content]]</td>
<td width="200">[[!Login?]]<hr />[[!vcGetBasket]]</td>
</tr>
</table>
</body>
</html>
{code}
h2. Creating the resources
VisionCart needs 6 resources,
h3. Webshop
Create a resource that has the name of the webshop or just 'webshop' and place this in the content field:
{code}[[!vcGetCategories?parents=`0`]]{code}
And set the template to the Template we just made and set it as folder.
This will be the root of your web-shop
*In that resource create the following 5 resources:*
h3. Product
Create a resource called 'Product' and place this in the content field:
{code}[[!vcGetProduct]]{code}
And set the template to the Template we just made and hide in menu.
h3. Category
Create a resource called 'Category' and place this in the content field:
{code}[[!vcGetCategory?id=`[[+vc.category.id]]`&shopId=`[[+vc.shop.id]]`]]
<table>
[[!vcGetProducts?parents=`[[+vc.category.id]]`]]
</table>
[[!vcGetProductList?id=`[[+vc.category.id]]`&shopId=`[[+vc.shop.id]]`&sortBy=`Product.name`]]{code}
And set the template to the Template we just made and hide in menu.
h3. Order
Create a resource called Order and place this in the content field:
{code}[[!vcOrderProcess]]{code}
And set the template to the Template we just made.
h3. View order
Create a resource called 'View order' and place this in the content field:
{code}[[!vcOrderView]]{code}
And set the template to the Template we just made.
h3. Order history
Create a resource called 'Order history' and place this in the content field:
{code}<h2>Order history</h2>
[[!vcOrderHistory?viewOrderResource=`id from the view order resource we just made`]]?{code}
And set the template to the Template we just made.
h1. Modify shop-settings
Go to Components \-> VisionCart \-> Shop management, right-click your shop and select 'update'.
Select settings-tab and then Templates / resources. Then select the resources we just created.
!Afbeelding 7.png|border=1!
{scrollbar}