shop: implement link to datasheet if available

This commit is contained in:
occheung 2022-01-19 14:27:09 +08:00
parent 1b47bdbfd9
commit 62286e9ea8
3 changed files with 40 additions and 2 deletions

View File

@ -142,6 +142,12 @@ button {
padding: .3rem 0;
}
}
.ds {
font-size: .8rem;
margin: 0;
padding-left: 0px;
}
}
}

View File

@ -415,6 +415,8 @@ class ProductItem extends React.PureComponent {
currency: PropTypes.string.isRequired,
image: PropTypes.string.isRequired,
specs: PropTypes.array,
datasheet_file: PropTypes.string,
datasheet_name: PropTypes.string,
onClickAddItem: PropTypes.func,
};
}
@ -441,6 +443,8 @@ class ProductItem extends React.PureComponent {
currency,
image,
specs,
datasheet_file,
datasheet_name,
} = this.props;
const render_specs = (specs && specs.length > 0 && (
@ -451,6 +455,15 @@ class ProductItem extends React.PureComponent {
</ul>
));
const render_datasheet_link = (datasheet_file && datasheet_name && (
<div className="ds">
<span class='doc-icon'></span>
<a href={datasheet_file} target="_blank" rel="noopener noreferrer">
{datasheet_name}
</a>
</div>
));
return (
<section className="productItem">
@ -463,6 +476,8 @@ class ProductItem extends React.PureComponent {
<div className="price">{`${currency} ${formatMoney(price)}`}</div>
{render_specs}
{render_datasheet_link}
</div>
<div className="content">
@ -1513,6 +1528,8 @@ class Backlog extends React.PureComponent {
currency={currency}
image={`/images/${item.image}`}
specs={item.specs}
datasheet_file={item.datasheet_file}
datasheet_name={item.datasheet_name}
onClickAddItem={onClickAddItem}
></ProductItem>
);

19
static/js/shop.min.js vendored
View File

@ -452,6 +452,8 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) {
currency: PropTypes.string.isRequired,
image: PropTypes.string.isRequired,
specs: PropTypes.array,
datasheet_file: PropTypes.string,
datasheet_name: PropTypes.string,
onClickAddItem: PropTypes.func
};
}
@ -487,12 +489,23 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) {
price = _this$props2.price,
currency = _this$props2.currency,
image = _this$props2.image,
specs = _this$props2.specs;
specs = _this$props2.specs,
datasheet_file = _this$props2.datasheet_file,
datasheet_name = _this$props2.datasheet_name;
var render_specs = specs && specs.length > 0 && /*#__PURE__*/React.createElement("ul", null, specs.map(function (spec, index) {
return /*#__PURE__*/React.createElement("li", {
key: index
}, spec);
}));
var render_datasheet_link = datasheet_file && datasheet_name && /*#__PURE__*/React.createElement("div", {
className: "ds"
}, /*#__PURE__*/React.createElement("span", {
"class": "doc-icon"
}), /*#__PURE__*/React.createElement("a", {
href: datasheet_file,
target: "_blank",
rel: "noopener noreferrer"
}, datasheet_name));
return /*#__PURE__*/React.createElement("section", {
className: "productItem"
}, /*#__PURE__*/React.createElement("div", {
@ -503,7 +516,7 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) {
}
}, name), name_codename ? /*#__PURE__*/React.createElement("p", null, name_codename) : null, /*#__PURE__*/React.createElement("div", {
className: "price"
}, "".concat(currency, " ").concat(formatMoney(price))), render_specs), /*#__PURE__*/React.createElement("div", {
}, "".concat(currency, " ").concat(formatMoney(price))), render_specs, render_datasheet_link), /*#__PURE__*/React.createElement("div", {
className: "content"
}, /*#__PURE__*/React.createElement("button", {
onClick: this.handleOnClickAddItem.bind(this, index, true)
@ -1552,6 +1565,8 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) {
currency: currency,
image: "/images/".concat(item.image),
specs: item.specs,
datasheet_file: item.datasheet_file,
datasheet_name: item.datasheet_name,
onClickAddItem: onClickAddItem
});
});