Why isn't my new popup showing on my custom Shopify section?

Store Design
1

Hi all,

I have a Shopify webshop, where I sell handmade earrings + I have a couple of retailers distributing my handmade earrings. I made a page with a custom section, which lists all my retailers (you can find that page here: https://www.petitbonbon.be/pages/find-a-shop). Basically te section consists of different blocks (each shop representing a block). When you click on a shop name, the address or extra info appears as a popup. The popup appears based on the block.id.

Everything worked fine up until yesterday. I tried adding another block, representing a shop (the third block on the top right, which says “CLIPS”). Now when I dig deeper, I see that the block.id’s of my firstly added blocks are all structured like this: 1593372078693 (couple of numbers only), while the newly added block with title “CLIPS”, has a block.id that has a different structure: 0ae86b6d-5655-4916-80ee-c862260ca1d5. Could this be why the popup isn’t showing? And if so, what would solve the issue?

Thanks a billion in advance for helping me figuring this out…

Anneleen

This is the (simplified) liquid code for the section.blocks:

{% for block in section.blocks %}
          
    ### {{ block.settings.title }}
    

{{ block.settings.regio }}

 
{% comment %} this is what should appear when you click on the  {% endcomment %}
          
      {{ block.settings.text }} 
    
    
    
          
    {% endfor %}

This is what the script looks like (for showing the popup):

And this is my css:

/*================ Shops page styling ================*/
/* Grid layout */
.grid-shops {
  display: grid;
  grid-auto-flow: row dense;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: minmax(200px, max-content);
  margin: 15px auto;
  max-width: 100%;
  
    @media only screen and (max-width: 900px) {
    grid-gap: 15px;
  	grid-template-columns: repeat(2, 1fr);
  	}
  
  	@media only screen and (max-width: 500px) {
  	grid-template-rows: minmax(100px, max-content);
  	}
  
  	@media only screen and (max-width: 460px) {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(50px, auto);
  	}
}

.grid-image {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  text-align: center;
}

/* Popup container */
.glpopup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}

/* The actual popup (appears on top) */
.glpopup .popuptext {
  visibility: hidden;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  border-radius: 0px;
  padding: 8px 0;
  position: absolute;
  z-index: 9;
  bottom: 0%;
  left: 0%;
}

.popuptext p{
  padding: 20px 15px;
  word-wrap: break-word;
  
  @media only screen and (max-width: 660px) {
  padding: 5px 10px;
  }
  
  @media only screen and (max-width: 525px) {
  padding: 0px 5px;
  }  
}

.text_center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0px 20px;
  word-wrap: break-word;
}

.text_center p{
  margin-bottom: 0px;
  padding: 10px 0px;
}

.text_bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0;
}

.shop_title {
  letter-spacing: 0;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.glpopup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
1 Like
2

Ok, so I finally found out what was wrong:

onclick=“glpopupFunction(id)” instead of onclick=“glpopupFunction({{ block.id }})”

{% for block in section.blocks %}
          
    ### {{ block.settings.title }}
    

{{ block.settings.regio }}

 
{% comment %} this is what should appear when you click on the  {% endcomment %}
          
      {{ block.settings.text }} 
    
    
    
          
    {% endfor %}