Skip to content

Instantly share code, notes, and snippets.

View TeamDijon's full-sized avatar

Virgil Dubois TeamDijon

21 followers · 15 following
View GitHub Profile
@TeamDijon
TeamDijon / dry-pagination.liquid
Last active February 25, 2025 14:04
Snippet showing a DRY paginated product grid using both collection and product_list source
{% liquid
# Using the collections object is necessary as we can't paginate collection settings, only collectionDrop objects
assign featured_collection = collections[section.settings.featured_collection]
assign product_list = section.settings.product_list
if featured_collection == null and product_list == blank
# Default behavior handling can go there
endif
assign pagination_size = section.settings.pagination_size
@TeamDijon
TeamDijon / test-case.liquid
Created August 29, 2024 21:56
Early performance testing of the `inline_asset_content` filter
{% comment %}
Findings:
- The filter works really good as far as I can tell
- Need to test with a bunch of SVGs (only one maybe hardly stress the performance) with effective caching
- If you use the SVG multiple times, do not hesitate to store the markup in a variable instead of using the filter multiple times
First batch : One SVG / no filter piped to the markup / 50k iterations
- Case #1, #2 and #3: around 350ms (no significant difference)
- Case #4: around 2500ms+
@TeamDijon
TeamDijon / dawn-rem-rebase.js
Last active July 22, 2024 09:00
import { promises as fs } from 'fs';
import { extname, join, resolve } from 'path';
const DEFAULT_ASSETS_DIR = 'assets';
const CSS_EXTENSION = '.css';
const DISCLAIMER = '/* CAUTION: Source document was rebased from 10px to 16px rem root */';
const DRY_RUN = process.env.DRY_RUN === 'true';
let processedFiles = 0;
let skippedFiles = 0;
@TeamDijon
TeamDijon / template-name.liquid
Last active October 3, 2024 14:47
{%- comment -%}
Renders the template name based on the template object.
Accepts:
- template {Template object} - Template object
Usage:
<body class="{% render 'template-name', template: template -%}">...</body>
{%- endcomment -%}
@TeamDijon
TeamDijon / svg-cross.liquid
Last active August 27, 2024 14:14
SVG library snippet with associated SVG snippet
<svg {{ class_attribute }} viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" {{ style_attribute }}>
<path d="M 45 5 L 5 45 M 5 5 L 45 45"></path>
</svg>
@TeamDijon
TeamDijon / social-networks.liquid
Created July 1, 2024 14:38
In this Gist, we create a Shopify-theme interface for social networks leveraging market metafields (metafields everywhere)
{% liquid
# social_network_list contains the list of social_network metaobject entries associated with the current market
assign social_network_list = localization.market.metafields.content.social_network_list.value
%}
{% # Later in the markup %}
<ul class="social-network-link-list">
{% for social_network in social_network_list %}
{% liquid
# We get and process the data from the metaobject entry
@TeamDijon
TeamDijon / css-minifier.liquid
Created June 29, 2024 10:55
{%- comment -%}
Minifies and return CSS. Returns nothing if the CSS is empty.
Accepts:
- css {string} - CSS to minify
- section {Section object} - Section object (Optional)
Usage:
{% capture dynamic_style %}
{% render 'template-section-style' %}
@TeamDijon
TeamDijon / article-playground.liquid
Last active July 2, 2024 21:02
Some snippets on how to use
{% comment %}
If you have questions regarding the blog/article list interface, see :
https://gist.github.com/TeamDijon/15684d1bef3c4bb5ca9dfd8a9381a156
As always, with collections/blogs/articles, mind the potential conflicts with pagination
For the article handle source, I usually go with a "ricthext" setting using unordered list.
From this, I can retrieve the data and store everything in an array before using it on the following snippets of code
{% endcomment %}
@TeamDijon
TeamDijon / blog-handle-list.liquid
Created June 23, 2024 11:38
{% liquid
# The setting is of "richtext" type
assign blog_handle_list = section.settings.blog_handle_list
assign associated_blog_list = ''
assign markup_blog_markup_list = blog_handle_list | split: '</ul>' | first | split: '</li>'
for markup_blog_handle in markup_blog_handle_list
assign blog_handle = static_blog_handle | split: '>' | last
assign associated_blog = blogs[blog_handle]
@TeamDijon
TeamDijon / css-variables.liquid
Created June 22, 2024 14:59
Explanations regarding CSS variables system using Liquid
{% # Inside the liquid file %}
{% liquid
assign base_selector = '#shopify-section-' | append: section.id
assign accent_color = section.settings.accent_color
%}
<style>
{{ base_selector }} {
{% if accent_color != 'rgba(0,0,0,0)' and accent_color != '#000000' %}
--accent-color: {{ accent_color }};