Lazy load images and shopify script enhancements
This commit is contained in:
parent
4573b34200
commit
f680af819f
|
@ -14,8 +14,9 @@ Shopping product catalogue theme gives you a categorized display of all your pro
|
||||||
- [x] Support for product variants
|
- [x] Support for product variants
|
||||||
- [x] Specify price variations
|
- [x] Specify price variations
|
||||||
- [x] Specify stock availability
|
- [x] Specify stock availability
|
||||||
- [ ] Importers
|
- [x] Importers
|
||||||
- [ ] Import data from shopify
|
- [x] Import data from shopify
|
||||||
|
- [x] Lazy loading images
|
||||||
- [ ] Social sharing icons
|
- [ ] Social sharing icons
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
|
@ -3,7 +3,8 @@ const program = require('commander'),
|
||||||
pkg = require('./package.json'),
|
pkg = require('./package.json'),
|
||||||
readline = require('readline'),
|
readline = require('readline'),
|
||||||
request = require("request"),
|
request = require("request"),
|
||||||
fs = require('fs');
|
fs = require('fs'),
|
||||||
|
_ = require('lodash');
|
||||||
|
|
||||||
function extractDataFromSite(siteUrl, outputDir){
|
function extractDataFromSite(siteUrl, outputDir){
|
||||||
Promise.resolve(1).then(function fetchPage(pageNo) {
|
Promise.resolve(1).then(function fetchPage(pageNo) {
|
||||||
|
@ -25,7 +26,11 @@ function getFrontMatter(product) {
|
||||||
frontMatter.title = product.title;
|
frontMatter.title = product.title;
|
||||||
frontMatter.date = new Date().toISOString()
|
frontMatter.date = new Date().toISOString()
|
||||||
frontMatter.tags = product.tags;
|
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.images = product.images.map(image => image.src);
|
||||||
frontMatter.thumbnailImage = product.images[0].src;
|
frontMatter.thumbnailImage = product.images[0].src;
|
||||||
if(product.options[0].name == "Title"){
|
if(product.options[0].name == "Title"){
|
||||||
|
@ -68,11 +73,13 @@ function writeProductsAsMarkdown(products, outputDir){
|
||||||
products.forEach(product => {
|
products.forEach(product => {
|
||||||
let outputFileName = product.title.replace(/\W/g, '-').replace(/-+/g, "-").toLowerCase();
|
let outputFileName = product.title.replace(/\W/g, '-').replace(/-+/g, "-").toLowerCase();
|
||||||
let outputFile = outputDir + "/" + outputFileName + ".md";
|
let outputFile = outputDir + "/" + outputFileName + ".md";
|
||||||
|
if(product.images && product.images.length > 0) {
|
||||||
fs.writeFile(outputFile, getFileContent(product), function(err) {
|
fs.writeFile(outputFile, getFileContent(product), function(err) {
|
||||||
if(err) {
|
if(err) {
|
||||||
reject(err);
|
reject(err);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -107,10 +114,17 @@ function importProducts(outputDirectory) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function parseCategoryMap(val) {
|
||||||
|
return _.transform(JSON.parse(val), function(result, value, key) {
|
||||||
|
result[key.toLowerCase()] = value;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
|
||||||
program
|
program
|
||||||
.version(pkg.version)
|
.version(pkg.version)
|
||||||
.description('Import products from shopify site')
|
.description('Import products from shopify site')
|
||||||
.arguments('[output-directory]')
|
.usage('[options] <output directory>')
|
||||||
|
.option("-c , --category-conversion [JSON]", "Custom map categories", parseCategoryMap)
|
||||||
.action(importProducts)
|
.action(importProducts)
|
||||||
.parse(process.argv);
|
.parse(process.argv);
|
||||||
|
|
||||||
|
|
|
@ -208,6 +208,11 @@
|
||||||
"verror": "1.10.0"
|
"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": {
|
"mime-db": {
|
||||||
"version": "1.33.0",
|
"version": "1.33.0",
|
||||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
|
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"commander": "^2.15.1",
|
"commander": "^2.15.1",
|
||||||
|
"lodash": "^4.17.10",
|
||||||
"request": "^2.87.0"
|
"request": "^2.87.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<a class="col-6 col-lg-3" href="{{ .RelPermalink }}" style="color: inherit;">
|
<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">
|
<p class="text-left">
|
||||||
<span style="font-size: 13px">{{ .Params.title }}</span>
|
<span style="font-size: 13px">{{ .Params.title }}</span>
|
||||||
<br/>
|
<br/>
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
<script src="{{ "js/jquery.min.js" | absURL }}"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
|
<script src="{{ "js/lodash.min.js" | absURL }}"></script>
|
||||||
|
<script src="{{ "js/blazy.min.js" | absURL }}"></script>
|
||||||
<script src="{{ "js/main.js" | absURL }}"></script>
|
<script src="{{ "js/main.js" | absURL }}"></script>
|
|
@ -15,7 +15,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6 order-md-1">
|
<div class="col-12 col-md-6 order-md-1">
|
||||||
{{ range .Params.images }}
|
{{ 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 }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6 order-md-2 d-block d-md-none">
|
<div class="col-12 col-md-6 order-md-2 d-block d-md-none">
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
$(function() {
|
$(function() {
|
||||||
|
initializeLazyLoadOfImages();
|
||||||
$("select").change(function() {
|
$("select").change(function() {
|
||||||
selectPriceBasedOnVariant();
|
selectPriceBasedOnVariant();
|
||||||
})
|
})
|
||||||
|
@ -6,6 +7,11 @@ $(function() {
|
||||||
selectPriceBasedOnVariant();
|
selectPriceBasedOnVariant();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function initializeLazyLoadOfImages() {
|
||||||
|
var bLazy = new Blazy();
|
||||||
|
}
|
||||||
|
|
||||||
function getSelectedVariant(productVariants, selectedProductOptions) {
|
function getSelectedVariant(productVariants, selectedProductOptions) {
|
||||||
var sortedSelectedProductOptions = _.sortBy(selectedProductOptions)
|
var sortedSelectedProductOptions = _.sortBy(selectedProductOptions)
|
||||||
return _(productVariants).filter(function(productVariant) {
|
return _(productVariants).filter(function(productVariant) {
|
||||||
|
@ -13,6 +19,7 @@ function getSelectedVariant(productVariants, selectedProductOptions) {
|
||||||
return _(sortedOptionCombination).isEqual(sortedSelectedProductOptions)
|
return _(sortedOptionCombination).isEqual(sortedSelectedProductOptions)
|
||||||
}).first()
|
}).first()
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectPriceBasedOnVariant() {
|
function selectPriceBasedOnVariant() {
|
||||||
var selectedProductOptions = $.map($("select:visible"), function(n, i) {
|
var selectedProductOptions = $.map($("select:visible"), function(n, i) {
|
||||||
return $(n).val();
|
return $(n).val();
|
||||||
|
|
Loading…
Reference in New Issue