# 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="https://3075810000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk0ZZSLFkvC65RrA50ZiI%2Fuploads%2FqOMASt1D5D2rDHQHavsX%2Fpc-docs-bag01.svg?alt=media&#x26;token=24318295-94db-4c37-905a-419874772a16" 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="https://3075810000-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fk0ZZSLFkvC65RrA50ZiI%2Fuploads%2FpzdbwiqxL6TbUyG2VFX7%2Fpc-docs-bag02.svg?alt=media&#x26;token=86b61a52-fb25-4bc1-83f1-7c71dcf41b52" 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>