Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 35x 35x 31x 2x 2x 31x 29x 29x 35x 4x 4x 3x 35x 35x | import React, { useState } from 'react';
import Parser from 'html-react-parser';
import { Link } from 'react-router-dom';
import './ProductThumbnail.scss';
export default function ProductThumbnail({ product }) {
const {
name,
id,
price,
priceRange,
} = product;
let regularHigh
let regularLow
let sellingHigh
let sellingLow
if (priceRange) {
if (priceRange.regular) {
regularHigh = priceRange.regular.high;
regularLow = priceRange.regular.low;
}
if (priceRange.selling) {
sellingHigh = priceRange.selling.high;
sellingLow = priceRange.selling.low;
}
}
let regularPrice
let sellingPrice
if (price) {
regularPrice = price.regular
if (price.selling) {
sellingPrice = price.selling
}
}
let image = product.thumbnail.href;
return (
<React.Fragment>
<div className="cell thumbnail">
<div className="product-card" >
<div className="product-card-thumbnail">
<Link className="product-main-image" to={`/shop/${id}`}><img src={image} alt={name} /></Link>
</div>
<h6 className="product-card-title">
<Link className="product-name"to={`/shop/${id}`}>{Parser(name)}</Link></h6>
<div>
{regularHigh ?
<span className="product-card-old-price">
Original Price: ${regularLow}-${regularHigh}
</span>
: regularPrice ?
<span className="product-card-regular-price">
Original Price: ${regularPrice}
</span> : ""
}
</div>
<div>
<span className="product-card-sale-price">
Sale Price: ${sellingHigh
? `${sellingLow} - $${sellingHigh}`
: sellingPrice
}
</span>
</div>
</div>
</div>
</React.Fragment >
)
}
|