# Sacola A cart that slides in from the side of the store, with coupons, shipping by postal code and a free shipping bar. > Sacola is an exclusive THM Componentes component that opens the store cart in a side drawer, or from the bottom when space is narrow. It has quantity steppers, removal with undo, a coupon field, shipping by Brazilian postal code, a free shipping progress bar, product suggestions and an animated total. It suits online stores and prototypes. - Category: Commerce and conversion - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/sacola/ ## What it looks like It works like a big online store cart. Clicking the cart or an add button lays a translucent veil over the storefront and slides a light panel in from the right; in narrow spaces it rises from the bottom with rounded corners. At the top, a gradient bar fills as the order gets closer to free shipping. Each item shows a photo, a name, minus and plus controls and a remove link; on removal the list rearranges smoothly and a dark notice offers undo for a few seconds. Below come product suggestions, a coupon field, shipping by postal code and a total that counts to its new value. ## You may be looking for this if you asked for something like - “a cart that slides in from the side when I click buy” - “a mini cart for my store with a discount code field” - “calculate shipping by zip code right inside the cart” - “a bar showing how much more to spend for free shipping” - “a cart with that undo notice when someone removes an item” - “a customers also bought section inside the cart” - “make my online store feel like a big ecommerce site” - “a cart drawer that slides up from the bottom on mobile” ## Also known as side cart, mini cart, slide-out cart, off-canvas cart, shopping cart panel, flyout cart, sliding cart sidebar ## When to use - Online stores where people add items without leaving the product page - Ecommerce storefronts and prototypes that present the purchase flow - Stores with a free shipping threshold that want larger orders - Catalogs with add-on products to suggest inside the cart ## When to avoid - Real shipping quotes without your carrier integration, since the regional table is local and fixed - Stores outside Brazil, since postal codes, currency and labels are Brazilian ## How to ask your AI ```text Build a side cart for my store: a drawer that opens from the right and slides up from the bottom on phones, quantity steppers, remove with undo, a coupon field, shipping by postal code, a free shipping bar, focus trapped while open, Esc to close and my brand colors. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Sacola ### How do I use Sacola with my own store products? Pass your items in the items prop, with fields for id, name, detail, price, quantity and photo, control opening with v-model:open and handle the checkout event, which delivers the items and totals. In Sacola, coupons and shipping come from local demo lists, so ask your AI to connect them to your discount rules and shipping quotes. ### Where should I place Sacola on the page? Sacola positions its drawer and veil inside the component's own area, which ships with a demo storefront and header. To cover the whole page, ask your AI to place it in a fixed container the size of the screen, replace the sample header with your site's cart button and remove the demo note from the footer. ### Does Sacola work with a keyboard and screen readers? Yes. Sacola opens as a modal dialog, moves focus to the close button, keeps Tab inside the panel, closes with Esc or a click on the veil and returns focus to the button that opened it. Each quantity button names its product, the free shipping bar is exposed as a progress bar, and reduced motion turns the animations off. ## Related components - [Balcão](https://vibecode.thmtecnologia.com/en/components/balcao/): A three-step payment screen with a Pix QR code, card installments and boleto, with the order summary alongside. - [Mostruário](https://vibecode.thmtecnologia.com/en/components/mostruario/): A main photo with a magnifier that enlarges details on hover, thumbnails below and a fullscreen view with zoom. - [Pódio](https://vibecode.thmtecnologia.com/en/components/podio/): Plan cards side by side with a monthly and yearly switch, a featured plan and a full feature comparison. - [Mezanino](https://vibecode.thmtecnologia.com/en/components/mezanino/): A panel that slides up from the bottom of the screen, stops at three heights and follows your finger. - [Baralho](https://vibecode.thmtecnologia.com/en/components/baralho/): Notifications that pop up in a corner, stacked like cards, and go away on their own or with a sideways swipe. - [Veredito](https://vibecode.thmtecnologia.com/en/components/veredito/): A customer reviews block with a star average, bars per rating, filters, sorting and a review form. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).