Ihor Duchenko ihorduchenko

💭

Working

Front-end / Shopify / Wordpress developer

ihorduchenko / square-circle-substracts.html

Created October 5, 2023 10:08

A square cut by a sector of a circle (outer and inner parts)

	<!-- Outer part or a circle -->
	<svg width="100" height="100" viewBox="0 0 215 215" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M214.5 214.5H0V0C0 118.465 96.0349 214.5 214.5 214.5Z" fill="black"/>
	</svg>

	<!-- Inner part of a circle (sector) -->
	<svg height="100" width="100" viewBox="0 0 512 512" fill="#000" xmlns="http://www.w3.org/2000/svg">
	<path d="M0,0v512h512C512,229.2,282.8,0,0,0z"/>
	</svg>

ihorduchenko / template-redirect-ablyft.js

Created August 18, 2023 19:49

Set URL parameter for template redirect on ABLyft

	var url = new URL(window.location.href);
	url.searchParams.set('view', 'upsell-bundle');
	ablyftTools.redirect(url.toString());

ihorduchenko / shopify-checkout.liquid

Created August 9, 2023 19:06

Manipulate with checkout discount area using Shopify Checkout library + js modules assets

	{%- comment -%}
	https://www.npmjs.com/package/@adearriba/shopify-checkout?activeTab=code
	{%- endcomment -%}
	<script type="module" src="{{ 'shopify-checkout.js' \| asset_url }}"></script>

	<script>
	import { $checkout } from './shopify-checkout.js';
	$checkout.on('load', (e) => {
	console.log(e);
	let discountNumberLineEl = document.querySelector('[data-checkout-discount-amount-target]');

ihorduchenko / 2-fetch-calls.js

Created August 8, 2023 23:01

Handle 2 fetch API calls one by one

	var post;

	// Call the API
	fetch('https://jsonplaceholder.typicode.com/posts/5').then(function (response) {
	if (response.ok) {
	return response.json();
	} else {
	return Promise.reject(response);
	}
	}).then(function (data) {

ihorduchenko / close-dropdown-on-click-outside.html

Created August 4, 2023 20:00

Close dropdown on clicking outside

ihorduchenko / thank-you-page-detector.liquid

Created July 18, 2023 13:09

Detect order status page (Thank you page) in Shopify checkout

	{%- assign is_thank_you_page = false -%}
	{%- if checkout_html_classes contains 'page--thank-you' -%}
	{%- assign is_thank_you_page = true -%}
	{%- endif -%}

ihorduchenko / ablyft-helper-classes.js

Created July 13, 2023 08:18

Add helper classes by ABlyft to detect whether script has been loaded

	ablyftTools.domLoaded(function(){
	document.documentElement.classList.add('ablyft-loaded');
	document.documentElement.classList.remove('no-ablyft');
	});

ihorduchenko / prevent-double-event-listener.js

Last active July 6, 2023 15:57

Prevent 'change' event from being triggered twice (especially on radio buttons)

	el.addEventListener('change', (e) => {
	e.stopImmediatePropagation();
	});

ihorduchenko / metafields-filters.liquid

Last active June 13, 2024 06:05

Useful Shopify metafields filters

	{% comment %} Richtext output {% endcomment %}
	{{ richtext \| metafield_tag }}

	{% comment %} File output {% endcomment %}
	<video>
	<source
	src="{{ video \| file_url }}"
	type="video/mp4">
	</video>

ihorduchenko / section-sample.liquid

Created June 1, 2023 21:02

How to limit section using for specific on specific templates only

	<fieldset class="filtersDropdown">
	<div class="filtersDropdownTrigger">
	Dropdown trigger
	<div class="caret pointer-events-none">
	<svg class="pointer-events-none"><use xlink:href="#icon-angle-down"></use></svg>
	</div>
	</div>
	<div class="dropdown-body"></div>
	</fieldset>