Whats wrong with my code?

[NiTride]

Hi all,

I am trying to get a text box to appear on the products displayed image when the selected variants image contains the following alt-text "digitalrender". I have had this issue for a while and haven't been able to find a solution. Here is the code I came up with.

{% if product.selected_variant.image.alt contains "digitalrender" %}

<a class="rendertext" >DIGITAL RENDER</a>
<style>
.rendertext {
background-color: #197BBD;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
</style>

{% endif %}

I need this code because some of my product images are "digital renders" and I would like to display that too customers so they know. Does any one know why the code I have come up with doesn't work. It seems to work but I don't know how to get the code to constantly run and have the output of "product.selected_variant.image.alt" change when the variant option is changed. I tried getting a shopify expert to work on this issue but they said the problem is the app I am using to create my product pages. I am using the app "PageFly" to create my pages on my site. Is this true or is there a way I can get this to work.

[achieveapplabs · Accepted solution]

Hi @NiTride ,

Seems like the problem is with using selected_variant .

Liquid tags render before the HTML page is served to your visitors. That means.....

product.selected_variant.image.alt

..... Is the selected variant at the time the page loads, after that the value for image.alt changes but you're code doesn't execute. 

This works for some themes that completely reload the page when the variant changes. I'm not sure if your theme uses AJAX so PageFly is probably overwriting your code whenever you make an update. That's what it sounds like from your post.  

Regards,

Sam - Owner @ Achieve Applabs

[NiTride]

Thanks for the help. Do you by any chance know how to fix this issue, say through adding extra code to what I have. I have been told that I can fix this issue by adding JS code to this.

[achieveapplabs]

Hi @NiTride ,

I would be happy to help you further. Usually I only contribute short code snippets within Shopify's community.  

For something larger like this I charge per hour. Just send me an email admin@achieveapplabs.com

If you're looking for other Shopify Experts there's this resource: https://experts.shopify.com/

Sincerely,

Sam - Owner @ Achieve Applabs.

[NiTride]

I hired a Shopify expert a while ago to fix this issue but they then said that they could not fix this issue due to the issue being through the PageFly app, and that they can't do code level changes in any third-party apps. I then asked the PageFly Dev team to try and fix the issue but eventually they said doing this was impossible for some reason. Since the app creators said they have no way of solving this issue I would assume the issue is unfixable and would say the best idea would be to just not use PageFly for designing the product page and instead use the debut themes product page instead.

For an idea on how their coding works here is a look at the product pages code after loading up a product, using inspect element. From me looking, the important parts of the code are what are shown below. For creating the variants, I believe this part of the code is how they do this.

Looking at this, it looks as though they do grab the alt's for every product variants image?

When looking at how they load the variant images however, I believe the issue lies here. Since this code is presumably un-accessable and only PageFly can touch this, I would say that this can't be fixed by someone outside of the PageFly team.

From what I can see whenever a new product variant image is selected the <img src="url" changes however for some reason the alt="alt-text" code doesn't change for some reason with changing the variant and only seems to be generated on loading in the page.

The <span></span> seem to represent each variant and the position of the <span data-active="true"></span> == $0, seems to change positions with what variant is selected, and go to the specific variants <span></span> position.

If you assume you can fix this issue looking at this I would be happy to contact you and have you resolve this issue however if you can tell by looking at this that the issue is unsolvable then don't worry about it.

Thanks again for all your work, appreciate your time.

[NiTride]

I might just make my product page using the debut themes product page. I have enough coding knowledge to be able to make what I need work. Thanks any way for the help. I would say your answer from before is correct as it is PageFly creating their product pages in a weird way.