Creating a quick shop modal

Astronaut
761 78 151

Hey just wondering if anyone has any tips for creating a quick shop modal. I have succeeded in doing it on my collections pages, though it is not ideal. I achieve it by creating a modal for every single product on the page at the moment because I do it in the for loop. That's 20 modals though. I'd like to know if anyone knows how to dynamically generate the content inside the modal, so I can make one and only one, and when the quick shop is clicked on the certain product, grab all that product information and populate it that way. If anyone had any tips I'd appreciate it. Thanks,

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
1843 170 525

How most themes do it - use Fancybox. Load a hidden div containing the product quickview in to a product container and show it using Fancybox.

Alternatives - use what you already have but add a micro template parser (something like doT.js which is crazy fast and crazy small) now use a <script type="text/template" /> to store that modal template you'll be loading with doT. The context you provide for the template will come from products JSON that you also conveniently store in a <script type="application/json" /> (obviously generated in Liquid, but hey, even Storefront API would be nice). All in all, I am pretty sure this would be simpler, smaller, more efficient and more flexible than the way most themes do it ;-)

Hope this helps!

I turn coffee in to code - since 1998
0 Likes
Highlighted
Astronaut
761 78 151

Thanks Karl, I'll look into that.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Astronaut
761 78 151

Hey Karl, been looking into doT, and it seems like a good solution. I'm having trouble implementing it on my store though. I'm doing a very simple example, just so I can wrap my head around using the product JSON later, but I can't even get my simple example to function on Shopify. I don't know if this has to do with the way that Shopify also see's double curley braces. This works locally:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="output-template"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.1.2/doT.min.js"></script>
    <script>
      var data = { name:"Jerry" };
      var template = "Hey <b> {{=it.name}} </b>, want to go to the bar?";
      var templateFunction = doT.template(template);
      var html = templateFunction(data);

      $('.output-template').html(html);

//output: Hey Jerry, want to go to the bar?


    </script>
  </body>
</html>

However, on shopify I only get the output: "Hey , want to go to the bar?"

Am I approaching this wrong? Please advise and thanks,

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
1843 170 525

Ah yes, didn't occur to me that Liquid and doT (or most other JS template engines a la handlebars) will clash.

You can

{% raw %}
{{=it.wannaGoToBar}}
{% endraw %}

or

{{"{{=it.wannaGoToBar"}}}}

or you can doT.templateSettings and change the default curly bracket delimiters to something else.

Haven't tried though... Shopify Admin is acting up currently and not loading.

I turn coffee in to code - since 1998
0 Likes
Astronaut
761 78 151

Adding the raw tags fixed the problem. Now I'm trying to load the product JSON into the data variable, I'm not exactly sure how to do this as I've never had to attach the JSON to anything, I've just had to access it to push stuff to my cart. Currently I'm doing:

  var data = jQuery.getJSON('/products/bbelt-2-28-compartment-silk-brush-belt.js');
  data = data.responseJSON;
  console.log(data);
  var template = "Hey <b> {%raw%}{{=it.handle}}{%endraw%} </b>, you owe me money.";
  var templateFunction = doT.template(template);
  var html = templateFunction(data);
  
  $('.output-template').html(html);

First off I get an error about {{=it.handle}} as:

Uncaught TypeError: Cannot read property 'handle' of undefined

But even if I get rid of that my console.log(data) returns undefined.

This is confusing, because in the console I can run the same exact code that I have in my javascript and after I log data, I have the responseJSON, so I'm really not sure why it's returning undefined. 

I have found little in the way of "tutorials" on doT.js  -- And it certainly doesnt help there's a youtube chanel dotJS. Any information on what I'm doing wrong is welcome. Otherwise, I'll just keep messing with it.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
1843 170 525

Not sure about jQuery.getJSON() - I sort of tip toe around jQuery as quietly as I can in order not to wake it up :D

(in other words, don't know much about jQuery)

But here's a Codepen of what I had in mind based on your first code snippet. Basically you won't load the JSON from a URI. No point in doing that since we already have all the data we need during Liquid parsing and it's there neatly cached by Shopify etc. So just mod your liquid template to literally print out the product JSON or whatever you need in a script tag then use JSON.parse().

The pen has it all hooked up and should work without glitches in Liquid - if anything, I think Shopify's Venture theme uses the same technique in product details for switching product variants so you can have a look there.

I turn coffee in to code - since 1998
0 Likes
Astronaut
761 78 151

Figured it out, I wasn't allowing time for the ajax call to process, so my stuff was coming up undefined. Had to use data.done() before I assign my variables. 

  var data = jQuery.getJSON('/products/bbelt-2-28-compartment-silk-brush-belt.js');
  
  data.done(function(){
  data = data.responseJSON;
  console.log(data);
  var template = "Hey <b> {%raw%}{{=it.handle}}{%endraw%} </b>, you owe me money.";
  var templateFunction = doT.template(template);
  var html = templateFunction(data);
  
  $('.output-template').html(html);
  })

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes