Jon jongacnik

Shopify Homepage Redirect

Use the "Custom Content" section in a debut theme to add a code block with the contents of shopify-redirect.js. This will allow you to create a user-editable redirect. The code is wrapped in an iFrame check so the redirect is not triggered while in the editor. Editors can toggle the redirect on/off by showing/hiding that section.

	import { useState } from "react";
	import Image from "next/image";

	export default function FadeInImage({ ...props }) {
	const [isLoaded, setIsLoaded] = useState(false);
	const { className, src, alt, priority, layout, objectFit, width, height } =
	props;

	function onLoadingComplete() {
	setIsLoaded(true);

	<?php

	/**
	* Built-in PHP server router:
	*
	* - If file exists, serve file
	* - Access php files without .php extension
	* - Unknown routes throw 404
	* - Optionally fallback to index.php
	*

	import querystate from 'querystate'
	import nanobus from 'nanobus'

	const state = querystate()
	const bus = nanobus()

	// emit state on history change
	;(function(history){
	var pushState = history.pushState
	var popState = history.popState

	import { define } from 'wicked-elements'
	import onIntersect from '../lib/on-intersect.js'

	define('[data-component~="ultralazy"]', {
	init () {
	this.state = {}
	this.onEnter = this.onEnter.bind(this)
	this.onLoad = this.onLoad.bind(this)
	},
	connected () {

	import { define } from 'wicked-elements'

	define('[data-component~="overscroll-none"]', {
	init () {

	},
	connected () {
	if (!CSS.supports('overscroll-behavior', 'none')) {
	this.wheelingTimeout = false
	this.lock = this.lock.bind(this)

	const $ = (selector, parent = document) => parent.querySelector(selector)
	const $$ = (selector, parent = document) => [...parent.querySelectorAll(selector)]
	const createNode = html => {
	return new DOMParser().parseFromString(html, 'text/html').body.firstChild
	}

	import { define } from 'wicked-elements'

	/**
	* Toggles open class on target element on toggle click
	*/

	define('[data-component~="toggle"]', {
	init () {
	this.target = this.element.getAttribute('data-target')
	this.toggle = this.toggle.bind(this)

	import GenericSlideshow from './generic-slideshow'
	const ov = object => Object.keys(object).map(i => object[i])

	class CrossfadeSlideshow {
	constructor($el, options) {
	this.$el = $el
	this.$counter = document.querySelector('[data-subcomponent="slider-counter"][data-exports="' + options.exports + '"]')
	this.$title = document.querySelector('[data-subcomponent="slider-title"][data-exports="' + options.exports + '"]')

	// init slideshow if multiple slides

	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: center bottom 2px;
	background-origin: padding-box;