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 data-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.

NameValueDescription
data-pc-default
any

Defines the default text for the bag label

ValueDescriptionRequired
bag-container

Parent element for your entire bag design

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

Last updated