DEV Community: Seppe Gadeyne

Supercharge your Shopify pages with Liquid shortcodes for collections

Seppe Gadeyne — Fri, 02 Jun 2023 11:33:14 +0000

I will share a handy trick I recently applied to a client's website selling orthopedic insoles. We needed a way to showcase collections in a page's text. Unlike WordPress, this isn't a feature directly offered by Shopify. We can achieve this with some Liquid, Shopify's template language. Look at the link above for an example of this implementation.

Making your Shopify theme shortcode-ready

The first step in our journey involves tweaking your theme's main-page.liquid file, located under the /sections directory. We'll make a small but impactful change here: replace {{ page.content }} with {% render 'shortcode', page: page.content %}. This modification tells Shopify to load the snippet named shortcode.liquid and pass it the variable named page containing page.content.

Creating the liquid shortcodes

Once we've prepped our theme, it's time to create two new files within the /snippets folder: shortcode.liquid and shortcode-collection.liquid.

In shortcode.liquid, we'll be inserting the following code:

{% liquid
   if page != empty
       assign content = page | split: '[collection='

       if content.size > 1
           assign content_parts = content[1] | split: ']'
           assign shortcode_handle = content_parts[0]

           echo content[0]

           if collections[shortcode_handle].id != empty
               render 'shortcode-collection', handle: shortcode_handle
           else
               echo '<p>No collection found with the handle "' | append: shortcode_handle | append: '".</p>'
           endif

           echo content_parts[1]
       else
           echo page
       endif
   endif
%}

This code checks if a shortcode in the format [collection=name-collection] is present within the text. If detected, the content will be split into two parts, and shortcode-collection.liquid will be loaded. If no shortcode is found, page.content is loaded as is.

Now, we'll add the following code to shortcode-collection.liquid:

{% assign collection = collections[handle] %}

{% if collection.id != empty %}
   <article>
       <h2>{{ collection.title }}</h2>
       {% for product in collection.products %}
           <article>
               <a href='{{ product.url }}'>
                   <img
                       src='{{ product.featured_image | image_url: width: '600', height: '600' }}'
                       alt='{{ product.title }}'
                       width='600'
                       height='600'
                       loading='lazy'
                   >
               </a>

               <a href='{{ product.url }}'>
                   <h3>
                       {{ product.title }}
                   </h3>
               </a>

               <p>
                   {{ product.price | money }}
               </p>
           </article>
       {% endfor %}
   </article>
{% else %}
   <p>No collection found with the handle "{{ shortcode_handle }}".</p>
{% endif %}

This code is responsible for rendering the products of a given collection. Remember, you'll likely need to style the output with CSS to match your website's looks. I intentionally used the <article> element, along with heading elements <h2> and <h3>, to leverage semantic markup, which can help your site rank higher on Google. For more information on semantic markup and improving your Google ranking, check out my other articles at Straffe Sites.

Conclusion

With some creativity and Liquid code, we've created a system that allows for the flexible insertion of Shopify collections into any part of your webpage.

This technique can be a real game-changer for those who want to provide a more dynamic and customized shopping experience. It's another example of the flexibility and power that Shopify's Liquid language offers.

But remember, with great power comes great responsibility. Always double-check your code and test your pages thoroughly to ensure everything works as expected. And remember to style your output with CSS to maintain a consistent and appealing visual aesthetic across your site.

I hope this tutorial has been helpful and has given you ideas for your Shopify projects. Remember, the possibilities are nearly endless when customizing your e-commerce store.

Unlocking your website's potential: eliminate render-blocking resources

Seppe Gadeyne — Mon, 08 May 2023 09:35:42 +0000

Do you need help constantly seeing poor Lighthouse ratings from Google PageSpeed Insights? The main issue is often render-blocking resources. In this blog post, I'll walk you through some straightforward steps to eliminate these performance issues and help your website achieve the speed boost it deserves.

Optimize JavaScript loading to prevent page load delays

A simple tweak can impact your website's performance. Optimizing loading ensures no longer render-blocking the initial rendering of your page. Eliminating render-blocking is facilitated through the use of a Promise, which allows scripts to be loaded asynchronously without blocking the rendering of the page, ensuring that they are injected into the page only after the initial HTML document has been fully loaded and parsed. Some scripts, like chat widgets, are introduced toward the end of the page or when the user interacts with the website.

Here's an example of how to optimally load Google Tag Manager:

<script type="module">
    // Function to load JavaScript to the DOM
    function loadJS(src, id) {
        return new Promise((resolve) => {
            const script = document.createElement('script')
            script.type = 'text/javascript'
            script.async = true
            script.src = src
            script.id = id
            script.onload = resolve
            document.head.appendChild(script)
        })
    }

    // Load Google Tag Manager 
    loadJS(`https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX`, 'gtm').then(() => {
        window.dataLayer = window.dataLayer || []
        window.dataLayer.push({
            event: 'gtm.js',
            'gtm.start': new Date().getTime(),
            'gtm.uniqueEventId': 0
        })
        window.dataLayer.push({ event: 'pageLoad' })
    })
</script>

The following example demonstrates how to load a chat widget only when the user begins scrolling on the website:

<script type="module">
    // Function to load JavaScript to the DOM
    function loadJS(src, id) {
        return new Promise((resolve) => {
            const script = document.createElement('script')
            script.type = 'text/javascript'
            script.async = true
            script.src = src
            script.id = id
            script.onload = resolve
            document.head.appendChild(script)
        })
    }

    function handleScroll() {
      // Load the external JavaScript
      loadJS(`https://static.chatbotkit.com/integrations/widget/v2.js`, 'chatbotkit')

      // Remove the event listener after executing the code
      window.removeEventListener('scroll', handleScroll);
    }

    window.addEventListener('scroll', handleScroll);
</script>

Embedding videos without hindering page load

Adding multimedia, like videos, can provide a rich experience for your users. However, loading external resources such as videos can significantly slow page load time. A solution to this is to initially display a thumbnail of the video and only load the video when the user expresses interest by clicking on the thumbnail.

I applied this technique for a client on their page: Hire silent disco at Verhuurwinkel.nl. It worked seamlessly, ensuring the page loaded faster and providing interactive video content.

Here’s how you can implement this technique for a YouTube video:

<div id="my-youtube-id">
    <img id="my-thumbnail-id" src="https://example.com/images/thumbnail.jpg" alt="ALT text for your image"
        width="1200" height="675" style="cursor: pointer;">
</div>

<script>
    // Function to handle thumbnail click event
    function handleThumbnailClick() {
        const iframe = document.createElement('iframe');
        iframe.setAttribute('title', 'YouTube video player');
        iframe.setAttribute('src', 'https://www.youtube.com/embed/X4z0ojfdLac');
        iframe.setAttribute('width', '1200');
        iframe.setAttribute('height', '675');
        iframe.setAttribute('frameborder', '0');
        iframe.setAttribute('allowfullscreen', 'allowfullscreen');

        const contentDiv = document.getElementById('my-youtube-id');
        const thumbnail = document.getElementById('my-thumbnail-id');

        // Replace the image with the iframe
        contentDiv.removeChild(thumbnail);
        contentDiv.appendChild(iframe);
    }

    // Wait for DOM to be ready
    document.addEventListener('DOMContentLoaded', function () {
        const thumbnail = document.getElementById('my-thumbnail-id');
        thumbnail.addEventListener('click', handleThumbnailClick);
    });
</script>

In the code above, an image thumbnail of the video is initially displayed on the webpage. When the user clicks on the thumbnail, a handleThumbnailClick function is triggered, which replaces the thumbnail with the actual YouTube video iframe. This way, the external video resource is only loaded when it's needed, which helps in reducing the initial load time of your webpage.

By following the above method, you can embed videos in your website without negatively impacting the page load time, further unlocking your website's potential for speed and performance.

Conclusion

Following the steps outlined in this blog post, you can eliminate render-blocking resources from your website and enhance its overall website performance. Try these tips, and watch your website's loading time dramatically improve!

Crafting a mobile menu with Tailwind CSS without JavaScript

Seppe Gadeyne — Fri, 28 Apr 2023 08:34:10 +0000

Welcome to this blog post, where I'll walk you through building a mobile menu using only Tailwind CSS and HTML, without JavaScript. This approach is excellent for enhancing website performance, as minimizing the use of JavaScript can help your site load faster. You can check out a live example of this technique on my website. Let's get started!

Using `peer-*` from Tailwind CSS for animations and state

To create the animations for our mobile menu, we'll utilize the peer-* utility from Tailwind CSS. This allows us to control the state of a sibling element, like an <input> element of the type checkbox. By placing all HTML elements within the <label> element, we can make them dependent on the state of the <input> element. We will then hide the <input> element and make the <label> element respond to touch or cursor.

<label class="relative z-40 cursor-pointer px-3 py-6" for="mobile-menu">
   <input class="peer hidden" type="checkbox" id="mobile-menu" />
</label>

Creating the hamburger icon with `before:` and `after:` pseudo-elements

To craft the hamburger icon, we'll use the before: and after: pseudo-elements. We'll start with a <div> element with a height of 1px and a width equal to the w-7 value. In this example, the middle line is set to transparent, so we only see the lines from before: and after:

<label class="relative z-40 cursor-pointer px-3 py-6" for="mobile-menu">
    <input class="peer hidden" type="checkbox" id="mobile-menu" />
    <div
        class="relative z-50 block h-[1px] w-7 bg-black bg-transparent content-[''] before:absolute before:top-[-0.35rem] before:z-50 before:block before:h-full before:w-full before:bg-black before:transition-all before:duration-200 before:ease-out before:content-[''] after:absolute after:right-0 after:bottom-[-0.35rem] after:block after:h-full after:w-full after:bg-black after:transition-all after:duration-200 after:ease-out after:content-[''] peer-checked:bg-transparent before:peer-checked:top-0 before:peer-checked:w-full before:peer-checked:rotate-45 before:peer-checked:transform after:peer-checked:bottom-0 after:peer-checked:w-full after:peer-checked:-rotate-45 after:peer-checked:transform"
    >
    </div>
</label>

Completing the mobile menu with additional elements

Now, let's add more elements to complete the mobile menu:

A full-screen background with a backdrop blur filter
A <div> element for the menu items with an animation, which scrolls the menu from right to left
The menu itself, using a <menu> element (which functions like a <ul> element, but is better for semantics in HTML)

<label class="relative z-40 cursor-pointer px-3 py-6" for="mobile-menu">
    <input class="peer hidden" type="checkbox" id="mobile-menu" />
    <div
        class="relative z-50 block h-[1px] w-7 bg-black bg-transparent content-[''] before:absolute before:top-[-0.35rem] before:z-50 before:block before:h-full before:w-full before:bg-black before:transition-all before:duration-200 before:ease-out before:content-[''] after:absolute after:right-0 after:bottom-[-0.35rem] after:block after:h-full after:w-full after:bg-black after:transition-all after:duration-200 after:ease-out after:content-[''] peer-checked:bg-transparent before:peer-checked:top-0 before:peer-checked:w-full before:peer-checked:rotate-45 before:peer-checked:transform after:peer-checked:bottom-0 after:peer-checked:w-full after:peer-checked:-rotate-45 after:peer-checked:transform"
    >
    </div>
    <div
        class="fixed inset-0 z-40 hidden h-full w-full bg-black/50 backdrop-blur-sm peer-checked:block"
    >
        &nbsp;
    </div>
    <div
        class="fixed top-0 right-0 z-40 h-full w-full translate-x-full overflow-y-auto overscroll-y-none transition duration-500 peer-checked:translate-x-0"
    >
        <div class="float-right min-h-full w-[85%] bg-white px-6 pt-12 shadow-2xl">
            <menu>
                <li><a href="/">Home</a></li>
                <li><a href="/contact">Contact</a></li>
            </menu>
        </div>
    </div>
</label>

Conclusion

In this blog post, we've successfully built a lightweight mobile menu using Tailwind CSS and HTML without JavaScript. This approach is crucial for optimizing your website's load speed and ranking higher in search engines. So try and experience the benefits of a more performant, JavaScript-free mobile menu.

Unlocking the power of semantics in HTML

Seppe Gadeyne — Thu, 27 Apr 2023 11:57:37 +0000

Welcome to the world of semantics, where code speaks the language of content. In today's fast-paced digital landscape, creating accessible and search engine-friendly web pages is crucial for success. However, as a freelance web developer, I've noticed that many newly built websites need improvement regarding semantics in HTML. In this blog post, we'll dive into the importance of semantics, explore a basic HTML structure with the correct semantics, and provide resources for further learning.

The importance of semantics

Using semantics correctly allows you to communicate the meaning of content blocks on your website through code. Semantics are of great value for search engines and screen readers, making your site more accessible and easily understood.

A basic HTML structure with proper semantics

Here's an example of how to structure a page with the correct semantics:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>My Page</title>
</head>
<body>
    <h1>This is my page</h1>
    <header>
        <figure>
            <img src="logo.svg" alt="My brand" />
        </figure>
        <nav>
            <h2>Primary navigation</h2>
            <menu>
                <li><a href="/">Home</a></li>
                <li><a href="/contact">Contact</a></li>
            </menu>
        </nav>
    </header>
    <main>
     <article>
         <h2>Article Title</h2>
         <h3>Subtitle 1</h3>
         <p>Paragraph 1</p>
         <h3>Subtitle 2</h3>
         <p>Paragraph 2</p>
         <h3>Subtitle 3</h3>
         <p>Paragraph 3</p>
     </article>
    </main>
    <footer>
        <nav>
            <h2>Footer navigation</h2>
            <menu>
                <li><a href="/">Home</a></li>
                <li><a href="/contact">Contact</a></li>
            </menu>
        </nav>
        <p>&copy; 2023 My Brand</p>
    </footer>
</body>
</html>

You might notice that the <h1> element is positioned immediately after the <body> element. This implies that subsequent heading elements should begin with the <h2> element, and beneath the <h2> element, there should be <h3> elements. Sticking to these rules is essential for implementing semantics correctly in HTML. For more guidance, refer to resources on semantics in HTML from MDN.

Placing the <h1> element right below the <body> element can be challenging visually organizing your layout. Therefore, I usually make this <h1> element visible only to screen readers using CSS. Remember that this element's content is crucial for search engines, so ensure it's optimized for SEO.

Resources and tools for better semantics

Many sectioning elements in HTML need to be identified by a heading element as a child. You can consult the HTML elements reference from MDN for each element's requirements, and you can use a tool like HTML5 Outliner to check your work. If you've missed a heading element, this tool will make finding and correcting the issue easy. By implementing the correct markup, you'll create a well-structured table of contents for your page.

Semantics for blog posts

For those interested in diving deeper into the topic, I've written a separate blog post about the specific elements and semantics to use for blog post pages. Check it out to enhance your understanding and application of HTML semantics in blogging.

Conclusion

Understanding and applying the correct semantics in HTML is essential for creating accessible, search engine-friendly websites. By following the basic structure provided and using the resources mentioned, you'll be on your way to unlocking the full potential of semantics in your web development projects. Remember, code is not only about functionality – it's also about communication. So make your code speak the language of your content with the power of semantics.

DEV Community: Seppe Gadeyne

Supercharge your Shopify pages with Liquid shortcodes for collections

Making your Shopify theme shortcode-ready

Creating the liquid shortcodes

Conclusion

Unlocking your website's potential: eliminate render-blocking resources

Optimize JavaScript loading to prevent page load delays

Embedding videos without hindering page load

Conclusion

Crafting a mobile menu with Tailwind CSS without JavaScript

Using peer-* from Tailwind CSS for animations and state

Creating the hamburger icon with before: and after: pseudo-elements

Completing the mobile menu with additional elements

Conclusion

Unlocking the power of semantics in HTML

The importance of semantics

A basic HTML structure with proper semantics

Resources and tools for better semantics

Semantics for blog posts

Conclusion

Using `peer-*` from Tailwind CSS for animations and state

Creating the hamburger icon with `before:` and `after:` pseudo-elements