Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular 1.5x Product Detail Page
'use strict';
(function () {
'use strict';
angular.module('productDetail').component('productDetail', {
templateUrl: 'views/app/product-detail/product-detail.template.html',
bindings: {
item: '='
},
controller: ProductDetailController
});
ProductDetailController.$inject = ['$routeParams', 'Product', '$window', 'ngMeta'];
function ProductDetailController($routeParams, Product, $window, ngMeta) {
var ww = $window.innerWidth;
var ctrl = this;
this.$onInit = function () {
ctrl.item = this.item;
// /Seo
ngMeta.setTitle(this.product.title);
ngMeta.setTag('image', this.product.image);
ngMeta.setTag('description', this.product.body.substring(0, 255));
};
ctrl.showArrows = false;
ctrl.index = 0;
//var imageWith = ww < 414 ? 350 : null;
var imageWith = null;
ctrl.product = this.item.product;
ctrl.relatedProducts = this.item.related_products;
ctrl.showTabs = ww >= 767;
ctrl.type = 'product';
ctrl.images = [];
ctrl.prevPage = this.item.previous[0];
ctrl.nextPage = this.item.next[0];
if (ctrl.product.images.length) {
ctrl.mainImage = setFirstImage();
}
ctrl.selectMain = function () {
ctrl.mainImage = ctrl.images[ctrl.index].image;
};
ctrl.setImage = function setImage(img) {
ctrl.index = FindIndex(img);
ctrl.mainImage = img.image;
};
ctrl.setClass = function (imgUrl) {
return imgUrl == ctrl.mainImage;
};
function setFirstImage() {
var image;
if (imageWith != null) {
image = ctrl.product.images[0].image;
} else {
image = ctrl.product.images[1].image;
}
return image;
}
/**
*
* @param key
* @returns {number}
* @constructor
*/
function FindIndex(key) {
return ctrl.images.findIndex(function(obj) {
Object.keys(key).every(function(name) {
key[name] === obj[name]
})
});
}
ctrl.next = function () {
ctrl.index < ctrl.images.length - 1 ? ctrl.index++ : ctrl.index = 0;
ctrl.selectMain();
};
ctrl.prev = function () {
ctrl.index > 0 ? ctrl.index-- : ctrl.index = ctrl.images.length - 1;
ctrl.selectMain();
};
if (imageWith == null) {
angular.forEach(ctrl.product.images, function (value, key) {
if (value.width > 350) {
this.push(value);
}
}, ctrl.images);
}
if (ctrl.images.length > 1) ctrl.showArrows = true;
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.