container-cross-sell

The data fetching module is the wrapper that contains the @arcteryx/components-cross-sell react component. This module houses the various business logic and service calls that @arcteryx/components-cross-sell demands, in order to create a layer of separation from the presentational component.

Usage

PDP Cross Sell

import Cookies from "universal-cookie";
import { BloomreachProvider } from "@arcteryx/data-providers";

const CrossSell = ({ t }) => {
  const [ brData, setBrData] = useState([]);
  const { market, country, language } = useSiteContext();
  const product = useProduct();
  const router = useRouter();
  const crossSellSectionRef = usePDPSectionViewed("recommendations");
  const personalizedPriceProvider = getPersonalizedPriceProvider();
  const productBadgesEnv = false;

  const onProductClick = (e, crossSellProduct) => {
    e.preventDefault();
    window.scrollTo({ top: 0 });
    router.push(crossSellProduct.url);
  };


  // Bloomreach Integration
  const isBloomreachEnabled = Config.enableBloomreachApi({ pageType: "pdp", market});

  useEffect(() => {
    if (isBloomreachEnabled) {
      const cookies = new Cookies(null, { path: '/' });
      // These wid's will not change and can remain static or we can make them deployment variables
      const wid = Config.getDeployEnv() === "production"
        ? { ymal: "rj01y2zl", bestSellers: "kl617ve9" }
        : { ymal: "79o2omlg", bestSellers: "09zx55j7" };
      const brDataArray = [
        {
          id: "you-may-also-like",
          heading: t("You Might Also Like"),
          group: "recommended",
          zone: "prodpagebottom1",
          uid: cookies.get("_br_uid_2") || "",
          apiUrl: Config.getBloomreachApiUrl("keyword", wid.ymal),
        },
        {
          id: "best-sellers",
          heading: t("Best Sellers"),
          group: "outfit",
          zone: "prodpagebottom2",
          uid: cookies.get("_br_uid_2") || "",
          apiUrl: Config.getBloomreachApiUrl("keyword", wid.bestSellers),
        }
      ];
      setBrData(brDataArray);
    }
  }, [isBloomreachEnabled]);

  return (
    <CrossSellContainer
      crossSellSectionRef={crossSellSectionRef}
      market={market}
      country={country}
      language={language}
      personalizedPriceProvider={personalizedPriceProvider}
      productBadgesEnv={productBadgesEnv}
      onProductClick={onProductClick}
      brData={brData}
    />
  );
};

export default withCatalogCommon()(CrossSell);

Cart Cross Sell

TODO: Add example of how to add a container-cross-sell component to the cart