salexzee

.top-bar__search {
  position: relative;
}

.predictive-search {
  background-color: #ffffff;
  border: 1px solid #ababab;
  border-radius: 2px;
  left: 0;
  opacity: 0;

salexzee

import PredictiveSearch from "@shopify/theme-predictive-search";

const elements = {};

const clearParent = (parent) => {
  while (parent.firstChild) {
    parent.removeChild(parent.lastChild);
  }
};

sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

atikju

<div class='relatedArticles'>
  {% for tag in article.tags %}

  {% assign counter = 0 %}
  {% assign skip_articles = article.handle | split: '.....' %}
  {% for related_article in blog.articles %}
    {% if related_article.tags contains tag and counter < 6 %}
      {% unless skip_articles contains related_article.handle %}
        {% assign counter = counter | plus: 1 %}
        {% assign temp = related_article.handle | split: '.....' %}

mpdevcl

WooCommerce JS Events

Source

Checkout

$( document.body ).trigger( 'init_checkout' );
$( document.body ).trigger( 'payment_method_selected' );
$( document.body ).trigger( 'update_checkout' );
$( document.body ).trigger( 'updated_checkout' );
$( document.body ).trigger( 'checkout_error' );

bagerathan

//Woocommerce Checkout JS events
$( document.body ).trigger( 'init_checkout' );
$( document.body ).trigger( 'payment_method_selected' );
$( document.body ).trigger( 'update_checkout' );
$( document.body ).trigger( 'updated_checkout' );
$( document.body ).trigger( 'checkout_error' );

//Woocommerce cart page JS events
$( document.body ).trigger( 'wc_cart_emptied' );
$( document.body ).trigger( 'update_checkout' );

Robert-96

Get URL Parameters with JavaScript

URL Parameters (Query Parameters) are a set o key value pars attached to the end of a url. They are used to send small amounts of data from page to page, or from client to server via a URL.

TL;DR

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

marcelo-ribeiro

How to detect a click outside of an element with vanilla JavaScript

A simple way to detect a click outside of an element with vanilla JavaScript

A Pen by Marcelo Ribeiro on CodePen.

License.

RDoney

<!-- Free shipping progress markup -->
<div class="cart-shipping__wrapper">
  <p class="cart-shipping__numOuter">You're $<span class="cart-shipping__num"></span> away from free shipping!</p>
  <p class="cart-shipping__success">You're eligible for Free Shipping!</p>
  <div class="cart-shippingThreshold__bar">
    <span class="cart-shippingThreshold__progress"></span>
  </div>
</div>

<style>

callaginn

// Before implementing this, you'll need to contact Shopify support and ask them to turn off Google's ReCaptcha
// for your Shopify store's contact forms. Otherwise, it will redirect to the captcha's verification page.

// Retrieves input data from a form and returns it as a JSON object:
function formToJSON(elements) {
	return [].reduce.call(elements, function (data, element) {
		data[element.name] = element.value;
		return data;
	}, {});
}