Skip to content
Twilight React Playground
ثيم رائدaren

pushEqualHeightConfig

functionAdvancedbrowserlive demo

Copies the store's equal-height product card settings into Google Tag Manager's window.dataLayer; WidgetHead calls it for you.

import { pushEqualHeightConfig } from '@salla.sa/twilight-theme-engine/components/layout';

In plain words

Salla stores can make product cards the same height, and scripts loaded through Google Tag Manager read that choice from window.dataLayer, a plain array on the page. pushEqualHeightConfig copies the three settings from the store settings into that array.

WidgetHead already calls it on every page with the store's settings. Call it yourself only to push values of your own, such as a theme setting.

Signature

function pushEqualHeightConfig(settings: Record<string, unknown>): void

// pushes, when the enabled key is present:
// { equalHeight: { isEnabled: boolean; max: number; classType: string } }

Try it live

pushEqualHeightConfig reads three flat store-setting keys and pushes one equalHeight entry to this page's Google Tag Manager dataLayer.Try this: set enabled to false and push: an entry is still added, with isEnabled false. Only a missing key pushes nothing.
Storefront canvas · en · LTR
Runs in the browser…
Controls
What a theme writes
import { useEffect } from 'react';
import { pushEqualHeightConfig } from '@salla.sa/twilight-theme-engine/components/layout';

// WidgetHead already pushes the store's own settings; push values of your own like this.
export function EqualHeightConfig() {
  useEffect(() => {
    // Browser only: it writes to window.dataLayer.
    pushEqualHeightConfig({
      'products::card.equal-height.enabled': true,
      'products::card.equal-height.max-pixel': 300,
      'products::card.equal-height.type': 'min',
    });
  }, []);
  return null;
}

Example

app/components/ThemeEqualHeight.tsx
import { useEffect } from 'react';
import { pushEqualHeightConfig } from '@salla.sa/twilight-theme-engine/components/layout';
import { useTheme } from '@salla.sa/twilight-theme-engine/hooks/useTheme';

// A theme that offers equal-height cards as one of its own twilight.json settings.
export function ThemeEqualHeight() {
  const { settings } = useTheme();
  const values = settings as Record<string, unknown>;
  const enabled = values.equal_height_cards === true;
  const maxPixel = Number(values.equal_height_max ?? 300);

  useEffect(() => {
    // Browser only: it writes to window.dataLayer.
    pushEqualHeightConfig({
      'products::card.equal-height.enabled': enabled,
      'products::card.equal-height.max-pixel': maxPixel,
      'products::card.equal-height.type': 'min',
    });
  }, [enabled, maxPixel]);

  return null;
}

How it behaves

  • It reads three flat keys: products::card.equal-height.enabled, products::card.equal-height.max-pixel and products::card.equal-height.type.

  • When the enabled key is undefined or null it does nothing. Otherwise it creates window.dataLayer if needed and pushes { equalHeight: { isEnabled: Boolean(enabled), max: Number(maxPixel ?? 300), classType: String(type ?? "min") } }.

  • It mirrors the PHP storefront's HeadWidget::run().

  • The demo store's store.settings contains none of these keys, so on these pages WidgetHead pushes nothing.

Gotchas

  • It uses window without checking for it, so calling it during a server render throws ReferenceError: window is not defined whenever the enabled key is set. Call it in an effect, as the example does.

  • The enabled value goes through Boolean(), so the strings "false" and "0" count as enabled. Pass a real boolean.

Related

WidgetHead

An invisible component with the head hook slots and the equal-height GTM push; TwilightProvider already renders it on every page.

useGtm

Pushes ecommerce events (view, impressions, click, add to cart, checkout, purchase) to Google Tag Manager's dataLayer when the store has GTM.

Source and docs