ProductComparisonFloatingButton

Purpose

The ProductComparisonFloatingButton reusable renders a floating shortcut button that links to the comparison page (/comparison). It is shown only when product comparison is enabled and (at runtime) when the comparison list contains items.

Where it's rendered

This reusable is rendered globally from Structure/LayoutA.liquid, outside the page <main>:

{% render 'Reusables\\ProductComparisonFloatingButton\\Default' %}

Inputs (Liquid render parameters)

This reusable is rendered without parameters.

Template behavior (Liquid + Alpine)

Rendering is gated by the feature flag:

GlobalData.Settings.ShowProductComparison

When enabled, it renders an anchor:

href="/comparison"

class="floating-compare-button ..."

style="display: none;" (hidden by default)

title sourced from Reusables.ProductComparisonFloatingButton.Translations.GoToComparisonPage

The markup contains a count element:

<span class="floating-compare-button__count">0</span>

Notes:

This reusable has no Alpine wiring in its template.

Because it is hidden by inline style, it requires a separate runtime script to:

toggle visibility when there are items in the comparison list

update the count element

In this theme, the runtime behavior is implemented in Assets/js/theme.js under the DOMContentLoaded handler ("Floating Compare Button Logic"):

It queries the button using .floating-compare-button.

It reads the list from the comparisonData cookie (JSON array).

It updates .floating-compare-button__count with the array length.

It toggles btn.style.display between flex (when list has items) and none.

It keeps the button in sync by listening to:

window.addEventListener('storage', ...) when e.key === 'comparisonSync'

window.addEventListener('comparisonListUpdated', ...)

Data contract (JS runtime)

This reusable is Liquid-only, but it defines a small DOM contract used by runtime JS:

.floating-compare-button

The clickable element whose display is toggled.

.floating-compare-button__count

The element whose text content is updated to reflect the current list size.

It also depends on a cookie contract:

Cookie name: comparisonData

Type: JSON array of product ids (strings)

Used by Assets/js/theme.js to compute visibility and count

JavaScript

Global object

Global object: productcomparisonfloatingbuttonreusabledefault

Notes:

It is currently an empty object ({}) and is not referenced by the Liquid template.

The actual show/hide and count update behavior is expected to be implemented elsewhere (e.g. in Assets/js/theme.js or in a comparison-related script).

Dependencies

Liquid: Reusables/ProductComparisonFloatingButton/Default.liquid

Translations: Reusables/ProductComparisonFloatingButton/Default.json

Feature flag: GlobalData.Settings.ShowProductComparison

URL route: /comparison

Notes

The button is rendered after the footer in LayoutA.liquid, so it is intended as a global overlay/floating UI element.

If you change the CSS class names (floating-compare-button*), ensure any runtime JS that controls visibility/count is updated accordingly.

ProductComparisonFloatingButton

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

JavaScript#

Global object#

Dependencies#

Notes#