shop-helper-fns

• utility functions for e-commerce and product variant handling.

📦 Installation

npm install shop-helper-fns
# or
yarn add shop-helper-fns

🛠️ Usage

Resolve extension

import { resolveExtensions } from 'shop-helper-fns/resolve-extensions';
//..
config.resolve.extensions = resolveExtensions(config, process.env); // APP_INDEX, STAGE
//..

Variant handling

SSR

import { BtnVariant } from './btn-variant';
import { getVariantOptions } from 'shop-helper-fns/variant-selector-helper';

export function VariantOptions({ listing }: { listing: any }) {
  const options = getVariantOptions(listing.product.variants);

  if (Object.keys(options).length === 0) return null;

  return (
    <section aria-label="options" className="mb-4">
      <ul>
        {Object.values(options).map((option, idx) => (
          <li key={idx}>
            <p>{option.presentation}</p>
            <ul className="flex flex-wrap gap-2">
              {option.options.map((opt, idx2) => (
                <li key={idx2}>
                  <BtnVariant variants={listing.product.variants} opt={opt} slug={listing.slug} />
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </section>
  );
}

CSR

'use client';

import { getProperSku, type OptionOption } from 'shop-helper-fns/variant-selector-helper';

export function BtnVariant({ variants, opt, slug, variant }: { variants: Variant[]; opt: OptionOption; slug: string; variant: Variant }) {
  const properSku = getProperSku(opt, variants, variant);

  return (
    <button
      onClick={() => {
        window.history.replaceState(null, '', `/product/${slug}/${properSku}`);
      }}
      className={`btn ${variant.sku === properSku ? 'btn-primary' : 'btn-outline'}`}
    >
      {opt.presentation}
    </button>
  );
}

type Variant = any

Context

export const ProductDetailProvider: FC<PropsWithChildren<{ variants: Variant[]; master: Variant }>> = ({ children, variants, master }) => {
    const pathname = usePathname();
    const sku = pathname.split('/').pop();

    const variant = getVariant({ sku, variants, master });

    return <ProductDetailContext.Provider value={{ variant }}>{children}</ProductDetailContext.Provider>;
};