Skip to content

Commit 148eecf

Browse files
committed
feat: add price
1 parent 10f6264 commit 148eecf

File tree

1 file changed

+19
-12
lines changed

1 file changed

+19
-12
lines changed

pages/product/[slug].vue

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,19 @@
99
</div>
1010
</div>
1111
<div class="">
12-
<div class="">
13-
<h1 class="text-2xl">{{ product.name }}</h1>
14-
<h1 class="text-2xl" v-html="product.regularPrice"></h1>
15-
<h1 class="text-2xl" v-html="product.salePrice"></h1>
16-
<p class="">
17-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed tincidunt augue. Maecenas ac mauris sed magna auctor lacinia. Etiam nec suscipit felis. Quisque
18-
tempus mi sed commodo eleifend. Pellentesque a ipsum eu lectus auctor imperdiet. Mauris ultricies, metus vitae commodo scelerisque, nibh tellus condimentum turpis,
19-
vitae tristique sapien urna sit amet risus. Donec maximus, est eget molestie accumsan, sapien enim fringilla nisl, vel iaculis mi odio eu massa. Phasellus at vulputate
20-
diam, ullamcorper ullamcorper metus. Nulla facilisi. Maecenas quis pretium sapien, vel dignissim nibh. Aliquam risus libero, imperdiet sed elit et, condimentum commodo
21-
sapien. Nunc vulputate sollicitudin massa, quis ullamcorper elit ultricies in. Pellentesque at orci in lectus faucibus vestibulum. Integer fringilla purus turpis, at
22-
ullamcorper velit suscipit ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
23-
</p>
12+
<h1 class="text-2xl">{{ product.name }}</h1>
13+
<div class="flex-col flex">
14+
<div class="flex justify-between flex-row items-baseline">
15+
<div class="flex flex-row items-baseline">
16+
<p class="text-xl font-bold" v-html="product.salePrice"></p>
17+
<p class="text-sm ml-2">VAT included</p>
18+
</div>
19+
</div>
20+
<div class="flex-wrap items-baseline flex-row flex">
21+
<p class="text-sm">Originally:</p>
22+
<p class="text-sm ml-1 line-through" v-html="product.regularPrice"></p>
23+
<p class="text-sm ml-1">{{ calculateDiscountPercentage }}%</p>
24+
</div>
2425
</div>
2526
</div>
2627
</div>
@@ -34,6 +35,12 @@ import { getProduct } from '~/gql/queries/getProduct.gql';
3435
const { result: productResult, loading } = useQuery(getProduct, () => ({ slug: route.params.slug }));
3536
const product = computed(() => productResult.value?.product);
3637
38+
const calculateDiscountPercentage = computed(() => {
39+
const salePriceValue = parseFloat(productResult.value?.product.salePrice.replace(/[^0-9]/g, ''));
40+
const regularPriceValue = parseFloat(productResult.value?.product.regularPrice.replace(/[^0-9]/g, ''));
41+
return Math.round(((salePriceValue - regularPriceValue) / regularPriceValue) * 100);
42+
});
43+
3744
// useQuery
3845
//
3946
// import getProduct from '~/gql/queries/getProduct.gql';

0 commit comments

Comments
 (0)