32 lines
1.3 KiB
HTML
32 lines
1.3 KiB
HTML
<div class="product-page">
|
|
<div class="back-button">
|
|
<img class="back-button-svg" src="/res/back-arrow.svg" height="60em" alt="back-arrow">
|
|
</div>
|
|
|
|
<div class="product-display">
|
|
|
|
<div class="product-image-container">
|
|
<img class="active-image" src="{this.state.image}" alt="Image of ${this.state.name}" title="Image of {this.state.name}">
|
|
</div>
|
|
|
|
<div class="product-info">
|
|
<div class="product-name">{this.state.name}</div>
|
|
<div class="product-price">£{this.state.price}</div>
|
|
<script>
|
|
if ({this.state.discount}) {
|
|
document.querySelector('.product-price').innerHTML = `<span class="discount-price">£{this.state.price}</span> £{this.state.discount}`;
|
|
}
|
|
</script>
|
|
<div class="product-description">{this.state.description}</div>
|
|
<div class="product-quantity">
|
|
<span class="quantity-label">Quantity:</span>
|
|
<input class="quantity-input" type="number" value="1" min="1" step="1"/>
|
|
</div>
|
|
<div class="product-add-to-basket">
|
|
<button class="add-to-cart-button">Add to Basket</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|