diff --git a/src/components/card.css b/src/components/card.css index 9548c02..17cf106 100644 --- a/src/components/card.css +++ b/src/components/card.css @@ -33,7 +33,6 @@ html, body { .wrapper__card .container_new .top_new { height: 80%; width: 100%; - background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; @@ -243,4 +242,16 @@ input[type="number"] { cursor: pointer; transition: background-position 1s steps(28); transition-duration: 0s; -} \ No newline at end of file +} +.priceDiscount { + color: red; +} +.PriceRaye{ + text-decoration: line-through; +} +.allPrice{ + display: flex; + justify-content: center; + gap: 5px; + +} diff --git a/src/components/card.js b/src/components/card.js index 28ebc96..595c661 100644 --- a/src/components/card.js +++ b/src/components/card.js @@ -70,6 +70,7 @@ render(){ let heart = 'heart is-active'; let buy = 'bottoom clicked'; + let PriceRaye; if(this.state.hasClicked === false){ heart = 'heart'; @@ -82,6 +83,9 @@ render(){ else if (this.state.hasClickedBuyNum % 2 === 1){ buy = 'bottoom clicked'; } + if(this.props.data.price >this.props.data.priceDiscount){ + PriceRaye="PriceRaye" + } return(
@@ -91,7 +95,10 @@ render(){

{this.props.data.title}

-

{this.props.data.price}

+
+

{this.props.data.price}

+

{this.props.data.priceDiscount}

+
{this.Click_Buy_Stockage(); this.click_Buy();}} className="buy">add_shopping_cart
diff --git a/src/pages/categoriePage.js b/src/pages/categoriePage.js index 6adc19c..b752791 100644 --- a/src/pages/categoriePage.js +++ b/src/pages/categoriePage.js @@ -1,109 +1,10 @@ import React from "react"; -import Card from '../components/card'; + import "bootstrap/dist/css/bootstrap.min.css"; import "mdb-react-ui-kit/dist/css/mdb.min.css"; -class CategoriePage extends React.Component { - - state = { - search : "", - image : [], - compenent : true, - - } - - constructor(props){ - super(props) - this.fetch = this.fetch.bind(this) - this.searchBar = this.searchBar.bind(this) - - } - - searchBar(){ - - this.setState(() =>{ - return{ - search: this.props.bar - } - }) -} - -componentDidMount(){ - -} - - componentDidUpdate(){ -/* console.log(this.props); - console.log(this.state.search); - - if(this.state.search === ""){ - this.searchBar() - if(this.state.search !== ""){ - return - } - } - - - if(this.state.compenent === true){ - this.fetch(); - if(this.state.compenent === false){ - return - } - - } */ - - - if(this.state.compenent === true){ - this.fetch(); - - } - - if(this.state.compenent === false){ - if(this.props.bar !== this.state.search){ - this.fetch() - } - return - } - - - -} - -fetch(){ - fetch('https://otakod.es/hetic/ecommerce-api/products?search=' + this.props.bar) - .then((response) => response.json()) - .then((dataa) => { - this.setState(() => { - return{ - image : dataa.products, - search : this.props.bar, - compenent : false, - - } - - }) - }) - -} - - render (){ - return ( -
- { - this.state.image.map((anime, index) => { - - return ( -
- -
- ) - - }) - } -
- ); - - } +function CategoriePage() { + return <>; } export default CategoriePage;