Skip to content

Instantly share code, notes, and snippets.

Avatar
🛍️
Focusing on Shopify Development

Balo UbaldoRosas

🛍️
Focusing on Shopify Development
View GitHub Profile
@UbaldoRosas
UbaldoRosas / boost-pfs-instant-search.js
Created Nov 9, 2021
Add conditionals for Products, Collections or Pages at search suggestions
View boost-pfs-instant-search.js
var instantSearchTemplate = InstantSearchResultBlock.prototype.getTemplate;
InstantSearchResultBlock.prototype.getTemplate = function(tempType) {
if (['products', 'collections'].indexOf(tempType) === -1) return instantSearchTemplate.call(this, tempType);
return '<li class="{{class.searchSuggestionGroup}} ' + tempType + '" data-group="{{type}}" aria-label="{{label}}">' +
'<ul class="default">' +
'<li class="{{class.searchSuggestionHeader}}-{{type}} {{class.searchSuggestionHeader}}" aria-label="{{label}}">{{label}}</li>' +
'{{resultItems}}' +
'</ul>' +
@UbaldoRosas
UbaldoRosas / my-snippets.json
Created Sep 12, 2021
My VSCode snippets for CSS and Liquid
View my-snippets.json
{
"Responsive Font Post CSS": {
"scope": "css, scss, postcss",
"prefix" : ["responsive-font"],
"body": ["font-size: responsive ${1:min}px ${2:max}px;\nfont-range: 320px 1024px;"],
"description": "Responsive font Post CSS"
},
"Media Query Max Width": {
"scope": "css, scss, postcss",
"prefix" : ["media-max-width"],
@UbaldoRosas
UbaldoRosas / order-confirmation-line-items.liquid
Last active May 4, 2021
Shopify - Order Confirmation: add line items
View order-confirmation-line-items.liquid
{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}<br>{% endfor %}
@UbaldoRosas
UbaldoRosas / webpack.config.js
Created Mar 22, 2021
Getmore Workflow: single entry configuration for CSS & JS
View webpack.config.js
module.exports = {
mode: 'development',
entry: {
js: path.resolve('zrc/main.js'),
"css-base": path.resolve('zrc/styles/_bundles/base.css'),
},
stats: 'minimal',
watchOptions: {
ignored: /node_modules/,
},
@UbaldoRosas
UbaldoRosas / description-splitter.js
Last active Mar 11, 2021
Shopify product description splitter
View description-splitter.js
// Contenedor en el cual buscar
var parent = $('#data-sections');
var titles = parent.find('h1');
function cleanString(str) {
// Función para reemplazar los caracteres especiales, acentos, espacios
var str = str
.toLowerCase()
.replace('á', 'a')
.replace('é', 'e')
@UbaldoRosas
UbaldoRosas / shopify-pagination-links.liquid
Last active Oct 22, 2020
Shopify pagination links with pages range. Currently shows 3 pages more and 3 pages less
View shopify-pagination-links.liquid
@UbaldoRosas
UbaldoRosas / klaviyo-newsletter.css
Last active Jun 23, 2020
Klaviyo newsletter & pop-up fix
View klaviyo-newsletter.css
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 6 version
*/
.klaviyo-newsletter {
max-width: 205px;
}
View shopify-order-notification-es.liquid
{% capture email_title %}Gracias por tu compra! {% endcapture %}
{% capture email_body %}
{% if requires_shipping %}
Hola {{ customer.first_name }}, vamos a preparar tu pedido de acuerdo a tus especificaciones. Deberás recibir tus anteojos en un lapso no mayor a 10 días hábiles. Por este medio, te notificaremos el servicio de paquetería que utilizaremos y el número de rastreo..
{% endif %}
{% endcapture %}
<!DOCTYPE html>
<html lang="en">
<head>
@UbaldoRosas
UbaldoRosas / JS get today date.js
Last active Feb 20, 2020
JS Script to get today date
View JS get today date.js
function today() {
var todaysDate = new Date(); // Gets today's date
var year = todaysDate.getFullYear(); // YYYY
var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2); // MM
var day = ("0" + todaysDate.getDate()).slice(-2); // DD
var today = (year +"-"+ month +"-"+ day); // Results in "YYYY-MM-DD" for today's date
return today;
View random-number-animator.js
(function($){
$.fn.extend({
numAnim: function(options) {
if ( ! this.length)
return false;
this.defaults = {
endAt: 2560,
numClass: 'autogen-num',
duration: 5, // seconds