Add support for product variants and variant based pricing

This commit is contained in:
Kishan B 2018-05-26 14:55:37 +05:30
parent d342796a4f
commit f4388c46bd
23 changed files with 242 additions and 124 deletions

View File

@ -6,6 +6,8 @@ Shopping product catalogue theme gives you a categorized display of all your pro
![screenshot](https://raw.githubusercontent.com/kishaningithub/hugo-shopping-product-catalogue-simple/master/images/screenshot.png)
![screenshot-product-view.png](https://raw.githubusercontent.com/kishaningithub/hugo-shopping-product-catalogue-simple/master/images/screenshot-product-view.png)
## Installation
Go to the directory where you have your Hugo site and run:
@ -19,6 +21,11 @@ rm -rf hugo-shopping-product-catalogue-simple/.git
For more information read the official [setup guide](https://gohugo.io/overview/installing/) of Hugo.
## Features
- [x] Product catalogue
- [x] Support for product variants and variant based prices
## Configuration
After installing the theme successfully, i recommend you to take a look at the [exampleSite](https://github.com/kishaningithub/hugo-shopping-product-catalogue-simple/tree/master/exampleSite) directory. You will find a working Hugo site configured with the theme that you can use as a starting point for your site.

View File

@ -1,13 +1,15 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
tags: []
categories: []
images: []
thumbnailImage: ""
comparePrice: ""
actualPrice: ""
inStock: true
---
{
"title": "{{ replace .Name "-" " " | title }}",
"date": "{{ .Date }}",
"tags": [],
"categories": [],
"images": [],
"thumbnailImage": "",
"actualPrice": "",
"comparePrice": "",
"inStock": true,
"options": {},
"variants": []
}
**Insert Product description here****

View File

@ -1,20 +1,37 @@
---
title: "Alessa"
date: 2018-05-11T22:35:06+05:30
tags: ["Wall Light", "ambience", "black", "black metal", "contemporary", "cool", "cozy", "edison bulb", "filament bulb", "glass", "green", "indoor", "light", "metal", "MODERN", "round", "rustic", "vintage", "white"]
categories: ["Wall Light"]
images: ["/img/alessa/1.png", "/img/alessa/2.jpg", "/img/alessa/3.jpg", "/img/alessa/4.jpg", "/img/alessa/5.jpg", "/img/alessa/6.jpg"]
thumbnailImage: "/img/alessa/thumnail.png"
comparePrice: ""
actualPrice: "₹ 4,032.00"
inStock: true
---
{
"title": "Alessa",
"date": "2018-05-11T22:35:06+05:30",
"tags": ["Wall Light", "ambience", "black", "black metal", "contemporary", "cool", "cozy", "edison bulb", "filament bulb", "glass", "green", "indoor", "light", "metal", "MODERN", "round", "rustic", "vintage", "white"],
"categories": ["Wall Light"],
"images": ["/img/alessa/1.png", "/img/alessa/2.jpg", "/img/alessa/3.jpg", "/img/alessa/4.jpg", "/img/alessa/5.jpg", "/img/alessa/6.jpg"],
"thumbnailImage": "/img/alessa/thumnail.png",
"actualPrice": "",
"comparePrice": "",
"inStock": true,
"options": {
"Color": ["Chrome", "Green", "White", "Black"],
"Size" : ["L19 x W24 x H23cms"]
},
"variants": [
{
"optionCombination" : ["Chrome", "L19 x W24 x H23cms"],
"comparePrice": "",
"actualPrice": "₹ 3,032.00",
"inStock": true
},
{
"optionCombination" : ["Green", "L19 x W24 x H23cms"],
"comparePrice": "",
"actualPrice": "₹ 2,032.00",
"inStock": false
},
{
"optionCombination" : ["Black", "L19 x W24 x H23cms"],
"comparePrice": "",
"actualPrice": "₹ 1,032.00",
"inStock": true
}
]
}
The Alessa collection features a metal shade that when illuminated provides a beautiful two toned look. Perfect for mounting along your house, on your deck or patio, or as entryway lights. Available in black, green, white and clear glass.
### Variants
- L19 x W24 x H23cms Chrome
- L19 x W24 x H23cms Green
- L19 x W24 x H23cms White
- L19 x W24 x H23 Cms Black
The Alessa collection features a metal shade that when illuminated provides a beautiful two toned look. Perfect for mounting along your house, on your deck or patio, or as entryway lights. Available in black, green, white and clear glass.

View File

@ -1,14 +1,32 @@
---
title: "Azure Blue De Stijl Inspired Bedside Retro Light"
date: 2018-05-10T08:02:34+05:30
tags: ["Wall Light"]
categories: ["Wall Light"]
images : ["/img/azure-blue-de-stijl-bedside-retro-light-with-black-ring/1.jpg"]
thumbnailImage: "/img/azure-blue-de-stijl-bedside-retro-light-with-black-ring/thumbnail.jpg"
comparePrice: "₹ 3000.00"
actualPrice: "₹ 2917.00"
inStock: true
---
{
"title": "Azure Blue De Stijl Inspired Bedside Retro Light",
"date": "2018-05-10T08:02:34+05:30",
"tags": ["Wall Light"],
"categories": ["Wall Light"],
"images" : ["/img/azure-blue-de-stijl-bedside-retro-light-with-black-ring/1.jpg"],
"thumbnailImage": "/img/azure-blue-de-stijl-bedside-retro-light-with-black-ring/thumbnail.jpg",
"actualPrice": "",
"comparePrice": "",
"inStock": true,
"options": {
"Type": ["With extension wire", "Without extension wire"]
},
"variants": [
{
"optionCombination" : ["With extension wire"],
"comparePrice": "",
"actualPrice": "₹ 2917.00",
"inStock": true
},
{
"optionCombination" : ["Without extension wire"],
"comparePrice": "",
"actualPrice": "₹ 2000.00",
"inStock": false
}
]
}
The azure blue bedside modern retro lamp is functional at different levels and minimal in appearance. You can swivel it to your desired angle and pivot the light freely.
@ -18,7 +36,7 @@ The azure blue bedside modern retro lamp is functional at different levels and m
- Material: Iron
- Finish: Gloss Blue
- Diameter of the shade - 6 inches, Height of the shade - 4 inches
- Voltage - 110v-220v
- Voltage - 110v-220v
- Powered by electricity
- Style - De Stijl
- Swivel Functionality: Yes

View File

@ -1,14 +1,16 @@
---
title: "Duke"
date: 2018-05-12T15:48:00+05:30
tags: ["Floor Light"]
categories: ["Floor Light"]
images: ["/img/duke/1.jpg", "/img/duke/2.jpg", "/img/duke/3.jpg"]
thumbnailImage: "/img/duke/thumbnail.jpg"
comparePrice: ""
actualPrice: "₹ 87,341.00"
inStock: true
---
{
"title": "Duke",
"date": "2018-05-12T15:48:00+05:30",
"tags": ["Floor Light"],
"categories": ["Floor Light"],
"images": ["/img/duke/1.jpg", "/img/duke/2.jpg", "/img/duke/3.jpg"],
"thumbnailImage": "/img/duke/thumbnail.jpg",
"actualPrice": "₹ 87,341.00",
"comparePrice": "",
"inStock": true,
"options": {},
"variants": []
}
Total Fixture Dimensions (in inches): 51x51x63

View File

@ -1,14 +1,16 @@
---
title: "Industrial Mesh Cage Wall Light Metal Mesh Up"
date: 2018-05-10T20:00:43+05:30
tags: ["Wall Light"]
categories: ["Wall Light"]
images: ["https://cdn.shopify.com/s/files/1/0832/3531/products/prod2500251_1024x1024.png?v=1474400254", "https://cdn.shopify.com/s/files/1/0832/3531/products/prod2500251_1024x1024.jpeg?v=1474400255", "https://cdn.shopify.com/s/files/1/0832/3531/products/prod2500251_av1_1024x1024.jpeg?v=1474400254"]
thumbnailImage: "https://cdn.shopify.com/s/files/1/0832/3531/products/prod2500251_large.png?v=1474400254"
comparePrice: "₹ 5000.00"
actualPrice: "₹ 4608.00"
inStock: false
---
{
"title": "Industrial Mesh Cage Wall Light Metal Mesh Up",
"date": "2018-05-10T20:00:43+05:30",
"tags": ["Wall Light"],
"categories": ["Wall Light"],
"images": ["/img/industrial-mesh-cage-wall-light-metal-mesh-up/1.png", "/img/industrial-mesh-cage-wall-light-metal-mesh-up/2.jpg", "/img/industrial-mesh-cage-wall-light-metal-mesh-up/3.jpg"],
"thumbnailImage": "/img/industrial-mesh-cage-wall-light-metal-mesh-up/thumbnail.png",
"actualPrice": "₹ 4608.00",
"comparePrice": "₹ 5000.00",
"inStock": false,
"options": {},
"variants": []
}
This classic cage light is perfect to add class and character to your home decor. The cult Edison Bulbs will definitely set a welcoming mood to your home interiors.

View File

@ -1,14 +1,16 @@
---
title: "Modo 21 Lamp"
date: 2018-05-12T15:54:25+05:30
tags: ["chandeliers"]
categories: ["chandeliers"]
images: ["/img/modo-21-lamp/1.jpg", "/img/modo-21-lamp/2.jpg", "/img/modo-21-lamp/2.jpg"]
thumbnailImage: "/img/modo-21-lamp/thumbnail.jpg"
comparePrice: ""
actualPrice: "₹ 85,000.00"
inStock: true
---
{
"title": "Modo 21 Lamp",
"date": "2018-05-12T15:54:25+05:30",
"tags": ["chandeliers"],
"categories": ["chandeliers"],
"images": ["/img/modo-21-lamp/1.jpg", "/img/modo-21-lamp/2.jpg", "/img/modo-21-lamp/2.jpg"],
"thumbnailImage": "/img/modo-21-lamp/thumbnail.jpg",
"actualPrice": "₹ 85,000.00",
"comparePrice": "",
"inStock": true,
"options": {},
"variants": []
}
A mid-century modern chandelier which in inspired by the hub and spoke design. It has a modern take on a retro industrial style of lighting. The incandescent bulbs in the smoky glass globes glow beautifully when turned on. This chandelier offers warm ambient lighting and will effortless enhance your home decor. It is a luxury lighting fixture for your living room or dining room. Buy Luxury Chandeliers Online in India at best prices. Free Shipping.

View File

@ -1,14 +1,16 @@
---
title: "Oda Lamp"
date: 2018-05-12T13:50:55+05:30
tags: ["Floor Light"]
categories: ["Floor Light"]
images: ["/img/oda-lamp/1.jpg", "/img/oda-lamp/2.jpg"]
thumbnailImage: "/img/oda-lamp/thumbnail.jpg"
comparePrice: "₹ 25,920.00"
actualPrice: "₹ 12,960.00"
inStock: false
---
{
"title": "Oda Lamp",
"date": "2018-05-12T13:50:55+05:30",
"tags": ["Floor Light"],
"categories": ["Floor Light"],
"images": ["/img/oda-lamp/1.jpg", "/img/oda-lamp/2.jpg"],
"thumbnailImage": "/img/oda-lamp/thumbnail.jpg",
"actualPrice": "₹ 12,960.00",
"comparePrice": "₹ 25,920.00",
"inStock": false,
"options": {},
"variants": []
}
Oda is a floor lamp made from a handblown tinted glass barrel balancing on a simple and elegant metal structure.

View File

@ -1,18 +1,23 @@
---
title: "Retro Vintage Industrial Cage Pendant System"
date: 2018-05-10T20:11:38+05:30
tags: ["Pendant Light"]
categories: ["Pendant Light"]
images: ["/img/retro-vintage-industrial-cage-pendant-system/1.png", "/img/retro-vintage-industrial-cage-pendant-system/2.png"]
thumbnailImage: "/img/retro-vintage-industrial-cage-pendant-system/thumbnail.png"
comparePrice: ""
actualPrice: "₹ 3,744.00"
inStock: true
---
{
"title": "Retro Vintage Industrial Cage Pendant System",
"date": "2018-05-10T20:11:38+05:30",
"tags": ["Pendant Light"],
"categories": ["Pendant Light"],
"images": ["/img/retro-vintage-industrial-cage-pendant-system/1.png", "/img/retro-vintage-industrial-cage-pendant-system/2.png"],
"thumbnailImage": "/img/retro-vintage-industrial-cage-pendant-system/thumbnail.png",
"actualPrice": "₹ 3,744.00",
"comparePrice": "",
"inStock": true,
"options": {},
"variants": []
}
Rustic look comes with industrial chic and luxe finish.This steampunk pendant system is made of four wrought iron cage painted black and are complimented well with the classic Edison filament Bulb.
Rustic look comes with industrial chic and luxe finish.This steampunk pendant system
is made of four wrought iron cage painted black and are complimented well with the
classic Edison filament Bulb.
100 YEARS AGO INDUSTRIAL WAS THE NORM, NOW IT IS A NOSTALGIC STYLE REMINISCING THE PAST.
100 YEARS AGO INDUSTRIAL WAS THE NORM, NOW IT IS A NOSTALGIC STYLE REMINISCING THE
PAST.
Size: L-85 x W-10 x H-102cms

View File

@ -1,13 +1,18 @@
---
title: "Void Pendant"
date: 2018-05-10T20:17:46+05:30
tags: ["Pendant Light"]
categories: ["Pendant Light"]
images: ["/img/void-pendant/1.jpg", "/img/void-pendant/2.jpg", "/img/void-pendant/3.jpg", "/img/void-pendant/4.jpg"]
thumbnailImage: "/img/void-pendant/thumbnail.jpg"
comparePrice: ""
actualPrice: "₹ 18,500.00"
inStock: true
---
{
"title": "Void Pendant",
"date": "2018-05-10T20:17:46+05:30",
"tags": ["Pendant Light"],
"categories": ["Pendant Light"],
"images": ["/img/void-pendant/1.jpg", "/img/void-pendant/2.jpg", "/img/void-pendant/3.jpg", "/img/void-pendant/4.jpg"],
"thumbnailImage": "/img/void-pendant/thumbnail.jpg",
"comparePrice": "",
"actualPrice": "₹ 18,500.00",
"inStock": true,
"options": {},
"variants": []
}
Inspired by vacuum flasks, Void is made from glass which is formed into a complex double-walled shade. A small but powerful bulb deep inside the lamp creates a soft but directional light beam, while the exterior is polished to a highly reflective finish in Pendant and Surface light versions.
Inspired by vacuum flasks, Void is made from glass which is formed into a complex
double-walled shade. A small but powerful bulb deep inside the lamp creates a soft
but directional light beam, while the exterior is polished to a highly reflective
finish in Pendant and Surface light versions.

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

View File

@ -4,5 +4,6 @@
<body>
{{ block "main" . }}
{{ end }}
{{ partial "scripts.html" . }}
</body>
</html>

View File

@ -5,4 +5,4 @@
<meta name="googlebot" content="index,follow,snippet,archive">
<link rel="shortcut icon" type="image/x-icon" href="{{ .Site.BaseURL }}img/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{{ "css/bootstrap.min.css" | absURL }}">

View File

@ -8,8 +8,11 @@
</div>
</div>
<div class="row">
{{ range .Data.Pages.ByPublishDate }}
{{ range .Data.Pages }}
{{ partial "products/list/product-list-item.html" . }}
{{ end }}
</div>
<script>
var productVariants = null;
</script>
</article>

View File

@ -1,6 +1,22 @@
<h1>{{ .Title }}</h1>
<p>
<span style="text-decoration: line-through">{{ .Params.comparePrice }}</span>
<span>{{ .Params.actualPrice }}</span>
{{ if not .Params.inStock }} <span class="font-weight-bold">— Sold Out</span> {{ end }}
</p>
<span class="product-compare-price"style="text-decoration: line-through">{{ .Params.comparePrice }}</span>
<span class="product-actual-price">{{ .Params.actualPrice }}</span>
<span class="product-not-in-stock" class="font-weight-bold">— Sold Out</span>
</p>
<p>
{{ range $index, $element := .Params.options }}
<span>{{ $index | humanize }}</span>
<select class="select-{{ $index }}">
{{ range $element }}
<option>{{ . }}</option>
{{ end }}
</select>
{{ end }}
</p>
<script>
var productActualPrice = {{ .Params.actualPrice }}
var productComparePrice = {{ .Params.comparePrice }}
var productInStock = {{ .Params.inStock }}
var productVariants = JSON.parse({{ .Params.variants | jsonify }})
</script>

View File

@ -0,0 +1,3 @@
<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/main.js" | absURL }}"></script>

View File

@ -8,19 +8,17 @@
{{ partial "products/common/site-main-nav.html" . }}
</div>
</div>
<div class="row d-block d-md-none">
<div class="col-sm-12">
<div class="row align-items-start">
<div class="col-12 col-md-6 order-md-2">
{{ partial "products/single/product-single-heading.html" . }}
<div class="d-none d-md-block">{{ .Content }}</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="col-12 col-md-6 order-md-1">
{{ range .Params.images }}
<img class="img-fluid text-center" src="{{ . }}" />
{{ end }}
</div>
<div class="col-sm-12 col-md-6 d-sm-none d-md-block">
{{ partial "products/single/product-single-heading.html" . }}
<div class="col-12 col-md-6 order-md-2 d-block d-md-none">
<p>{{ .Content }}</p>
</div>
</div>

7
static/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

28
static/js/main.js Normal file
View File

@ -0,0 +1,28 @@
$(function() {
$("select").change(function() {
selectPriceBasedOnVariant();
})
if (!_(productVariants).isEmpty()) {
selectPriceBasedOnVariant();
}
})
function getSelectedVariant(productVariants, selectedProductOptions) {
var sortedSelectedProductOptions = _.sortBy(selectedProductOptions)
return _(productVariants).filter(function(productVariant) {
var sortedOptionCombination=_.sortBy(productVariant.optionCombination)
return _(sortedOptionCombination).isEqual(sortedSelectedProductOptions)
}).first()
}
function selectPriceBasedOnVariant() {
var selectedProductOptions = $.map($("select:visible"), function(n, i) {
return $(n).val();
});
var selectedVariant = getSelectedVariant(productVariants, selectedProductOptions);
if (selectedVariant) {
$(".product-actual-price").text(selectedVariant.actualPrice);
$(".product-compare-price").text(selectedVariant.comparePrice);
$(".product-not-in-stock").toggle(!selectedVariant.inStock);
} else {
$(".product-not-in-stock").toggle(true);
}
}