> 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/bag.md).

# Bag

{% 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" %}
All attribute names will start with <mark style="color:purple;">pc</mark> for the "**Name**" inside the Webflow Designer
{% endhint %}

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

Any changes made to the bag requires an **additional** step aside from publishing your changes on Webflow; this is to sync and overwrite the bag stored in the backend of Penni Cart.

To do this, simply navigate to the Webflow Apps panel and launch Penni Cart. From here you'll find a '**Publish**" button on either the **Templates** or **Components** where it'll live under section covering the Bag.

Once everything is all synced to the backend, you can publish the changes on Webflow like usual and view the bag for review.

{% embed url="<https://www.loom.com/share/fef7a662adbe4f0fab25adc6b9abd1d7?sid=f2d29cf1-5a48-4068-be83-cd78587c7bea>" %}

You avoid using your using placeholder text on the <mark style="color:purple;">`bag-title`</mark>, implementing the following attribute will overwrite the text when viewing your design. This will act as the new default state when nothing new is added to the bag.

<table data-full-width="false"><thead><tr><th width="251">Name</th><th width="209">Value</th><th width="274">Description</th></tr></thead><tbody><tr><td><pre><code>data-pc-default
</code></pre></td><td><pre><code>any
</code></pre></td><td>Defines the default text for the bag label</td></tr></tbody></table>

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

<table data-full-width="false"><thead><tr><th width="362">Value</th><th width="274">Description</th><th data-type="checkbox">Required</th></tr></thead><tbody><tr><td><pre><code>bag-background
</code></pre></td><td>Define element for the background of the bag when opened</td><td>true</td></tr><tr><td><pre><code>bag-title
</code></pre></td><td>Element to display text when bag receives a new item or acts as a label</td><td>true</td></tr><tr><td><pre><code>bag-product-list
</code></pre></td><td>Parent element for all bag items to dynamically render</td><td>true</td></tr><tr><td><pre><code>bag-product
</code></pre></td><td>Define a element as the bag item to template from</td><td>true</td></tr><tr><td><pre><code>bag-product-image
</code></pre></td><td>Bag product image</td><td>true</td></tr><tr><td><pre><code>bag-product-name
</code></pre></td><td>Bag product name</td><td>true</td></tr><tr><td><pre><code>bag-product-attributes
</code></pre></td><td>Bag product sku</td><td>false</td></tr><tr><td><pre><code>bag-product-price
</code></pre></td><td>Bag product price</td><td>true</td></tr><tr><td><pre><code>bag-product-quantity
</code></pre></td><td>Bag product quantity</td><td>true</td></tr><tr><td><pre><code>bag-product-remove-button    
</code></pre></td><td>Element to remove the current bag item</td><td>false</td></tr><tr><td><pre><code>bag-view-bag-button
</code></pre></td><td>Define a element to proceed to cart page</td><td>false</td></tr><tr><td><pre><code>bag-checkout-button
</code></pre></td><td>Define a element to proceed to checkout page</td><td>false</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.pennicart.io/attributes/bag.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.