Add to Cart, image, and Product name in Sticky Header

[eldon99]

Any suggestions for including: Add to Cart, image, and Product name in Sticky Header on the PROD page.

[Matt Zimmermann]

Nice idea for an added user experience. You could add a conditional section which would contain an add to cart form with the items you are looking for. However, this concept would not be useful if a product had attributes, especially required one.

[eldon99]

Matt,

I agree. Fortunately, we do not use any attributes at the moment.

[Bruce - PhosphorMedia]

Not following the "how" part...why not just 'put' it there? The 'sticky' header is just a specified div. It can be easily expanded. Or, did i just run out of coffee too soon?

[eldon99]

Bruce, you did not miss a thing. I guess I was more looking to see if anyone had done this already and had a snippet I could steal. I of course can always use more coffee, however. I will play around with this among my 4,000 other projects.

[Bruce - PhosphorMedia]

Well, not specifically, but pretty much on every project using a sticky header, the client want's different things in that 'sticky' portion. And in several cases, different items for desktop verses mobile.

[eldon99]

Very good point Bruce. Speaking of the sticky.... When I go to the demo page (https://shadows.mivareadythemes.com/) it seems like the first time I load the page the sticky header does not "Stick". I have to refresh the page, and then it sticks when I scroll down on the page. Seems to be the same experience in both Firefox and Chrome). Anyone else experiencing this?

[Matt Zimmermann]

That is correct. There is a conditional in the JavaScript which checks if you are interacting with the site through touch or not. If it is not touch, then the sticky will fire. The results of the check are stored in session storage, so once you interact, it will remember.