hb-shop-item-row (shop-item-row)

Category: commerce
Tags: commerce, product
Package: @htmlbricks/hb-shop-item-row

Overview

Horizontal shop product row built as a Bulma card with a two-column layout: a narrow thumbnail column (optional image, optional badge tag) and a main column (linked title, muted subtitle, body text, star rating with numeric score, linked reviews line, current and compare-at prices, optional card footer). Content can come from attributes or from named slots; when a slot has no light DOM children, the component falls back to the matching string attribute.

Use this element in dense product lists, search results, or comparison tables where a wide, single-row preview reads better than a stacked card. For a vertical card with the same content model, see hb-shop-item-cell.

Layout and behavior

• Thumbnail: The image and badge render only when img is non-empty. The image (and badge overlay) are wrapped in a link that uses url when it is set; otherwise the link has no href.
• Title: When title is set or the title slot has content, the title appears as a level-5 heading with a link that uses the same url rules as the image.
• Rating row: A rating block appears when rating is set, or when the reviews slot or reviews attribute has content. Star icons (Bootstrap Icons–style SVGs) render only when rating is truthy (for example, omit or use "0" to hide stars). The number of icons equals ratingscale. Stars support full and half fills from the numeric rating value. The numeric label after the stars uses the rating slot or attribute. The reviews text is shown in parentheses and wrapped in a link that uses reviewsurl when set.
• Prices: The current price is bold; regularprice is shown struck-through beside it when either the attribute or the regularprice slot provides content.
• Footer: An optional Bulma card footer spans the text column when footer or the footer slot has content.

Custom element

<hb-shop-item-row …></hb-shop-item-row>

Attributes

Web component attribute names use snake_case. In plain HTML, all attribute values are strings. Use empty "" for unused text fields where you still need the attribute present for tooling or consistency.

| Attribute | Required | Description | | --- | --- | --- | | id | No | Optional host id (forwarded to the inner card wrapper). | | style | No | Optional; present on the Component typing for host styling. | | img | Yes* | Image URL. If empty, the thumbnail column does not show an image or badge wrapper. | | url | Yes* | Product URL for the image and title links. | | badge | Yes* | Short label (for example sale text); shown in a danger rounded tag over the image when combined with img. | | title | Yes* | Primary product name. | | subtitle | Yes* | Muted secondary line under the title. | | text | Yes* | Main descriptive copy. | | rating | Yes* | Numeric score for stars and the numeric label; pass as a string (for example "4.5"). Falsy values hide the star row but reviews-only content can still show. | | ratingscale | Yes* | Number of star icons; pass as a string (for example "5"). | | reviews | Yes* | Text inside the linked parentheses (for example review count). | | reviewsurl | Yes* | URL for the reviews parentheses link. | | price | Yes* | Current or promotional price string. | | regularprice | Yes* | Compare-at price string (struck through when set). | | footer | Yes* | Optional footer line. |

*Marked “Yes” because the published Component interface lists them as required; in markup, supply "" for fields you do not use.

Events

No custom events are declared in types/webcomponent.type.d.ts (Events is {}).

Slots

Each named slot falls back to the same-named attribute when the slot has no content (see extra/docs.ts).

| Slot | Purpose | | --- | --- | | badge | Optional label over the row thumbnail inside a rounded tag; defaults to the badge attribute when the slot is empty. | | title | Main product name in the title link beside the image; defaults to the title attribute when the slot is empty. | | subtitle | Secondary line under the title (muted); defaults to the subtitle attribute when the slot is empty. | | text | Product description or pitch in the main column; defaults to the text attribute when the slot is empty. | | rating | Numeric score shown after the star icons when rating is set; defaults to the rating attribute as plain text. | | reviews | Review count or label inside the linked parentheses next to the stars; defaults to the reviews attribute (the link uses reviewsurl). | | price | Current or sale price (bold, baseline row); defaults to the price attribute when the slot is empty. | | footer | Optional footer strip under the text column (still inside the card); defaults to the footer attribute when the slot is empty. | | regularprice | List or compare-at price shown struck-through beside price; defaults to the regularprice attribute when the slot is empty. |

There are no documented ::part hooks for this package (styleSetup.parts is empty).

Styling (Bulma)

Cherry-picked Bulma 1.x Sass (card, columns, image, content, title, tag, helpers) is scoped to :host via styles/bulma.scss. Theme tokens are the public --bulma-* variables; set them on body, :root, or any ancestor so they inherit into the shadow tree. See Bulma CSS variables and extra/docs.ts for the full styleSetup list.

| Variable | Purpose | | --- | --- | | --bulma-primary | Accent and interactive highlights (theme setup). | | --bulma-text | Body and title text. | | --bulma-card-background-color | Background for the horizontal card shell (thumbnail column, text column, footer). | | --bulma-border | Row frame border (component SCSS supplies a fallback if unset). | | --bulma-shadow | Row frame shadow (fallback in SCSS if unset). | | --bulma-text-weak | Subtitle, strikethrough context, and secondary lines. | | --bulma-link | Linked title and reviews URL color. | | --bulma-radius | Card corners for the horizontal row shell. |

The host also uses --bulma-block-spacing (with a built-in fallback) for default vertical margin between rows when the element is stacked in a list.

Usage notes

• Slots and attributes share the same names: each slot’s default content is the corresponding attribute when the slot is empty.
• Storybook exposes an action control for demos; it is not part of the Component props type.
• Internationalization: extra/docs.ts does not register i18n entries for this package; translate strings in the host app before passing them in.

Examples

Full row

<hb-shop-item-row
  img="https://placehold.co/200x150"
  url="/products/running-shoes"
  badge="-15%"
  title="Running shoes"
  subtitle="Unisex · sizes 36–48"
  text="Lightweight mesh upper and cushioned sole for daily miles."
  rating="5"
  ratingscale="5"
  reviews="2.4k reviews"
  reviewsurl="/products/running-shoes#reviews"
  price="€102.00"
  regularprice="€120.00"
  footer="Ships in 24h"
></hb-shop-item-row>

Title and price only

<hb-shop-item-row
  img="https://placehold.co/120x90"
  url=""
  badge=""
  title="Gift card €25"
  subtitle=""
  text=""
  rating=""
  ratingscale="5"
  reviews=""
  reviewsurl=""
  price="€25.00"
  regularprice=""
  footer=""
></hb-shop-item-row>

License

Package metadata references Apache-2.0 (see LICENSE.md in the published package when consuming from npm).