Hello... I hope someone can give me the best approach, I'm trying to create a "Quick View" box and have two solutions, I believe the one using the API js library is the best, so I'm looking for a second opinion.
Goal: Quick View product modal
Solution 1 - Use API Jquery Library
I already got this working, I'm worried about it timing out or something... idk. But I'm using data attributes to pass the product handle to my javascript file, where I make the API call to get all the values I want. These are all tied to when the user clicks the product, which passes the product handle to my script. Then, I'm pulling and displaying the title in the modal, pulling the price & formatting/displaying it, pulling the product images and parsing & displaying the array, and doing the same thing with the product variants. The only thing I am loading for the quick view when the page loads is the modal container where all of the data is placed with jquery.
Solution 2 - Hidden DIV loaded into the modal on click
From seeing this implemented, this seems to be the most common way to build a quick view box. I'm not sure if it is because it's the best way, or because it's by far the easiest. It's really easy to take the contents of a div in jquery and load them in the modal. HOWEVER, if you have 20 products, you have 20 hidden boxes which in my case, will have 20 hidden featured images, 80 thumb nails and who knows how many variants. Additionally, since it's hidden, it provides no added SEO benefit since it's invisible to page readers.
I personally think solution 1, using the Shopify jquery api is the best because it is much cleaner and a heck of a lot easier for the browser to load. Loading 20-some hidden divs only to call later seems like an absolute head ache, not to mention slows the page load considerably. This is a huge advantage of the other implementations of the quick view box, which makes the site feel like a clunker.
Am I missing something or is my thought process correct? Am I going to run into any rate limits if I do it this way?
I know it's a lot of extra work and far more advanced than calling a hidden div, but is the trade off worth it?