Skip to content

Instantly share code, notes, and snippets.

@andrewfairlie

andrewfairlie/_random-product.twig

Created July 9, 2020 17:42
Show Gist options
  • Save andrewfairlie/589623afc42886ebcb11b9cbb5aad8b5 to your computer and use it in GitHub Desktop.
Save andrewfairlie/589623afc42886ebcb11b9cbb5aad8b5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_random-product.twig
{# s-trigger is listening for our custom event from index.twig #}
<div sprig s-trigger="entered-viewport">
{% if sprig.request %}
{% set randomProduct = craft.entries.section('products').order('RAND()').one() %}
<div class="w-4/12 bg-white p-8">
{{ randomProduct.title }}
</div>
{% else %}
<div class="w-4/12 bg-pink-300 p-8">
Loading...
</div>
{% endif %}
</div>
Raw
index.twig
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-pink-200 p-16">
<h1 class="text-4xl font-bold mb-8">Sprig test</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="bg-red-500 p-16" data-on-enter-viewport>
{{ sprig('_random-product') }}
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
{% js %}
let onEnterViewportItems = document.querySelectorAll('[data-on-enter-viewport]');
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting){
const event = new Event('entered-viewport');
entry.target.querySelector('[sprig]').dispatchEvent(event);
}
});
});
for(item of onEnterViewportItems)
{
observer.observe(item);
}
{% endjs %}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment