{cartList.length}
\r\n 
\r\n \r\n {/* - \r\n { cartList.map((item,index) => (\r\n
- \r\n \r\n\r\n
subtotal : {symbol}{total}
\r\n \r\n - \r\n \r\n view cart\r\n checkout\r\n\r\n
Your cart is currently empty.
}\r\n
\r\n
\r\n :\r\n \r\n\t\t\t\t\r\n\t\t\t\t\t{this.state.isLoading ? : null}\r\n\t\t\t\t\t\r\n\t\t\t\t\t{/*Top Header Component*/}\r\n\t\t\t\t\t{/* \r\n\r\n
\r\n\t\t\t)\r\n\t}\r\n}\r\n\r\nexport default connect(null,\r\n { changeCurrency }\r\n)(HeaderFour);","import React, { Component } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\nimport './collection.scss'\r\n\r\nclass ProductStyleTwo extends Component {\r\n\r\n constructor(props) {\r\n console.log(props)\r\n super(props)\r\n\r\n this.state = {\r\n image: '',\r\n\r\n }\r\n }\r\n\r\n onClickHandle(img) {\r\n this.setState({ image: img });\r\n }\r\n\r\n render() {\r\n const { product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked } = this.props;\r\n let RatingStars = []\r\n for (var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n console.log(window.location.pathname);\r\n return (\r\n\r\n \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\tМени\r\n\t\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{/*SideBar Navigation Component*/}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t![](\"../../../assets/images/logonovo.fw_.png\")
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{/*Top Navigation Bar Component*/}\r\n\t\t\t\t\t\t\t\t\t\t{/*
\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t- \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t - \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tlanguage
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t- \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
- this.changeLanguage('en')}>English \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
- this.changeLanguage('fn')}>French \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
currency
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t- \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
- this.props.changeCurrency('€')}>euro \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
- this.props.changeCurrency('₹')}>rupees \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
- this.props.changeCurrency('£')}>pound \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
- this.props.changeCurrency('$')}>doller \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{/*Header Cart Component */}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n
\r\n\t\t\t\r\n ×\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleTwo;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductItem extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n open: false,\r\n stock: 'InStock',\r\n quantity: 1,\r\n image: ''\r\n }\r\n }\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n onOpenModal = () => {\r\n this.setState({ open: true });\r\n };\r\n\r\n onCloseModal = () => {\r\n this.setState({ open: false });\r\n };\r\n\r\n minusQty = () => {\r\n if(this.state.quantity > 1) {\r\n this.setState({stock: 'InStock'})\r\n this.setState({quantity: this.state.quantity - 1})\r\n }\r\n }\r\n\r\n plusQty = () => {\r\n if(this.props.product.stock >= this.state.quantity) {\r\n this.setState({quantity: this.state.quantity+1})\r\n }else{\r\n this.setState({stock: 'Out of Stock !'})\r\n }\r\n }\r\n changeQty = (e) => {\r\n this.setState({ quantity: parseInt(e.target.value) })\r\n }\r\n \r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n return (\r\n \r\n
\r\n \r\n {/* {(product.new == true)? new : ''}\r\n {(product.sale == true)? on sale : ''} */}\r\n\r\n
\r\n \r\n\r\n \r\n elem != '')[0]\r\n }`}\r\n className=\"img-front\"\r\n alt=\"\" />\r\n
\r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n
*/}\r\n \r\n
\r\n \r\n {'ден'}{(product.price)\r\n .toLocaleString('en-US', {\r\n style: 'currency',\r\n currency: 'MKD',\r\n }).replace('MKD', '').split('.')[0]}\r\n {/*
\r\n { product.saleprice && {'ден'}{(product.saleprice)\r\n .toLocaleString('en-US', {\r\n style: 'currency',\r\n currency: 'MKD',\r\n }).replace('MKD', '').split('.')[0]}\r\n {/*
}\r\n {product.variants ?\r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.productname}
\r\n \r\n{'ден'}{(product.price)\r\n .toLocaleString('en-US', {\r\n style: 'currency',\r\n currency: 'MKD',\r\n }).replace('MKD', '').split('.')[0]}\r\n {/* {symbol}{product.price} */}\r\n
\r\n { product.saleprice && {'ден'}{(product.saleprice)\r\n .toLocaleString('en-US', {\r\n style: 'currency',\r\n currency: 'MKD',\r\n }).replace('MKD', '').split('.')[0]}\r\n {/* {symbol}{product.price} */}\r\n
}\r\n {product.variants ?\r\n - \r\n {product.variants.map((vari, i) => {\r\n return (\r\n
- this.onClickHandle(vari.images)}> )\r\n })}\r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductItem;","// const url = 'https://ancient-temple-54024.herokuapp.com'\nconst url = 'https://m4j5u86tq6.execute-api.us-east-1.amazonaws.com'\nexport default url","import React, { Component } from 'react';\r\nimport { Tab, Tabs, TabList, TabPanel } from 'react-tabs';\r\nimport { connect } from 'react-redux'\r\n\r\nimport { getBestSeller, getBestSellerProducts, getMensWear, getNewProducts, getWomensWear } from '../../../services/index'\r\nimport { addToCart, addToWishlist, addToCompare } from \"../../../actions/index\";\r\nimport ProductItem from './product-item';\r\nimport ProductListing from '../../collection/common/product-style-two.jsx'\r\nimport axios from 'axios'\r\nimport './featured.scss'\r\nimport url from '../../../constants/global'\r\nclass SpecialProducts extends Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n products: []\r\n }\r\n }\r\n async componentDidMount() {\r\n // return\r\n console.log('adsadsas asd');\r\n let { data } = await axios.get(\r\n url + '/products/featured'\r\n )\r\n this.setState({\r\n products: data\r\n })\r\n console.log(data);\r\n }\r\n render() {\r\n // return(\r\n // \r\n
\r\n \r\n {(product.new == true)? new : ''}\r\n {(product.sale == true)? on sale : ''}\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
*/}\r\n
\r\n {product.name}
\r\n \r\n {/*{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}\r\n
*/}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n {product.name}
\r\n{symbol}{product.price}
\r\n\r\n
\r\n product details
\r\n{product.shortDetails}
\r\n\r\n
\r\n quantity
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n view detail\r\n
\r\n \r\n \r\n //
\r\n // )\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n bestSeller: getBestSellerProducts(state.data.products, ownProps.type),\r\n newProducts: getNewProducts(state.data.products, ownProps.type),\r\n featuredProducts: getBestSellerProducts(state.data.products, ownProps.type).reverse(),\r\n symbol: state.data.symbol\r\n})\r\n\r\nexport default connect(mapStateToProps, { addToCart, addToWishlist, addToCompare })(SpecialProducts);","\r\n\r\nexport const Product4 = {\r\n infinite: true,\r\n speed: 300,\r\n slidesToShow: 4,\r\n slidesToScroll: 4,\r\n autoplay: true,\r\n autoplaySpeed: 3000,\r\n responsive: [\r\n {\r\n breakpoint: 1200,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 3\r\n }\r\n },\r\n {\r\n breakpoint: 991,\r\n settings: {\r\n slidesToShow:2,\r\n slidesToScroll: 2\r\n }\r\n },\r\n {\r\n breakpoint: 420,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1\r\n }\r\n }\r\n ]\r\n}\r\nexport const Product5 = {\r\n dots: false,\r\n infinite: true,\r\n speed: 300,\r\n slidesToShow: 5,\r\n slidesToScroll: 5,\r\n responsive: [\r\n {\r\n breakpoint: 1367,\r\n settings: {\r\n slidesToShow: 4,\r\n slidesToScroll: 4\r\n }\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 3,\r\n infinite: true\r\n }\r\n },\r\n {\r\n breakpoint: 768,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 2\r\n }\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1\r\n }\r\n }\r\n ]\r\n}\r\n\r\n\r\n\r\nexport const Team4 = {\r\n infinite: true,\r\n speed: 300,\r\n slidesToShow: 4,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n autoplaySpeed: 3000,\r\n responsive: [\r\n {\r\n breakpoint: 1200,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 3\r\n }\r\n },\r\n {\r\n breakpoint: 991,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 2\r\n }\r\n },\r\n {\r\n breakpoint: 586,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1\r\n }\r\n }\r\n ]\r\n}\r\n\r\n\r\n\r\nexport const Slider2 = {\r\n infinite: true,\r\n slidesToShow: 2,\r\n slidesToScroll: 2,\r\n responsive: [\r\n {\r\n breakpoint: 991,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1\r\n }\r\n }\r\n ]\r\n}\r\n\r\nexport const Slider3 = {\r\n infinite: true,\r\n speed: 300,\r\n slidesToShow: 3,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n autoplaySpeed: 5000,\r\n responsive: [\r\n {\r\n breakpoint: 1200,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 2\r\n }\r\n },\r\n {\r\n breakpoint: 767,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1\r\n }\r\n }\r\n ]\r\n}\r\nexport const Slider4 = {\r\n infinite: false,\r\n speed: 300,\r\n slidesToShow: 4,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n autoplaySpeed: 5000,\r\n responsive: [\r\n {\r\n breakpoint: 1200,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 3\r\n }\r\n },\r\n {\r\n breakpoint: 991,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 2\r\n }\r\n },\r\n {\r\n breakpoint: 586,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1\r\n }\r\n }\r\n ]\r\n}\r\nexport const Slider5 = {\r\n dots: false,\r\n infinite: true,\r\n speed: 300,\r\n slidesToShow: 5,\r\n slidesToScroll: 5,\r\n responsive: [\r\n {\r\n breakpoint: 1367,\r\n settings: {\r\n slidesToShow: 4,\r\n slidesToScroll: 4\r\n }\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 3,\r\n infinite: true\r\n }\r\n },\r\n {\r\n breakpoint: 768,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 2\r\n }\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1\r\n }\r\n }\r\n ]\r\n}\r\n\r\nexport const Slider6 = {\r\n dots: false,\r\n infinite: true,\r\n speed: 300,\r\n slidesToShow: 6,\r\n slidesToScroll: 6,\r\n responsive: [\r\n {\r\n breakpoint: 1367,\r\n settings: {\r\n slidesToShow: 5,\r\n slidesToScroll: 5,\r\n infinite: true\r\n }\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 4,\r\n slidesToScroll: 4,\r\n infinite: true\r\n }\r\n },\r\n {\r\n breakpoint: 767,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 3,\r\n infinite: true\r\n }\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 2\r\n }\r\n }\r\n\r\n ]\r\n}\r\n\r\nexport const Slider7 = {\r\n dots: false,\r\n infinite: true,\r\n speed: 300,\r\n slidesToShow: 7,\r\n slidesToScroll: 7,\r\n responsive: [\r\n {\r\n breakpoint: 1367,\r\n settings: {\r\n slidesToShow: 6,\r\n slidesToScroll: 6\r\n }\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 5,\r\n slidesToScroll: 5,\r\n infinite: true\r\n }\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 4,\r\n slidesToScroll: 4\r\n }\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 3\r\n }\r\n }\r\n // You can unslick at a given breakpoint now by adding:\r\n // settings: \"unslick\"\r\n // instead of a settings object\r\n ]\r\n}\r\n\r\n// export const footerData = function() {\r\n// var contentwidth = window.innerWidth;\r\n// if ((contentwidth) < 750) {\r\n// document.querySelector(\".footer-title h4\").innerHTML += '';\r\n//\r\n// var anchors = document.getElementsByClassName('footer-title');\r\n// for(var i = 0; i < anchors.length; i++) {\r\n// var anchor = anchors[i];\r\n// anchor.onclick = function() {\r\n// var elems = document.querySelectorAll(\".footer-title\");\r\n// [].forEach.call(elems, function(elemt) {\r\n// elemt.classList.remove(\"active\");\r\n// var el = elemt.nextElementSibling;\r\n//\r\n// el.style.height = el.offsetHeight + 'px'\r\n// el.style.transitionProperty = `height, margin, padding`\r\n// el.style.transitionDuration = '500ms'\r\n// el.offsetHeight // eslint-disable-line no-unused-expressions\r\n// el.style.overflow = 'hidden'\r\n// el.style.height = 0\r\n// el.style.paddingTop = 0\r\n// el.style.paddingBottom = 0\r\n// el.style.marginTop = 0\r\n// el.style.marginBottom = 0\r\n// el.style.display = 'none'\r\n// el.style.removeProperty('height')\r\n// el.style.removeProperty('padding-top')\r\n// el.style.removeProperty('padding-bottom')\r\n// el.style.removeProperty('margin-top')\r\n// el.style.removeProperty('margin-bottom')\r\n// el.style.removeProperty('overflow')\r\n// el.style.removeProperty('transition-duration')\r\n// el.style.removeProperty('transition-property')\r\n//\r\n// });\r\n//\r\n// this.classList.add('active');\r\n// var element = this.nextElementSibling;\r\n// element.style.removeProperty('display')\r\n// let display = window.getComputedStyle(element).display\r\n// if (display === 'none') display = 'block'\r\n// element.style.display = display\r\n// let height = element.offsetHeight\r\n// element.style.overflow = 'hidden'\r\n// element.style.height = 0\r\n// element.style.paddingTop = 0\r\n// element.style.paddingBottom = 0\r\n// element.style.marginTop = 0\r\n// element.style.marginBottom = 0\r\n// element.offsetHeight // eslint-disable-line no-unused-expressions\r\n// element.style.transitionProperty = `height, margin, padding`\r\n// element.style.transitionDuration = '500ms'\r\n// element.style.height = height + 'px'\r\n// element.style.removeProperty('padding-top')\r\n// element.style.removeProperty('padding-bottom')\r\n// element.style.removeProperty('margin-top')\r\n// element.style.removeProperty('margin-bottom')\r\n// window.setTimeout(function () {\r\n// element.style.removeProperty('height')\r\n// element.style.removeProperty('overflow')\r\n// element.style.removeProperty('transition-duration')\r\n// element.style.removeProperty('transition-property')\r\n// }, 500)\r\n// }\r\n// }\r\n//\r\n// var elems = document.querySelectorAll(\".footer-title\");\r\n// [].forEach.call(elems, function(elemt) {\r\n// let el = elemt.nextElementSibling;\r\n// el.style = \"display: none\";\r\n// });\r\n// } else {\r\n// var elems = document.querySelectorAll(\".footer-title\");\r\n// [].forEach.call(elems, function(elemt) {\r\n// let el = elemt.nextElementSibling;\r\n// el.style = \"display: block\";\r\n// });\r\n// }\r\n// }\r\n\r\n\r\nexport const SlideUpDown = function(classnames) {\r\n var accords = document.querySelectorAll(\".\"+classnames+\" h4\");\r\n [].forEach.call(accords, function(elemt) {\r\n elemt.innerHTML += '';\r\n })\r\n\r\n var anchors = document.getElementsByClassName(classnames);\r\n for(var i = 0; i < anchors.length; i++) {\r\n var anchor = anchors[i];\r\n anchor.onclick = function() {\r\n var elems = document.querySelectorAll(\".\"+classnames);\r\n [].forEach.call(elems, function(elemt) {\r\n elemt.classList.remove(\"active\");\r\n var el = elemt.nextElementSibling;\r\n el.style.height = el.offsetHeight + 'px'\r\n el.style.transitionProperty = `height, margin, padding`\r\n el.style.transitionDuration = '500ms'\r\n el.offsetHeight // eslint-disable-line no-unused-expressions\r\n el.style.overflow = 'hidden'\r\n el.style.height = 0\r\n el.style.paddingTop = 0\r\n el.style.paddingBottom = 0\r\n el.style.marginTop = 0\r\n el.style.marginBottom = 0\r\n el.style.display = 'none'\r\n el.style.removeProperty('height')\r\n el.style.removeProperty('padding-top')\r\n el.style.removeProperty('padding-bottom')\r\n el.style.removeProperty('margin-top')\r\n el.style.removeProperty('margin-bottom')\r\n el.style.removeProperty('overflow')\r\n el.style.removeProperty('transition-duration')\r\n el.style.removeProperty('transition-property')\r\n\r\n });\r\n\r\n this.classList.add('active');\r\n var element = this.nextElementSibling;\r\n element.style.removeProperty('display')\r\n let display = window.getComputedStyle(element).display\r\n\r\n if(element.classList.contains('show')) {\r\n element.classList.remove('show');\r\n\r\n this.classList.remove(\"active\");\r\n element.style.height = element.offsetHeight + 'px'\r\n element.style.transitionProperty = `height, margin, padding`\r\n element.style.transitionDuration = '500ms'\r\n element.offsetHeight // eslint-disable-line no-unused-expressions\r\n element.style.overflow = 'hidden'\r\n element.style.height = 0\r\n element.style.paddingTop = 0\r\n element.style.paddingBottom = 0\r\n element.style.marginTop = 0\r\n element.style.marginBottom = 0\r\n element.style.display = 'none'\r\n element.style.transitionProperty = `height, margin, padding`\r\n element.style.transitionDuration = '500ms'\r\n element.style.removeProperty('height')\r\n element.style.removeProperty('padding-top')\r\n element.style.removeProperty('padding-bottom')\r\n element.style.removeProperty('margin-top')\r\n element.style.removeProperty('margin-bottom')\r\n window.setTimeout(function () {\r\n element.style.removeProperty('overflow')\r\n element.style.removeProperty('transition-duration')\r\n element.style.removeProperty('transition-property')\r\n }, 500)\r\n\r\n }else{\r\n element.classList.add('show');\r\n if (display === 'none') display = 'block'\r\n element.style.display = display\r\n let height = element.offsetHeight\r\n element.style.overflow = 'hidden'\r\n element.style.height = 0\r\n element.style.paddingTop = 0\r\n element.style.paddingBottom = 0\r\n element.style.marginTop = 0\r\n element.style.marginBottom = 0\r\n element.offsetHeight // eslint-disable-line no-unused-expressions\r\n element.style.transitionProperty = `height, margin, padding`\r\n element.style.transitionDuration = '500ms'\r\n element.style.height = height + 'px'\r\n element.style.removeProperty('padding-top')\r\n element.style.removeProperty('padding-bottom')\r\n element.style.removeProperty('margin-top')\r\n element.style.removeProperty('margin-bottom')\r\n window.setTimeout(function () {\r\n element.style.removeProperty('height')\r\n element.style.removeProperty('overflow')\r\n element.style.removeProperty('transition-duration')\r\n element.style.removeProperty('transition-property')\r\n }, 500)\r\n }\r\n }\r\n }\r\n\r\n var elems = document.querySelectorAll(\".\"+classnames);\r\n [].forEach.call(elems, function(elemt) {\r\n let el = elemt.nextElementSibling;\r\n el.style = \"display: none\";\r\n });\r\n\r\n}\r\n\r\n\r\n// SVG Icons\r\n\r\nexport const svgFreeShipping = '';\r\nexport const svgservice = '';\r\n\r\nexport const svgoffer = '';\r\nexport const svgpayment = '';","import React from 'react';\r\nimport {Link} from 'react-router-dom'\r\n\r\nfunction LogoImage(props) {\r\n\r\n return \r\n Препорачани Производи
\r\n\r\n
\r\n \r\n {\r\n this.state.products.map(el => (\r\n
\r\n \r\n
\r\n ))\r\n\r\n }\r\n 
\r\n ;\r\n}\r\n\r\nexport default LogoImage;","import React, {Component} from 'react';\r\nimport { Link} from 'react-router-dom';\r\n\r\nimport {SlideUpDown} from \"../../../services/script\"\r\nimport LogoImage from \"../headers/common/logo\"\r\n\r\nclass FooterOne extends Component {\r\n\r\n componentDidMount(){\r\n var contentwidth = window.innerWidth;\r\n if ((contentwidth) < 750) {\r\n SlideUpDown('footer-title');\r\n } else {\r\n var elems = document.querySelectorAll(\".footer-title\");\r\n [].forEach.call(elems, function(elemt) {\r\n let el = elemt.nextElementSibling;\r\n el.style = \"display: block\";\r\n });\r\n }\r\n }\r\n\r\n\r\n render () {\r\n\r\n return (\r\n \r\n )\r\n }\r\n}\r\n\r\nexport default FooterOne;","import React, {Component} from 'react';\r\nimport {Link} from \"react-router-dom\"\r\nimport { withTranslate } from 'react-redux-multilingual'\r\n\r\nimport {SlideUpDown} from \"../../services/script\"\r\nimport { ToastContainer } from 'react-toastify';\r\n\r\nclass ThemeSettings extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n\r\n this.state = {\r\n divName:'RTL',\r\n themeLayout: false\r\n }\r\n }\r\n\r\n\r\n /*=====================\r\n Tap on Top\r\n ==========================*/\r\n componentWillMount(){\r\n window.addEventListener('scroll', this.handleScroll);\r\n }\r\n componentWillUnmount() {\r\n window.removeEventListener('scroll', this.handleScroll);\r\n }\r\n handleScroll = () => {\r\n if (document.documentElement.scrollTop > 600) {\r\n document.querySelector(\".tap-top\").style = \"display: block\";\r\n } else {\r\n document.querySelector(\".tap-top\").style = \"display: none\";\r\n }\r\n }\r\n clickToTop(){\r\n window.scroll({top: 0, left: 0, behavior: 'smooth' })\r\n }\r\n\r\n componentDidMount() {\r\n SlideUpDown('setting-title');\r\n }\r\n\r\n openSetting = () => {\r\n document.getElementById(\"setting_box\").classList.add('open-setting');\r\n document.getElementById(\"setting-icon\").classList.add('open-icon');\r\n }\r\n closeSetting = () => {\r\n document.getElementById(\"setting_box\").classList.remove('open-setting');\r\n document.getElementById(\"setting-icon\").classList.remove('open-icon');\r\n }\r\n\r\n // Color Picker\r\n changeColor(event, color){\r\n var elems = document.querySelectorAll(\".color-box li\");\r\n [].forEach.call(elems, function(elemt) {\r\n elemt.classList.remove('active');\r\n })\r\n\r\n event.target.classList.add('active');\r\n console.log(color)\r\n document.getElementById(\"color\").setAttribute(\"href\", `${process.env.PUBLIC_URL}/assets/css/`+color+`.css` );\r\n }\r\n\r\n ChangeRtl(divName){\r\n if(divName === 'RTL') {\r\n document.body.classList.add('rtl');\r\n this.setState({divName: 'LTR'});\r\n }else{\r\n document.body.classList.remove('rtl');\r\n this.setState({divName: 'RTL'});\r\n }\r\n }\r\n\r\n changeThemeLayout() {\r\n this.setState({\r\n themeLayout:!this.state.themeLayout\r\n })\r\n }\r\n\r\n render() {\r\n if(this.state.themeLayout){\r\n document.body.classList.add('dark');\r\n }else{\r\n document.body.classList.remove('dark');\r\n }\r\n let tap_to_top = {display: 'none'}\r\n\r\n return (\r\n \r\n this.openSetting()}>\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n this.closeSetting()}>\r\n
\r\n \r\n
\r\n this.closeSetting()}>\r\n
\r\n \r\n Back\r\n
\r\n \r\n
\r\n \r\n
\r\n layout
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Fashion
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n new\r\n
\r\n \r\n
\r\n furniture
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n new\r\n
\r\n \r\n
\r\n kids
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n new\r\n
\r\n \r\n
\r\n pets
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n new\r\n
\r\n \r\n
\r\n vegetables
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n new\r\n
\r\n \r\n
\r\n watch
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n new\r\n
\r\n \r\n
\r\n beauty
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n new\r\n
\r\n \r\n
\r\n electronics
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n shop
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n left sidebar
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n right sidebar
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n no sidebar
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n metro
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n full width
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n product
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n left sidebar
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n right sidebar
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n no sidebar
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n col left
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n col right
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n accordian
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n column
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n left image
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n right image
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n vertical
\r\n\r\n Preview\r\n \r\n
\r\n \r\n
\r\n color option
\r\n\r\n
\r\n - \r\n
- this.changeColor(e, 'color1')}> \r\n
- this.changeColor(e, 'color2')}> \r\n
- this.changeColor(e, 'color3')}> \r\n
- this.changeColor(e, 'color4')}> \r\n
- this.changeColor(e, 'color5')}> \r\n
- this.changeColor(e, 'color6')}> \r\n
- this.changeColor(e, 'color7')}> \r\n
- this.changeColor(e, 'color8')}> \r\n
- this.changeColor(e, 'color9')}> \r\n
- this.changeColor(e, 'color10')}> \r\n
- this.changeColor(e, 'color11')}> \r\n
- this.changeColor(e, 'color12')}> \r\n
- this.changeColor(e, 'color13')}> \r\n
- this.changeColor(e, 'color14')}> \r\n
- this.changeColor(e, 'color15')}> \r\n
- this.changeColor(e, 'color16')}> \r\n
- this.changeColor(e, 'color17')}> \r\n
- this.changeColor(e, 'color18')}> \r\n
\r\n
\r\n RTL
\r\n\r\n
\r\n - \r\n
- \r\n this.ChangeRtl(this.state.divName)}>\r\n {this.state.divName}\r\n \r\n \r\n
\r\n \r\n purchase Multikart now!\r\n \r\n 
Multikart Angular\r\n \r\n ![\"\"](\"\")
Multikart HTML\r\n \r\n 
Multikart Shopify\r\n
\r\n Multikart Angular\r\n \r\n Multikart Shopify\r\n \r\n
\r\n \r\n this.changeThemeLayout()}\r\n >{this.state.themeLayout?'Light':'Dark'}
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n Филаделфија \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default Electronic;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom'\r\n\r\nclass Breadcrumb extends Component {\r\n render (){\r\n const {title, parent} = this.props;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {/* 
\r\n
\r\n заштеди 30%
\r\nФрижидер
*/}\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {/* */}\r\n 
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {/* */}\r\n 
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {/* */}\r\n 
\r\n\r\n
\r\n \r\n {/*About Section*/}\r\n {/* \r\n */}\r\n {/*About Section End*/}\r\n\r\n {/*Product slider*/}\r\n
\r\n \r\n \r\n
\r\n 
\r\n 
\r\n 
\r\n \r\n
\r\n\r\n {/* \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Breadcrumb;","import React, {Component} from 'react';\r\nimport Slider from 'react-slick';\r\nimport {connect} from 'react-redux';\r\nimport {Link} from 'react-router-dom'\r\n\r\nimport {getBestSeller} from \"../../services\";\r\n\r\n\r\nclass NewProduct extends Component {\r\n render (){\r\n const {items, symbol} = this.props;\r\n\r\n var arrays = [];\r\n while (items.length > 0) {\r\n arrays.push(items.splice(0, 3));\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {title}
\r\n\r\n \r\n
\r\n \r\n \r\n {arrays.map((products, index) =>\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nfunction mapStateToProps(state) {\r\n return {\r\n items: getBestSeller(state.data.products),\r\n symbol: state.data.symbol\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, null)(NewProduct);\r\n","import React, {Component} from 'react';\r\nimport { connect } from 'react-redux'\r\nimport InputRange from 'react-input-range';\r\nimport 'react-input-range/lib/css/index.css';\r\nimport { SlideToggle } from 'react-slide-toggle';\r\n\r\n\r\nimport {getBrands, getColors, getMinMaxPrice} from '../../../services';\r\nimport {filterBrand, filterColor, filterPrice} from '../../../actions'\r\n\r\nclass Filter extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n openFilter: false,\r\n value: {min: 1, max: 100000}\r\n }\r\n this.filterPrice.bind(this)\r\n }\r\n\r\n closeFilter = () => {\r\n document.querySelector(\".collection-filter\").style = \"left: -365px\";\r\n }\r\n componentDidMount(){\r\n }\r\n clickBrandHendle(event, brands) {\r\n\r\n var index = brands.indexOf(event.target.value);\r\n if (event.target.checked)\r\n brands.push(event.target.value); // push in array checked value\r\n else\r\n brands.splice(index, 1); // removed in array unchecked value\r\n\r\n this.props.filterBrand(brands);\r\n }\r\n filterPrice = (val) => {\r\n \r\n this.setState({\r\n value: val.value\r\n })\r\n let keyword = ''\r\n if(this.props.history.location.search)\r\n keyword = this.props.history.location.search.toLowerCase().split('keyword=')[1]\r\n let keywordString = ''\r\n if(keyword)\r\n keywordString = '&keyword='+ keyword\r\n this.props.history.push(this.props.history.location.pathname+'?price='+val.value.min+'-'+val.value.max + keywordString)\r\n }\r\n\r\n colorHandle(event, color){\r\n var elems = document.querySelectorAll(\".color-selector ul li\");\r\n [].forEach.call(elems, function(el) {\r\n el.classList.remove(\"active\");\r\n });\r\n event.target.classList.add('active');\r\n this.props.filterColor(color)\r\n }\r\n\r\n render (){\r\n const filteredBrands = this.props.filters.brand;\r\n //console.log(this.props.brands);\r\n return (\r\n new product
\r\n\r\n {products.map((product, i) =>\r\n
\r\n )}\r\n \r\n 
\r\n
\r\n )}\r\n \r\n {symbol}{(product.price*product.discount/100)}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {product.name}
\r\n{symbol}{(product.price*product.discount/100)}\r\n {symbol}{product.price}
\r\n \r\n {/*brand filter start*/}\r\n \r\n {({onToggle, setCollapsibleElement}) => (\r\n */}\r\n\r\n {/*color filter start here*/}\r\n {/* \r\n {({onToggle, setCollapsibleElement}) => (\r\n */}\r\n {/*price filter start here */}\r\n \r\n {({onToggle, setCollapsibleElement}) => (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nconst mapStateToProps = state => ({\r\n brands: getBrands(state.data.products),\r\n colors: getColors(state.data.products),\r\n prices: getMinMaxPrice(state.data.products),\r\n filters: state.filters\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n { filterBrand, filterColor, filterPrice }\r\n)(Filter);","import React, {Component} from 'react';\r\nimport { connect } from 'react-redux'\r\nimport {filterSort} from '../../../actions'\r\nimport {getVisibleproducts} from '../../../services';\r\n\r\nclass FilterBar extends Component {\r\n\r\n //List Layout View\r\n listLayout(){\r\n document.querySelector(\".collection-grid-view\").style = \"opacity:0\";\r\n document.querySelector(\".product-wrapper-grid\").style = \"opacity:0.2\";\r\n document.querySelector(\".product-wrapper-grid\").classList.add(\"list-view\");\r\n var elems = document.querySelector(\".infinite-scroll-component .row\").childNodes;\r\n [].forEach.call(elems, function(el) {\r\n el.className = '';\r\n el.classList.add('col-lg-12');\r\n });\r\n setTimeout(function(){\r\n document.querySelector(\".product-wrapper-grid\").style = \"opacity: 1\";\r\n }, 500);\r\n }\r\n\r\n //Grid Layout View\r\n gridLayout(){\r\n document.querySelector(\".collection-grid-view\").style = \"opacity:1\";\r\n document.querySelector(\".product-wrapper-grid\").classList.remove(\"list-view\");\r\n var elems = document.querySelector(\".infinite-scroll-component .row\").childNodes;\r\n [].forEach.call(elems, function(el) {\r\n el.className = '';\r\n el.classList.add('col-lg-3');\r\n });\r\n }\r\n\r\n // Layout Column View\r\n LayoutView = (colSize) =>{\r\n if(!document.querySelector(\".product-wrapper-grid\").classList.contains(\"list-view\")) {\r\n var elems = document.querySelector(\".infinite-scroll-component .row\").childNodes;\r\n [].forEach.call(elems, function(el) {\r\n el.className = '';\r\n el.classList.add('col-lg-'+colSize);\r\n });\r\n }\r\n\r\n this.props.onLayoutViewClicked(colSize);\r\n }\r\n\r\n render (){\r\n return (\r\n \r\n this.closeFilter(e)} >\r\n back\r\n \r\n
\r\n {/* \r\n
\r\n )}\r\n brand
\r\n\r\n
\r\n \r\n {this.props.brands.map((brand, index) => {\r\n return (\r\n
\r\n \r\n this.clickBrandHendle(e,filteredBrands)} value={brand} defaultChecked={filteredBrands.includes(brand)? true : false} className=\"custom-control-input\" id={brand} />\r\n \r\n
)\r\n })}\r\n \r\n
\r\n )}\r\n colors
\r\n\r\n
\r\n \r\n
\r\n - \r\n {this.props.colors.map((color, index) => {\r\n return (\r\n
- this.colorHandle(e, color)} key={index}> )\r\n })}\r\n
\r\n
\r\n )}\r\n price
\r\n\r\n
\r\n \r\n
\r\n \r\n this.filterPrice({ value })} />\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n products: getVisibleproducts(state.data, state.filters),\r\n filters: state.filters\r\n})\r\n\r\nexport default connect(mapStateToProps, {filterSort})(FilterBar);","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { Link } from 'react-router-dom';\r\nimport InfiniteScroll from 'react-infinite-scroll-component';\r\nimport axios from 'axios'\r\n\r\nimport { getTotal, getCartProducts } from '../../../reducers'\r\nimport { addToCart, addToWishlist, addToCompare } from '../../../actions'\r\nimport { getVisibleproducts } from '../../../services';\r\nimport ProductListItem from \"./product-list-item\";\r\nimport ProductListItemTwo from \"./product-style-two\";\r\nimport url from '../../../constants/global'\r\nclass ProductListing extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n\r\n this.state = {\r\n limit: 20, hasMoreItems: true,\r\n\r\n products: []\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n console.log('mounted');\r\n var url = new URL('http://www.example.com/t.html' + this.props.history.location.search);\r\n var c = url.searchParams.get(\"price\");\r\n console.log(c);\r\n if (this.props.category != 'search')\r\n this.fetchMoreItems(this.props.category,url.searchParams.get(\"page\"), url.searchParams.get(\"price\"));\r\n else\r\n this.searchItems(this.props.history.location.search.split('=')[1])\r\n // this.props.history.listen((location, action) => {\r\n // console.log('object');\r\n // this.fetchMoreItems();\r\n // })\r\n\r\n this.unlisten = this.props.history.listen((location, action) => {\r\n // this.props.changePage(1)\r\n let params = new URLSearchParams(location.search.split('?')[1]);\r\n if (params.get('keyword') != null)\r\n this.searchItems(params.get('keyword'), params.get('page'), params.get('price'))\r\n else\r\n this.fetchMoreItems(location.pathname.split('/')[2], params.get('page'), params.get('price'));\r\n\r\n })\r\n }\r\n componentWillUnmount() {\r\n this.unlisten();\r\n }\r\n searchItems = async (keyword, page, price) => {\r\n console.log(price);\r\n console.log('search');\r\n if (page == undefined)\r\n page = 1\r\n if (price == undefined)\r\n price = '1-100000'\r\n\r\n let data = await axios.get(\r\n url + '/products/search?keyword=' + keyword + '&page=' + page + '&price=' + price\r\n )\r\n console.log(data.data);\r\n this.props.changeResCount(data.data.count);\r\n this.setState({\r\n products: data.data.data,\r\n\r\n })\r\n }\r\n fetchMoreItems = async (category, page, price) => {\r\n // console.log(category.toLowerCase().replace('-*-','/').replace(new RegExp(\"-\", \"g\"), '+'));\r\n if (page == undefined)\r\n page = 1\r\n if (category == undefined)\r\n return\r\n if (price == undefined)\r\n price = '1-100000'\r\n let data = await axios.get(\r\n url + '/products?page=' + page + '&category=' + category.toLowerCase().replace('-*-','+/+').replace(new RegExp(\"-\", \"g\"), '+') + '&price=' + price)\r\n console.log('fetch',data.data);\r\n console.log(data.data);\r\n this.props.changeResCount(data.data.count);\r\n this.setState({\r\n products: data.data.results\r\n })\r\n setTimeout(() => {\r\n this.setState({\r\n limit: this.state.limit + 15\r\n });\r\n }, 3000);\r\n }\r\n\r\n render() {\r\n const { products, addToCart, symbol, addToWishlist, addToCompare } = this.props;\r\n return (\r\n \r\n
\r\n Showing Products 1-{this.props.products.length} Result
\r\n\r\n
\r\n - \r\n
\r\n
\r\n - \r\n
- \r\n
- \r\n
- \r\n
- \r\n
\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\nconst mapStateToProps = (state) => ({\r\n products: getVisibleproducts(state.data, state.filters),\r\n symbol: state.data.symbol,\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps, { addToCart, addToWishlist, addToCompare }\r\n)(ProductListing)","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductListItem extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n open: false,\r\n stock: 'InStock',\r\n quantity: 1,\r\n image: ''\r\n }\r\n }\r\n\r\n onOpenModal = () => {\r\n this.setState({ open: true });\r\n };\r\n\r\n onCloseModal = () => {\r\n this.setState({ open: false });\r\n };\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n\r\n minusQty = () => {\r\n if(this.state.quantity > 1) {\r\n this.setState({stock: 'InStock'})\r\n this.setState({quantity: this.state.quantity - 1})\r\n }\r\n }\r\n\r\n plusQty = () => {\r\n if(this.props.product.stock >= this.state.quantity) {\r\n this.setState({quantity: this.state.quantity+1})\r\n }else{\r\n this.setState({stock: 'Out of Stock !'})\r\n }\r\n }\r\n changeQty = (e) => {\r\n this.setState({ quantity: parseInt(e.target.value) })\r\n }\r\n\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n const {open} = this.state;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n {products.length > 0 ?\r\n\r\n
\r\n \r\n {this.state.products.slice(0, this.state.limit).map((product, index) =>\r\n
\r\n :\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index} />\r\n
)\r\n }\r\n \r\n
\r\n }\r\n \r\n 
\r\n
\r\n \r\n Sorry! Couldn't find the product you were looking For!!!
\r\nPlease check if you have misspelt something or try searching with other words.
\r\n Продолжи со Гледање\r\n\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductListItem;","import React, {Component} from 'react';\r\nimport {Helmet} from 'react-helmet'\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\nimport NewProduct from \"../common/new-product\";\r\nimport Filter from \"./common/filter\";\r\nimport FilterBar from \"./common/filter-bar\";\r\nimport ProductListing from \"./common/product-listing\";\r\nimport StickyBox from \"react-sticky-box\";\r\nimport { withRouter } from 'react-router-dom';\r\nimport Pagination from \"react-js-pagination\";\r\nimport '../collection/common/collection.scss'\r\nimport {changePageNum} from '../../actions/index'\r\nclass CollectionLeftSidebar extends Component {\r\n\r\n \r\n constructor (props) {\r\n super (props)\r\n this.state = {\r\n count: 1\r\n }\r\n \r\n }\r\n \r\n state = {\r\n layoutColumns:3,\r\n rerender: true,\r\n activePage: 1\r\n }\r\n LayoutViewClicked(colums) {\r\n this.setState({\r\n layoutColumns:colums\r\n })\r\n }\r\n openFilter = () => {\r\n document.querySelector(\".collection-filter\").style = \"left: -15px\";\r\n }\r\n changeResCount = (count) => {\r\n console.log('object 123');\r\n console.log(count);\r\n if(count == 0)\r\n count = 1;\r\n this.setState({\r\n count: count\r\n })\r\n }\r\n handlePageChange = (pagNumber) =>{\r\n console.log('hereeeee');\r\n this.setState({\r\n activePage: pagNumber\r\n })\r\n let params = new URLSearchParams(this.props.location.search.split('?')[1]);\r\n if(params.get(\"page\") == null )\r\n params.append(\"page\",pagNumber)\r\n else\r\n params.set(\"page\",pagNumber) \r\n this.props.history.push(this.props.location.pathname+'?'+params.toString())\r\n }\r\n \r\n render (){\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {product.variants?\r\n - \r\n {product.variants.map((vari, i) =>\r\n
- \r\n \r\n
this.onClickHandle(vari.images)} />\r\n \r\n
)\r\n }\r\n
\r\n
\r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
\r\n {product.variants?\r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}
\r\n {product.variants?\r\n - \r\n {product.variants.map((vari, i) => {\r\n return (\r\n
- this.onClickHandle(vari.images)}> )\r\n })}\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
\r\n {product.variants?\r\n
\r\n {product.name}
\r\n{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}\r\n
\r\n {product.variants?\r\n - \r\n {product.variants.map((vari, i) =>\r\n
- this.onClickHandle(vari.images)}> )\r\n }\r\n
\r\n
\r\n product details
\r\n{product.shortDetails}
\r\n\r\n {product.size?\r\n
\r\n \r\n
:''}\r\n - \r\n {product.size.map((size, i) => {\r\n return
- {size} \r\n })}\r\n
quantity
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n view detail\r\n
\r\n \r\n {/*SEO Support*/}\r\n \r\n Филаделфија \r\n \r\n \r\n {/*SEO Support End */}\r\n\r\n {/* */}\r\n\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default CollectionLeftSidebar;","import React, {Component} from 'react';\r\nimport { withTranslate } from 'react-redux-multilingual'\r\n\r\n// Custom Components\r\nimport HeaderFour from './common/headers/header-four';\r\n\r\nimport FooterOne from \"./common/footers/footer-one\";\r\n\r\n// ThemeSettings\r\nimport ThemeSettings from \"./common/theme-settings\"\r\n\r\n\r\nimport './landing.scss'\r\nclass App extends Component {\r\n constructor(props){\r\n super(props);\r\n }\r\n componentDidMount(){\r\n console.log('object');\r\n console.log(this.props);\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {/*
\r\n */}\r\n {/* 
\r\n
*/}\r\n \r\n \r\n
\r\n fashion
\r\nLorem Ipsum is simply dummy text of the printing and typesetting industry.
\r\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
\r\n\r\n {/* \r\n
\r\n \r\n
*/}\r\n\r\n {/*Products Listing Component*/}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Filter \r\n
\r\n \r\n
\r\n \r\n this.LayoutViewClicked(colmuns)}/>\r\n
\r\n \r\n \r\n\r\n {/*
\r\n );\r\n }\r\n}\r\n\r\nexport default withTranslate(App);\r\n","import React, {Component} from 'react';\r\nimport {Helmet} from 'react-helmet'\r\nimport { connect } from 'react-redux'\r\nimport {Link} from 'react-router-dom'\r\n\r\n\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\nimport {getCartTotal} from \"../../services\";\r\nimport {removeFromCart, incrementQty, decrementQty} from '../../actions'\r\n\r\nclass cartComponent extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n }\r\n\r\n render (){\r\n\r\n const {cartItems, symbol, total} = this.props;\r\n return (\r\n \r\n {/*SEO Support*/}\r\n \r\n Филаделфија \r\n \r\n \r\n {/*SEO Support End */}\r\n\r\n {/* \r\n \r\n :\r\n \r\n \r\n }\r\n
\r\n )\r\n }\r\n}\r\nconst mapStateToProps = (state) => ({\r\n cartItems: state.cartList.cart,\r\n symbol: state.data.symbol,\r\n total: getCartTotal(state.cartList.cart)\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n {removeFromCart, incrementQty, decrementQty}\r\n)(cartComponent)","import React, {Component} from 'react';\r\nimport { connect } from 'react-redux'\r\nimport {Link} from 'react-router-dom'\r\nimport Slider from 'react-slick';\r\n\r\nimport Breadcrumb from '../common/breadcrumb';\r\nimport {removeFromCompare, addToCart} from '../../actions'\r\n\r\nclass Compare extends Component {\r\n\r\n changeQty = (e) => {\r\n this.setState({ quantity: parseInt(e.target.value) })\r\n }\r\n\r\n render (){\r\n var settings = {\r\n infinite: false,\r\n speed: 300,\r\n slidesToShow: 4,\r\n slidesToScroll: 1,\r\n // autoplay: true,\r\n // autoplaySpeed: 3000,\r\n responsive: [\r\n {\r\n breakpoint: 1200,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 3\r\n }\r\n },\r\n {\r\n breakpoint: 991,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 2\r\n }\r\n },\r\n {\r\n breakpoint: 586,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1\r\n }\r\n }\r\n ]\r\n }\r\n\r\n const {Items, symbol, addToCart, removeFromCompare} = this.props;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n | \r\n | Продукт | \r\nЦена | \r\nКоличина | \r\nИзбриши | \r\nВкупно | \r\n
|---|---|---|---|---|---|
| \r\n \r\n | \r\n {item.productname}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n { 'ден' }{ (item.price) }\r\n\r\n \r\n \r\n this.props.removeFromCart(item)}>\r\n \r\n \r\n\r\n | \r\n {(item.saleprice ? item.saleprice : item.price) \r\n .toLocaleString('en-US', {\r\n style: 'currency',\r\n currency: 'MKD',\r\n }).replace('MKD','')\r\n }{' Ден.'} | \r\n \r\n \r\n {(item.qty >= item.stock)? 'out of Stock' : ''}\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n | \r\n \r\n this.props.removeFromCart(item)}>\r\n \r\n \r\n | \r\n{'ден.'}{( (item.saleprice ? item.saleprice : item.price) * item.qty)\r\n .toLocaleString('en-US', {\r\n style: 'currency',\r\n currency: 'MKD',\r\n }).replace('MKD','')\r\n } | \r\n
| total price : | \r\n{'ден.'} {(total)\r\n .toLocaleString('en-US', {\r\n style: 'currency',\r\n currency: 'MKD',\r\n }).replace('MKD','')} | \r\n
\r\n
\r\n \r\n Продолжи со Гледање \r\n
\r\n \r\n Порачај\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n Кошничката е празна\r\n
\r\n {/*Explore more shortlist some items.
*/}\r\n\r\n \r\n \r\n :\r\n \r\n \r\n }\r\n
\r\n )\r\n }\r\n}\r\nconst mapStateToProps = (state) => ({\r\n Items: state.compare.items,\r\n symbol: state.data.symbol,\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n {removeFromCompare, addToCart}\r\n)(Compare)","import React, {Component} from 'react';\r\nimport { connect } from 'react-redux'\r\nimport {Link} from 'react-router-dom'\r\n\r\n\r\nimport Breadcrumb from '../common/breadcrumb';\r\nimport {addToCartAndRemoveWishlist, removeFromWishlist} from '../../actions'\r\n\r\nclass wishList extends Component {\r\n\r\n\r\n changeQty = (e) => {\r\n this.setState({ quantity: parseInt(e.target.value) })\r\n }\r\n\r\n render (){\r\n\r\n const {Items, symbol} = this.props;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {Items.map((item,index) =>\r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n 
\r\n {symbol}{(item.price*item.discount/100)}\r\n
\r\n
\r\n {item.name}
\r\n{symbol}{(item.price*item.discount/100)}\r\n {symbol}{item.price}
\r\n \r\n
\r\n \r\n
\r\n discription
\r\n\r\n
\r\n {item.shortDetails}
\r\n\r\n
\r\n \r\n
\r\n Brand Name
\r\n\r\n
\r\n {item.tags}
\r\n\r\n
\r\n \r\n
\r\n size
\r\n\r\n
\r\n {item.size}
\r\n\r\n
\r\n \r\n
\r\n color
\r\n\r\n
\r\n {item.colors}
\r\n\r\n
\r\n \r\n
\r\n availability
\r\n\r\n
\r\n In stock
\r\n\r\n addToCart(item, 1)}>add to cart\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n Compare List is Empty\r\n
\r\nExplore more shortlist some items.
\r\n\r\n \r\n \r\n :\r\n \r\n \r\n }\r\n
\r\n )\r\n }\r\n}\r\nconst mapStateToProps = (state) => ({\r\n Items: state.wishlist.list,\r\n symbol: state.data.symbol,\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n {addToCartAndRemoveWishlist, removeFromWishlist}\r\n)(wishList)","import React, { Component } from 'react';\r\nimport { Helmet } from 'react-helmet'\r\nimport { connect } from 'react-redux'\r\nimport SimpleReactValidator from 'simple-react-validator';\r\nimport axios from 'axios'\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\nimport { removeFromWishlist } from '../../actions'\r\nimport { getCartTotal } from \"../../services\";\r\nimport url from '../../constants/global'\r\nclass checkOut extends Component {\r\n\r\n constructor(props) {\r\n\r\n super(props)\r\n\r\n this.state = {\r\n payment: 'stripe',\r\n first_name: '',\r\n last_name: '',\r\n phone: '',\r\n email: '',\r\n country: '',\r\n address: '',\r\n city: '',\r\n state: '',\r\n pincode: '',\r\n create_account: '',\r\n showErrorMessage: false\r\n }\r\n this.validator = new SimpleReactValidator();\r\n }\r\n componentDidMount() {\r\n\r\n }\r\n setStateFromInput = (event) => {\r\n var obj = {};\r\n obj[event.target.name] = event.target.value;\r\n this.setState(obj);\r\n\r\n }\r\n\r\n setStateFromCheckbox = (event) => {\r\n var obj = {};\r\n obj[event.target.name] = event.target.checked;\r\n this.setState(obj);\r\n\r\n if (!this.validator.fieldValid(event.target.name)) {\r\n this.validator.showMessages();\r\n }\r\n }\r\n\r\n checkhandle(value) {\r\n this.setState({\r\n payment: value\r\n })\r\n }\r\n checkOutOrder = () => {\r\n if (this.state.first_name == '' || this.state.last_name == '' || this.state.address == '' || this.state.email == '' || this.state.city == '') {\r\n this.setState({\r\n showErrorMessage: true\r\n })\r\n }\r\n else {\r\n let cartItems = []\r\n let qty = []\r\n this.props.cartItems.map((el) => {\r\n cartItems.push(el.id)\r\n qty.push(el.qty)\r\n })\r\n let data = {\r\n customername: this.state.first_name,\r\n customerlastname: this.state.last_name,\r\n address: this.state.address + ', '+this.state.city,\r\n email: this.state.email,\r\n productid: cartItems,\r\n quantity: qty,\r\n phone: this.state.phone,\r\n city: this.state.city\r\n }\r\n\r\n axios.post(url + '/products/cart', data).then((res) => {\r\n if (res.data.success) {\r\n this.props.history.push('/order-success');\r\n }\r\n })\r\n }\r\n }\r\n\r\n\r\n render() {\r\n const { cartItems, symbol, total } = this.props;\r\n\r\n // Paypal Integration\r\n const onSuccess = (payment) => {\r\n console.log(\"The payment was succeeded!\", payment);\r\n this.props.history.push({\r\n pathname: '/order-success',\r\n state: { payment: payment, items: cartItems, orderTotal: total, symbol: symbol }\r\n })\r\n\r\n }\r\n\r\n const onCancel = (data) => {\r\n console.log('The payment was cancelled!', data);\r\n }\r\n\r\n const onError = (err) => {\r\n console.log(\"Error!\", err);\r\n }\r\n\r\n const client = {\r\n sandbox: 'AZ4S98zFa01vym7NVeo_qthZyOnBhtNvQDsjhaZSMH-2_Y9IAJFbSD3HPueErYqN8Sa8WYRbjP7wWtd_',\r\n production: 'AZ4S98zFa01vym7NVeo_qthZyOnBhtNvQDsjhaZSMH-2_Y9IAJFbSD3HPueErYqN8Sa8WYRbjP7wWtd_',\r\n }\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n | image | \r\nproduct name | \r\nprice | \r\navailability | \r\naction | \r\n
|---|---|---|---|---|
| \r\n \r\n | \r\n {item.name}\r\n \r\n \r\n \r\n \r\n in stock \r\n\r\n \r\n {symbol}{item.price-(item.price*item.discount/100)}\r\n \r\n | \r\n {symbol}{item.price-(item.price*item.discount/100)}\r\n | \r\n \r\n in stock \r\n | \r\n \r\n this.props.removeFromWishlist(item)}>\r\n \r\n \r\n this.props.addToCartAndRemoveWishlist(item, 1)}>\r\n \r\n \r\n | \r\n
\r\n
\r\n \r\n Продолжи со Гледање\r\n Порачај\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n WhishList is Empty\r\n
\r\nExplore more shortlist some items.
\r\n\r\n\r\n {/*SEO Support*/}\r\n \r\n Филаделфија \r\n \r\n \r\n {/*SEO Support End */}\r\n\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\nconst mapStateToProps = (state) => ({\r\n cartItems: state.cartList.cart,\r\n symbol: state.data.symbol,\r\n total: getCartTotal(state.cartList.cart)\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n { removeFromWishlist }\r\n)(checkOut)","import React, { Component } from 'react';\r\nimport './checkout.scss'\r\n\r\nclass orderSuccess extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n\r\n }\r\n\r\n render() {\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n\r\n
\r\n\r\n )\r\n }\r\n}\r\n\r\nexport default orderSuccess","import React, {Component} from 'react';\r\nimport Slider from 'react-slick';\r\n\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\n\r\nclass PageNotFound extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n\r\n }\r\n\r\n render (){\r\n\r\n return (\r\n \r\n
\r\n Успешно направена Нарачка
\r\n\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default PageNotFound","import React, {Component} from 'react';\r\n\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\n\r\nclass Login extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n\r\n }\r\n\r\n render (){\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {/*Login section*/}\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Login","import React, {Component} from 'react';\r\n\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\n\r\nclass Register extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n\r\n }\r\n\r\n render (){\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Login
\r\n\r\n \r\n
\r\n \r\n
\r\n New Customer
\r\n\r\n
\r\n Create A Account
\r\nSign up for a free account at our store. Registration is quick and easy. It\r\n allows you to be able to order from our shop. To start shopping click\r\n register.
\r\n Create an Account\r\n\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Register","import React, {Component} from 'react';\r\n\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\n\r\nclass Search extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n\r\n }\r\n\r\n render (){\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n create account
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {/*Search section*/}\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Search","import React, {Component} from 'react';\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\n\r\nclass Collection extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n }\r\n\r\n render (){\r\n\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {/*Collection section*/}\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Collection","import React, {Component} from 'react';\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\n\r\nclass ForgetPassword extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n }\r\n\r\n render (){\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n (20 products)
\r\nfashion
\r\nLorem Ipsum is simply dummy text of the printing and typesetting\r\n industry....
\r\n shop now !\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n (20 products)
\r\nfashion
\r\nLorem Ipsum is simply dummy text of the printing and typesetting\r\n industry....
\r\n shop now !\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n (20 products)
\r\nfashion
\r\nLorem Ipsum is simply dummy text of the printing and typesetting\r\n industry....
\r\n shop now !\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n (20 products)
\r\nfashion
\r\nLorem Ipsum is simply dummy text of the printing and typesetting\r\n industry....
\r\n shop now !\r\n\r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n (20 products)
\r\nfashion
\r\nLorem Ipsum is simply dummy text of the printing and typesetting\r\n industry....
\r\n shop now !\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n (20 products)
\r\nfashion
\r\nLorem Ipsum is simply dummy text of the printing and typesetting\r\n industry....
\r\n shop now !\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n (20 products)
\r\nfashion
\r\nLorem Ipsum is simply dummy text of the printing and typesetting\r\n industry....
\r\n shop now !\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n (20 products)
\r\nfashion
\r\nLorem Ipsum is simply dummy text of the printing and typesetting\r\n industry....
\r\n shop now !\r\n\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ForgetPassword","import React, {Component} from 'react';\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\n\r\nclass Contact extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n }\r\n\r\n render (){\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Forget Your Password
\r\n \r\n\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Contact","import React, {Component} from 'react';\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\n\r\nclass Dashboard extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n }\r\n\r\n render (){\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n - \r\n
- \r\n \r\n\r\n
\r\n Contact Us
\r\n\r\n\r\n+91 123 - 456 - 7890
\r\n+86 163 - 451 - 7894
\r\n \r\n - \r\n \r\n \r\n\r\n
Address
\r\n\r\n\r\nABC Complex,Near xyz, New York
\r\nUSA 123456
\r\n \r\n - \r\n \r\n\r\n
\r\n Address
\r\n\r\n\r\nSupport@Shopcart.com
\r\ninfo@shopcart.com
\r\n \r\n - \r\n \r\n \r\n\r\n
Fax
\r\n\r\n\r\nSupport@Shopcart.com
\r\ninfo@shopcart.com
\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {/*Dashboard section*/}\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Dashboard","import React, {Component} from 'react';\r\nimport Breadcrumb from \"../common/breadcrumb\";\r\n\r\nclass Faq extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n }\r\n\r\n render (){\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n my account\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n back\r\n \r\n
\r\n \r\n
\r\n - \r\n
- Account Info \r\n
- Address Book \r\n
- My Orders \r\n
- My Wishlist \r\n
- Newsletter \r\n
- My Account \r\n
- Change Password \r\n
- Log Out \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n My Dashboard
\r\n\r\n
\r\n Hello, MARK JECNO !
\r\nFrom your My Account Dashboard you have the ability to view a snapshot of\r\n your recent account activity and update your account information. Select\r\n a link below to view or edit information.
\r\n\r\n
\r\n \r\n
\r\n Account Information
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Contact Information
\r\n Edit\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Newsletters
\r\n Edit\r\n\r\n
\r\n \r\n You are currently not subscribed to any newsletter.\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n Address Book
\r\n Manage Addresses\r\n\r\n
\r\n \r\n
\r\n Edit Address\r\n \r\n
\r\n Default Billing Address
\r\n \r\n You have not set a default billing address.\r\n Edit Address\r\n \r\n
\r\n
\r\n Edit Address\r\n \r\n
\r\n Default Shipping Address
\r\n \r\n You have not set a default shipping address.\r\n Edit Address\r\n \r\n
\r\n \r\n \r\n \r\n {/*Dashboard section*/}\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Faq","import React, {Component} from 'react';\r\n\r\nimport Breadcrumb from \"../../common/breadcrumb\";\r\n\r\nclass ElementTitle extends Component {\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n
\r\n \r\n
\r\n it look like readable English. Many desktop publishing packages and\r\n web page editors now use Lorem Ipsum as their default model text,\r\n and a search for 'lorem ipsum' will uncover many web sites still in\r\n their infancy. Various versions have evolved over the years,All the\r\n Lorem Ipsum generators on the Internet tend to repeat predefined\r\n chunks as necessary, making this the first true generator on the\r\n Internet. It uses a dictionary of over 200 Latin words, combined\r\n with a handful of model sentence structures
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n \r\n
\r\n it look like readable English. Many desktop publishing packages and\r\n web page editors now use Lorem Ipsum as their default model text,\r\n and a search for 'lorem ipsum' will uncover many web sites still in\r\n their infancy. Various versions have evolved over the years,All the\r\n Lorem Ipsum generators on the Internet tend to repeat predefined\r\n chunks as necessary, making this the first true generator on the\r\n Internet. It uses a dictionary of over 200 Latin words, combined\r\n with a handful of model sentence structures
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n \r\n
\r\n it look like readable English. Many desktop publishing packages and\r\n web page editors now use Lorem Ipsum as their default model text,\r\n and a search for 'lorem ipsum' will uncover many web sites still in\r\n their infancy. Various versions have evolved over the years,All the\r\n Lorem Ipsum generators on the Internet tend to repeat predefined\r\n chunks as necessary, making this the first true generator on the\r\n Internet. It uses a dictionary of over 200 Latin words, combined\r\n with a handful of model sentence structures
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n \r\n
\r\n it look like readable English. Many desktop publishing packages and\r\n web page editors now use Lorem Ipsum as their default model text,\r\n and a search for 'lorem ipsum' will uncover many web sites still in\r\n their infancy. Various versions have evolved over the years,All the\r\n Lorem Ipsum generators on the Internet tend to repeat predefined\r\n chunks as necessary, making this the first true generator on the\r\n Internet. It uses a dictionary of over 200 Latin words, combined\r\n with a handful of model sentence structures
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n \r\n
\r\n it look like readable English. Many desktop publishing packages and\r\n web page editors now use Lorem Ipsum as their default model text,\r\n and a search for 'lorem ipsum' will uncover many web sites still in\r\n their infancy. Various versions have evolved over the years,All the\r\n Lorem Ipsum generators on the Internet tend to repeat predefined\r\n chunks as necessary, making this the first true generator on the\r\n Internet. It uses a dictionary of over 200 Latin words, combined\r\n with a handful of model sentence structures
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n \r\n
\r\n it look like readable English. Many desktop publishing packages and\r\n web page editors now use Lorem Ipsum as their default model text,\r\n and a search for 'lorem ipsum' will uncover many web sites still in\r\n their infancy. Various versions have evolved over the years,All the\r\n Lorem Ipsum generators on the Internet tend to repeat predefined\r\n chunks as necessary, making this the first true generator on the\r\n Internet. It uses a dictionary of over 200 Latin words, combined\r\n with a handful of model sentence structures
\r\n\r\n \r\n\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default ElementTitle;","import React, {Component} from 'react';\r\n\r\n//import Custom Components\r\nimport Breadcrumb from \"../../common/breadcrumb\";\r\n\r\nclass ElementBanner extends Component {\r\n render() {\r\n return (\r\n \r\n
\r\n\r\n recent story
\r\ntrending products
\r\n\r\n
\r\n\r\n recent story
\r\ntrending products
\r\n\r\n
\r\n\r\n recent story
\r\ntrending products
\r\n \r\n\r\n
\r\n\r\n trending products
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n recent story
\r\ntrending products
\r\n\r\n
\r\n \r\n\r\n {/*Two Banner*/}\r\n \r\n \r\n {/*Two Banner End*/}\r\n\r\n {/*Three Banner*/}\r\n \r\n \r\n {/*Three Banner End*/}\r\n\r\n {/*Four Banner*/}\r\n \r\n \r\n {/*Four Banner End*/}\r\n\r\n {/*Absolute Banner*/}\r\n \r\n \r\n {/*Absolute Banner End*/}\r\n\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default ElementBanner;","import React, {Component} from 'react';\r\nimport Slider from \"react-slick\"\r\n\r\nimport Breadcrumb from \"../../common/breadcrumb\";\r\n\r\nclass ElementSlider extends Component {\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n 
\r\n 
\r\n \r\n \r\n
\r\n 
\r\n 
\r\n 
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n 
\r\n 
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n 
\r\n 
\r\n 
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Classes
\r\n\r\n
\r\n Add class with collection-banner
\r\ncontain-align - .text-left, .text-center, .text-right
\r\ncontain-position - .p-left, .p-center, .p-right
\r\n\r\n \r\n\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default ElementSlider;","import React, {Component} from 'react';\r\nimport Slider from \"react-slick\"\r\n\r\nimport Breadcrumb from \"../../common/breadcrumb\";\r\nimport { Slider6, Slider4} from \"../../../services/script\"\r\n\r\nclass ElementCategory extends Component {\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Classes
\r\n\r\n
\r\n For Parallax Image - .parallax
\r\ncontain-align - .text-left, .text-center, .text-right
\r\ncontain-position - .p-left, .p-center, .p-right
\r\n\r\n \r\n\r\n {/*Category One*/}\r\n \r\n \r\n\r\n {/*Category Three*/}\r\n \r\n \r\n\r\n {/*Category Six*/}\r\n \r\n \r\n\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default ElementCategory;","import React, {Component} from 'react';\r\n\r\nimport Breadcrumb from \"../../common/breadcrumb\";\r\nimport {\r\n svgoffer,\r\n svgFreeShipping,\r\n svgservice,\r\n svgpayment\r\n} from \"../../../services/script\"\r\n\r\nclass ElementService extends Component {\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n\r\n {/*Category Two*/}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n 
\r\n \r\n \r\n \r\n
\r\n sport shoes
\r\n \r\n\r\n \r\n
\r\n \r\n 
\r\n \r\n \r\n \r\n
\r\n casual shoes
\r\n \r\n\r\n \r\n
\r\n \r\n 
\r\n \r\n \r\n \r\n
\r\n formal shoes
\r\n \r\n\r\n \r\n
\r\n \r\n 
\r\n \r\n \r\n \r\n
\r\n flat
\r\n \r\n\r\n \r\n
\r\n \r\n 
\r\n \r\n \r\n \r\n
\r\n heels
\r\n \r\n\r\n \r\n
\r\n \r\n 
\r\n \r\n \r\n \r\n
\r\n boots
\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n casual shoes
\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n casual shoes
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n \r\n
\r\n men
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n \r\n
\r\n women
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n \r\n
\r\n kids
\r\n \r\n\r\n \r\n \r\n \r\n
\r\n\r\n {/*Category Four*/}\r\n \r\n \r\n
\r\n\r\n {/*Category Five*/}\r\n 
\r\n 
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n watch models
\r\n- \r\n
- d1 milano \r\n
- damaskeening \r\n
- diving watch \r\n
- dollar watch \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n calculator watch
\r\n- \r\n
- Shock-resistant watch \r\n
- Skeleton watch \r\n
- Slow watch \r\n
- Solar-powered watch \r\n
\r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n Antimagnetic watch
\r\n- \r\n
- Watchmaking conglomerates \r\n
- Breitling SA \r\n
- Casio watches \r\n
- Citizen Watch \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n History of watches
\r\n- \r\n
- Manufacture d'horlogerie \r\n
- Mechanical watch \r\n
- Microbrand watches \r\n
- MIL-W-46374 \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n watch models
\r\n- \r\n
- d1 milano \r\n
- damaskeening \r\n
- diving watch \r\n
- dollar watch \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n size 06
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n size 07
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n size 08
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n size 09
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n size 10
\r\n\r\n \r\n\r\n {/*Service One*/}\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default ElementService;","import React, {Component} from 'react';\r\nimport Slider from \"react-slick\";\r\n\r\nimport Breadcrumb from \"../../common/breadcrumb\";\r\nimport {Product4} from \"../../../services/script\";\r\n\r\nclass ElementRatio extends Component {\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n\r\n {/*Service Two*/}\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n free shipping
\r\nfree shipping world wide
\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n 24 X 7 service
\r\nonline service for new customer
\r\n\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n festival offer
\r\nnew online special festival offer
\r\n\r\n \r\n \r\n
\r\n\r\n {/*Service Three*/}\r\n \r\n
\r\n \r\n \r\n
\r\n free shipping
\r\nContrary to popular belief, Lorem Ipsum is not simply random text.
\r\n\r\n \r\n
\r\n 24 X 7 service
\r\nContrary to popular belief, Lorem Ipsum is not simply random text.
\r\n\r\n \r\n
\r\n festival offer
\r\nContrary to popular belief, Lorem Ipsum is not simply random text.
\r\n\r\n \r\n
\r\n online payment
\r\nContrary to popular belief, Lorem Ipsum is not simply random text.
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n free shipping
\r\nfree shipping world wide
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n 24 X 7 service
\r\nonline service for new customer
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n festival offer
\r\nnew online special festival offer
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n online payment
\r\nContrary to popular belief.
\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default ElementRatio;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleOne extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n image: ''\r\n }\r\n }\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n\r\n return (\r\n\r\n \r\n
\r\n Ratio ASOS
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n new on sale
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Slim Fit Cotton Shirt
\r\n \r\n$500.00
\r\n- \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n new on sale
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Slim Fit Cotton Shirt
\r\n \r\n$500.00
\r\n- \r\n \r\n \r\n \r\n
\r\n
\r\n Ratio Square
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n Slim Fit Cotton Shirt
\r\n \r\n$500.00
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n Slim Fit Cotton Shirt
\r\n \r\n$500.00
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n Slim Fit Cotton Shirt
\r\n \r\n$500.00
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n Slim Fit Cotton Shirt
\r\n \r\n$500.00
\r\n\r\n
\r\n Ratio Portrait
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n Slim Fit Cotton Shirt
\r\n \r\n$500.00
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n Slim Fit Cotton Shirt
\r\n \r\n$500.00
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n Slim Fit Cotton Shirt
\r\n \r\n$500.00
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n Slim Fit Cotton Shirt
\r\n \r\n$500.00
\r\n\r\n
\r\n Ratio Landscape
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n 
\r\n \r\n \r\n
\r\n 
\r\n \r\n \r\n
\r\n 
\r\n \r\n \r\n
\r\n 
\r\n \r\n \r\n
\r\n 
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Ratio Classes
\r\n\r\n
\r\n If you use image as background than add class \".bg-img\" in image and add below class\r\n in parent.
\r\n.ratio_40 - 40%
\r\n.ratio_45 - 45%
\r\n.ratio2_1 - 50%
\r\n.ratio2_3 - 60%
\r\n.ratio3_2 - 66.66%
\r\n.ratio_landscape - 75%
\r\n.ratio_square - 100%
\r\n.ratio_asos - 127.77%
\r\n.ratio_portrait - 150%
\r\n.ratio1_2 - 200%
\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleOne;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleTwo extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n image: ''\r\n }\r\n }\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n {(product.new == true)? new : ''}\r\n {(product.sale == true)? on sale : ''}\r\n
\r\n \r\n
\r\n \r\n {product.variants?\r\n - \r\n {product.variants.map((vari, i) =>\r\n
- \r\n \r\n )\r\n }\r\n
\r\n
\r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
\r\n {product.variants?\r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}
\r\n {product.variants?\r\n - \r\n {product.variants.map((vari, i) => {\r\n return (\r\n
- this.onClickHandle(vari.images)}> )\r\n })}\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleTwo;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleThree extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n image: ''\r\n }\r\n }\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n {(product.new == true)? new : ''}\r\n {(product.sale == true)? on sale : ''}\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
\r\n {product.variants?\r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}
\r\n {product.variants?\r\n - \r\n {product.variants.map((vari, i) => {\r\n return (\r\n
- this.onClickHandle(vari.images)}> )\r\n })}\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleThree;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleFour extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n image: ''\r\n }\r\n }\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n {(product.new == true)?\r\n
\r\n \r\n new\r\n 30% off\r\n
\r\n : ''}\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
\r\n {product.variants?\r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}
\r\n {product.variants?\r\n - \r\n {product.variants.map((vari, i) => {\r\n return (\r\n
- this.onClickHandle(vari.images)}> )\r\n })}\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleFour;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleFive extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n open: false,\r\n stock: 'InStock',\r\n quantity: 1,\r\n image: ''\r\n }\r\n }\r\n\r\n onOpenModal = () => {\r\n this.setState({ open: true });\r\n };\r\n\r\n onCloseModal = () => {\r\n this.setState({ open: false });\r\n };\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n\r\n minusQty = () => {\r\n if(this.state.quantity > 1) {\r\n this.setState({stock: 'InStock'})\r\n this.setState({quantity: this.state.quantity - 1})\r\n }\r\n }\r\n\r\n plusQty = () => {\r\n if(this.props.product.stock >= this.state.quantity) {\r\n this.setState({quantity: this.state.quantity+1})\r\n }else{\r\n this.setState({stock: 'Out of Stock !'})\r\n }\r\n }\r\n changeQty = (e) => {\r\n this.setState({ quantity: parseInt(e.target.value) })\r\n }\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n const {open} = this.state;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
\r\n
\r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}
\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleFive;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleSix extends Component {\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n {(product.new == true)? new : ''}\r\n {(product.sale == true)? on sale : ''}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}
\r\n {product.variants?\r\n- \r\n {product.variants.map((vari, i) => {\r\n return (\r\n
- this.onClickHandle(vari.images)}> )\r\n })}\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
\r\n {product.variants?\r\n
\r\n {product.name}
\r\n{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}\r\n
\r\n {product.variants?\r\n - \r\n {product.variants.map((vari, i) =>\r\n
- this.onClickHandle(vari.images)}> )\r\n }\r\n
\r\n
\r\n product details
\r\n{product.shortDetails}
\r\n\r\n {product.size?\r\n
\r\n \r\n
:''}\r\n - \r\n {product.size.map((size, i) => {\r\n return
- {size} \r\n })}\r\n
quantity
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n view detail\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleSix;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleSeven extends Component {\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n {(product.new == true)? new : ''}\r\n {(product.sale == true)? on sale : ''}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}
\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleSeven;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleEight extends Component {\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n {(product.new == true)? new : ''}\r\n {(product.sale == true)? on sale : ''}\r\n
\r\n \r\n
\r\n \r\n onAddToCartClicked(product, 1)}>\r\n Add To Cart\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}
\r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleEight;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleNine extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n image: ''\r\n }\r\n }\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n\r\n return (\r\n\r\n \r\n \r\n
\r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}
\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleNine;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleTen extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n image: ''\r\n }\r\n }\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
\r\n {product.variants?\r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}
\r\n {product.variants?\r\n - \r\n {product.variants.map((vari, i) => {\r\n return (\r\n
- this.onClickHandle(vari.images)}> )\r\n })}\r\n
\r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleTen;","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductStyleEleven extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n image: ''\r\n }\r\n }\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n {(product.new == true)? new : ''}\r\n {(product.sale == true)? on sale : ''}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}
\r\n\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductStyleEleven;","import React, {Component} from 'react';\r\nimport {connect} from \"react-redux\";\r\nimport Slider from \"react-slick\"\r\n\r\n// import Custom Components\r\nimport Breadcrumb from \"../../common/breadcrumb\";\r\nimport ProductStyleOne from \"./common/product-style-one\";\r\nimport {getVisibleproducts} from \"../../../services\";\r\nimport {addToCart, addToCompare, addToWishlist} from \"../../../actions\";\r\nimport {Product4, Product5} from \"../../../services/script\";\r\nimport ProductStyleTwo from \"./common/product-style-two\";\r\nimport ProductStyleThree from \"./common/product-style-three\";\r\nimport ProductStyleFour from \"./common/product-style-four\";\r\nimport ProductStyleFive from \"./common/product-style-five\";\r\nimport ProductStyleSix from \"./common/product-style-six\";\r\nimport ProductStyleSeven from \"./common/product-style-seven\";\r\nimport ProductStyleEight from \"./common/product-style-eight\";\r\nimport ProductStyleNine from \"./common/product-style-nine\";\r\nimport ProductStyleTen from \"./common/product-style-ten\";\r\nimport ProductStyleEleven from \"./common/product-style-eleven\";\r\n\r\nclass ElementProductBox extends Component {\r\n\r\n render (){\r\n const {products, addToCart, symbol, addToWishlist, addToCompare} = this.props;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}
\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n products: getVisibleproducts(state.data, state.filters),\r\n symbol: state.data.symbol,\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps, {addToCart, addToWishlist, addToCompare}\r\n)(ElementProductBox)","import React, {Component} from 'react';\r\nimport Slider from \"react-slick\"\r\nimport {connect} from \"react-redux\";\r\n\r\n// import Custom Components\r\nimport Breadcrumb from \"../../common/breadcrumb\";\r\nimport ProductStyleOne from \"./common/product-style-one\";\r\nimport {getVisibleproducts} from \"../../../services\";\r\nimport {addToCart, addToCompare, addToWishlist} from \"../../../actions\";\r\nimport {Product4} from \"../../../services/script\";\r\n\r\nclass ElementProductSlider extends Component {\r\n\r\n\r\n render (){\r\n const {products, addToCart, symbol, addToWishlist, addToCompare} = this.props;\r\n return (\r\n \r\n
\r\n product style 1
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { products.slice(0, 4).map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n
\r\n product style 2
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { products.slice(5, 9).map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n
\r\n product style 3
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { products.slice(16, 20).map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n
\r\n product style 4
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { products.slice(10, 15).map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n
\r\n product style 5
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { products.slice(20, 25).map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n
\r\n product style 6
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { products.slice(25, 30).map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n
\r\n product style 7
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { products.slice(30, 36).map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n
\r\n product style 8
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n { products.slice(5, 9).map((product, index) =>\r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n )}\r\n
\r\n \r\n
\r\n product style 9
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { products.slice(5, 9).map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n
\r\n product style 10
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { products.slice(5, 9).map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n
\r\n product style 11
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { products.slice(5, 9).map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n products: getVisibleproducts(state.data, state.filters),\r\n symbol: state.data.symbol,\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps, {addToCart, addToWishlist, addToCompare}\r\n)(ElementProductSlider)","import React, {Component} from 'react';\r\nimport Slider from \"react-slick\"\r\nimport {connect} from \"react-redux\";\r\n\r\n// import Custom Components\r\nimport Breadcrumb from \"../../common/breadcrumb\";\r\nimport ProductStyleOne from \"./common/product-style-one\";\r\nimport {getVisibleproducts} from \"../../../services\";\r\nimport {addToCart, addToCompare, addToWishlist} from \"../../../actions\";\r\nimport {Product4} from \"../../../services/script\";\r\n\r\nclass ElementProductNoSlider extends Component {\r\n\r\n\r\n render (){\r\n const {products, addToCart, symbol, addToWishlist, addToCompare} = this.props;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n { products.map((product, index) =>\r\n \r\n
\r\n \r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n products: getVisibleproducts(state.data, state.filters),\r\n symbol: state.data.symbol,\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps, {addToCart, addToWishlist, addToCompare}\r\n)(ElementProductNoSlider)","import React, {Component} from 'react';\r\nimport Slider from 'react-slick';\r\nimport {Link} from 'react-router-dom'\r\n\r\n\r\n\r\nclass ProductMultiSlider extends Component {\r\n render (){\r\n const {items, symbol, NoOfProducts} = this.props;\r\n\r\n var arrays = [];\r\n while (items.length > 0) {\r\n arrays.push(items.splice(0, NoOfProducts));\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n { products.slice(2, 10).map((product, index) =>\r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n )}\r\n
\r\n \r\n {products.map((product, i) =>\r\n
\r\n )}\r\n \r\n \r\n 
\r\n \r\n
\r\n )}\r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {product.name}
\r\n{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}
\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n newProducts: getVisibleproducts(state.data, state.filters),\r\n featureProducts: getVisibleproducts(state.data, state.filters),\r\n bestSeller: getVisibleproducts(state.data, state.filters),\r\n onSell: getVisibleproducts(state.data, state.filters),\r\n newWatches:getNewProducts(state.data.products, 'watch'),\r\n bestSellerWatches:getBestSellerProducts(state.data.products, 'watch'),\r\n symbol: state.data.symbol,\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps, {addToCart, addToWishlist, addToCompare}\r\n)(ElementMultipleSlider)","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom';\r\nimport Modal from 'react-responsive-modal';\r\n\r\n\r\nclass ProductItem extends Component {\r\n\r\n constructor(props){\r\n super(props)\r\n\r\n this.state = {\r\n open: false,\r\n stock: 'InStock',\r\n quantity: 1,\r\n image: ''\r\n }\r\n }\r\n\r\n onClickHandle(img) {\r\n this.setState({ image : img} );\r\n }\r\n onOpenModal = () => {\r\n this.setState({ open: true });\r\n };\r\n\r\n onCloseModal = () => {\r\n this.setState({ open: false });\r\n };\r\n\r\n minusQty = () => {\r\n if(this.state.quantity > 1) {\r\n this.setState({stock: 'InStock'})\r\n this.setState({quantity: this.state.quantity - 1})\r\n }\r\n }\r\n\r\n plusQty = () => {\r\n if(this.props.product.stock >= this.state.quantity) {\r\n this.setState({quantity: this.state.quantity+1})\r\n }else{\r\n this.setState({stock: 'Out of Stock !'})\r\n }\r\n }\r\n changeQty = (e) => {\r\n this.setState({ quantity: parseInt(e.target.value) })\r\n }\r\n\r\n render() {\r\n const {product, symbol, onAddToCartClicked, onAddToWishlistClicked, onAddToCompareClicked} = this.props;\r\n\r\n let RatingStars = []\r\n for(var i = 0; i < product.rating; i++) {\r\n RatingStars.push()\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n new products
\r\n\r\n
\r\n \r\n
\r\n feature products
\r\n\r\n
\r\n \r\n
\r\n best seller
\r\n\r\n
\r\n \r\n
\r\n on Sell
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n new product
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n { newWatches.slice(2, 5).map((product, index) =>\r\n \r\n
\r\n on sale
\r\nseason sale
\r\n\r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={addToCart} key={index}/>\r\n
)}\r\n \r\n
\r\n \r\n
\r\n feature product
\r\n\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default ProductItem;","import React, { Component } from 'react';\r\nimport { Tab, Tabs, TabList, TabPanel } from 'react-tabs';\r\nimport {connect} from 'react-redux'\r\n\r\nimport {getBestSeller, getMensWear, getWomensWear} from '../../../services/index'\r\nimport {addToCart, addToWishlist, addToCompare} from \"../../../actions/index\";\r\nimport ProductItem from './product-item';\r\n\r\nclass SpecialProducts extends Component {\r\n render (){\r\n\r\n const {bestSeller,mensWear,womensWear, symbol, addToCart, addToWishlist, addToCompare} = this.props\r\n return (\r\n \r\n
\r\n \r\n {(product.new == true)? new : ''}\r\n {(product.sale == true)? on sale : ''}\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {product.variants?\r\n - \r\n { product.variants.map((vari, i) =>\r\n
- \r\n \r\n )}\r\n
\r\n
\r\n \r\n {symbol}{product.price-(product.price*product.discount/100)}\r\n
\r\n {product.variants?\r\n
\r\n \r\n {RatingStars}\r\n
\r\n \r\n {product.name}
\r\n \r\n{symbol}{product.price-(product.price*product.discount/100)}\r\n {symbol}{product.price}\r\n
\r\n {product.variants?\r\n - \r\n {product.variants.map((vari, i) => {\r\n return (\r\n
- this.onClickHandle(vari.images)}> )\r\n })}\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {product.name}
\r\n{symbol}{product.price}
\r\n {product.variants?\r\n- \r\n {product.variants.map((vari, i) =>\r\n
- this.onClickHandle(vari.images)}> )\r\n }\r\n
\r\n
\r\n product details
\r\n{product.shortDetails}
\r\n\r\n {product.size?\r\n
\r\n \r\n
:''}\r\n - \r\n {product.size.map((size, i) => {\r\n return
- {size} \r\n })}\r\n
quantity
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n view detail\r\n
\r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n bestSeller: getBestSeller(state.data.products),\r\n mensWear: getMensWear(state.data.products),\r\n womensWear: getWomensWear(state.data.products),\r\n symbol: state.data.symbol\r\n})\r\n\r\nexport default connect(mapStateToProps, {addToCart, addToWishlist, addToCompare}) (SpecialProducts);","import React, {Component} from 'react';\r\nimport Slider from \"react-slick\"\r\nimport {connect} from \"react-redux\";\r\n\r\n// import Custom Components\r\nimport Breadcrumb from \"../../common/breadcrumb\";\r\nimport ProductStyleOne from \"./common/product-style-one\";\r\nimport {getVisibleproducts} from \"../../../services\";\r\nimport {addToCart, addToCompare, addToWishlist} from \"../../../actions\";\r\nimport {Product4} from \"../../../services/script\";\r\nimport SpecialProduct from \"../../layouts/common/products\";\r\n\r\nclass ElementProductTab extends Component {\r\n\r\n render (){\r\n const {products, addToCart, symbol, addToWishlist, addToCompare} = this.props;\r\n return (\r\n \r\n
\r\n exclusive products
\r\nspecial products
\r\n\r\n \r\n \r\n New Products \r\n Mens Wear \r\n Womens Wear \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n { bestSeller.map((product, index ) =>\r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={() => addToCart(product, 1)} key={index} /> )\r\n }\r\n
\r\n \r\n { mensWear.map((product, index ) =>\r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={() => addToCart(product, 1)} key={index} /> )\r\n }\r\n
\r\n \r\n { womensWear.map((product, index ) =>\r\n addToCompare(product)}\r\n onAddToWishlistClicked={() => addToWishlist(product)}\r\n onAddToCartClicked={() => addToCart(product, 1)} key={index} /> )\r\n }\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n products: getVisibleproducts(state.data, state.filters),\r\n symbol: state.data.symbol,\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps, {addToCart, addToWishlist, addToCompare}\r\n)(ElementProductTab)","import React, {Component} from 'react';\r\n\r\nimport {\r\n svgFreeShipping,\r\n svgservice,\r\n svgoffer,\r\n svgpayment\r\n} from \"../../../services/script\"\r\n\r\nclass Service extends Component {\r\n render (){\r\n\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default Service;","import React, {Component} from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { SlideToggle } from 'react-slide-toggle';\r\n\r\n\r\nclass BrandBlock extends Component {\r\n\r\n\r\n render (){\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Беслатна достава
\r\nБезплатна достава низ цела Македонија
\r\n\r\n \r\n
\r\n {/* \r\n
\r\n Гаранција
\r\nСекој продукт има Гаранција
\r\n\r\n \r\n
\r\n \r\n
\r\n festival offer
\r\nnew online special festival offer
\r\n\r\n \r\n
*/}\r\n \r\n
\r\n online payment
\r\nContrary to popular belief.
\r\n\r\n \r\n {({onToggle, setCollapsibleElement}) => (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n products: state.products\r\n})\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n null\r\n)(BrandBlock)\r\n","import React, {Component} from 'react';\r\nimport {Link} from 'react-router-dom'\r\nimport Slider from 'react-slick';\r\nimport Modal from 'react-responsive-modal';\r\nimport './product-details.scss'\r\n\r\nclass DetailsWithPrice extends Component {\r\n\r\n constructor (props) {\r\n super (props)\r\n this.state = {\r\n open:false,\r\n quantity:1,\r\n stock: 'InStock',\r\n nav3: null\r\n }\r\n }\r\n\r\n onOpenModal = () => {\r\n this.setState({ open: true });\r\n };\r\n\r\n onCloseModal = () => {\r\n this.setState({ open: false });\r\n };\r\n\r\n componentDidMount() {\r\n this.setState({\r\n nav3: this.slider3\r\n });\r\n }\r\n\r\n minusQty = () => {\r\n if(this.state.quantity > 1) {\r\n this.setState({stock: 'InStock'})\r\n this.setState({quantity: this.state.quantity - 1})\r\n }\r\n }\r\n\r\n plusQty = () => {\r\n this.setState({quantity: this.state.quantity+1})\r\n }\r\n changeQty = (e) => {\r\n this.setState({ quantity: parseInt(e.target.value) })\r\n }\r\n\r\n render (){\r\n const {symbol, item, addToCartClicked, BuynowClicked, addToWishlistClicked} = this.props\r\n\r\n var colorsnav = {\r\n slidesToShow: 6,\r\n swipeToSlide:true,\r\n arrows: false,\r\n dots: false,\r\n focusOnSelect: true\r\n };\r\n\r\n return (\r\n \r\n \r\n back\r\n \r\n
\r\n \r\n
\r\n )}\r\n brand
\r\n\r\n
\r\n \r\n
\r\n - \r\n
- clothing \r\n
- bags \r\n
- footwear \r\n
- watches \r\n
- accessories \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default DetailsWithPrice;","import React, { Component } from 'react';\r\n\r\nexport default class ImageZoom extends Component {\r\n render() {\r\n const {image} = this.props;\r\n\r\n return (\r\n \r\n \r\n
*/}\r\n
\r\n {item.productname}
\r\n {/*\r\n {symbol}{item.price}\r\n {item.discount}% off
*/}\r\n { parseInt(item.price)\r\n .toLocaleString('en-US', {\r\n style: 'currency',\r\n currency: 'MKD',\r\n }).replace('MKD','').split('.')[0]\r\n }{' ден.'}
\r\n { item.saleprice &&{ parseInt(item.saleprice)\r\n .toLocaleString('en-US', {\r\n style: 'currency',\r\n currency: 'MKD',\r\n }).replace('MKD','').split('.')[0]\r\n }{' ден.'}
}\r\n {/* {item.variants?\r\n- \r\n
\r\n {item.size?\r\n
\r\n \r\n
:''}\r\n {this.state.stock}\r\n select size\r\n size chart
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Sheer Straight\r\n Kurta
\r\n \r\n\r\n 
\r\n
\r\n \r\n \r\n
\r\n - \r\n {item.size.map((size, i) => {\r\n return
- {size} \r\n })}\r\n
quantity
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n addToCartClicked(item, this.state.quantity)}>кошничка\r\n BuynowClicked(item, this.state.quantity)} >купи\r\n
\r\n \r\n
\r\n \r\n \r\n product details
\r\n \r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Sheer Straight Kurta
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n Description\r\n \r\n \r\n \r\n Details\r\n \r\n \r\n \r\n \r\n Video\r\n \r\n \r\n \r\n \r\n Write Review\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n | Ideal For : | \r\nWomen's | \r\n
|---|---|
| Pattern : | \r\nEmbroidered | \r\n
| Dress Fabric : | \r\nSilk | \r\n
| Type : | \r\nGhagra, Choli, Dupatta Set | \r\n
| Neck : | \r\nRound Neck | \r\n
| Sleeve : | \r\n3/4 Sleeve | \r\n
| Work : | \r\nN/A | \r\n
\r\n Lorem Ipsum is simply dummy text of the printing and\r\n typesetting industry. Lorem Ipsum has been the industry's\r\n standard dummy text ever since the 1500s, when an unknown\r\n printer took a galley of type and scrambled it to make a\r\n type specimen book. It has survived not only five centuries,\r\n but also the leap into electronic typesetting, remaining\r\n essentially unchanged. It was popularised in the 1960s with\r\n the release of Letraset sheets containing Lorem Ipsum\r\n passages, and more recently with desktop publishing software\r\n like Aldus PageMaker including versions of Lorem Ipsum.\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n Филаделфија \r\n \r\n {/*SEO Support End */}\r\n {/* \r\n \r\n {/*Section End*/}\r\n\r\n
\r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n let productId = ownProps.match.params.id;\r\n return {\r\n item: state.data.products.find(el => el.id == productId),\r\n symbol: state.data.symbol\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, { addToCart, addToCartUnsafe, addToWishlist })(RightSideBar);","\r\nimport React, { Component } from 'react';\r\nimport Slider from 'react-slick';\r\n\r\nclass SmallImages extends Component {\r\n constructor (props) {\r\n super(props);\r\n this.state = {\r\n nav2: null,\r\n show:false\r\n }\r\n }\r\n componentDidMount() {\r\n this.setState({\r\n nav2: this.slider2,\r\n images:this.props.item.image.split(','),\r\n show: this.props.item.image.split(',').length > 1\r\n });\r\n }\r\n clickedImage (src) {\r\n this.props.changeThumbnail(src)\r\n }\r\n render() {\r\n const { item, settings } = this.props;\r\n var productsnav = settings;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {/* \r\n
\r\n \r\n
\r\n \r\n \r\n filter\r\n
\r\n \r\n
\r\n \r\n {this.state.showSmall && (this.slider1 = slider)} className=\"product-slick\">\r\n {this.state.product.image.split(',').filter(elem => elem != '').map((vari, index) =>\r\n }\r\n {/* {this.state.showSmall &&
\r\n \r\n
\r\n )}\r\n \r\n {/*
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default SmallImages;","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport { BrowserRouter, Route, Switch } from 'react-router-dom';\nimport { ScrollContext } from 'react-router-scroll-4';\nimport { IntlReducer as Intl, IntlProvider } from 'react-redux-multilingual'\nimport './index.scss';\n\n// Import custom components\nimport store from './store';\nimport translations from './constants/translations'\nimport { getAllProducts } from './actions'\n\n\n// Layouts\n\nimport Electronic from './components/layouts/electronic/main';\n\n\n//Collection Pages\nimport CollectionLeftSidebar from \"./components/collection/collection-left-sidebar\";\n\nimport Layout from './components/app'\nimport Cart from './components/cart'\nimport Compare from './components/compare/index'\nimport wishList from './components/wishlist'\nimport checkOut from './components/checkout'\nimport orderSuccess from './components/checkout/success-page'\n\nimport PageNotFound from './components/pages/404'\nimport Login from './components/pages/login'\nimport Register from './components/pages/register'\nimport Search from './components/pages/search'\nimport Collection from './components/pages/collection'\nimport ForgetPassword from './components/pages/forget-password'\nimport Contact from './components/pages/contact'\nimport Dashboard from './components/pages/dashboard'\nimport Faq from './components/pages/faq'\n\nimport ElementTitle from \"./components/features/theme/element-title\"\nimport ElementBanner from \"./components/features/theme/element-banner\";\nimport ElementSlider from \"./components/features/theme/element-slider\";\nimport ElementCategory from \"./components/features/theme/element-category\";\nimport ElementService from \"./components/features/theme/element-service\";\nimport ElementRatio from \"./components/features/theme/element-ratio\";\n\nimport ElementProductBox from \"./components/features/product/element-product-box\"\nimport ElementProductSlider from \"./components/features/product/element-product-slider\"\nimport ElementProductNoSlider from \"./components/features/product/element-product-no-slider\"\nimport ElementMultipleSlider from \"./components/features/product/element-multiple-slider\"\nimport ElementProductTab from \"./components/features/product/element-product-tab\"\nimport rightSidebar from './components/products/right-sidebar';\n\n// Portfolio Features\nclass Root extends React.Component {\n componentDidMount(){\n console.log(' index objess');\n }\n render() {\n store.dispatch(getAllProducts());\n\n return(\n \t\r\n {this.state.show && (this.slider2 = slider)} className=\"slider-nav\">\r\n {item.variants?\r\n item.variants.map((vari, index) =>\r\n }\r\n
\r\n \r\n \r\n
\r\n ):\r\n this.state.images.map((vari, index) =>\r\n this.clickedImage(vari)}>\r\n 
\r\n
\r\n )}\r\n