html div elements random order on page reload

Solved

html div elements random order on page reload

lyman
Shopify Partner
9 0 0

Hello,

 

I'm pulling content from rss provider and put the rss feeds on my products page so I put the rss code on the product html editor to show up on product page and everything went smooth, the rss feed looks like: 

<div class="rss provider name" id="20295c23_1686835152"></div>
<div class="rss provider name" id="f4dce436_1686835947"></div>
<div class="rss provider name" id="03ba0593_1687352550"></div>
<div class="rss provider name" id="eef06480_1686835664"></div>
<div class="rss provider name" id="bb9f7c76_1686836162"></div>

They looks like that with nothing before or after them, I want some piece of code to put it on the editor so it randomly shuffle the divs each time the page loads or it will shuffle them each time period, I want my website visitors to see the rss feeds in different order each time.

P.S I have zero knowledge with coding so please give my a detailed solution 

Thank you in advance

Here to help and get help 🙂
Accepted Solution (1)

NomtechSolution
Astronaut
1245 112 152

This is an accepted solution.

  1. Access the product HTML editor in your Shopify admin for the desired product page.

  2. Insert the following JavaScript code snippet within <script> tags:

 

 

<script>
  // Function to shuffle the order of elements within a container
  function shuffleElements(container) {
    var elements = container.children;
    for (var i = elements.length; i >= 0; i--) {
      container.appendChild(elements[Math.random() * i | 0]);
    }
  }

  // Wait for the page to fully load before shuffling the elements
  window.addEventListener('load', function() {
    var container = document.getElementById('your-container-id'); // Replace 'your-container-id' with the ID of the container div that holds the RSS feed divs
    shuffleElements(container);
  });
</script>

 

 

View solution in original post

Replies 4 (4)

NomtechSolution
Astronaut
1245 112 152

This is an accepted solution.

  1. Access the product HTML editor in your Shopify admin for the desired product page.

  2. Insert the following JavaScript code snippet within <script> tags:

 

 

<script>
  // Function to shuffle the order of elements within a container
  function shuffleElements(container) {
    var elements = container.children;
    for (var i = elements.length; i >= 0; i--) {
      container.appendChild(elements[Math.random() * i | 0]);
    }
  }

  // Wait for the page to fully load before shuffling the elements
  window.addEventListener('load', function() {
    var container = document.getElementById('your-container-id'); // Replace 'your-container-id' with the ID of the container div that holds the RSS feed divs
    shuffleElements(container);
  });
</script>

 

 

lyman
Shopify Partner
9 0 0

Thank you very much my brother Nouman

I maybe will look a bit stupid but I really have no coding skills at all
What I've done is going to the html editor of the desired product and make the full code like this:  

<div class="rss provider name" id="20295c23_1686835152"></div>
<div class="rss provider name" id="f4dce436_1686835947"></div>
<div class="rss provider name" id="03ba0593_1687352550"></div>
<div class="rss provider name" id="eef06480_1686835664"></div>
<div class="rss provider name" id="bb9f7c76_1686836162"></div>

<script>
// Function to shuffle the order of elements within a container
function shuffleElements(container) {
var elements = container.children;
for (var i = elements.length; i >= 0; i--) {
container.appendChild(elements[Math.random() * i | 0]);
}
}

// Wait for the page to fully load before shuffling the elements
window.addEventListener('load', function() {
var container = document.getElementById('your-container-id'); // Replace 'your-container-id' with the ID of the container div that holds the RSS feed divs
shuffleElements(container);
});
</script>



So far after doing the above step the rss feeds are lost and don't appear on the page, I'm sure I have done it wrong, please let me know how correctly put the full code using the divs I provided above and if there is any thing need to be written or amended

Thank you very much, I highly appreciate your time 

Here to help and get help 🙂
lyman
Shopify Partner
9 0 0

It worked it worked it worked, thank you very much brother I'm very appreciated really

after my previous reply I played with the code and from some searches I learned that I have to put my ALL original divs into some thing called a container so I added: <div id="container"> before the divs list and still not working after that and when I was about to give up I noted that you wrote: (your-container-id) so I replaced the head of the code before the divs list with: <div id="your-container-id"> and then is works very well and exactly as needed
I believe that many on here will need this solution and will be happy to have it done

Thanks you very much brother I really can't find the words may Allah reward you on my behalf

 

Here to help and get help 🙂
lyman
Shopify Partner
9 0 0

Hello Brother, @NomtechSolution 
Wishing you doing well,

In reference to the solution for my request, could you please let me know how to add fixed space between divs within the container so they don't appear closed to each other on the web page.

Thank you very much.

Here to help and get help 🙂