Progressively load a new repeated variable on each page load

Highlighted
New Contributor | Gold Partner

Goal:

  1. Create a module that has a repeatable group. 
  2. Only 1 repeatable group will display on page load
  3. Must progress numerically through each page load.

Where I'm at:

  • I've created a custom module, with a repeatable. It works great.
  • I can force it to display only the first item of the loop and use the Shuffle  filter so that the first item is different. But this doesn't solve goal #3 unfortunately. Smiley Sad 
  • Separately, I've created a basic JS snippet that can grab a URL of a custom coded html file. It strips the URL and then spits out a new one on each page load using cookies... but this doesn't solve #1. I want it to be a module so it's easier to edit by a non-developer. 
  • I've added some Frankenstein cookie code to the module, but I don't think it'll do what I need it to do, because I don't think I'd be able to grab a variable declared there and use it in HUBL. 

 

Am I missing a way to do this? My current thought is that there might be a way to grab the number of times a user has landed on a page using the HubSpotDB, but maybe not? That seems like it'd have a lot of overhead as well. 

 

Any ideas here would be awesome! Smiley Very Happy 

 

 

 

The module code I described above:

{% for item in module.hero  %}

<!-- I don't think this will work. It'll loop through each repeatable item and load loop.length number of times... Also I don't know how I'd grab a variable created in here and use it to declare which loop item to display... --->
<script>
    // Set up local storage Variable
	var HeroSlide = localStorage.getItem('on_load_counter');
	
	// Give storage a max so it doesn't count to infinite
	if (HeroSlide === null || HeroSlide >= {{ loop.length }}) {
	    HeroSlide = 0;
	}
	
	// Math Time (Add 1 to whatever the HeroSlide variable is)
	HeroSlide++;
	
	// SetItem for on_load_counter and HeroSlide 
	localStorage.setItem("on_load_counter", HeroSlide);
 


</script> 
{% if loop.index == 1 %}

<div id="hero-image">  
  <div id="hero-{{ loop.index }}" class="hero-right-text hero-banner" style="background-image: url({{ item.background_image.src }});">
    <div id="hero-bars"> 
      <div class="hero-top-bar">{% inline_text field="hero_top_bar" value="{{ item.hero_top_bar }}" %}<span class="asterisk">*</span></div>
      <div class="hero-bottom-bar">{% inline_text field="hero_bottom_bar" value="{{ item.hero_bottom_bar }}" %}</div>
      <div id="popup" class="overlay">	
        <div class="popup">
          <a class="close" href="#popup:target">&times;</a>
          <div class="content">					
            {% inline_rich_text field="popup_1" value="{{ item.popup_1 }}" %}
          </div>
        </div>
      </div>	<!-- #popup -->
    </div><!-- #hero-bars -->


    <div id="hero-pink-bar">Bianca Valenti<a class="popup-x">+</a>				
      <div id="popup" class="overlay">
        <div class="popup">
          <a class="close" href="#popup:target">&times;</a>
          <div class="content">            
            {% inline_rich_text field="popup_2" value="{{ item.popup_2 }}" %}
          </div>
        </div>
      </div>			
    </div><!-- #hero-pink-bar --> 
    <div id="hero-source" class="source-white">{% inline_text field="hero_source" value="{{ item.hero_source }}" %}</div>
  </div><!-- #hero-{{ loop.index }} --> 
</div><!-- #hero-image -->
{% endif %}
{% endfor %}


 

 

The Basic JS Snippet Described Above

<div id="hero"></div>
<script>
$(function() {
    
    var PortalID = '#######';
    
    // Grab the Hero first hero file for string example
    var str = "{{ get_public_template_url('Coded-files/Custom/page/PB_2017-10/vid-hp-hero-1.html') }}";
    
    // Strip it naked
    var i = str.lastIndexOf('/');
    
    // Set up local storage Variable
	var HeroSlide = localStorage.getItem('on_load_counter');
	
	// Give storage a max so it doesn't count to infinite
	if (HeroSlide === null || HeroSlide >= 2) {
	    HeroSlide = 0;
	}
	
	// Math Time (Add 1 to whatever the HeroSlide variable is)
	HeroSlide++;
	
	// SetItem for on_load_counter and HeroSlide 
	localStorage.setItem("on_load_counter", HeroSlide);
	
    if (i != -1) {
        // Echo out that new URL (template_url.com/Custom/page/PB_2017-10/vid-hp-hero-[THE NUMBER].html&[PORTALID]
        str = str.substr(0, i) + "/vid-hp-hero-" + HeroSlide + ".html&portalId=" + PortalID;
    }
    $("#hero").load(str); 
});
</script>

 

Reply
0 Upvotes
1 Reply 1
Highlighted
Community Manager

Hey @MarcusZeal      

 

I apologize for the delay in getting back to you. I am wondering if you were able to resolve this or if you still need assistance on this matter? If so, could you please share the URL you are working on?

 

Thank you

Sharon

Reply
0 Upvotes