Quillo.qweComponents

Tags

#commerce

68 components tagged commerce. Narrow them down with a search or more tags.

Forms 3

AddressFormStreet, city, region, postcode and country in the usual layout, with the autocomplete names browsers fill from.formsinputcheckoutcommerceno-js5 views · 7 downloadsCurrencyInputAn amount with its currency's symbol, thousands grouped as it is typed and the decimals the currency has, sent as plain digits.formsinputpricecommerceinteractive5 views · 5 downloadsQuantityInputA compact count with − and + either side, kept to its limits and step, with the arrow keys, PageUp/PageDown, Home and End.formsinputcartcommerceinteractive5 views · 7 downloads

Overlays 1

QuickViewA Quick view button on a card that opens a preview of the item, its picture, price, text and actions, in a dialog.dialogcardcommerceoverlayinteractive5 views · 6 downloads

Data 9

BarcodeA Code 128 barcode drawn as SVG from text, switching to the compact digit set for long numbers, with the text under it.imagedatadocumentcommerceno-js4 views · 9 downloadsComparisonTableFeatures down the side and options across, with ticks, crosses and values in the cells, and one option picked out.datatablecommerceno-js5 views · 6 downloadsInvoiceA printable invoice: parties, number and dates, lines with quantity and unit price, totals, paid and balance, notes and terms.documentcommercepriceprintrecordno-js6 views · 6 downloadsPriceBreakdownWhat a price is made of, a line each (a discount in green), and the total.commercepricedatano-js6 views · 4 downloadsQrCodeA QR code drawn as SVG by an encoder written in Quillo: any text as UTF-8, level M, versions 1 to 10, the same on the server and in the browser.imagedatadocumentcommerceno-js10 views · 9 downloadsRatingSummaryThe average rating out of 5, how many ratings, and a bar per star count, each a filter button or link if you like.chartcommercesocialdatano-js6 views · 5 downloadsReceiptA narrow till-style receipt in a monospace face: shop, date, lines, totals, payment and change, a footer and a torn edge.documentcommercepriceprintno-js6 views · 6 downloadsReviewCardOne review: stars (halves too), title, text, reviewer and date, a Verified mark, images, the seller's reply and a Helpful vote.cardsocialcommentcommerceno-js7 views · 6 downloadsReviewListReviews sorted by a select (newest, highest, most helpful), filtered by stars with counts, shown a page at a time.listsortfiltercommercesocialinteractive6 views · 7 downloads

Media 1

ZoomImageA picture that zooms in where the pointer is; a click holds it, and the keyboard zooms and moves around too.mediaimagecommerceinteractive6 views · 4 downloads

Commerce 35

AddressCardA saved address with a Default badge and Edit and Remove, as submit buttons in a plain form or callbacks.commercecheckoutcardrecorduserno-js6 views · 7 downloadsBestCouponWorks out the lowest total from several coupons, trying each combination and order under their rules, and explains the winner and why each other coupon lost.smartinteractivecommercecoupondiscountcheckout3 views · 7 downloadsBoxPackerPicks the smallest box that takes items with rotation, or splits across boxes, works out dimensional and billable weight, and says when an item fits none.smartinteractivecommerceshippingpackingweight4 views · 7 downloadsBundleBuilderPicks a bundle from groups with minimums and maximums: tiered discount, the cheapest way to the next tier, the saving over buying alone, and totals exact to the cent.smartinteractivecommercebundlediscountpricing4 views · 7 downloadsCartItemOne line of a cart: picture, name and options, a quantity control, the line's total and Remove, as inputs a form sends.commercecartpriceformsinputinteractive6 views · 6 downloadsCartSummarySubtotal, shipping, tax, a discount and the total added up, with a Checkout button as a link, a form or a callback.commercecartcheckoutpriceno-js6 views · 7 downloadsCheckoutStepsCart → Details → Payment → Done: the steps of a checkout, those done as links back, the current one marked.commercecheckoutnavigationprogressno-js5 views · 7 downloadsCouponInputA promo code box with Apply: on_apply(code) says whether it took, and an applied code shows with Remove.commercecheckoutformsinputinteractive6 views · 5 downloadsDeliveryEstimate"Arrives Tue 4 – Thu 6 Nov", worked out from how many days delivery takes, working days if asked.commercecheckouttimecalendarno-js6 views · 8 downloadsDiscountBadge"−20%" or "Save $10" as a small label, in tones, solid, soft or outline, or pinned to an image's corner.commercepricestatusno-js7 views · 8 downloadsFreeShippingMeterHow far a cart is from free shipping or the next reward, and the cheapest item or set that gets it there, with tiers per currency, exact when reached.smartinteractivecommerceshippingcartrewards3 views · 5 downloadsMarginCalcCost, price, margin and markup bound together: edit any and the rest follow from the two set last, with a price for a target margin and a warning under cost.smartinteractivecommercecalculatormarginpricing3 views · 6 downloadsMiniCartA bag icon with the count that opens a small panel of the items, the subtotal and the way to the cart and checkout.commercecartpopovernavigationinteractive5 views · 8 downloadsOrderHistoryPast orders with number, date, status and total, each opening on <details> to show its items and links.commercelistrecordstatusno-js6 views · 5 downloadsOrderTrackerOrdered → shipped → out for delivery → delivered, with when each happened, the expected date and the tracking link.commercestatusprogresstimeno-js5 views · 6 downloadsPaymentMethodsWays to pay as radio cards with their marks: card (with the brands taken), PayPal, Apple Pay, Google Pay, bank, cash.commercecheckoutformsselectcardno-js6 views · 6 downloadsPlanAdvisorUsage sliders against plans with included amounts, overage and an annual discount: the actual cost of each, the cheapest, and at what usage the answer changes.smartinteractivecommercepricingplansbilling5 views · 5 downloadsPlanToggleMonthly or yearly billing as a pill of two radios, with the saving shown on the yearly side.commercepriceformsselectinteractive6 views · 5 downloadsPriceAn amount written in its currency, with the old price struck through and the discount worked out.commercepriceno-jstypography6 views · 5 downloadsPriceTagA bold price with its period (/month) and a note under it, for plans, rooms and seats.commercepriceno-jsmarketing6 views · 4 downloadsPricingCardOne plan: name, price and period, what it includes, and a button; highlighted with a badge when it is the one to pick.commercepricecardmarketingno-js7 views · 6 downloadsPricingTablePlans across and features down, with ticks, dashes and values in the cells and the recommended plan marked.commercepricetablemarketingno-js7 views · 6 downloadsProductCardA product in a shop's grid: picture, name, price with the discount, stars, a badge and Add to cart, as a plain form or a callback.commercecardpriceimagebuttoncart6 views · 6 downloadsProductConfiguratorBuilds a product from option groups with requires and excludes rules: clashes disabled with the reason, what a change dropped explained, a live price and what is missing.smartinteractivecommerceconfiguratoroptionspricing3 views · 5 downloadsProductGalleryA product's pictures: one large, the rest as thumbnails that switch it, with the arrow keys, swipes and a counter.commerceimagemediatabsinteractive6 views · 6 downloadsProductGridProducts as ProductCards in a grid that fits as many across as there is room for, from a list of records.commercegridcardlistprice6 views · 5 downloadsProrationCalcWorks out a mid-period change of plan by the day: credit for the time left, charge for the new plan and what is due, across month lengths, leap years and downgrades.smartinteractivecommercebillingsubscriptioncalculator2 views · 8 downloadsShippingOptionsShipping methods as radio cards, each with its price and how long it takes; a plain form sends the choice.commercecheckoutformsselectcardno-js7 views · 7 downloadsSizeAdvisorTakes measurements in cm or inches and a size chart, recommends a size per garment, says how it fits by measurement, and settles between-sizes by a stated preference.smartinteractivecommercesizingfitfashion3 views · 6 downloadsStockStatusIn stock, only a few left, out of stock, pre-order or back-order, with a coloured dot and the count.commercestatusfeedbackno-js7 views · 5 downloadsSubscriptionCardThe plan someone is on: price, status, renewal date, usage bars and the links to manage, change or cancel it.commercepricecardsettingsdashboardno-js6 views · 6 downloadsTrustBadgesSecure payment, free returns, a guarantee: reassurance icons with a line each, in a row, a grid or a list.commercecheckoutmarketingiconno-js6 views · 6 downloadsUnitPriceComparePacks in different sizes and units normalised to one, ranked by price per unit, with the best value and its saving marked and mixed weight and volume flagged.smartinteractivecommercepricecompareunits4 views · 7 downloadsVariantPickerSizes as buttons and colours as swatches, sold-out ones crossed out: radio groups for the keyboard, hidden inputs for forms.commerceformsselectpickerinteractive6 views · 6 downloadsWishlistButtonA heart that saves a product for later: a pressed-state toggle, named for screen readers, with a hidden input for forms.commercebuttonformsinteractive7 views · 6 downloads

News 1

PaywallMeterA metered paywall: a slim bar counting the free articles read, a warning on the last, then the gate with the offer, its price, benefits and sign-in.newssubscriptioncommercebannerno-js8 views · 8 downloads

Travel 7

BaggageSelectorChecked bags for each passenger with counters, what the first, second and third bag cost, the cabin allowance, the total and the saving against the airport.travelflightsformscommerceinteractive9 views · 8 downloadsCarRentalCardA hire car offer: class and model or similar, seats, bags, gearbox and air conditioning, mileage and fuel policy, supplier rating, pick-up and the price a day and in all.travelcarscardcommerceno-js10 views · 11 downloadsFareOptionsFare families side by side, Basic to Flex: the price a person and over the cheapest, what each includes, costs extra or leaves out, and the total for everyone.travelflightsformscommerceinteractive8 views · 11 downloadsFlightResultA flight in search results: departure and arrival times, the time in the air, stops and layovers, cabin and bags, and the fare with Select.travelflightscardcommerceno-js9 views · 9 downloadsHotelCardA hotel in search results: photo, stars, the review score badge, location, amenities, cancellation terms and the price a night with the stay's total.travelhotelscardcommerceno-js9 views · 10 downloadsRoomPickerA hotel's rooms with their rates (non-refundable, free cancellation, breakfast) and a counter for each, rooms left, the stay's total, who it sleeps and Reserve.travelhotelsformscommerceinteractive9 views · 9 downloadsTourCardA tour or activity: photo, badge and save heart, duration, stars and reviews, free cancellation and pickup, languages, the next start and the price from per person.travelactivitiescardcommerceno-js8 views · 9 downloads

Scheduling 1

BookingSummaryWhat was booked: the place and picture, dates in and out with the nights counted, guests, price lines, total and status.schedulecommercepricecheckoutcardno-js6 views · 7 downloads

Mobile 10

CartSheetA cart in a sheet with quantities, swipe to remove with undo, live totals in decimals, a free-shipping note and a checkout button.mobileinteractivecommercesheetswipetablet2 views · 9 downloadsCheckoutSheetA one-screen checkout in a sheet with address, delivery, payment and a live total, every part validated, and a slide to pay.mobileinteractivecommercesheetpaymenttablet2 views · 6 downloadsFilterSheetFacets in a sheet, with result counts updating live, clear, apply, the count on the button, and a state kept for next time.mobileinteractivecommercesheetfiltertablet3 views · 5 downloadsOrderStatusCardThe stages of an order with a progress bar, an estimate from data, and what to do when it is late.mobileno-jscommerceordertrackingtablet3 views · 6 downloadsPayCodeA QR or code to pay with, refreshing on a timer, screen brightness up while shown, locked until confirmed.mobileinteractivecommercepaymentqr2 views · 7 downloadsPosRegisterA tablet till: a product grid, ticket, quantity and discount, cash and card, in decimals, keeping the sale through a reload.mobiletabletinteractivetillcommercedecimal2 views · 9 downloadsScanToAddScan a product's code to add it to a list, by the camera, a photo or typing, with a beep, a haptic and a count of repeats.mobileinteractivecamerabarcodecommercetablet3 views · 7 downloadsSnapCarouselProduct pictures snapped by CSS with dots and a count, a tap opening a viewer to zoom, keeping its place, working without script.mobileinteractivecommercecarouselzoomtablet3 views · 6 downloadsStickyBuyBarPrice and Buy stuck above the safe area once the page's button scrolls away, hiding near the on-screen keyboard.mobileinteractivecommercestickybuy3 views · 5 downloadsVariantSheetPick size and colour in a sheet, with stock by combination and each unavailable option marked with its reason.mobileinteractivecommercesheetstocktablet3 views · 6 downloads

Other tags

interactive504no-js370mobile211forms176tablet151data128smart100list84chart80commerce68input64navigation63layout59card57finance52gesture48media44dashboard42text39button38feedback38keyboard37social37marketing36table34typography32search31status31user31document30image28picker28link26page26time26banking25calendar24overlay24select24progress23trading22calculator21schedule21travel20grid19settings19menu18news18security18utility18offline17price17blogging16dialog16sheet16swipe15accessibility14drag14notification14tabs14upload14chat13checkout13filter13popover13file12loans12section12audio11loading11profile11coop10forex10icon10code9article8camera8developer8flights8form8print8record8validation8comment7location7onboarding7pricing7video7cart6json6theme6animation5barcode5field5health5keypad5map5planning5qr5scroll5sort5admin4analytics4clock4dates4editor4feed4header4live4notes4parser4photo4player4seo4share4statistics4subscription4toast4analysis3banner3billing3budget3checklist3compare3date3election3games3gloves3gps3haptics3monitoring3number3panes3payment3pen3rotation3sensor3sync3tasks3timeline3timer3toolbar3tracking3undo3units3update3url3voice3wheel3wizard3writing3alerts2balance2capacity2cards2colour2columns2csv2currency2dedupe2device2discount2draft2drawing2education2email2experiment2feeds2files2forecast2fuzzy2help2history2hotels2links2long-press2meetings2merge2messages2money2motion2network2otp2panel2payments2permission2permissions2photos2pin2pinch2query2questions2quiz2rating2reactions2refresh2reorder2report2responsive2retry2scanner2selection2shipping2sign-in2slider2split2stock2storage2store2stories2summary2svg2tax2ticket2till2timezone2tracker2transfer2version2wallet2zoom2accordion1activities1ads1agenda1aggregate1agile1alert1amount1annotate1anomaly1api1app-shell1approval1archive1assessment1audit1autosave1availability1back1backlog1backtest1badge1bank1bar1battery1bibliography1bill1bills1book1bracket1branching1browser1builder1bulk1bundle1business1buy1byline1campaign1carousel1cars1cash1change1changes1check1chips1citation1cleaning1clipboard1cloud1cohort1combobox1comments1compass1conditional1configurator1confirm1conflicts1contact1context-menu1contrast1conversion1converter1cooking1copy1cost1coupon1cron1curl1dark-mode1deadline1debt1decimal1decision1decode1delivery1dependencies1design1detents1diff1disclosure1documents1downloads1dst1duplicates1edit1emoji1empty1encoding1entropy1envelopes1error1event1expenses1explorer1export1fab1faq1fashion1first-run1fit1fixtures1flashcards1flashlight1flesch1floor-plan1formatter1formula1frame1fullscreen1funnel1gallery1game1generator1geofence1goals1grades1grammar1group1groups1guard1handwriting1haptic1heading1headline1heatmap1hours1http1i18n1iban1import1income1indicator1inference1insights1interest1invoice1ios1isbn1job1jsonpath1jwt1kanban1keywords1kiosk1league1learning1level1like1lint1loan1localization1lock1logs1lyrics1mail1margin1markdown1markup1master-detail1matching1memory1mention1modal1mortgage1music1natural1notch1notice1notifications1options1order1orientation1outlier1overflow1overtime1packing1pagination1passcode1password1paste1pattern1payoff1payroll1paywall1people1plans1podcast1pointer1policy1poll1power1preview1profiling1projects1properties1publishing1quality1queue1rail1ranked1ranking1readability1reader1receipt1recipe1recommendations1records1reference1refinance1regex1register1regression1reliability1reload1reply1resize1resources1restaurant1resume1retention1revision1rewards1rings1risk1roles1roster1rota1rules1salary1save-data1savings1schema1screen1seats1seeds1seek1series1shake1shortcuts1sidebar1signature1signup1sizing1slo1slug1splash1sports1spotlight1spreadsheet1sql1stack1staff1standings1startup1status-bar1stepper1steps1sticky1streaks1study1style1subscribe1subtotals1support1survey1switch1tags1team1teams1temperature1template1time-zones1tip1tldr1toggle1torch1tour1tournament1transit1translation1tree1trend1tutorial1typo1unread1unsaved1username1validate1vibrate1viewer1virtual1visualisation1vote1voting1wake-lock1warehouse1waveform1wcag1weather1weight1weights1widget1world1