Skip to content

Instantly share code, notes, and snippets.

View marioloncarek's full-sized avatar

Mario Loncarek marioloncarek

View GitHub Profile
@tpage99
tpage99 / cart_api.js
Last active August 8, 2023 07:13
Cart API Frequently Used - Vanilla JS
// Always compare to the docs first: https://shopify.dev/docs/api/ajax/reference/cart
// Get the Cart
fetch("/cart.js")
.then((response) => response.json())
.then((data) => console.log(data));
// Add to Cart
let addToCartItem = {
items: [
{%- comment -%}
###############################################################################
Display Videos From Youtube Channel in Your Shopify Store
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
###############################################################################
# Paypal Me: https://paypal.me/elghorfimed #
# Buy Me A Coffee: #
# https://www.buymeacoffee.com/elghorfi #
###############################################################################
Elghorfi.med@gmail.com
const wishlistApi = async ({req, res, shopifyAccessToken, shopifyDomain, allowedOrigins, metafieldNamespace, metafieldKey}) => {
const shopifyAdminConfig = {
Accept: 'application/json',
'Content-Type': 'application/json',
'X-Shopify-Access-Token': shopifyAccessToken,
};
const apiVersion = '2022-07'
const preparePayload = (query, variables) => ({
query,
@pveen2
pveen2 / component.image.liquid
Created September 16, 2022 06:14
Shopify image component
{%- comment -%}
Expected behaviour:
Renders picture element
About:
Render a responsive image
Accepts:
- img: {Object} image
{%comment%}
##################################################
# How To add Coupon Code — Discount Field #
# On Shopify Cart Before Checkout #
# Without Apps #
#################################################
# Paypal Me: https://paypal.me/elghorfimed #
# Buy Me A Coffee: #
# https://www.buymeacoffee.com/elghorfi #
############################################# #
@shafiimam
shafiimam / index.liquid
Last active August 27, 2023 05:04
Shopify selling plan product add to cart
<div class="productGrid__formItem">
{%- liquid
assign current_variant = product.selected_or_first_available_variant | default: product.variants.first
assign current_selling_plan_allocation = current_variant.selected_selling_plan_allocation
if current_selling_plan_allocation == nil and current_variant.requires_selling_plan
assign current_selling_plan_allocation = current_variant.selling_plan_allocations | first
endif
assign offer = current_selling_plan_allocation | default: current_variant
@liamgriffin
liamgriffin / selling-plan.liquid
Created December 16, 2021 12:16
How to Test your Theme Before Submitting to the Shopify Theme Store | Selling Plan
{% if product.selling_plan_groups.size > 0 %}
<div>
<label for="plans">Purchase options:</label>
<select name="selling_plan" id="plans">
<option value="">One time purchase</option>
{% for variant in product.variants %}
<optgroup label="{{ variant.title }}">
{% for allocation in variant.selling_plan_allocations %}
<option value="{{ allocation.selling_plan.id }}">
{{ allocation.selling_plan.name }}
@salexzee
salexzee / predictive-search.scss
Created June 6, 2021 23:09
SCSS from my predictive search YouTube tutorial video.
.top-bar__search {
position: relative;
}
.predictive-search {
background-color: #ffffff;
border: 1px solid #ababab;
border-radius: 2px;
left: 0;
opacity: 0;
@salexzee
salexzee / predictive-search.js
Created June 6, 2021 23:05
JavaScript from my predictive search YouTube tutorial video.
import PredictiveSearch from "@shopify/theme-predictive-search";
const elements = {};
const clearParent = (parent) => {
while (parent.firstChild) {
parent.removeChild(parent.lastChild);
}
};
@sindresorhus
sindresorhus / esm-package.md
Last active May 4, 2024 09:23
Pure ESM package

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.