From f680af819f79f702ad26aa56475308e431dca4b7 Mon Sep 17 00:00:00 2001 From: Kishan B Date: Mon, 28 May 2018 10:44:26 +0530 Subject: [PATCH] Lazy load images and shopify script enhancements --- README.md | 5 +-- importer/shopify/index.js | 32 +++++++++++++------ importer/shopify/package-lock.json | 5 +++ importer/shopify/package.json | 1 + .../products/list/product-list-item.html | 2 +- layouts/partials/scripts.html | 5 +-- layouts/products/single.html | 2 +- static/js/main.js | 7 ++++ 8 files changed, 44 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 0afa46a..205faac 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,9 @@ Shopping product catalogue theme gives you a categorized display of all your pro - [x] Support for product variants - [x] Specify price variations - [x] Specify stock availability -- [ ] Importers - - [ ] Import data from shopify +- [x] Importers + - [x] Import data from shopify +- [x] Lazy loading images - [ ] Social sharing icons ## Installation diff --git a/importer/shopify/index.js b/importer/shopify/index.js index 3ebfd66..7977035 100644 --- a/importer/shopify/index.js +++ b/importer/shopify/index.js @@ -3,7 +3,8 @@ const program = require('commander'), pkg = require('./package.json'), readline = require('readline'), request = require("request"), - fs = require('fs'); + fs = require('fs'), + _ = require('lodash'); function extractDataFromSite(siteUrl, outputDir){ Promise.resolve(1).then(function fetchPage(pageNo) { @@ -25,7 +26,11 @@ function getFrontMatter(product) { frontMatter.title = product.title; frontMatter.date = new Date().toISOString() frontMatter.tags = product.tags; - frontMatter.categories = product.product_type; + if(program.categoryConversion && program.categoryConversion[product.product_type.toLowerCase()]) { + frontMatter.categories = [program.categoryConversion[product.product_type.toLowerCase()]]; + } else { + frontMatter.categories = [product.product_type]; + } frontMatter.images = product.images.map(image => image.src); frontMatter.thumbnailImage = product.images[0].src; if(product.options[0].name == "Title"){ @@ -68,11 +73,13 @@ function writeProductsAsMarkdown(products, outputDir){ products.forEach(product => { let outputFileName = product.title.replace(/\W/g, '-').replace(/-+/g, "-").toLowerCase(); let outputFile = outputDir + "/" + outputFileName + ".md"; - fs.writeFile(outputFile, getFileContent(product), function(err) { - if(err) { - reject(err); - } - }); + if(product.images && product.images.length > 0) { + fs.writeFile(outputFile, getFileContent(product), function(err) { + if(err) { + reject(err); + } + }); + } }); }); } @@ -107,11 +114,18 @@ function importProducts(outputDirectory) { }); } +function parseCategoryMap(val) { + return _.transform(JSON.parse(val), function(result, value, key) { + result[key.toLowerCase()] = value; + }, {}); +} + program .version(pkg.version) .description('Import products from shopify site') - .arguments('[output-directory]') + .usage('[options] ') + .option("-c , --category-conversion [JSON]", "Custom map categories", parseCategoryMap) .action(importProducts) .parse(process.argv); -if (program.args.length === 0) program.help(); \ No newline at end of file +if (program.args.length === 0) program.help(); diff --git a/importer/shopify/package-lock.json b/importer/shopify/package-lock.json index 3c627f2..76d3eec 100644 --- a/importer/shopify/package-lock.json +++ b/importer/shopify/package-lock.json @@ -208,6 +208,11 @@ "verror": "1.10.0" } }, + "lodash": { + "version": "4.17.10", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", + "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" + }, "mime-db": { "version": "1.33.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", diff --git a/importer/shopify/package.json b/importer/shopify/package.json index f07f799..d7a4566 100644 --- a/importer/shopify/package.json +++ b/importer/shopify/package.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "commander": "^2.15.1", + "lodash": "^4.17.10", "request": "^2.87.0" } } diff --git a/layouts/partials/products/list/product-list-item.html b/layouts/partials/products/list/product-list-item.html index fbad048..4a8e8e3 100644 --- a/layouts/partials/products/list/product-list-item.html +++ b/layouts/partials/products/list/product-list-item.html @@ -1,5 +1,5 @@ - +

{{ .Params.title }}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index fd7289a..ff19e93 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1,3 +1,4 @@ - - + + + \ No newline at end of file diff --git a/layouts/products/single.html b/layouts/products/single.html index 856c31b..80888d9 100644 --- a/layouts/products/single.html +++ b/layouts/products/single.html @@ -15,7 +15,7 @@

{{ range .Params.images }} - + {{ end }}
diff --git a/static/js/main.js b/static/js/main.js index a05f3c1..e2feeaf 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,4 +1,5 @@ $(function() { + initializeLazyLoadOfImages(); $("select").change(function() { selectPriceBasedOnVariant(); }) @@ -6,6 +7,11 @@ $(function() { selectPriceBasedOnVariant(); } }) + +function initializeLazyLoadOfImages() { + var bLazy = new Blazy(); +} + function getSelectedVariant(productVariants, selectedProductOptions) { var sortedSelectedProductOptions = _.sortBy(selectedProductOptions) return _(productVariants).filter(function(productVariant) { @@ -13,6 +19,7 @@ function getSelectedVariant(productVariants, selectedProductOptions) { return _(sortedOptionCombination).isEqual(sortedSelectedProductOptions) }).first() } + function selectPriceBasedOnVariant() { var selectedProductOptions = $.map($("select:visible"), function(n, i) { return $(n).val();