MODX Cloud

The Most Productive MODX Learning Playground Ever

Claim Free Lab Account

VisionCart.Templating

Skip to end of metadata
Go to start of metadata

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.

Creating a template

<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>

Creating the resources

VisionCart needs 6 resources,

Webshop

Create a resource that has the name of the webshop or just 'webshop' and place this in the content field:

[[!vcGetCategories?parents=`0`]]

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:

Product

Create a resource called 'Product' and place this in the content field:

[[!vcGetProduct]]

And set the template to the Template we just made and hide in menu.

Category

Create a resource called 'Category' and place this in the content field:

[[!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`]]

And set the template to the Template we just made and hide in menu.

Order

Create a resource called Order and place this in the content field:

[[!vcOrderProcess]]

And set the template to the Template we just made.

View order

Create a resource called 'View order' and place this in the content field:

[[!vcOrderView]]

And set the template to the Template we just made.

Order history

Create a resource called 'Order history' and place this in the content field:

<h2>Order history</h2>
[[!vcOrderHistory?viewOrderResource=`id from the view order resource we just made`]]?

And set the template to the Template we just made.

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.

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.