Popup on section blocks

Solved
Highlighted
New Member
2 1 0

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 %}
    <div class="glpopup grid-image" onclick="glpopupFunction({{ block.id }})" {{ block.shopify_attributes }}>      
    <h3 class="shop_title text_center">{{ block.settings.title }}</h3>
    <p class="text_bottom"><span>{{ block.settings.regio }}</span></p>
 
{% comment %} this is what should appear when you click on the <div class="glpopup"> {% endcomment %}
    <span class="popuptext" id="myPopup{{ block.id }}">      
      <span class="text_center">{{ block.settings.text }} </span>
    </span>
    
    </div>          
    {% endfor %}

 

 

 

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

 

 

 

<script>
         // When the user clicks on <div>, open the popup
         function glpopupFunction(id) {
           var glpopup = document.getElementById("myPopup"+id);
         	glpopup.classList.toggle("show");
         }
    </script>

 

 

 

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 ;}
}

 

 

 

 

 

0 Likes
Highlighted
New Member
2 1 0

This is an accepted solution.

Ok, so I finally found out what was wrong:

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

    {% for block in section.blocks %}
    <div class="glpopup grid-image" onclick="glpopupFunction(id)" {{ block.shopify_attributes }}>      
    <h3 class="shop_title text_center">{{ block.settings.title }}</h3>
    <p class="text_bottom"><span>{{ block.settings.regio }}</span></p>
 
{% comment %} this is what should appear when you click on the <div class="glpopup"> {% endcomment %}
    <span class="popuptext" id="myPopup{{ block.id }}">      
      <span class="text_center">{{ block.settings.text }} </span>
    </span>
    
    </div>          
    {% endfor %}

  

0 Likes