[Shopify page editing] I'm trying to include in a page - blog post - a IFRAME to display a SAME ORIGIN content - banner with e-mail newsletter subscription linked to MailChimp. Shopify implemented a DENY ALL X-FRAME-OPTIONS so I get a BLANK page.

<p>Before</p>
<div><iframe src="/pages/abonnement-newsletter-discount" style="height: 855px; width: auto; border: none;"></iframe></div>
<p>After</p>

I could rewrite the entire content of the BANNER inside the BLOG POST, but I have several pages to include that object and who is in charge of the content writing isn't technical (the reason to just include a line of code to retrieve the banner).

I've tried to include a jquery script that I found here on StackOverflow. I've some tech skills but not enough to troubleshoot what I'm doing wrong. The script should render the HTML on the server-side and show it inside a DIV that I included in the blog post. When I inspect the code, the script is not loading (I don't know if Shopify blocks it).

Reference: How exactly can I replace an iframe with a div and Javascript?

[Included in the theme.liquid, inside Head section]

  {% if handle contains 'blog-post-url' %}
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js">
      $.get('/pages/newsletter-subscription', function(data) {
        $('#test').html(data);
      });
  </script>
  {% endif %}

[Included in the blog-post-url page]

  <p>Before</p>
    <div id="test"></div>
  <p>After</p>

I'd like to have the content of "/pages/newsletter-subscription" in a specific part of a blog post "blog-post-url". Shopify limits many things, so I'm not sure jquery works. I also have tried to use "Object", but I have the same behavior. Thank you

0 Answers