Skip to content

Instantly share code, notes, and snippets.

View ronipl's full-sized avatar
🏠
Working from home

roni ronipl

🏠
Working from home
View GitHub Profile
@ronipl
ronipl / collection-filter-sort.js
Created August 11, 2020 16:31
Cusom collection filter - shopify
//Collection page
// Start of filter
var grid_view_items = $('.grid--view-items');
var grid_product = $(grid_view_items).find('.grid__item');
var $filterCheckboxes = $('input[type="radio"].collection-filter');
$filterCheckboxes.on('change', function() {
var selectedFilters = {};
@ronipl
ronipl / variant-collection.liquid
Last active August 11, 2020 16:28
Adding variant selection in collection page - shopify
//Product grid
<div id="product-colors-{{product.id}}" class="product-colors">
{% capture variant_data %}
{% for variant in product.variants %}
{{ variant.option1 | escape | handleize | remove: "-amp"}}|{{variant.id}}
{% if forloop.last == false %}::{% endif%}
{% endfor %}
{% endcapture %}
@ronipl
ronipl / product-search-gql.js
Last active July 14, 2020 04:26
Product search using graphql
<script>
(function($){
$(document).ready(function(){
var apiUrl = "https://yourshop.myshopify.com/api/graphql";
var token = "tokenhere";
customProductSearch(
apiUrl,
token,
@ronipl
ronipl / gulpfile.js
Last active June 2, 2020 14:46
gulp automation for shopify projects.
var gulp = require('gulp');
var sass = require('gulp-sass');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
function minifiedImages(){
return gulp.src('./images/*')
@ronipl
ronipl / collection-slider.liquid
Created December 11, 2019 08:24
Collection slider using slick js
{%- assign collection = collections[section.settings.collection] -%}
<div class="wrapper collection-slider collection-slider-{{ section.id }}" data-section-id="{{ section.id }}">
{% if section.settings.primary_header != blank or section.settings.secondary_header %}
<h2><span class="font-300">{{section.settings.primary_header}}</span> {{section.settings.secondary_header}}</h2>
{% endif %}
<div class="grid-uniform collection-slider-container">
{% for product in collection.products %}
@ronipl
ronipl / insertAfterBeforeHelper.js
Created November 20, 2019 03:36
Insert after/before
function insertAfter(el, referenceNode) {
referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}
// example
var newEl = document.createElement('div');
newEl.innerHTML = '<p>Hello World!</p>';
var ref = document.querySelector('div.before');
https://w3bits.com/flexbox-masonry/
https://w3bits.com/labs/flexbox-masonry/
@ronipl
ronipl / carticon.txt
Last active August 29, 2019 06:02
woo commerce cart icon
//header.php
(function($){
$(document).ready(function(){
var cart_count = $('.cart-customlocation').text();
var cart_element = `<span>${cart_count}</span>`;
var cart_menu = $("#menu-user-menu").children('li:first-child').find('a');
$(cart_menu).find('span').remove();
$(cart_menu).append(cart_element);
});
})(jQuery);
@ronipl
ronipl / duplicate.js
Created August 24, 2019 09:04
Object which maps any previously seen text to true
var seen = {};
$('a').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
@ronipl
ronipl / functions.php
Created August 2, 2019 14:34
Woocommerce custom date picker field on checkout page
<?php
/**
* Add the custom field on checkout page
*/
add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address' , 10, 1 );
function display_extra_fields_after_billing_address () {
_e( "Delivery Date: ", "add_extra_fields");
?>