Storefront Web Components - Questions

Hydrogen and Storefront APIs
1

Since this is my first post I would like to say Hi to everyone, Hi! :wink:

At the beggining congrats to everyone involed in building “Storefront Web Components”, great job and great move! I was able to embed a cart and demo product on my platform of choice in less than 10 mins :wink:

I’m not sure if that is a correct place so could you please let me know:

  1. Where should I: ask questions? Bug reports? Feature requests? about Storefront Web Components? (github maybe?)

I read the docs and check playgrounds, and while these are great to get you started, it would be great to get some more detailed doc’s with examples, or pointing in the correct direction in API. I’m not familiar with Shopify API yet, so please forgive some novice questions.

  1. After playing a bit with the code I see first problem (bug?)

Let’s say that we have a basic product with simple size variants: XS, S, M, L

variant M is discounted, so it has a “compare at price” price set in the variant settings in the shop:

In web component I have price and compare price:

<shopify-money query="product.selectedOrFirstAvailableVariant.price"></shopify-money>
<shopify-money query="product.selectedOrFirstAvailableVariant.compareAtPrice"></shopify-money>
<shopify-variant-selector></shopify-variant-selector>

What is happening on the frontend - after selecting variant M compare price is shown correctly, but - it stays visible for good - even after selecting back to other variants.

It would be great if all <shopify-money> elements were updated when the variant changes.

I see that update elements are getting data-processed=“true”html attribute, when value like price has been updated, but once done it stays “true” there.

Maybe component can keep trace of last changed element and set it to false, in that case Iike in scenario above I would be able to hide compare price at least via CSS.

  1. Here another question that can help me out, can I listen to any JS events on variant change? If, yes any examples please?

This one is actually quite important. At the moment I’m just playing with components, but in real scenario, I would like to use only base elements from shopify data and display product info, including media from our system. In this case I may need to know when to change for example media on our side on variant change?

  1. In the docs for “shopify-variant-selector” there is info that we can use “visible-option” attribute, unfortunately it doesn’t describe how exactly it works, and I can’t find usecase in the playground.
  2. docs says that we can use shopify-attr--attribute-name - I understand that attribute-name is a base html element attribute like in show example href or disabled on buy now buttons?
  3. For <shopify-data query=””> I understand that for “product” i can use any data I see in the API for product right? But where I can find what is availableproduct.selectedOrFirstAvailableVariant ? Can’t see API docs for it, any help please?
  4. for API I understand that web components are returning booleans where stated in API or null for strings etc. if empty?
  5. I can’t get product increase/decrease buttons to work (even with exact code copied from playground - product detail page) Uncaught ReferenceError: increaseValue is not defined Is this was build only for the playground?

Thank you in advance for any replies!

2

Please discard pt 8. I thought that the quantity element is a part of the component (missed JS at the bottom of playground example).

Would be great to get an answer to other points especially pt 2. Definitely it shouldn’t work like this.