Use Simple Commerce with Static Caching

Static Caching is a really awesome feature of Statamic - taking advantage of it can really help to speed up your site!

Although, because e-commerce sites are dynamic (for example: the cart is different per user) you'll want to ignore those bits so they don't get cached.

Thankfully, you can wrap that code in Statamic's nocache tag. For example: you might want to do something like this for a line items counter in your site header:

1{{ nocache }}
2 Cart ({{ sc:cart:count }} items)
3{{ /nocache }}

Also, you'll want to do it for any other parts of your site that show cart information (like the cart/checkout pages). Just wrap the info in the tag and the job's a good 'n.

1{{ nocache }}
2 {{ sc:cart }}
3 <table>
4 <thead>
5 <tr>
6 <th>Product</th>
7 <th>Price</th>
8 <th>Quantity</th>
9 <th>Total</th>
10 </tr>
11 </thead>
12 
13 <tbody>
14 {{ items }}
15 <tr>
16 <td>
17 {{ product:title }}
18 </td>
19 
20 <td>
21 {{ product:price }}
22 </td>
23 
24 <td>
25 {{ sc:cart:updateItem :item="id" }}
26 <select
27 name="quantity"
28 onchange="this.parentElement.submit()"
29 >
30 {{ loop from="1" to="5" }}
31 <option
32 value="{{ value }}"
33 {{ if quantity == value }} selected {{ /if }}
34 >
35 {{ value }}
36 </option>
37 {{ /loop }}
38 </select>
39 {{ /sc:cart:updateItem }}
40 </td>
41 
42 <td>{{ total }}</td>
43 </tr>
44 {{ /items }}
45 
46 <tr>
47 <td></td>
48 <td></td>
49 <td>Subtotal</td>
50 <td>{{ items_total }}</td>
51 </tr>
52 </tbody>
53 </table>
54 {{ /sc:cart }}
55{{ /nocache }}