Skip to content

Commit

Permalink
refactor: TS & GQL enhacements
Browse files Browse the repository at this point in the history
  • Loading branch information
scottyzen committed Aug 19, 2024
1 parent 91bc401 commit ec86806
Show file tree
Hide file tree
Showing 10 changed files with 90 additions and 99 deletions.
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<script setup lang="ts">
interface Props {
attributes: any[];
defaultAttributes?: { nodes: Attribute[] };
defaultAttributes?: { nodes: VariationAttribute[] };
}
const { attributes, defaultAttributes } = defineProps<Props>();
const emit = defineEmits(['attrs-changed']);
const activeVariations = ref<Attribute[]>([]);
const getSelectedName = (attr: any, activeVariation: Attribute) => {
const getSelectedName = (attr: any, activeVariation: VariationAttribute) => {
if (attr?.terms?.nodes) {
return attr.terms.nodes.find((node: { slug: string }) => node.slug === activeVariation.value).name;
}
Expand All @@ -32,7 +32,7 @@ const updateAttrs = () => {
const setDefaultAttributes = () => {
if (defaultAttributes?.nodes) {
defaultAttributes?.nodes.forEach((attr: Attribute) => {
defaultAttributes?.nodes.forEach((attr: VariationAttribute) => {
const radio = document.querySelector(`.name-${attr.name}[value="${attr.value}"]`) as HTMLInputElement;
if (radio) radio.checked = true;
const dropdown = document.querySelector(`#${attr.name}`) as HTMLSelectElement;
Expand Down
21 changes: 16 additions & 5 deletions woonuxt_base/app/components/productElements/ReviewsScore.vue
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ async function addComment() {
<template>
<div>
<h4 v-if="reviews.edges.length" class="font-semibold text-sm text-2xl text-gray-900">{{ $t('messages.shop.customerReviews') }}</h4>
<h4 v-else class="font-semibold text-sm text-2xl text-gray-900">{{ $t('messages.shop.noReviews') }}</h4>
<h4 v-if="reviews.edges.length" class="font-semibold text-2xl text-gray-900">{{ $t('messages.shop.customerReviews') }}</h4>
<h4 v-else class="font-semibold text-2xl text-gray-900">{{ $t('messages.shop.noReviews') }}</h4>
<div v-if="reviews.edges.length" class="my-2">
<StarRating :rating="reviews.averageRating" :hide-count="true" class="text-sm mr-2" />
<span class="text-sm"> {{ $t('messages.general.basedOn') }} {{ reviews.edges.length }} {{ $t('messages.shop.reviews') }}</span>
Expand All @@ -85,7 +85,9 @@ async function addComment() {
</div>
<div class="mt-10 text-xl mb-2 text-gray-900">Share your thoughts</div>
<div class="text-sm mb-4">If you have used this product, we would love to hear about your experience.</div>
<button @click="show = !show" class="border rounded-lg text-center w-full p-2">{{ show ? $t('messages.shop.close') : $t('messages.shop.writeReview') }}</button>
<button @click="show = !show" class="border rounded-lg text-center w-full p-2">
{{ show ? $t('messages.shop.close') : $t('messages.shop.writeReview') }}
</button>
<transition class="ease-in-out transform transition-all" name="scale-y">
<form v-if="show" @submit.prevent="addComment" class="writeReview">
<div class="w-full text-gray-500">
Expand All @@ -111,7 +113,14 @@ async function addComment() {
</div>
<div class="w-full col-span-full">
<label for="author" class="text-sm mb-0.5">{{ $t('messages.shop.rateEmail') }} <span class="text-red-500">*</span></label>
<input class="w-full" id="author" placeholder="[email protected]" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" v-model="authorEmail" required />
<input
class="w-full"
id="author"
placeholder="[email protected]"
type="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
v-model="authorEmail"
required />
</div>
<Transition name="scale-y" mode="out-in">
<div v-if="errorMessage" class="my-4 text-sm text-red-500" v-html="errorMessage"></div>
Expand All @@ -120,7 +129,9 @@ async function addComment() {
<div v-if="successMessage" class="my-4 text-sm text-green-500" v-html="successMessage"></div>
</Transition>
<div class="w-full col-span-full text-center mt-3">
<button class="flex gap-4 justify-center items-center transition font-semibold rounded-md w-full p-2 bg-amber-300 text-amber-900 hover:bg-amber-400" type="submit">
<button
class="flex gap-4 justify-center items-center transition font-semibold rounded-md w-full p-2 bg-amber-300 text-amber-900 hover:bg-amber-400"
type="submit">
<LoadingIcon v-if="isPending" stroke="4" size="16" color="#78350F" />
<span>{{ $t('messages.shop.submit') }}</span>
</button>
Expand Down
4 changes: 2 additions & 2 deletions woonuxt_base/app/pages/product/[slug].vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ if (!data.value?.product) {
const product = ref<Product>(data?.value?.product);
const quantity = ref<number>(1);
const activeVariation = ref<Variation | null>(null);
const variation = ref<Attribute[]>([]);
const variation = ref<VariationAttribute[]>([]);
const indexOfTypeAny = ref<number[]>([]);
const attrValues = ref();
const isSimpleProduct = computed<boolean>(() => product.value?.type === ProductTypesEnum.SIMPLE);
Expand Down Expand Up @@ -46,7 +46,7 @@ onMounted(async () => {
if (product.value?.variations) indexOfTypeAny.value.push(...checkForVariationTypeOfAny(product.value));
});
const updateSelectedVariations = (variations: Attribute[]): void => {
const updateSelectedVariations = (variations: VariationAttribute[]): void => {
if (!product.value.variations) return;
attrValues.value = variations.map((el) => ({ attributeName: el.name, attributeValue: el.value }));
Expand Down
8 changes: 2 additions & 6 deletions woonuxt_base/app/queries/checkout.gql
Original file line number Diff line number Diff line change
Expand Up @@ -50,19 +50,15 @@ mutation Checkout(
node {
name
image {
sourceUrl
altText
title
...Image
}
}
}
variation {
node {
name
image {
sourceUrl
altText
title
...Image
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions woonuxt_base/app/queries/fragments/ImageFragment.gql
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
fragment Image on MediaItem {
sourceUrl
altText
title
}
13 changes: 5 additions & 8 deletions woonuxt_base/app/queries/fragments/SimpleProduct.gql
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
fragment SimpleProduct on SimpleProduct {
name
slug
price
rawPrice: price(format: RAW)
slug
date
regularPrice
rawRegularPrice: regularPrice(format: RAW)
Expand All @@ -19,18 +20,14 @@ fragment SimpleProduct on SimpleProduct {
onSale
virtual
image {
sourceUrl
...Image
cartSourceUrl: sourceUrl(size: THUMBNAIL)
producCardSourceUrl: sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
databaseId
altText
title
}
galleryImages(first: 20) {
nodes {
sourceUrl
altText
title
...Image
databaseId
}
}
}
33 changes: 14 additions & 19 deletions woonuxt_base/app/queries/fragments/VariableProduct.gql
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
fragment VariableProduct on VariableProduct {
name
slug
price
rawPrice: price(format: RAW)
slug
date
weight
length
width
height
image {
sourceUrl
...Image
cartSourceUrl: sourceUrl(size: THUMBNAIL)
producCardSourceUrl: sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
altText
title
databaseId
}
averageRating
reviewCount
Expand All @@ -28,10 +26,7 @@ fragment VariableProduct on VariableProduct {
lowStockAmount
defaultAttributes {
nodes {
name
attributeId
value
label
...VariationAttribute
}
}
variations(first: 100) {
Expand All @@ -46,28 +41,28 @@ fragment VariableProduct on VariableProduct {
stockStatus
hasAttributes
image {
sourceUrl
...Image
cartSourceUrl: sourceUrl(size: THUMBNAIL)
producCardSourceUrl: sourceUrl(size: WOOCOMMERCE_THUMBNAIL)
databaseId
altText
title
id
}
attributes {
nodes {
value
name
...VariationAttribute
}
}
}
}
galleryImages(first: 20) {
nodes {
sourceUrl
...Image
databaseId
altText
title
}
}
}

fragment VariationAttribute on VariationAttribute {
name
attributeId
value
label
}
14 changes: 7 additions & 7 deletions woonuxt_base/app/queries/getCart.gql
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ query getCart {
...Viewer
}
paymentGateways {
...PaymentGateways
nodes {
...PaymentGateway
}
}
}

Expand All @@ -27,10 +29,8 @@ fragment Viewer on User {
}
}

fragment PaymentGateways on RootQueryToPaymentGatewayConnection {
nodes {
title
id
description
}
fragment PaymentGateway on PaymentGateway {
title
id
description
}
55 changes: 27 additions & 28 deletions woonuxt_base/app/queries/getProduct.gql
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,10 @@ query getProduct($slug: ID!) {
shortDescription
attributes {
nodes {
variation
name
id
options
label
scope
...ProductAttribute
... on GlobalProductAttribute {
slug
terms(where: {orderby: MENU_ORDER, order: ASC}) {
terms(where: { orderby: MENU_ORDER, order: ASC }) {
nodes {
name
slug
Expand All @@ -35,21 +30,12 @@ query getProduct($slug: ID!) {
}
}
}
productCategories {
nodes {
databaseId
slug
name
count
}
}
...ProductCategories
...Terms
...SimpleProduct
...VariableProduct
related(first: 5) {
nodes {
name
slug
...SimpleProduct
...VariableProduct
}
Expand All @@ -59,19 +45,32 @@ query getProduct($slug: ID!) {
edges {
rating
node {
content
id
date
author {
node {
name
avatar {
url
}
}
}
...Comment
}
}
}
}
}

fragment ProductAttribute on ProductAttribute {
variation
name
id
options
label
scope
}

fragment Comment on Comment {
content
id
date
author {
node {
name
avatar {
url
}
}
}
}
Loading

0 comments on commit ec86806

Please sign in to comment.