> For the complete documentation index, see [llms.txt](https://docs.pennicart.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pennicart.io/attributes/cart.md).

# Cart

{% hint style="warning" %}
Please note that this document is still <mark style="color:purple;">**Work in Progress**</mark><mark style="color:purple;">.</mark> It might be updated, revised, or changed entirely in the near future.&#x20;
{% endhint %}

{% hint style="info" %}
Before starting, please set the parent element that wraps everything with <mark style="color:purple;">`pc="cart`</mark> if you are starting from scratch.
{% endhint %}

<figure><img src="/files/heCgVjFTniNHAqBHxCSs" alt=""><figcaption></figcaption></figure>

<table data-full-width="true"><thead><tr><th>Name</th><th width="281">Value</th><th>Description</th><th width="100" data-type="checkbox">Required</th></tr></thead><tbody><tr><td><pre><code>pc
</code></pre></td><td><pre><code>cart
</code></pre></td><td>Initialize the Cart page</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-list
</code></pre></td><td>Parent element for all cart items</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-item
</code></pre></td><td>Identifies the cart item structure to render dynamically</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-quantity
</code></pre></td><td>Captures the quantity</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>remove-product
</code></pre></td><td>Element to remove cart item</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-sku
</code></pre></td><td>Product SKU</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-custom
</code></pre></td><td>Display list of product options</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>product-image
</code></pre></td><td>Product image</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-subtotal
</code></pre></td><td>Display store subtotal</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-delivery
</code></pre></td><td>Display store shipping rate</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-tax
</code></pre></td><td>Display store taxes</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-total
</code></pre></td><td>Display store total</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>view-checkout
</code></pre></td><td>Button to proceed to the checkout page</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-discount-wrapper
</code></pre></td><td>Parent element for discount rate</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-discount-label
</code></pre></td><td>Element to nest applied discounts</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>summary-discount-value
</code></pre></td><td>Display store discount rate</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>discount-wrapper
</code></pre></td><td>Parent element for coupon input elements</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>discount-form
</code></pre></td><td>Define form block for input validation</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>discount-submit
</code></pre></td><td>Define button that triggers coupon submission</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>toast-discount-ok
</code></pre></td><td>Element for coupon success</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>toast-discount-error
</code></pre></td><td>Element for coupon failure</td><td>false</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>toast-discount-code
</code></pre></td><td>Child element within coupon element to display valid discount code</td><td>false</td></tr></tbody></table>