VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: Lockerbie on July 06, 2017, 12:57:52 PM

Title: Anchor to product-details?
Post by: Lockerbie on July 06, 2017, 12:57:52 PM
In a new VM-webshop there will be a slider visible above some of the category-views. But when you click and visit the corresponding product-details, you'll have to scroll down a bit, to be able to see these details. Off course I could hide the slider at product-details view with some css, but the idea is to maintain it there, for recognizability (for the category chosen).
Would it be possible to use some sort of anchor, so visitors can immediately see the product-details instead of scrolling down first?
Hints how to adjust things are welcome! And so are extensions, should there be something for this purpose.

Joomla! 3.7.3 + VM 3.2.2.
Title: Re: Anchor to product-details?
Post by: K&K media production on July 06, 2017, 16:49:48 PM
you can use some JS to scroll to your anchor
Title: Re: Anchor to product-details?
Post by: Lockerbie on July 10, 2017, 09:22:25 AM
Thanks K&K media production, but I'm not sure how to do this.

In the meantime I'm thinking about decreasing the height of the banners, so the recognizability stays and the (first) products will be visible. I'm not sure yet, just thinking...
Title: Re: Anchor to product-details?
Post by: Ghost on July 10, 2017, 10:51:03 AM
There are several ways of doing this. You could manually edit links in template overrides to include an anchor. Or write a plugin which identifies VM product links and adds an anchor. Or you could add JavaScript snippet (vanilla or jQuery) to scroll on page load
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
https://api.jquery.com/scroll/
Title: Re: Anchor to product-details?
Post by: Lockerbie on July 13, 2017, 09:48:24 AM
Thanks Ghost! The first one was something I was looking for, but the other suggestions are also nice possibilities. Thanks, I'll keep them in mind.
For now, my client wants to use the less height banners, so both at category-view and product-details you'll be able to see details.