Skip to content

Instantly share code, notes, and snippets.

@piotrpog
piotrpog / product.twig
Last active Jun 15, 2022
Commerce product page with sprig. Old version, doesnt work with Craft 4.
View product.twig
{% extends 'shop/_layouts/main' %}
{% block main %}
{{ sprig('product_content', {productId: product.id}) }}
{{ sprig.script }}
{% endblock %}
@piotrpog
piotrpog / pretty_url_macro.twig
Created Aug 28, 2020
Pretty URL Twig Macro
View pretty_url_macro.twig
{% macro prettyUrl(url) %}
{{url
|trim('https://', 'left')
|trim('http://', 'left')
|trim('www.', 'left')
|trim('/', 'right')
}}
{% endmacro %}
View language_switcher.twig
{# v2 #}
{# http://craftsnippets.com/articles/universal-language-switcher-for-craft-cms #}
{# logic #}
{% set currentElement = craft.app.urlManager.matchedElement %}
{% set sites = craft.app.getSites().getGroupById(currentSite.groupId).getSites() %}
{% set switcherLinks = [] %}
{% for site in sites if site.baseUrl is not empty %}
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 / yt_address.twig
Last active Jul 6, 2021
Twig macro turning youtube video URL into responsive and lazy-loaded player. More info: http://craftsnippets.com/articles/responsive-and-lazy-loaded-youtube-videos-with-craft-cms
View yt_address.twig
{# v2 #}
{%- macro ytAddress(url, lazy = true) -%}
{% if url is not empty %}
{% set id = url|split('v=')|last %}
{% set id = id|split('&')|first %}
{% set id = id|split('/')|last %}
<div class="youtube-player">
<figure style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin: 0px;">
<iframe src="https://www.youtube.com/embed/{{id}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"{{ lazy ? ' loading="lazy"'}}></iframe>
View dynamic_pagination.twig
{# v2 #}
{% if pagination_list is defined %}
{% js %}
// AJAX REQUEST DATA
{% set current_url = craft.request.getRequestUri()|split(craft.request.getPath())[0]~craft.request.getPath() %}
{% set ajax_data = {
current_url: current_url,
pagination_list: pagination_list|hash,
pagination_parameters: pagination_parameters ?? null,
View svg_macro.twig
{%- macro svg(path, attributes = null, alt = null) -%}
{# v1 #}
{# settings #}
{% set directory = 'svg' %}
{# logic #}
{% if path is defined and path is not empty %}
{% set svg = svg('@webroot/'~directory~'/'~path~'.svg', namespace=true) %}
{% if alt %}
{% set svg = svg|prepend('<title>'~alt~'</title>') %}
{% endif %}
View Alpine JS modal component
{# v6 #}
{# USAGE:
{% embed '_components/modal' with {
modalHandle: 'exampleHandle'
} %}
{% block modalContent %}
SOMETHING INSIDE
{% endblock %}
{% endembed %}
#}
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;
@piotrpog
piotrpog / breadcrumb_seomatic.twig
Last active Aug 15, 2020
Breadcrumb template component for Craft CMS based on Seomatic plugin. More info on http://craftsnippets.com/articles/breadcrumb-created-from-url-for-craft-cms
View breadcrumb_seomatic.twig
{% v2 %}
% set breadcrumbLinks = seomatic.jsonLd.get('breadcrumbList').itemListElement %}
{% if breadcrumbLinks|length > 1 %}
<nav class="breadcrumb" aria-label="{{'breadcrumbs'|t}}">
<ul>
{% for link in breadcrumbLinks %}
<li class="{{loop.last ? 'is-active'}}" {{loop.last ? 'aria-current="page"'}}>
<a href="{{ link.item['@id'] }}">
<span itemprop="name">{{ link.item['name'] }}</span>