Display part of a page on a different page

JavaScript
,
1

Hello,
I am working with Shoptet, which is something similar to Shopify. I am allowed to add JavaScript and CSS, but I am not allowed to modify the back-end.
I am trying to load the “Hodnocení obchodu” part from https://www.bio-krasa.cz/hodnoceni-obchodu/ - it should be .content-inner - and display it on the front page.
I added the following to the head:

<script>
$(document).re­ady(function(){
$('#hodnoceni-obchodu').load('/hod­noceni-obchodu .content-inner'); //tried without the front slash too
});
</script>

and I created a HTML banner for the front page which contains:

<div id="hodnoceni-obchodu">
</div>

However, the div is empty. Can you please point me in a direction, what am I doing wrong? Thank you very much.

2

Hi,

I’m a bit confused about which scripts you are running on which page.

Assuming you want to load the “Hodnocení obchodu” part of this page into a new page…

Make a test page to load it into and ensure that the test page is on the same domain as the page you are trying to load.

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
</head>

<body>
  <div id="result"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $('#result').load('/hodnoceni-obchodu .content-inner');
  </script>
</body>
</html>

Load the test page and see if that works. I tested it locally and it works as expected.

If you encounter any problems, check the browser console for errors.

Also, it’s probably nothing, but when I copy pasted your code from above, I got a couple weird characters in my editor.

Screenshot from 2021-11-10 08-15-21
Screenshot from 2021-11-10 08-15-21913×98 12.9 KB

3

Thank you. The page I am trying to display it on is the main page - https://www.bio-krasa.cz - so there should be no issue with the same origin policy.
It has been suggested to me that it is better to select the element based on the ID, not class, since ID is unique, unlike class. So i changed it to:
$('#hodnoceni-obchodu').load('/hodnoceni-obchodu #content');
but still no luck, the div is still empty. I guess I select in a not enough specific way somehow.
Thanks

4

Can you make a test page similar to the one I posted, then let me know the URL.

Actually, I spotted a different error. In the console you have:

Uncaught ReferenceError: $ is not defined
    <anonymous> https://www.bio-krasa.cz/:78

This is becaues on line 78, you are calling jQuery before you are using it.

Currently you have:

<script>
$(document).ready(function(){
  $('#hodnoceni-obchodu').load('/hodnoceni-obchodu #content');
});
</script>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

The call to $(document).ready(...); needs to come after the jQuery include, so, like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('#hodnoceni-obchodu').load('/hodnoceni-obchodu #content');
});
</script>

Try that and see if that works.

5

Thank you very much, this was indeed the case. I moved my code from towards the end of the tag and it works now. (Not sure why this has changed in Shoptet, it used to be different before. I remember using a lot if instertAfter and similar stuff in the in Shoptet before.)

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.