Skip to content

Instantly share code, notes, and snippets.

View ihorduchenko's full-sized avatar
💭
Working

Ihor Duchenko ihorduchenko

💭
Working
View GitHub Profile
@ihorduchenko
ihorduchenko / newline_to_br_split.liquid
Last active May 6, 2023 12:54
Split text field to multiple lines using 'newline_to_br' and 'split' filters
{%- assign text_rows = text | newline_to_br | split: '<br />' -%}
{%- for row in text_rows -%}
{{ row }}
{%- endfor -%}
@ihorduchenko
ihorduchenko / reviews.io-star-rating-snippet.liquid
Created September 8, 2022 10:30
Reviews.io star rating snippet for Shopify
<div class="ruk_rating_snippet" data-sku="{{ product.handle }};{{ product.variants | map: 'sku' | join: ';' }};{{ product.variants | map: 'id' | join: ';' }}"></div>
@ihorduchenko
ihorduchenko / disable-discount-codes-for-sale-items.rb
Created August 8, 2022 23:16
Disable discount codes for the specified list of variant IDs of items
# ================================ Customizable Settings ================================
# ================================================================
# Disable Discount Code(s) For Products
#
# If any matching discount codes are used, and any matching items
# are in the cart, the discount code is rejected with the entered
# message.
#
# - 'discount_code_match_type' determines whether the below
# strings should be an exact or partial match. Can be:
@ihorduchenko
ihorduchenko / autoplay-lazy-videos-intersection-observer.liquid
Created July 26, 2022 01:02
Toggle video play on screen intersection + on click
<div class="absolute-cover video-cover controlled-video autoplayLazyVideo">
<video
{% if img != blank %}
poster="{{ img.src }}"
{% endif %}
playsinline
loop
muted>
<source
src="{{ video.src }}"
@ihorduchenko
ihorduchenko / equal-grid-columns.css
Last active May 17, 2022 19:45
Equal width grid columns
.some-wrapper {
--column-number: 3;
display: grid;
gap: 24px 32px; /* vertical / horizontal*/
grid-template-columns: repeat(var(--column-number), minmax(0, 1fr));
}
@ihorduchenko
ihorduchenko / fixed-header-overlap-anchors-fix.css
Created April 6, 2022 21:56
Fixed page header overlaps in-page anchors - SOLUTION
html {
scroll-padding-top: 80px;
}
@ihorduchenko
ihorduchenko / async-scripts-loading.js
Created March 24, 2022 13:14
Load scripts asynchronously and run callback functions (Swiper example)
const loadScript = (FILE_URL, async = true, type = 'text/javascript') => {
return new Promise((resolve, reject) => {
try {
const scriptEle = document.createElement('script');
scriptEle.type = type;
scriptEle.async = async;
scriptEle.src = FILE_URL;
scriptEle.addEventListener('load', (ev) => {
resolve({
@ihorduchenko
ihorduchenko / accordion.html
Created March 24, 2022 12:33
CSS + JS accordions using max-height transition
<div class="acordian">
<div class="acordian-trigger">
Accordion trigger
</div>
<div class="acordian-content">
Accordion content inner
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis reiciendis placeat velit sit adipisci beatae laudantium sapiente provident recusandae corporis.
</div>
</div>
@ihorduchenko
ihorduchenko / geolocation-google-detection.html
Created March 17, 2022 15:52
Detect user's location using Geolocation API and Google Maps Javascript API
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuyuXzFTTgV7BestKhgKrrZjV_-rMmUQY&callback=geoFindMe&v=weekly&channel=2"
async
></script>
<script>
function reverseGeocodingWithGoogle(latitude, longitude) {
const latlng = {
lat: parseFloat(latitude),
lng: parseFloat(longitude),
};
@ihorduchenko
ihorduchenko / geolocation-location-iq-detection.js
Last active March 17, 2022 15:51
Detect user's location using Geolocation API and LocationIQ API
const langText = document.querySelectorAll('.langText');
const gbText = document.querySelectorAll('.gbText');
const euText = document.querySelectorAll('.euText');
function handleLocation() {
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};