Progressively load a new repeated variable on each page load

Highlighted
New Contributor

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

0 replies

No replies on this post just yet

No one has replied to this post quite yet. Check back soon to see if someone has a solution, or submit your own reply if you know how to help! Karma is real.

Reply to post

Need help replying? Check out our Community Guidelines