tinypops

Thanks @paul2009 This did the trick!.... almost.

Since this is by invite only, I don't want to cart icon showing in the site header. I wonder, can I add an interactive cart icon to only that page so purchasers can access/see how many products they've added to their cart at a glance? Any tricks, maybe something sneaky with code? 🤷‍♀️

I would like to sell tickets to a charity event, however, I require the names of all who purchase tickets. 

If I create a ticket to purchase in my shop, and attach a form that asks for the attendee's name when that product is purchased, but then someone buys more than one ticket at a time, how do I get multiple name inquiries in there for each ticket purchased?

i.e. one ticket is purchase = one name form field = we're good.

but

one person has 10 tickets purchase - squarespace still only has one name entry (one standard form field) that displays 

please halp.

That was it! Thanks for the share, I'll keep this in mind for future builds! 

My Countdown clock on the homepage still disappears when it wants... but the rest of the pages are cooperating, so I'm not going to push my luck. hahaha. 🤣

Thanks again @creedon

Site URL: https://www.wethepeoplesbefore.org/join-us

My css is only showing up on my "Join Us" page if I go directly to the URL (https://www.wethepeoplesbefore.org/join-us) vs. navigating to the Join Us page through the menu from the other pages.

The CSS is to collapse, frame in a thin box(only css that works from either entry method), and style my Info and FAQ text so it's not an intense scroll session. Even though I land on the same URL in the end, i'm not sure why navigating into the page through other pages on the site makes it function differently. Does this have a fix? Please advise 🙂 

edited: @bangank36
I used this code in the injection header of this event page:
https://contrabass-round-d5yj.squarespace.com/new-events

But the summary block i want it to effect is here:
https://contrabass-round-d5yj.squarespace.com/agenda
pass: wethepeoplesbefore

I would like to display the day of the week (in all caps) in front of my dates on my event summary pages. i.e. THURSDAY, February 3, 2022

I am currently using this code on the actual events page in the Page Header Code Injection, but its not capitalizing the days or carrying over to the summary pages.

Am I putting it in the wrong place? Do I need to add additional code? and if so, where? 
I'm on brine 7.0.

<style>
  var d = new Date();
  var days = ["SUNDAY", "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY"];
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  document.getElementById("demo").innerHTML = days[d.getDay()] + " " + months[d.getMonth()] + " " + d.getDate() + " " + d.getFullYear();
</style>

Works like a charm. Thank you very much!

Sure thing. 

The "buttons" are the date images and are directed by the link address (IMG1)

and the code block is at the very top of the section in which i'm trying to navigate to (IMG2)

I am trying to insert an anchor link that brings you to a specific section of a new page.

I've inserted code boxes with #id's at the top of each section that I would like to jump down to. And have directed the buttons to each of those coded section that indicate page and #id. I've used the below code: (the code is at the top of each unique "schedule" section)

/// code block - id for jump link //
<div id=“unique-name”></div>

I also tried using
<p id=“unique-name”></p>
neither work

/// Button address ///
/pagename#unique-name

It links back to the correct page, however, it does not jump down to the correct section. 

Can anyone take a look and let me know what I'm doing wrong?

url:https://contrabass-round-d5yj.squarespace.com/agenda
pass:wethepeoplesbefore

I'm trying to bring these date images (filter buttons) side-by-side like they appear on desktop instead of the default mobile stacking. 
Any css that can help? 

site:https://contrabass-round-d5yj.squarespace.com/agenda
pass:wethepeoplesbefore

https://contrabass-round-d5yj.squarespace.com/
pass: wethepeoplesbefore

Thanks!

#1 Maybe its just being buggy on my end? As long as it's working for others, I'm good!

#2. I was able to tinker around with it and the leading is working for me now, however, the image that I have set to display at the end of the countdown (which was working in the beginning) now no longer works, the entire section block disappears when the countdown is reached. Can you let me know what I'm doing wrong? Here is the code: 

<div class="container">
  <h1 id="headline">CELEBRATING 25 YEARS</h1>
  <body id="body">Join First Peoples Fund and The Kennedy Center in honoring native culture sovereignty, heritage, and vitality.<body>
    <br>
    <br>
  </body>
  </body>
  <div>
  <div>
  </div>
  <div id="countdown">
    <ul>
      <li><span id="days"></span>days</li>
      <li><span id="hours"></span>Hours</li>
      <li><span id="minutes"></span>Minutes</li>
      <li><span id="seconds"></span>Seconds</li>
    </ul>
  </div>
  <div class="message">
    <div id="content">
    <span style="padding-right:3px; padding-top: 3px;">
    <img class="manImg" src="https://static1.squarespace.com/static/6165ed53b4dd8e5edd18bd8b/t/618d76478abf5f110597eb0b/1636660807800/countdown_deliver.jpg"></img>
    </span>
    </div>
  </div>
</div>
<style>
/* general styling */
* {
  align-items: center;
  box-sizing: border-box 1925 x 500;
  margin: 10;
  padding: 0;
}

.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
  height: 100%;
  margin: 0;
}

.sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide {
  align-items: center;
  background-color: #ffffff;
  display: flex;
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    "Ariel"
    "Helvetica Neue", 
    sans-serif;
}

.container {
  color: #00000;
  margin: auto;
  text-align: center;
}

h1 {
  font-weight: regular;
  letter-spacing: .5rem; 
  text-transform: uppercase;
}

li {
  display: inline-block;
  font-size: 1em;
  list-style-type: none;
  padding: 2em;
  text-transform: uppercase;
}

li span {
  display: block;
  font-size: 8rem;
  margin-bottom: 4rem;
}

.message {
  font-size: 4rem;
}

#content {
  display: none;
  padding: 1rem;
}

.emoji {
  padding: 0.25rem;
}

@media all and (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  
  li {
    font-size: 1.125rem;
    padding: .75rem;
  }
  
  li span {
    font-size: 3.375rem;
  }
}
</style>
<script>
(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  let birthday = "feb 3, 2022 24:00:00",
      countDown = new Date(birthday).getTime(),
      x = setInterval(function() {    

        let now = new Date().getTime(),
            distance = countDown - now;

        document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

        //do something later when date is reached
        if (distance < 0) {
          let headline = document.getElementById("headline"),
              countdown = document.getElementById("countdown"),
              content = document.getElementById("content");

          headline.innerText = "JOIN THE CELEBRATION";
          countdown.style.display = "none";
          content.style.display = "block";

          clearInterval(x);
        }
        //seconds
      }, 0)
  }());
</script>

#3. I've decided white is a lovely background color and i have bigger issue to worry about. 🤣

@CubeSquared & @tuanphan

Thank you for providing the above info. I'm using this code and it works "great"!
I've dangerously customized (read: bastardized 🥴) the code to auto display an image at the end of the countdown vs emojis. But i'm having 3 main issues that i'm hoping you can help me with...pleeeeaase? 🥺

1. Half the time the countdown numbers just don't load.  Any ideas why? (img attached)

2. I try to customize css to reduce the leading between the h2 and body, but it then effects every h2 line-height on my site. (img attached)

and

3. When I try to insert a background image, it pretty much shuts my site down. 

Any info would be super helpful and appreciated.

https://contrabass-round-d5yj.squarespace.com/
wethepeoplesbefore

I'm creating an event website, and when I call on the events in a summary block, the little date icon that is standard on brine isn't showing when the design is in "list" mode. It displays correctly in grids, carousel, and wall... but not list. What gives ? 😩 Anyone else having this issue? Any workarounds in css to get it to display? Any help will be greatly appreciated!