Shopify themes, liquid, logos, and UX
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 ;}
}
Solved! Go to the solution
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 %}
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 %}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024