Skip to content

Commit 657ed16

Browse files
w3bdesignw3bdesign
authored
Merge pull request #1082 from w3bdesign/1081-check-why-ssr-fails
Improve logo height and fix ssr render error
2 parents a57346b + 2ac822c commit 657ed16

File tree

8 files changed

+185
-141
lines changed

8 files changed

+185
-141
lines changed

‎components/Layout/LayoutNavItem.vue

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
<template>
2-
<ul>
3-
<li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
4-
<NuxtLink :to="to">
5-
<span class="text-xl text-white no-underline lg:text-black">
6-
{{ label }}
7-
</span>
8-
</NuxtLink>
9-
</li>
10-
</ul>
2+
<ul>
3+
<li
4+
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
5+
>
6+
<NuxtLink :to="to">
7+
<span class="text-xl text-white no-underline lg:text-black">
8+
{{ label }}
9+
</span>
10+
</NuxtLink>
11+
</li>
12+
</ul>
1113
</template>
1214

1315
<script setup>
1416
const props = defineProps({
15-
to: {
16-
type: String,
17-
required: true,
18-
},
19-
label: {
20-
type: String,
21-
required: true,
22-
},
17+
to: {
18+
type: String,
19+
required: true,
20+
},
21+
label: {
22+
type: String,
23+
required: true,
24+
},
2325
});
2426
</script>

‎components/Layout/LayoutNavbar.vue

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,42 @@
11
<template>
2-
<header role="banner" class="container flex flex-col justify-center px-0 pt-4 md:pt-6 mx-auto mb-6">
2+
<header
3+
role="banner"
4+
class="container flex flex-col justify-center px-0 pt-4 md:pt-6 mx-auto mb-6"
5+
>
36
<div class="flex flex-wrap lg:px-4">
47
<div class="w-full pr-2 my-2 lg:w-3/12 md:w-10/12">
58
<div class="ml-4 lg:ml-0">
6-
<nuxt-img alt="Logo" class="h-20 lg:h-24 ml-[30px] md:ml-0" aria-label="Nettbutikk logo" src="/svg/Logo.svg" />
9+
<nuxt-img
10+
alt="Logo"
11+
class="h-16 lg:h-18 ml-[55px] md:ml-0"
12+
aria-label="Nettbutikk logo"
13+
src="/svg/Logo.svg"
14+
/>
715
</div>
816
</div>
9-
17+
1018
<div class="hidden lg:w-1/12 lg:block" />
11-
<div id="nav-content" class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right">
19+
<div
20+
id="nav-content"
21+
class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
22+
>
1223
<div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
1324
<div>
14-
<nav id="block-main" role="navigation" aria-labelledby="block-main-menu">
15-
<ul class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex">
25+
<nav
26+
id="block-main"
27+
role="navigation"
28+
aria-labelledby="block-main-menu"
29+
>
30+
<ul
31+
class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
32+
>
1633
<NavItem to="/" label="Home" />
1734
<NavItem to="/products" label="Products" />
1835
<NavItem to="/categories" label="Categories" />
1936
<NavItem to="/search" label="Search" />
20-
<li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
37+
<li
38+
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
39+
>
2140
<LayoutCart />
2241
</li>
2342
</ul>

‎components/Products/ProductsSingleProduct.vue

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,60 @@
22
<template v-if="data?.product">
33
<section>
44
<div class="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
5-
<div class="grid grid-cols-1 gap-4 mt-8 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
6-
<ProductImage :alt="data.product.name" :src="data.product.image.sourceUrl" />
5+
<div
6+
class="grid grid-cols-1 gap-4 mt-8 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2"
7+
>
8+
<ProductImage
9+
:alt="data.product.name"
10+
:src="data.product.image.sourceUrl"
11+
/>
712
<div class="ml-8">
813
<p class="text-3xl font-bold text-left">
914
{{ data.product.name }}
1015
</p>
11-
<ProductPrice :product="data.product" :shouldCenterPrice="false" priceFontSize="big" />
16+
<ProductPrice
17+
:product="data.product"
18+
:shouldCenterPrice="false"
19+
priceFontSize="big"
20+
/>
1221
<p class="pt-1 mt-6 text-2xl text-gray-900">
1322
{{ stripHTML(data.product.description) }}
1423
</p>
15-
<p v-if="data.product.stockQuantity" class="pt-1 mt-4 text-2xl text-gray-900">
24+
<p
25+
v-if="data.product.stockQuantity"
26+
class="pt-1 mt-4 text-2xl text-gray-900"
27+
>
1628
{{ data.product.stockQuantity }} in stock
1729
</p>
18-
<p v-if="data.product.variations" class="pt-1 mt-4 text-xl text-gray-900">
30+
<p
31+
v-if="data.product.variations"
32+
class="pt-1 mt-4 text-xl text-gray-900"
33+
>
1934
<span class="py-2">Varianter</span>
20-
<select id="variant" name="variant"
35+
<select
36+
id="variant"
37+
name="variant"
2138
class="block w-64 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
22-
v-model="selectedVariation">
23-
<option v-for="(variation, index) in data.product.variations.nodes" :key="variation.databaseId"
24-
:value="variation.databaseId" :selected="index === 0">
39+
v-model="selectedVariation"
40+
>
41+
<option
42+
v-for="(variation, index) in data.product.variations.nodes"
43+
:key="variation.databaseId"
44+
:value="variation.databaseId"
45+
:selected="index === 0"
46+
>
2547
{{ filteredVariantName(data.product.name, variation.name) }}
2648
({{ variation.stockQuantity }} in stock)
2749
</option>
2850
</select>
2951
</p>
3052
<div class="pt-1 mt-2">
31-
<CommonButton @common-button-click="addProductToCart(data.product)" :is-loading="isLoading">
32-
ADD TO CART</CommonButton>
53+
<CommonButton
54+
@common-button-click="addProductToCart(data.product)"
55+
:is-loading="isLoading"
56+
>
57+
ADD TO CART</CommonButton
58+
>
3359
</div>
3460
</div>
3561
</div>
@@ -49,7 +75,7 @@
4975
* @prop {string} slug - The slug of the product to display.
5076
*/
5177
52-
import { ref, watch } from 'vue';
78+
import { ref, watch } from "vue";
5379
5480
import GET_SINGLE_PRODUCT_QUERY from "@/apollo/queries/GET_SINGLE_PRODUCT_QUERY.gql";
5581
import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
@@ -79,7 +105,8 @@ watch(
79105
() => data.value,
80106
(dataValue) => {
81107
if (dataValue && dataValue.product?.variations?.nodes?.length > 0) {
82-
selectedVariation.value = dataValue.product?.variations?.nodes[0].databaseId;
108+
selectedVariation.value =
109+
dataValue.product?.variations?.nodes[0].databaseId;
83110
}
84111
},
85112
{ immediate: true }

‎layouts/default.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
22
<div>
3-
<LayoutNavbar />
4-
<div class="container mx-auto max-w-[84.375rem]">
5-
<slot />
6-
</div>
7-
<LayoutFooter />
8-
<LayoutStickyFooter />
3+
<LayoutNavbar />
4+
<div class="container mx-auto max-w-[84.375rem]">
5+
<slot />
6+
</div>
7+
<LayoutFooter />
8+
<LayoutStickyFooter />
99
</div>
1010
</template>
1111

‎nuxt.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { defineNuxtConfig } from "nuxt/config";
44

55
export default defineNuxtConfig({
6-
ssr: false,
6+
ssr: true,
77
components: true,
88
css: ["~/assets/css/main.css", "~/assets/css/animate.min.css"],
99
modules: [

0 commit comments

Comments
 (0)