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] 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
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"commander": "^2.15.1",
|
||||
"lodash": "^4.17.10",
|
||||
"request": "^2.87.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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/>
|
||||
|
|
|
@ -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>
|
|
@ -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">
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in New Issue