Skip to content

Instantly share code, notes, and snippets.

View Alpine JS modal component
{# v6 #}
{# USAGE:
{% embed '_components/modal' with {
modalHandle: 'exampleHandle'
} %}
{% block modalContent %}
SOMETHING INSIDE
{% endblock %}
{% endembed %}
#}
@piotrpog
piotrpog / product.twig
Last active Feb 25, 2021
commerce product page with sprig
View product.twig
{% extends 'shop/_layouts/main' %}
{% block main %}
{{ sprig('product_content', {productId: product.id}) }}
{{ sprig.script }}
{% endblock %}
View pretty_url_macro.twig
{% macro prettyUrl(url) %}
{{url
|trim('https://', 'left')
|trim('http://', 'left')
|trim('www.', 'left')
|trim('/', 'right')
}}
{% endmacro %}
View CSS for more readable Neo plugin blocks (Craft CMS)
[data-neo-b].blocktype{
font-size: 1.1rem;
background-color: #03A9F4;
color: white;
padding-left: 3rem !important;
padding-right: 3rem !important;
}
.ni_block{
border: 2px solid rgb(3 169 244 / 50%) !important;
View email_layout.twig
{# based on Postmark Transactional Email Templates
https://postmarkapp.com/transactional-email-templates #}
{# If you change button color, remember to pass it to macro AND define "buttonColor" before "extends" tag. #}
{# macro title #}
{% macro title(titleText) %}
{% if titleText is defined %}
<h1 style="margin-top: 0; color: #333333; font-size: 22px; font-weight: bold; text-align: center;" align="left">{{titleText}}</h1>
{% endif %}
@piotrpog
piotrpog / gist:5c34d9de9b167dc2edca52ea2db7efdb
Created Aug 3, 2020
Craft CMS Verbb Navigation - URL stucture based on menu structure
View gist:5c34d9de9b167dc2edca52ea2db7efdb
{{ craft.navigation.nodes().ancestorOf( craft.navigation.nodes('test').all()|filter(x => x.element.id == id)|first.id ).ancestorDist(1).one().element.uri ?? null }}/{{slug}}
@piotrpog
piotrpog / link_list_macro.twig
Created Jun 29, 2020
Twig macro generating links from array of entries
View link_list_macro.twig
@piotrpog
piotrpog / attributes_table.twig
Created Jun 25, 2020
Attributes table automatically generated from fields grouped within matrix field. More info: http://craftsnippets.com/articles/creating-attributes-table-from-entry-fields-in-craft-cms
View attributes_table.twig
{% apply spaceless %}
{# lightswitch field values #}
{% if lighswitchOn is not defined %}
{% set lighswitchOn = 'yes' %}
{% endif %}
{% if lighswitchOff is not defined %}
{% set lighswitchOff = 'no' %}
{% endif %}
@piotrpog
piotrpog / svg_map.twig
Last active Aug 5, 2020
SVG map-based navigation for Craft CMS. More info: http://localhost/_pog/craft-snippets-craft/web/articles/creating-map-based-navigation-in-craft-cms
View svg_map.twig
{# settings #}
{% set map = include('usa.svg') %}
{% set mapLinks = entry.mapLinks.all() %}
{# logic #}
{% set map = map|retconRemove('style') %}
{% set regionsUsed = [] %}
{% for link in mapLinks %}
{% if link.linkRegion is not empty and link.linkEntry.exists() and link.linkRegion not in regionsUsed %}
{% set regionsUsed = regionsUsed|merge([link.linkRegion]) %}
View placeholder_service.twig
{%- macro transformOrPlaceholder(image, settings, attributes = {}) -%}
{% if image is not null %}
{% set src = image.getUrl(settings) %}
{% set attributes = attributes|merge({src: src}) %}
{{tag('img', attributes)}}
{% elseif settings.width is defined or settings.height is defined %}
{% set width = settings.width ?? settings.height %}
{% set height = settings.height ?? settings.width %}
{% set src = 'https://placehold.co/'~width~'x'~height %}
{% set attributes = attributes|merge({src: src}) %}