Insole Finder

Einbindung

`<Head>`

In den <head> Bereich deiner Website müssen in gleicher Reihenfolge folgende Links eingebunden werden.

    <script
      src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"
      crossorigin
    ></script>
    <script src="https://insolefinder-bundle.currex.cloud/bundle/bundle.js"></script>

`<body>` HTML

In deinem Shop wird es wahrscheinlich einen Button geben, der den Insole-Finder öffnet. Gib diesem Button die ID currex-button. Das sollte dann wahrscheinlich so aussehen:

<button id="currex-button">Insole-Finder öffnen</button>

Am Ende des Bodys, kurz vor dem </body> Tag musst du noch folgende DIV-Struktur einfügen.

<div id="currex-insole-finder"></div>

Script

Folgendes Script muss in den <body> Bereich. Das Script sollte ganz am Ende, kurz vor Schließen des </body> eingebunden werden. Scrolle etwas nach unten um über die definierbaren Parameter zu lernen.

    <script>
      // Getting the button which can open the insole finder
      const btn = document.getElementById("currex-button");

      // Getting the area where the insole finder modal should be appended to
      const root = document.getElementById("currex-insole-finder");

      // Initialise finder
      window.CurrexInsoleFinder.init(root, {
        // Your shop ID
        shopID: "YOUR_ID",
        //  Show insole finder after pageload without user action
        isStandalone: false,
        // Preselect a locale (optional)
        // this locale overwrites configuration in the CURREX portal
        preselectedLocale: "en",
        // Your callback when a user clicks Product Details on the result page
        productDetailsCallback: (productDetails) => {
          console.log("test", productDetails);
        },
        // Your callback when a user clicks Put into cart on the result page
        buyCallback: (productDetails) => {
          console.log("test", productDetails);
        },
        // Your preselection for a specific sport
        preselectedSport: window.insoleFinderPreselectedSport || "hike",
      });

      // This is optional, but improves the first load of the insole finder
      // See performance section of this guide
      btn.onmouseenter = function () {
        window.CurrexInsoleFinder.loadModules();
      }

      btn.onclick = function () {
        window.CurrexInsoleFinder.show({});
      };
      
    </script>

Parameter

shopID
- Du solltest diese ID von CURREX erhalten haben.
isStandalone
- Optionen sind true oder false (Boolean)
- Wenn auf true gesetzt, wird der Insole Finder direkt ohne User-Aktion angezeigt, sobald die Seite vollständig geladen hat.
preselectedLocale
- Überschreib die Default Sprache, die im CURREX Portal gesetzt wurde. Optionen sind en, es, de, cz, fr
preselectedSport
- Hier kannst du eine Sportart vorauswählen. Optionen sind run, hike, cycling, comfort, soccer, golf, tennis, hockey, ski, work

productDetailsCallback / buyCallback

Diese Funktionen werden ausgeführt, wenn ein User auf den Button "Produktdetails" oder auf den Warenkorb Button auf der Result-Seite klickt. Ist einer der Callbacks nicht definiert, wird der jeweilige Button auf der Ergebnis-Seite auch nicht angezeigt. Du kannst hier eigenen Code ausführen. Der Parameter productDetails enthält alle wichtigen Informationen aus dem Ergebnis im Insole-Finder. Diese sind:

sizeFormat: TShoeFormat; // "EU" | "USM" | "USW" | "UK" | "HOCKEY" | "MONDO"
profile: TProfileType; //"low" | "medium" | "high"
insoleSize: TInsoleSize; //"xs" | "s" | "m" | "l" | "xl" | "xxl"
insoleType: TInsoleType; //  | "ace_pro" | "bike_pro" | "cleat_pro" | "edge_pro" | "golf_pro" | "hike_pro" | "hockey_pro  | "life_fit" | "run_expert" | "run_pro" | "support_stp" | "work_pro"
productURL: string; // Product URL, if set in Backend
productEAN: string;
price?: number; // Price as number
isCustomPrice?: boolean;
closeModal?: () => void; // Function you can call to close the modal. For example, after putting the item in the cart.

Dynamischer Preselect

In vielen Fällen ist es sinnvoll, den InsoleFinder mit einer unterschiedlichen vorausgewählten Sportart pro Seite zu öffnen. Folgendes JavaScript sollte hierfür vor dem initialen Script eingebunden werden.

<script>window.insoleFinderPreselectedSport = "run";</script>

Beispiel Shopify "In den Warenkorb" und Produktdetails

...
window.CurrexInsoleFinder.init(root, {
  isStandalone: false,
  shopID: "CURREX",
  productDetailsCallback: (productDetails) => {
    window.open(productDetails.productURL, "_blank");
  },
  buyCallback: (productDetails) => {
    fetch("/cart/add.js", {
      method: "post",
      body: JSON.stringify({
        items: [
          {
            id: productDetails.productEAN,
            quantity: 1,
          },
        ],
      }),
      headers: {
        "Content-Type": "application/json",
      },
    }).then(function () {
      document.dispatchEvent(new CustomEvent("cart:build"));
      const buttonsArray = document.querySelectorAll(".js-drawer-open-cart");
      for (let i = 0; i < buttonsArray.length; i++) {
        buttonsArray[i].click();
      }

      productDetails.closeModal();
    });
  },
  preselectedSport: window.insoleFinderPreselectedSport || "",
});

...

Performance

Die Performance deines Shops liegt uns am Herzen, deshalb ist der Insole-Finder von Grund auf optimiert die Performance deines Shops nicht negativ zu beeinflussen. Das geschieht, indem der JavaScript-Kern des Insole-Finders erst geladen wird, sobald der Insole-Finder per Button-Hover / Click aufgerufen wird.

Finalisierung

Das wars. Du kannst den Insole-Finder jetzt testen. Falls sich der Insole-Finder nicht öffnet, empfehlen wir, den Konsolen-Input deines Browsers zu checken und uns die Fehlermeldung zu schicken. Wir helfen gern!

Copyright

CURREX GmbH