Lazy load images and shopify script enhancements

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

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] <output directory>')
+  .option("-c , --category-conversion [JSON]", "Custom map categories", parseCategoryMap)
   .action(importProducts)
   .parse(process.argv); 
 
-if (program.args.length === 0) program.help();
+if (program.args.length === 0) program.help();

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",

importer/shopify/package.json

@@ -10,6 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "commander": "^2.15.1",
+    "lodash": "^4.17.10",
     "request": "^2.87.0"
   }
 }

layouts/partials/products/list/product-list-item.html

@@ -1,5 +1,5 @@
 <a class="col-6 col-lg-3" href="{{ .RelPermalink }}" style="color: inherit;">
-    <img class="img-fluid text-center" src="{{ .Params.thumbnailImage }}" />
+    <img class="b-lazy img-fluid text-center" data-src="{{ .Params.thumbnailImage }}" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
     <p class="text-left">
         <span style="font-size: 13px">{{ .Params.title }}</span>
         <br/>

layouts/partials/scripts.html

@@ -1,3 +1,4 @@
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
+<script src="{{ "js/jquery.min.js" | absURL }}"></script>
+<script src="{{ "js/lodash.min.js" | absURL }}"></script>
+<script src="{{ "js/blazy.min.js" | absURL }}"></script>
 <script src="{{ "js/main.js" | absURL }}"></script>

layouts/products/single.html

@@ -15,7 +15,7 @@
         </div>
         <div class="col-12 col-md-6 order-md-1">
             {{ range .Params.images }}
-            <img class="img-fluid text-center" src="{{ . }}" /> 
+            <img class="b-lazy img-fluid text-center" data-src="{{ . }}" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /> 
             {{ end }}
         </div>
         <div class="col-12 col-md-6 order-md-2 d-block d-md-none">

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();