Streaming live at 10am (PST)

Preview vs Published


#1

I'm getting a strange error where after publishing, one column's content appears to be nested inside the other. The first screenshot below shows how the content looks after publishing, and the second with how it looks in the preview and how it should be formatted. Anyone have any idea why this is occurring? Public link is here.

After publishing

In preview


Show cms item the right day
#2

Can you try to remove everything but SCRIPT here ?


#3

@vincent that corrected the issue of the image not showing up, but now the custom code to display the text in that section doesn't work. No text displays after you remove the other code. I only left the script that you highlighted.


#4

Any idea @vincent?

@cyberdave @pixelgeek @sabanna @bart


#5

Hi @jordanshotwell,

Try to change the code snippet in the 2nd embed widget to this one:

<script>
function injectDay() {
  var days = ['Honey Dark Rum', 'Maple Bourbon Pecan', 'Sea Salt Pretzel', 'Plain Jane', 'Honey Dark Rum',
          'Chocolate Peanut Butter', 'Sea Salt Pretzel'];
  var date = new Date();
​
  return days[date.getDay()];
}
​
Webflow.push(function() {
  $('.day-flavor .text').html(injectDay());
});
</script>

 <div onload="injectDay()">
    <div>
      <h3 class="dayContainer"></h3>
    </div>
 </div>

Regards,
Anna


#6

Hey @sabanna. That appears to have fixed the image, but not the Day text in column 1.


#7

Right now published site and read-only link shows old code so I can't really see why it doesn't work. Could you, please change the code and publish the site?


#8

Sorry, published and read-only link changed. Here they are.

Published

Read only


#9

Please delete the embed component for the text, open up the page settings, and paste this in the last textarea:

<script>
function injectDay() {
  var days = [
    'Honey Dark Rum', 
    'Maple Bourbon Pecan', 
    'Sea Salt Pretzel', 
    'Plain Jane', 
    'Honey Dark Rum',
    'Chocolate Peanut Butter', 
    'Sea Salt Pretzel'
  ];
  return days[new Date().getDay()];
}
var Webflow = Webflow || [];
Webflow.push(function() {
  $('.day-flavor.text').html(injectDay);
});
</script>

#10

That worked perfectly @samliew. Thanks for your help too @sabanna and @vincent!


#11

@samliew @sabanna any idea how to use a similar script to inject a specific URL instead of the flavors above, based on the day? I'm trying to build a corresponding link for each of the daily flavors listed in the script above. The ecommerce platform I'm using allows me to implement buy buttons (which I'm using on the "Flavors" page) but I'd love to be able to change the URL based on the day, so that users can add it to their shopping cart directly from the "Flavor of the Day" section. Any ideas?


#12
<script>
function injectUrl() {
  var urls = [
    'http://google.com', 
    'http://yahoo.com', 
    'http://samliew.com', 
    'http://webflow.com', 
    'http://youtube.com',
    'http://microsoft.com', 
    'http://apple.com'
  ];
  return urls[new Date().getDay()];
}
var Webflow = Webflow || [];
Webflow.push(function() {
  $('#day-url').attr({
    href: injectUrl(),
    target: '_blank',
  });
});
</script>

Insert a text link onto your page. Go to the settings tab and insert this ID: day-url


#13

@samliew that worked like a charm. Genius!


#14

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