PrestaShop Integration

PrestaShop routes are language-prefixed and ID-bearing, which makes the mapping table longer than on other platforms but also more stable.

Prerequisites

• You can edit page/template code in PrestaShop.
• You have category, tag, or collection pages ready for target redirects.
• You can test in a published or preview storefront.

Where a zone click should land in PrestaShop

With friendly URLs on, a PrestaShop category is /<id>-<link-rewrite>, and with multistore languages enabled it gains a language prefix: /en/12-knee-supports. The ID at the front is the part that matters. It does not change when somebody renames the category, so a mapping built on IDs survives merchandising.

If friendly URLs are off, the same page is index.php?id_category=12&controller=category. Both work as destinations. Pick whichever matches what your storefront is actually serving, because mixing them produces redirects.

Multi-language stores need the prefix in the mapping, or every zone click sends the shopper to the default language.

1. Prepare Zone Mapping

1. Start with grouped zone IDs (head, neck, lower-back, and so on).
2. Map each zone key to one destination URL or slug.
3. Define a fallback destination for unmapped zones.

2. Embed And Listen

Add this code and update mapping values for your store:

<!-- Wrap the iframe in a div to control its dimensions.
     To fill an entire section, set both the div and iframe height to 100% instead. -->
<div style="height:650px;width:100%;">
<iframe
  id="persoscan-widget"
  src="https://widget.persoscan.com?license=your-license-key"
  style="width:100%;height:650px;border:none;border-radius:8px;color-scheme:light dark;"
  allow="fullscreen"
  title="PersoScan"
></iframe>
</div>

<script>
  var WIDGET_ORIGIN = new URL("https://widget.persoscan.com").origin;

  // Map zone keys to PrestaShop category URL slugs
  var zoneToCategory = {
    "head":           "head-care",
    "neck":           "neck-support",
    "upper-back":     "upper-back-support",
    "lower-back":     "lower-back-support",
    "left-shoulder":  "shoulder-support",
    "right-shoulder": "shoulder-support",
    "left-arm":       "arm-support",
    "right-arm":      "arm-support",
    "left-hand":      "hand-wrist-support",
    "right-hand":     "hand-wrist-support",
    "abdomen":        "abdominal-support",
    "pelvis":         "pelvic-support",
    "buttocks":       "back-support",
    "left-leg":       "leg-knee-support",
    "right-leg":      "leg-knee-support",
    "left-foot":      "foot-care",
    "right-foot":     "foot-care"
  };

  window.addEventListener("message", function(event) {
    if (event.origin !== WIDGET_ORIGIN) return;
    if (!event.data || event.data.source !== "persoscan-widget") return;
    if (event.data.type !== "zone-selected") return;

    var zoneId = event.data.data.zoneId;
    var category = zoneToCategory[zoneId];

    if (category) {
      // Replace "en" with your store's language code; remove the prefix entirely if single-language
      window.location.href = "/en/" + category + "/";
    } else {
      window.location.href = "/en/";
    }
  });
</script>

3. Validate End-To-End

1. Open the integration page.
2. Click at least five mapped zones.
3. Confirm each click redirects to the expected destination.
4. Confirm unmapped zones use fallback destination.

Common Mistakes

Language prefix missing from destinations

Problem: Zone clicks always land in the default language, even for a shopper browsing another one.

Cause: The mapping hardcodes /12-knee-supports with no locale segment.

Solution:

1. Read the current language prefix from window.location.pathname and prepend it.
2. Or keep one mapping per language and pick it from the same prefix.

Origin mismatch blocks events

Problem: Clicks produce no redirects.

Cause: Event origin check does not match actual widget origin.

Solution:

1. Derive origin from widget URL (new URL(WIDGET_URL).origin).
2. Compare against event.origin.
3. Keep strict source check (persoscan-widget).

Zone mapping keys do not match runtime keys

Problem: Some body parts never redirect.

Cause: Mapping object uses wrong key format.

Solution:

1. Use exact zoneId values from Zone Reference.
2. Keep keys lowercase with hyphen separators.

Next Steps

• Integrations Overview
• PostMessage API
• Zone Reference
• Quick Start