'React Js dynamic modal page for every product with scroolY localstorage
I want to get dynamic content for my products inside modal view instead of having pages for them but i am working with someonelses code so i don't want to mess with it Here is the code for image link creator for products pages
<div className="col-xs-12 no-padding home-product-container component-product-list js-component-type-weekly">
<Row className="">
{/* {props.products&&props.products.map((p,index)=>
<Col md={3} sm={6} xs={6} className="mb-3 productOverviewCol">
<Card className="pt-3 pb-3" className="prodOverviewCard" id={p.ProdNo}> */}
{props.products && props.products.map((p, index) =>
// {props.products&&props.products.slice(((props.page - 1)*(props.itemsPerPage)),(props.page)*(props.itemsPerPage)).map((p,index)=>
<Col md={3} sm={6} xs={6} className="productOverviewCol">
<Card className="pt-3 pb-3 prodOverviewCard" id={p.ProdNo}>
<div className="bkggrey">
<div className="prodImgWp">
<Link to={{
pathname: `/ProductDetail`,
search: `?id=${p.ProdNo}`,
state: { productType: type, Products: props.products, pageToLoad: props.pageToLoad, customerNo: props.custNo, totalProducts: props.totalProducts }
}} onClick={() => {
setScrollYStore(window.scrollY);
window.localStorage.setItem('scrollY', window.scrollY);
}}>
{/* <CardImg top src={p.Small_Img === "" || p.Small_Img === undefined ? bkry : p.Small_Img} alt="Image" /> */}
<CardImg top src={p.Small_Img === "" || p.Small_Img === undefined ? bkry : p.Small_Img} alt="Image" />
</Link>
</div>
{p.Price_type_name !== undefined && p.Price_type_name !== "Kundpris" ? <span className="BestDealSpan">{p.Price_type_name}</span> : null}
{/* <span className="circulrIcn"><AccountCircleIcon className="AccountCirculrIcnprdList" /></span> */}
</div>
<CardBody className="ProductOverviewCardBody">
<CardTitle className="titleTxt my-3">{p.Descr}</CardTitle>
<CardText className="CommercialText text-center pb-1">{p.BrandName + ' ' + p.Size_Contains}</CardText>
{acessToken ? <><CardSubtitle className="mb-2 greenText">{p.newPrice !== null && p.newPrice !== undefined ? p.newPrice.toFixed(2) : null} kr</CardSubtitle>
<CardText className="Compartiveprice">Jmf.pris : {p.Comp_Price !== null && p.Comp_Price !== undefined ? p.purchased_Unit === "Kart" ? p.box_com_cart_price.toFixed(2) : p.Comp_Price.toFixed(2) : null}/{p.comp_unit}</CardText></> : null}
{p.Campaign === 1 ? <CardText className="priceValidText mb-1">Pris gäller t.o.m {p.CampaignEndDate}</CardText> : null}
{acessToken ?
<>
<Row>
<Col>
<CardText className="text-center LadaSelectWp" >
{(p.Conv_facor_CART === null || p.Conv_facor_CART === 0) && (p.Conv_facor_ST === null || p.Conv_facor_ST === 0) && (p.Conv_facor_KG === null || p.Conv_facor_KG === 0) ? null :
<select className="minimal" name="select" id="exampleSelect" value={p.default_value}
onChange={(e) => props.onChangeUnit(e, index, p.ProdNo, p.Standard_orderunit, p.Comp_Price, p.Price_broken, p.Price_cart, p.Conv_facor_KG, p.Conv_facor_ST, p.Conv_facor_CART, p.default_price)}
disabled={p.Conv_facor_CART === 0 && p.Conv_facor_KG === 0 ? true : p.Conv_facor_ST === 0 && p.Conv_facor_KG === 0 ? true : p.Conv_facor_ST === 0 && p.Conv_facor_CART === 0 ? true : false}>
{p.Conv_facor_KG === 0 ? null :
<option value={p.Conv_facor_KG} keyid="Kg">{p.comp_unit === 'Liter' ? `Liter` : `KILO`}</option>}
{p.Conv_facor_ST === 0 ? null :
<option value={p.Conv_facor_ST} keyid="Styck">{`${p.Conv_facor_ST} ST`}</option>}
{p.Conv_facor_CART === 0 ? null :
<option value={5} keyid="Kart"> Kolli ({(p.Standard_orderunit === "Kart") && p.Conv_facor_ST === 0 ? p.Conv_facor_CART + ' ' + "ST" : (p.Standard_orderunit === "Kart") && p.Conv_facor_ST !== 0 ? p.Conv_facor_CART / p.Conv_facor_ST + ' ' + "ST" : p.Standard_orderunit === "Styck" ? p.Conv_facor_CART + ' ' + "ST" : (p.Standard_orderunit === "Kg") ? p.Conv_facor_CART + ' ' + "KG" : null}) </option>}
</select>}
</CardText>
</Col>
</Row>
<Row>
<Col md={12} className="IncrementListItemWpr">
<CardText className="text-center" >
<ListGroup horizontal className="my-2 text-center" style={{ margin: '0 auto' }}>
<ListGroup.Item disabled={p.Min_Quantity === p.newQuantity ? true : false} onClick={() => props.DecreaseItem(p.newQuantity, index, p.ProdNo, p.newPrice, p.Min_Quantity)}>-</ListGroup.Item>
{p.purchased_Unit === "Kg" && p.comp_unit !== 'Liter' ?
<Input
type={"text"}
className="InputincrementClass"
// id="depositedAmount"
pattern="[+-]?\d+(?:[.,]\d+)?"
id={index}
data-min="1"
onChange={(e) => props.onChangeQty(e, index, p.newPrice, p.Min_Quantity, p.ProdNo, p.purchased_Unit,p.Max_Quantity)}
value={p.hiddenText ? p.newQuantity + " KG" : p.newQuantity}
onClick={() => props.onclcikEvent(p.ProdNo)}
onBlur={(e) =>
props.onMouseLeaveEvent(p.ProdNo)}
/> :
p.purchased_Unit === "Kg" && p.comp_unit === 'Liter' ?
<Input
type={"text"}
className="InputincrementClass"
// id="depositedAmount"
pattern="[+-]?\d+(?:[.,]\d+)?"
id={index}
data-min="1"
onChange={(e) => props.onChangeQty(e, index, p.newPrice, p.Min_Quantity, p.ProdNo, p.purchased_Unit,p.Max_Quantity)}
value={p.hiddenText ? `${p.newQuantity} L` : p.newQuantity}
onClick={(e) => props.onclcikEvent(p.ProdNo)}
onBlur={(e) =>
props.onMouseLeaveEvent(p.ProdNo)}
/> :
<Input
type="text" data-min="1"
autoComplete="off"
className="InputincrementClass"
size="1" name={p.newQuantity}
data-max="999"
id={index}
onChange={(e) => props.onChangeQty(e, index, p.newPrice, p.Min_Quantity, p.ProdNo, p.purchased_Unit,p.Max_Quantity)}
value={p.hiddenText ? p.newQuantity + " ST" : p.newQuantity}
onClick={() => props.onclcikEvent(p.ProdNo)}
onBlur={(e) =>
props.onMouseLeaveEvent(p.ProdNo)}
/>}
<ListGroup.Item onClick={(e) => props.IncrementItem(p.newQuantity, index, p.ProdNo, p.newPrice, p.Min_Quantity,p.Max_Quantity)} >+</ListGroup.Item>
</ListGroup>
</CardText>
</Col>
</Row>
</>
: null}
{/* {acessToken?
<Button className="w-100 btnAddShop mt-1" onClick={()=>{saveToCart(p)}}>Add to Cart</Button> :
<Button className="w-100 btnAddShop mt-1" onClick={() => handleShowLogin()}>LOGIN TO SHOP</Button>
}
*/}
</CardBody>
<Row>
<Col md={12} className="absoluteBtnCol">
{acessToken ?
<Button className="w-100 btnAddShop mt-1" onClick={() => { saveToCart(p) }}>
{/* Add to Cart */}
LÄGG I VARUKORGEN
</Button> :
<Button className="w-100 btnAddShop mt-1" onClick={() => handleShowLogin()}>
{/* LOGIN TO SHOP */}
LÄGG TILL I KUNDVAGN
</Button>
}
</Col>
</Row>
</Card>
</Col>
)}
</Row>
{
props.loading?<label></label>:
props.productCount === 0 ?
<Row className="justify-content-end">
<Col xs={12} className="my-3 text-center">
{/* "No result for display" */}
Inget resultat för visning
</Col>
</Row> :
props.productCount === props.totalProducts ?
null :
<Row className="justify-content-end">
<Col xs={12} className="my-3 text-center">
<button onClick={props.loadMore} className="btn loadingbtn">
{`LADDA ${(Number(props.totalProducts)-Number(props.productCount))>=24?24:(Number(props.totalProducts)-Number(props.productCount))} AV ${Number(props.totalProducts)-Number(props.productCount)} PRODUKTER`}
</button>
</Col>
</Row>
}
</div>
I have tried to use link to code into modal body with pathname search and state . now product list overview page is like this Product List Overview
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|