# 🐞 Falsche URL bei Überage von Twig an JS mit seoUrl

**URL:** <https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995>\
**Category:** Programmierung\
**Created:** [17. März 2023 um 20:00 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995 "2023-03-17T20:00:24Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [17. März 2023 um 20:00 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/1 "2023-03-17T20:00:24Z")

</div>

Hallo,

ich will gern die SEO URL meines Produktes an ein JS Plugin weitergeben. Im Grunde ja nicht so schwierig, dachte ich 😃

Das ganze wollte ich ähnlich wie in der Doku beschrieben ist, machen. Also als Json im data-options Attribut übergeben. Dazu erstelle ich im Twig ein Objekt

```auto
    {% set options = {
        url: seoUrl('frontend.detail.page', { productId: product.id })
    } %}

```

soweit sogut, dass funktioniert auch. Wenn ich das dumpe dann erhalte ich, wie ich es erwarte:

```auto
{{ dump(options) }}

```

```auto
array:1 [▼
  "url" => "http://localhost:9998/Haupt-Product"
]

```

Um das ganze zu übertragen muss das ganze noch mit `json_encode` umgewandelt werden. Aber nun sieht das ganze so hier aus

```auto
{{ dump(options|json_encode) }}

```

```auto
"{"url":"http://localhost:9998/\/detail\/f895e22ba1e446508d3c956c684c20ce"}"

```

Wie kann ich die seoUrl an mein Plugin übertragen?

Ausehen sollte es so:

```auto
{% set options = {
    url: seoUrl('frontend.detail.page', { productId: product.id })
} %}

{% block page_product_detail_content %}
    {{ parent() }}

    <template data-example-plugin data-example-plugin-options='{{ options|json_encode }}'></template>
{% endblock %}

```

Das Beispiel hab ich aus der offizellen Doku von Shopware

> **[Add custom Javascript](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript#configuring-your-plugins)**

---

<div class="post-metadata">

**Author:** ![Moorleiche](https://avatars.discourse-cdn.com/v4/letter/m/6f9a4e/32.png) [@Moorleiche](https://forum.shopware.com/u/Moorleiche)\
**Post date:** [17. März 2023 um 20:14 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/2 "2023-03-17T20:14:06Z")

</div>

Wird ganz normal in die options Variable geschrieben!

example.plugin.js

```auto
import Plugin from 'src/plugin-system/plugin.class';

export default class ExamplePlugin extends Plugin {
    static options = {
        url: null
    };

    ...
}

```

main.js

```auto
import ExamlePlugin from './example.plugin';

window.PluginManager.register('Example', ExamplePlugin , '[data-example-plugin]');

if (module.hot) {
    module.hot.accept();
}

```

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [17. März 2023 um 20:43 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/3 "2023-03-17T20:43:47Z")

</div>

@Moorleiche Jup genau danke, genau so wird das gemacht, dass stimmt. Nur ist das **keine Lösung** für mein oben beschriebenes Problem, denn wenn ich im JS nun die URL aufrufen will, zb. mit

```auto
 init() {
        console.log(this.options.url)       
  }

```

kommt dummerweise  
`http://localhost:9998/detail/f895e22ba1e446508d3c956c684c20ce`  
raus.

Ich brauche aber die SEO Url, ich würde gern die  
`http://localhost:9998/Haupt-Product`

Ich hatte auf das JS verzichtet, da ich vermutete das hier im Entwicklerforum `dump` auch akzeptiert wird

---

<div class="post-metadata">

**Author:** ![abdullah](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@abdullah](https://forum.shopware.com/u/abdullah)\
**Post date:** [17. März 2023 um 21:16 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/4 "2023-03-17T21:16:40Z")

</div>

Existiert für das Produkt denn eine SEO URL? Eventuell müsstest du zuerst die Indizes neu bauen?

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [17. März 2023 um 21:30 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/5 "2023-03-17T21:30:59Z")

</div>

@abdullah ja, diese wird auch ausgegeben nur, komischerweise, sobald ich das Objekt mit `json_encode` Umwandle kommt auf einmal die andere Shopware interne URL

```auto
   {% set options = {
        url: seoUrl('frontend.detail.page', { productId: product.id })
    } %}
{{ dump(options) }}
{{ dump(options|json_encode) }

```

Ausgabe:

```auto
array:1 [▼
  "url" => "http://localhost:9998/Haupt-Product"
]
"{"url":"http://localhost:9998/\/detail\/f895e22ba1e446508d3c956c684c20ce"}"

```

---

<div class="post-metadata">

**Author:** ![abdullah](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@abdullah](https://forum.shopware.com/u/abdullah)\
**Post date:** [18. März 2023 um 08:48 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/6 "2023-03-18T08:48:53Z")

</div>

Interessantes Verhalten. Für mich macht es aber kein Sinn, warum ein json\_encode die nicht SEO URL erzeugt.

Eventuell wird das durch den Watcher verursacht?

Aber am Ende sollte beim URL Aufruf automatisch durch den Controller die SEO URL aufgerufen werden.

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [18. März 2023 um 11:42 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/7 "2023-03-18T11:42:07Z")

</div>

> Interessantes Verhalten. Für mich macht es aber kein Sinn, warum ein json\_encode die nicht SEO URL erzeugt.

Es macht überhaupt keinen Sinn 😃.

> Eventuell wird das durch den Watcher verursacht?

Hab ich getestet… Leider ist es nicht nur im Watcher ☹

> Aber am Ende sollte beim URL Aufruf automatisch durch den Controller die SEO URL aufgerufen werden.

Blöderweise soll das, was ich machen will für Social Media sein und ich würde schon gern die richtige URL nach außen kommunizieren, auch wenn der Controller die „kryptische“ Url auflösen kann.

So muss ich wohl einen Workaround machen … das es am `json_encode` scheitert, hätte ich nicht gedacht 😃

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [18. März 2023 um 11:53 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/8 "2023-03-18T11:53:34Z")

</div>

Der Workaround würde jetzt so aussehen, würde zwar lieber über das `options` Objekt die Info übergeben, aber so geht es auch.

Im Twig:

```auto
    ...
    {% set productUrl = seoUrl('frontend.detail.page', { productId: product.id }) %}

    {% set options = {
        url: productUrl
    } %}

    <div class="share-dropdown" 
         data-product-share-button 
         data-url="{{ productUrl }}"
         data-product-share-button-options='{{ options|json_encode }}'>
     ...

```

Im JS:

```auto
    ...
    init() {

        console.log(this.options)
        console.log(this.el.dataset.url)
    }
    ...

```

Ausgabe:

```auto
{url: 'http://localhost:9998//detail/f895e22ba1e446508d3c956c684c20ce', title: null, text: null}
text: null
title: null
url: "http://monsterzeug.ddev.site:9998//detail/f895e22ba1e446508d3c956c684c20ce"
[[Prototype]]: Object

product-share-button.js?3382:14 http://localhost:9998/Haupt-Product

```

Falls jemand weiß, wie man es korrekt macht oder eine bessere Lösung hat, dann sehr gern 🙂

---

<div class="post-metadata">

**Author:** ![Moorleiche](https://avatars.discourse-cdn.com/v4/letter/m/6f9a4e/32.png) [@Moorleiche](https://forum.shopware.com/u/Moorleiche)\
**Post date:** [18. März 2023 um 16:56 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/9 "2023-03-18T16:56:14Z")

</div>

Das liegt daran, weil die SEO Urls im Template erst ersetzt werden, nachdem das gesamte Template gerendert wurde. Sonst hätte man viele Datenbankabfragen bei jedem Produkt. json\_encode() maskiert aber die Slashes und deshalb kann die RAW Url nicht mehr im Template gefunden und ersetzt werden.

---

<div class="post-metadata">

**Author:** ![olli.k](https://avatars.discourse-cdn.com/v4/letter/o/e99b99/32.png) [@olli.k](https://forum.shopware.com/u/olli.k)\
**Post date:** [18. März 2023 um 17:34 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/10 "2023-03-18T17:34:23Z")

</div>

Ahh okay… danke für die Aufklärung @Moorleiche

Dann ist wohl meine Lösung, wie ich das Problem umgehe, doch nicht so verkehrt. Trotzdem für mehr Ideen bin ich Dankbar

---

<div class="post-metadata">

**Author:** ![maicau](https://avatars.discourse-cdn.com/v4/letter/m/3ab097/32.png) [@maicau](https://forum.shopware.com/u/maicau)\
**Post date:** [14. November 2023 um 19:43 UTC](https://forum.shopware.com/t/falsche-url-bei-ueberage-von-twig-an-js-mit-seourl/98995/11 "2023-11-14T19:43:47Z")

</div>

Hallo @olli.k, zwar schon ein paar Tage her, aber ich habe mir beholfen, in dem ich dem json\_encode die Option übergebe, die Slashes nicht zu maskieren. Vll hilft Dir das ja auch weiter, dann werden die SEO Urls ausgegeben.

```auto
|json_encode(constant('JSON_UNESCAPED_SLASHES'))

```