The wr prop

Components written with React code can use the wr prop to access an object that acts as a container for local states and utilities.

import React from "react";

/**
 * CustomProductCard1 - Minimal/Elegant Template
 * @param {Object} props.wr - The global object with webround.com utilities
 */
const CustomProductCard1 = ({ wr }) => {
    const product = wr.product;
    if (!product) return null;

    // Select the preferred variant or the first available one
    const variant = product.variants?.find((v) => v.isFavourite) || product.variants?.[0];

    // Asset access
    const coverUrl = variant?.assets?.[0]?.url || product?.assets?.[0]?.url || "";

    // Price management via utilities provided by wr
    const priceRange = variant?.priceRanges?.[0];
    const price = priceRange?.grossMin || 0;
    const comparePrice = priceRange?.compareGrossMin || 0;
    const currency = priceRange?.currencyCode || "EUR";

    const formatPrice = (value) => {
        return new Intl.NumberFormat(undefined, {
            style: "currency",
            currency: currency,
        }).format(value);
    };

    const handleProductClick = () => {
        // Use the wr object to interact with the editor/shop store
        if (wr?.shop) {
            wr.shop.selectProduct(product);
            wr.shop.selectVariant(variant);
        }

        // Page navigation via wr utility
        if (wr?.utils?.navigate) {
            wr.utils.navigate("product");
        }
    };

    return (
        <div
            className="group cursor-pointer flex flex-col w-full h-full bg-white transition-all duration-300"
            onClick={handleProductClick}
        >
            {/* Image with fixed Aspect Ratio for uniformity */}
            <div className="relative overflow-hidden aspect-[3/4] bg-[#f7f7f7]">
                <img
                    src={coverUrl}
                    alt={product.name}
                    className="w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
                />

                {/* Discrete Discount Badge */}
                {comparePrice > price && (
                    <div className="absolute top-4 left-4 bg-black text-white text-[10px] px-3 py-1 font-semibold uppercase">
                        Promo
                    </div>
                )}
            </div>

            {/* Product Info */}
            <div className="py-4 px-1 flex flex-col items-start">
                <span className="text-gray-400 text-[10px] uppercase tracking-widest mb-1">
                    {product.category?.name || "New Collection"}
                </span>

                <h3 className="text-sm font-semibold text-black mb-2 line-clamp-1">
                    {product.name}
                </h3>

                <div className="flex items-center gap-3">
                    <span className="text-sm font-bold text-black">
                        {formatPrice(price)}
                    </span>
                    {comparePrice > price && (
                        <span className="text-xs text-gray-400 line-through">
                            {formatPrice(comparePrice)}
                        </span>
                    )}
                </div>
            </div>
        </div>
    );
};

export default CustomProductCard1;

This object is constantly synchronized with the underlying app; therefore, custom components can easily access the app state, the currently authenticated customer, the cart, and the product list or store metadata, without the need to implement duplicate calls that would cause redundancy and slowdowns.

Properties of wr

The wr prop is structured as follows:

• account: This element is populated when entering the customer page context. Here you can manage the currently displayed section and collect specific data. See specific documentation
• cart: Consisting of states and utilities available on the cart page, this element integrates a range of features to track states and manipulate the default behavior of the cart page. See specific documentation
• customer: This property consists of information about the currently authenticated user and the cart loaded in memory, and exposes ready-to-use utilities such as signup, login, logout, and manipulation of items in the cart. See specific documentation
• inEditor: This flag is set to true when the wr object exists within the editor.
• languages: This array contains the ISO Codes of the languages available for this site.
• locale: The ISO Code of the language currently in use on the site.
• shop: This is the reference point for all operations and information regarding the catalog, applied filters, and currently displayed products. See specific documentation
• utils: Composed of utilities that allow navigation, language switching, and the generation of SEO-ready links and URLs, including multi-language support. See specific documentation
• product: An optional prop passed when the component overrides product cards. See specific documentation