Skip to content

Instantly share code, notes, and snippets.

View marioloncarek's full-sized avatar

Mario Loncarek marioloncarek

View GitHub Profile
@marioloncarek
marioloncarek / display-collections-and-products.liquid
Created September 5, 2018 09:11
Display shopfiy collections selected from custom fields with their products
{% for collection in collections %}
{% if collection.metafields.custom_fields["display_on_collection_page"] == "men" %}
<div>
<h1>{{ collection.title }}</h1>
{% for product in collection.products %}
<div>
@marioloncarek
marioloncarek / single-product.liquid
Created September 11, 2018 09:52
shopify color and size variants
<!--product form-->
<form action="/cart/add" method="post" enctype="multipart/form-data">
<!--product variants-->
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="single-product__option-wrapper js">
@marioloncarek
marioloncarek / product-options-not-good.scss
Created September 11, 2018 12:58
shopify product options in radio buttons css
.product-option {
&__color {
display: flex;
.product-option__radio {
position: absolute;
opacity: 0;
z-index: -1;
border: none;
@marioloncarek
marioloncarek / ajax-cart.liquid
Created September 25, 2018 17:52
ajax cart shopify
<!--ajax cart modal-->
<div class="ajax-cart__modal js-ajax-cart-modal">
<div class="ajax-cart-modal">
<!--ajax cart modal close-->
<div class="ajax-cart-modal__close js-ajax-cart-modal-close">
{% include 'icon-close' %}
</div>
<!--end ajax cart modal close-->
@marioloncarek
marioloncarek / ajax-cart-reno.liquid
Created September 26, 2018 11:01
ajax cart reno
const defaults = {
cartModal: '.js-ajax-cart-modal', // classname
cartModalContent: '.js-ajax-cart-modal-content', // classname
cartModalClose: '.js-ajax-cart-modal-close', // classname
cartDrawer: '.js-ajax-cart-drawer', // classname
cartDrawerContent: '.js-ajax-cart-drawer-content', // classname
cartDrawerClose: '.js-ajax-cart-drawer-close', // classname
cartDrawerTrigger: '.js-ajax-cart-drawer-trigger', // classname
cartOverlay: '.js-ajax-cart-overlay', // classname
cartCounter: '.js-ajax-cart-counter', // classname
const defaults = {
cartModal: '.js-ajax-cart-modal', // classname
cartModalContent: '.js-ajax-cart-modal-content', // classname
cartModalClose: '.js-ajax-cart-modal-close', // classname
cartDrawer: '.js-ajax-cart-drawer', // classname
cartDrawerContent: '.js-ajax-cart-drawer-content', // classname
cartDrawerClose: '.js-ajax-cart-drawer-close', // classname
cartDrawerTrigger: '.js-ajax-cart-drawer-trigger', // classname
cartOverlay: '.js-ajax-cart-overlay', // classname
cartCounter: '.js-ajax-cart-counter', // classname
import {formatMoney} from '@shopify/theme-currency/currency';
import {Power3, TweenMax} from 'gsap/TweenMax';
import $ from 'jquery';
const defaults = {
cartModal: '.js-ajax-cart-modal', // classname
cartModalClose: '.js-ajax-cart-modal-close', // classname
cartDrawer: '.js-ajax-cart-drawer', // classname
cartDrawerContent: '.js-ajax-cart-drawer-content', // classname
cartDrawerClose: '.js-ajax-cart-drawer-close', // classname
import {formatMoney} from '@shopify/theme-currency/currency';
import {Power3, TweenMax} from 'gsap/TweenMax';
import $ from 'jquery';
const defaults = {
cartModal: '.js-ajax-cart-modal', // classname
cartModalClose: '.js-ajax-cart-modal-close', // classname
cartDrawer: '.js-ajax-cart-drawer', // classname
cartDrawerContent: '.js-ajax-cart-drawer-content', // classname
cartDrawerClose: '.js-ajax-cart-drawer-close', // classname
addBundleToCart.addEventListener('click', (event) => {
event.preventDefault();
const productId = document.querySelectorAll('.js-ajax-bundle-form');
const concatedProductIds = [];
let concatedProductIdsString = '';
import {formatMoney} from '@shopify/theme-currency/currency';
import {Power3, TweenMax} from 'gsap/TweenMax';
import $ from 'jquery';
const defaults = {
cartModal: '.js-ajax-cart-modal', // classname
cartModalClose: '.js-ajax-cart-modal-close', // classname
cartDrawer: '.js-ajax-cart-drawer', // classname
cartDrawerContent: '.js-ajax-cart-drawer-content', // classname
cartDrawerClose: '.js-ajax-cart-drawer-close', // classname