flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Check stock for Shop's add to cart button

Browse Source
This commit is contained in:
Félix Péault
2021-11-20 21:39:44 +01:00
parent 4ee17f921e
commit 6559298212
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/layouts/PosterLayout.svelte
View File

@@ -10,6 +10,8 @@
export let product: any export let product: any
export let shopProduct: any export let shopProduct: any
$: hasStock = shopProduct.stock_level > 0
/** /**
* Preview photos specs * Preview photos specs
@@ -69,8 +71,10 @@
<dd>{shopProduct.name} – {shopProduct.price}€</dd> <dd>{shopProduct.name} – {shopProduct.price}€</dd>
</dl> </dl>
<Button <Button
text="Add to cart" tag="button"
text={hasStock ? 'Add to cart' : 'Sold out'}
color="pinklight" color="pinklight"
disabled={!hasStock}
on:click={() => addToCart($cartId, shopProduct)} on:click={() => addToCart($cartId, shopProduct)}
/> />
</div> </div>

6
src/style/atoms/_button.scss
View File

@@ -25,7 +25,7 @@
} }
// Hover effect // Hover effect
&:hover { &:not([disabled]):hover {
background: $color-secondary; background: $color-secondary;
} }
.text-split__line { .text-split__line {
@@ -85,7 +85,7 @@
background: $color-secondary-light; background: $color-secondary-light;
// Hover // Hover
&:hover { &:not([disabled]):hover {
color: #fff; color: #fff;
background: $color-secondary; background: $color-secondary;
} }
@@ -102,7 +102,7 @@
background: $color-secondary; background: $color-secondary;
// Hover // Hover
&:hover { &:not([disabled]):hover {
color: $color-text; color: $color-text;
background-color: darken($color-secondary, 7); background-color: darken($color-secondary, 7);
} }