Bag

Understanding the attributes needed to display your products throughout the website.

Please note that this document is still Work in Progress. It might be updated, revised, or changed entirely in the near future.

All attribute names will start with pc for the "Name" inside the Webflow Designer

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.

You avoid using your using placeholder text on the bag-title, 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.

Name	Value	Description
data-pc-default	any	Defines the default text for the bag label

Value	Description	Required
bag-background	Define element for the background of the bag when opened
bag-title	Element to display text when bag receives a new item or acts as a label
bag-product-list	Parent element for all bag items to dynamically render
bag-product	Define a element as the bag item to template from
bag-product-image	Bag product image
bag-product-name	Bag product name
bag-product-attributes	Bag product sku
bag-product-price	Bag product price
bag-product-quantity	Bag product quantity
bag-product-remove-button	Element to remove the current bag item
bag-view-bag-button	Define a element to proceed to cart page
bag-checkout-button	Define a element to proceed to checkout page