From 3cefec00353bd4295f96a603832d65cb701cf738 Mon Sep 17 00:00:00 2001 From: ken Date: Fri, 16 Aug 2024 10:34:37 +0700 Subject: [PATCH 01/29] chore: update desktop menu --- app/modules/header/menu/DesktopMenu.tsx | 27 +++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/app/modules/header/menu/DesktopMenu.tsx b/app/modules/header/menu/DesktopMenu.tsx index f2195444..99608b12 100644 --- a/app/modules/header/menu/DesktopMenu.tsx +++ b/app/modules/header/menu/DesktopMenu.tsx @@ -1,7 +1,7 @@ import { Link } from "@remix-run/react"; import { Image } from "@shopify/hydrogen"; import clsx from "clsx"; -import type React from "react"; +import React from "react"; import { IconCaretDown } from "~/components/Icons"; import { getMaxDepth } from "~/lib/menu"; import type { SingleMenuItem } from "~/lib/type"; @@ -27,10 +27,10 @@ export function DesktopMenu(props: { menu: EnhancedMenu }) { let Comp: React.FC = isAllResourceType ? ImageMenu : level > 2 - ? MultiMenu - : level === 2 - ? SingleMenu - : GroupWrapper; + ? MultiMenu + : level === 2 + ? SingleMenu + : GroupWrapper; return ; })} @@ -160,12 +160,22 @@ function ImageMenu({ title, items, to }: SingleMenuItem) { ); } -function GroupHeader({ title, to }: { title: string; to: string }) { +function GroupHeader({ + title, + to, + showCaret, +}: { + title: string; + to: string; + showCaret?: boolean; +}) { return (
{title} - + {showCaret && ( + + )}
); @@ -178,9 +188,10 @@ function GroupWrapper(props: { to: string; }) { let { children, className, title, to } = props; + let showCaret = React.Children.count(children) > 0; return (
- + {children}
); From 498b4238093d2026406be41de1deb37296a7c4e0 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 10:44:28 +0700 Subject: [PATCH 02/29] Update PredictiveSearchResults styling to use shadow-header --- app/components/predictive-search/PredictiveSearchResults.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/predictive-search/PredictiveSearchResults.tsx b/app/components/predictive-search/PredictiveSearchResults.tsx index 6289d608..4af61f70 100644 --- a/app/components/predictive-search/PredictiveSearchResults.tsx +++ b/app/components/predictive-search/PredictiveSearchResults.tsx @@ -32,7 +32,7 @@ export function PredictiveSearchResults() { ); } return ( -
+
@@ -82,7 +82,7 @@ function NoPredictiveSearchResults({ return null; } return ( -

+

No results found for {searchTerm.current}

); From 40e5b753043af7095df981b80502c73107702f82 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 10:44:48 +0700 Subject: [PATCH 03/29] Add summary field to product description --- app/data/queries.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/data/queries.ts b/app/data/queries.ts index 18593667..ae33b761 100644 --- a/app/data/queries.ts +++ b/app/data/queries.ts @@ -71,6 +71,7 @@ export let PRODUCT_QUERY = `#graphql handle descriptionHtml description + summary: description(truncateAt: 200) options { name values From a0d08248b516d4f83b4f1525518eafb31397e113 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 10:44:56 +0700 Subject: [PATCH 04/29] Update DesktopHeader padding for different screen sizes --- app/modules/header/DesktopHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/modules/header/DesktopHeader.tsx b/app/modules/header/DesktopHeader.tsx index a9199397..c89fd5f8 100644 --- a/app/modules/header/DesktopHeader.tsx +++ b/app/modules/header/DesktopHeader.tsx @@ -46,7 +46,7 @@ export function DesktopHeader({ className={cn( "transition-colors duration-300 ease-in-out", "h-nav hidden lg:flex items-center z-40 top-0 justify-between leading-none gap-8", - "px-6 md:px-8 lg:px-12", + "px-3 md:px-10 lg:px-16", "text-[var(--color-header-text)] bg-[var(--color-header-bg)]", "hover:text-[var(--color-header-text)] hover:bg-[var(--color-header-bg)]", "border-b border-[rgb(230,230,230)]", From 86a1a32d60d17594372d307aefd76ad84209b760 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 10:45:16 +0700 Subject: [PATCH 05/29] Update VariantOption styling for button type --- app/modules/product-form/options.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/modules/product-form/options.tsx b/app/modules/product-form/options.tsx index 5ef7f813..a5937ebf 100644 --- a/app/modules/product-form/options.tsx +++ b/app/modules/product-form/options.tsx @@ -77,7 +77,7 @@ export function VariantOption(props: VariantOptionProps) { key={value} type="button" className={cn( - "px-4 py-2.5 text-center text-body", + "px-4 py-2.5 text-center text-body !leading-none", variants({ buttonSize: size, shape, From 2f9ee5ac7e24cdb02b82083f520ab253129f78e8 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 10:45:27 +0700 Subject: [PATCH 06/29] Add grid layout for product media --- app/modules/product-form/product-media.tsx | 33 ++++++++++++++++++---- 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/app/modules/product-form/product-media.tsx b/app/modules/product-form/product-media.tsx index e9db433d..eede0bdf 100644 --- a/app/modules/product-form/product-media.tsx +++ b/app/modules/product-form/product-media.tsx @@ -5,26 +5,47 @@ import type { MediaFragment } from "storefrontapi.generated"; import { FreeMode, Pagination, Thumbs } from "swiper/modules"; import { Swiper, type SwiperClass, SwiperSlide } from "swiper/react"; -interface ProductMediaProps { +export interface ProductMediaProps { + mediaLayout: "grid" | "slider"; + showThumbnails: boolean; selectedVariant: any; media: MediaFragment[]; - showThumbnails: boolean; - numberOfThumbnails: number; - spacing: number; } export function ProductMedia(props: ProductMediaProps) { - let { selectedVariant, media: _media, numberOfThumbnails, spacing } = props; + let { mediaLayout, selectedVariant, media: _media } = props; let media = _media.filter((med) => med.__typename === "MediaImage"); let [thumbsSwiper, setThumbsSwiper] = useState(null); let [activeIndex, setActiveIndex] = useState(0); + if (mediaLayout === "grid") { + return ( +
+ {media.map((med, i) => { + let image = { ...med.image, altText: med.alt || "Product image" }; + return ( + + ); + })} +
+ ); + } + return (
Date: Fri, 16 Aug 2024 10:45:44 +0700 Subject: [PATCH 07/29] Update Drawer foreground style --- app/modules/Drawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/modules/Drawer.tsx b/app/modules/Drawer.tsx index 53b6c020..acb4a82d 100644 --- a/app/modules/Drawer.tsx +++ b/app/modules/Drawer.tsx @@ -61,7 +61,7 @@ export function Drawer({ leaveFrom="opacity-100" leaveTo="opacity-0" > -
+
From f25fa64fe14a2001ca8d8a37e94aba1307eddd8d Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 10:46:22 +0700 Subject: [PATCH 08/29] Update header box shadow to use a lighter color --- tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 09834285..f072c491 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -118,7 +118,7 @@ export default { }, boxShadow: { border: "inset 0px 0px 0px 1px rgb(var(--color-border) / 0.08)", - header: "0 4px 18px rgba(0,0,0,.1)", + header: "0 2px 5px #0000000f", }, zIndex: { 1: "1", From 547c4abdc650b1a66ddae27e79ed256824e1baa0 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 10:46:42 +0700 Subject: [PATCH 09/29] Add slider layout for product media & update product comps' props --- app/modules/QuickView.tsx | 1 + .../($locale).products.$productHandle.tsx | 23 ++- app/sections/product-information/index.tsx | 159 +++++++++--------- app/sections/single-product/index.tsx | 7 +- storefrontapi.generated.d.ts | 4 +- 5 files changed, 101 insertions(+), 93 deletions(-) diff --git a/app/modules/QuickView.tsx b/app/modules/QuickView.tsx index eb6d1f64..7e984509 100644 --- a/app/modules/QuickView.tsx +++ b/app/modules/QuickView.tsx @@ -70,6 +70,7 @@ export function QuickView(props: { data: Jsonify }) {
( + PRODUCT_QUERY, + { + variables: { + handle: productHandle, + selectedOptions, + country: context.storefront.i18n.country, + language: context.storefront.i18n.language, + }, }, - }); + ); if (!product?.id) { throw new Response("product", { status: 404 }); diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx index c9e45047..9c584a42 100644 --- a/app/sections/product-information/index.tsx +++ b/app/sections/product-information/index.tsx @@ -1,20 +1,22 @@ import { useLoaderData, useSearchParams } from "@remix-run/react"; import { Money, ShopPayButton, useOptimisticVariant } from "@shopify/hydrogen"; -import type { - HydrogenComponentProps, - HydrogenComponentSchema, -} from "@weaverse/hydrogen"; +import type { HydrogenComponentSchema } from "@weaverse/hydrogen"; import { forwardRef, useEffect, useState } from "react"; +import { Section, type SectionProps, layoutInputs } from "~/components/Section"; import { getExcerpt } from "~/lib/utils"; -import { AddToCartButton, Text } from "~/modules"; -import { ProductPlaceholder } from "~/modules/product-form/placeholder"; -import { ProductMedia } from "~/modules/product-form/product-media"; +import { AddToCartButton, Link, Text } from "~/modules"; +import { + ProductMedia, + type ProductMediaProps, +} from "~/modules/product-form/product-media"; import { Quantity } from "~/modules/product-form/quantity"; import { ProductVariants } from "~/modules/product-form/variants"; import type { loader as productLoader } from "~/routes/($locale).products.$productHandle"; import { ProductDetail } from "./product-detail"; -interface ProductInformationProps extends HydrogenComponentProps { +interface ProductInformationProps + extends SectionProps, + Omit { addToCartText: string; soldOutText: string; unavailableText: string; @@ -24,9 +26,6 @@ interface ProductInformationProps extends HydrogenComponentProps { showShippingPolicy: boolean; showRefundPolicy: boolean; hideUnavailableOptions: boolean; - showThumbnails: boolean; - numberOfThumbnails: number; - spacing: number; gallerySize?: never; } @@ -38,6 +37,7 @@ let ProductInformation = forwardRef( variants: _variants, storeDomain, } = useLoaderData(); + console.log("👉 --------> - product:", product); let variants = _variants?.product?.variants; let selectedVariantOptimistic = useOptimisticVariant( @@ -58,9 +58,8 @@ let ProductInformation = forwardRef( showShippingPolicy, showRefundPolicy, hideUnavailableOptions, + mediaLayout, showThumbnails, - numberOfThumbnails, - spacing, children, gallerySize, ...rest @@ -101,35 +100,44 @@ let ProductInformation = forwardRef( } if (product && variants) { - let { title, vendor, descriptionHtml } = product; + let { title, vendor, summary, description } = product; let { shippingPolicy, refundPolicy } = shop; return ( -
-
-
- +
+
+ + Home + + / + {product.title} +
+
+ +
-

- {title} -

{showVendor && vendor && ( {vendor} )} +

{title}

{selectedVariant ? ( @@ -141,13 +149,7 @@ let ProductInformation = forwardRef( ) : null}

{children} -

+

{summary}

( /> )}
+ {showShippingPolicy && shippingPolicy?.body && ( (
-
+
); } return
; @@ -216,15 +219,48 @@ export default ProductInformation; export let schema: HydrogenComponentSchema = { type: "product-information", - title: "Product information", + title: "Main product", childTypes: ["judgeme"], limit: 1, enabledOn: { pages: ["PRODUCT"], }, inspector: [ + { group: "Layout", inputs: layoutInputs }, { - group: "Product form", + group: "Product Media", + inputs: [ + { + type: "toggle-group", + name: "mediaLayout", + label: "Media layout", + configs: { + options: [ + { + label: "Grid", + value: "grid", + icon: "grid-2x2", + }, + { + label: "Slider", + value: "slider", + icon: "slideshow-outline", + }, + ], + }, + defaultValue: "grid", + }, + { + label: "Show thumbnails", + name: "showThumbnails", + type: "switch", + defaultValue: true, + condition: "mediaLayout.eq.slider", + }, + ], + }, + { + group: "Product information", inputs: [ { type: "text", @@ -284,38 +320,9 @@ export let schema: HydrogenComponentSchema = { }, ], }, - { - group: "Product Media", - inputs: [ - { - label: "Show thumbnails", - name: "showThumbnails", - type: "switch", - defaultValue: true, - }, - { - label: "Number of thumbnails", - name: "numberOfThumbnails", - type: "range", - condition: "showThumbnails.eq.true", - configs: { - min: 1, - max: 10, - }, - defaultValue: 4, - }, - { - label: "Gap between images", - name: "spacing", - type: "range", - configs: { - min: 0, - step: 2, - max: 100, - }, - defaultValue: 10, - }, - ], - }, ], + presets: { + width: "stretch", + mediaLayout: "grid", + }, }; diff --git a/app/sections/single-product/index.tsx b/app/sections/single-product/index.tsx index 4e9841db..57c01f40 100644 --- a/app/sections/single-product/index.tsx +++ b/app/sections/single-product/index.tsx @@ -20,8 +20,6 @@ type SingleProductData = { hideUnavailableOptions: boolean; // product media props showThumbnails: boolean; - numberOfThumbnails: number; - spacing: number; }; type SingleProductProps = HydrogenComponentProps< @@ -37,8 +35,6 @@ let SingleProduct = forwardRef( product: _product, hideUnavailableOptions, showThumbnails, - numberOfThumbnails, - spacing, ...rest } = props; let { storeDomain, product, variants: _variants } = loaderData || {}; @@ -67,11 +63,10 @@ let SingleProduct = forwardRef(
diff --git a/storefrontapi.generated.d.ts b/storefrontapi.generated.d.ts index 7410cc55..bbfe852c 100644 --- a/storefrontapi.generated.d.ts +++ b/storefrontapi.generated.d.ts @@ -443,7 +443,7 @@ export type ProductQuery = { Pick< StorefrontAPI.Product, 'id' | 'title' | 'vendor' | 'handle' | 'descriptionHtml' | 'description' - > & { + > & {summary: StorefrontAPI.Product['description']} & { options: Array>; selectedVariant?: StorefrontAPI.Maybe< Pick< @@ -1716,7 +1716,7 @@ interface GeneratedQueryTypes { return: ProductInfoQuery; variables: ProductInfoQueryVariables; }; - '#graphql\n query Product(\n $country: CountryCode\n $language: LanguageCode\n $handle: String!\n $selectedOptions: [SelectedOptionInput!]!\n ) @inContext(country: $country, language: $language) {\n product(handle: $handle) {\n id\n title\n vendor\n handle\n descriptionHtml\n description\n options {\n name\n values\n }\n selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {\n ...ProductVariantFragment\n }\n media(first: 7) {\n nodes {\n ...Media\n }\n }\n variants(first: 1) {\n nodes {\n ...ProductVariantFragment\n }\n }\n seo {\n description\n title\n }\n }\n shop {\n name\n primaryDomain {\n url\n }\n shippingPolicy {\n body\n handle\n }\n refundPolicy {\n body\n handle\n }\n }\n }\n #graphql\n fragment Media on Media {\n __typename\n mediaContentType\n alt\n previewImage {\n url\n }\n ... on MediaImage {\n id\n image {\n id\n url\n width\n height\n }\n }\n ... on Video {\n id\n sources {\n mimeType\n url\n }\n }\n ... on Model3d {\n id\n sources {\n mimeType\n url\n }\n }\n ... on ExternalVideo {\n id\n embedUrl\n host\n }\n }\n\n #graphql\n fragment ProductVariantFragment on ProductVariant {\n id\n availableForSale\n quantityAvailable\n selectedOptions {\n name\n value\n }\n image {\n id\n url\n altText\n width\n height\n }\n price {\n amount\n currencyCode\n }\n compareAtPrice {\n amount\n currencyCode\n }\n sku\n title\n unitPrice {\n amount\n currencyCode\n }\n product {\n title\n handle\n }\n }\n\n': { + '#graphql\n query Product(\n $country: CountryCode\n $language: LanguageCode\n $handle: String!\n $selectedOptions: [SelectedOptionInput!]!\n ) @inContext(country: $country, language: $language) {\n product(handle: $handle) {\n id\n title\n vendor\n handle\n descriptionHtml\n description\n\t\t\tsummary: description(truncateAt: 200)\n options {\n name\n values\n }\n selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {\n ...ProductVariantFragment\n }\n media(first: 7) {\n nodes {\n ...Media\n }\n }\n variants(first: 1) {\n nodes {\n ...ProductVariantFragment\n }\n }\n seo {\n description\n title\n }\n }\n shop {\n name\n primaryDomain {\n url\n }\n shippingPolicy {\n body\n handle\n }\n refundPolicy {\n body\n handle\n }\n }\n }\n #graphql\n fragment Media on Media {\n __typename\n mediaContentType\n alt\n previewImage {\n url\n }\n ... on MediaImage {\n id\n image {\n id\n url\n width\n height\n }\n }\n ... on Video {\n id\n sources {\n mimeType\n url\n }\n }\n ... on Model3d {\n id\n sources {\n mimeType\n url\n }\n }\n ... on ExternalVideo {\n id\n embedUrl\n host\n }\n }\n\n #graphql\n fragment ProductVariantFragment on ProductVariant {\n id\n availableForSale\n quantityAvailable\n selectedOptions {\n name\n value\n }\n image {\n id\n url\n altText\n width\n height\n }\n price {\n amount\n currencyCode\n }\n compareAtPrice {\n amount\n currencyCode\n }\n sku\n title\n unitPrice {\n amount\n currencyCode\n }\n product {\n title\n handle\n }\n }\n\n': { return: ProductQuery; variables: ProductQueryVariables; }; From 70e148de525f730291dc5cedfa22a55bba2971fe Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 11:18:57 +0700 Subject: [PATCH 10/29] Simplify topbar settings and remove unused code --- app/hooks/useHeaderStyles.tsx | 23 -------------- app/modules/header/AnnouncementBar.tsx | 42 ++++++++------------------ app/weaverse/schema.server.ts | 12 -------- tailwind.config.js | 1 - 4 files changed, 13 insertions(+), 65 deletions(-) delete mode 100644 app/hooks/useHeaderStyles.tsx diff --git a/app/hooks/useHeaderStyles.tsx b/app/hooks/useHeaderStyles.tsx deleted file mode 100644 index 5380499d..00000000 --- a/app/hooks/useHeaderStyles.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useThemeSettings } from "@weaverse/hydrogen"; -import { useCallback, useEffect } from "react"; - -export function useHeaderStyles(show: boolean) { - let { stickyTopbar, topbarHeight } = useThemeSettings(); - const updateStyles = useCallback(() => { - let y = window.scrollY; - let top = stickyTopbar ? topbarHeight : Math.max(topbarHeight - y, 0); - document.body.style.setProperty("--announcement-bar-height", `${top}px`); - }, [stickyTopbar, topbarHeight]); - - useEffect(() => { - if (!show) { - if (document.body.style.getPropertyValue("--announcement-bar-height")) { - document.body.style.removeProperty("--announcement-bar-height"); - } - return; - } - updateStyles(); - window.addEventListener("scroll", updateStyles); - return () => window.removeEventListener("scroll", updateStyles); - }, [updateStyles, show]); -} diff --git a/app/modules/header/AnnouncementBar.tsx b/app/modules/header/AnnouncementBar.tsx index 8e54d92c..e0ae54d7 100644 --- a/app/modules/header/AnnouncementBar.tsx +++ b/app/modules/header/AnnouncementBar.tsx @@ -1,49 +1,39 @@ import { useThemeSettings } from "@weaverse/hydrogen"; -import clsx from "clsx"; -import { useCallback, useEffect, useState } from "react"; -import { IconX } from "~/components/Icons"; +import { useEffect } from "react"; import { Marquee } from "~/components/Marquee"; -import { useHeaderStyles } from "~/hooks/useHeaderStyles"; - -let storageKey = "hide-announcement-bar"; export function AnnouncementBar() { - let [show, setShow] = useState(true); - useHeaderStyles(show); let themeSettings = useThemeSettings(); let { topbarText, topbarHeight, topbarTextColor, topbarBgColor, - dismissibleTopbar, - stickyTopbar, enableScrolling, scrollingGap, scrollingSpeed, } = themeSettings; - let dismiss = useCallback(() => { - localStorage.setItem(storageKey, "true"); - setShow(false); - }, []); + function updateStyles() { + document.body.style.setProperty( + "--topbar-height", + `${Math.max(topbarHeight - window.scrollY, 0)}px`, + ); + } + // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { - let hide = localStorage.getItem(storageKey); - if (hide !== "true") { - setShow(true); - } + updateStyles(); + window.addEventListener("scroll", updateStyles); + return () => window.removeEventListener("scroll", updateStyles); }, []); - if (!show || !topbarText) return null; + if (!topbarText) return null; return (
- {dismissibleTopbar && ( - - )}
); } diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts index 451df7ed..4d6f2f26 100644 --- a/app/weaverse/schema.server.ts +++ b/app/weaverse/schema.server.ts @@ -171,18 +171,6 @@ export let themeSchema: HydrogenThemeSchema = { }, defaultValue: 44, }, - { - type: "switch", - label: "Sticky", - name: "stickyTopbar", - defaultValue: true, - }, - { - type: "switch", - label: "Dismissible", - name: "dismissibleTopbar", - defaultValue: true, - }, { type: "switch", label: "Enable scrolling", diff --git a/tailwind.config.js b/tailwind.config.js index f072c491..cf2f5469 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -71,7 +71,6 @@ export default { }, spacing: { nav: "var(--height-nav)", - "full-nav": "var(--announcement-bar-height, 0px)", screen: "var(--screen-height, 100vh)", }, height: { From d4e5ceb4eeca27600cee4e553fab25ff38e2c14d Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 11:25:39 +0700 Subject: [PATCH 11/29] Update product information to render compare at price --- app/sections/product-information/index.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx index 9c584a42..962bee32 100644 --- a/app/sections/product-information/index.tsx +++ b/app/sections/product-information/index.tsx @@ -37,9 +37,7 @@ let ProductInformation = forwardRef( variants: _variants, storeDomain, } = useLoaderData(); - console.log("👉 --------> - product:", product); let variants = _variants?.product?.variants; - let selectedVariantOptimistic = useOptimisticVariant( product?.selectedVariant || variants?.nodes?.[0], variants, @@ -139,15 +137,24 @@ let ProductInformation = forwardRef( )}

{title}

-

- {selectedVariant ? ( + {selectedVariant ? ( +

- ) : null} -

+ {selectedVariant.compareAtPrice && ( + + )} +
+ ) : null} {children}

{summary}

Date: Fri, 16 Aug 2024 11:49:57 +0700 Subject: [PATCH 12/29] Update grid media on mobile, update image aspect ratio --- app/modules/product-form/product-media.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/modules/product-form/product-media.tsx b/app/modules/product-form/product-media.tsx index eede0bdf..54d14b12 100644 --- a/app/modules/product-form/product-media.tsx +++ b/app/modules/product-form/product-media.tsx @@ -20,9 +20,13 @@ export function ProductMedia(props: ProductMediaProps) { if (mediaLayout === "grid") { return ( -
+
{media.map((med, i) => { let image = { ...med.image, altText: med.alt || "Product image" }; + let aspectRatio = "3/4"; + if (image.width && image.height) { + aspectRatio = `${image.width}/${image.height}`; + } return ( ); From 8bd66e7898758190928f9f65a5faaa47577df3a8 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 11:50:05 +0700 Subject: [PATCH 13/29] Cleaning up --- app/sections/product-information/index.tsx | 4 +--- app/sections/related-products.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx index 962bee32..8f587a04 100644 --- a/app/sections/product-information/index.tsx +++ b/app/sections/product-information/index.tsx @@ -26,7 +26,6 @@ interface ProductInformationProps showShippingPolicy: boolean; showRefundPolicy: boolean; hideUnavailableOptions: boolean; - gallerySize?: never; } let ProductInformation = forwardRef( @@ -59,7 +58,6 @@ let ProductInformation = forwardRef( mediaLayout, showThumbnails, children, - gallerySize, ...rest } = props; let [quantity, setQuantity] = useState(1); @@ -112,7 +110,7 @@ let ProductInformation = forwardRef( / {product.title}
-
+
, From b6bf40f30bfeb2ce55469409d00c92aa723bc817 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 12:10:31 +0700 Subject: [PATCH 14/29] Update responsive style for product media grid --- app/modules/product-form/product-media.tsx | 2 +- app/styles/app.css | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/app/modules/product-form/product-media.tsx b/app/modules/product-form/product-media.tsx index 54d14b12..b21394bc 100644 --- a/app/modules/product-form/product-media.tsx +++ b/app/modules/product-form/product-media.tsx @@ -20,7 +20,7 @@ export function ProductMedia(props: ProductMediaProps) { if (mediaLayout === "grid") { return ( -
+
{media.map((med, i) => { let image = { ...med.image, altText: med.alt || "Product image" }; let aspectRatio = "3/4"; diff --git a/app/styles/app.css b/app/styles/app.css index 5abf827e..e39b93be 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -198,12 +198,16 @@ } .text-animation { - background-image: linear-gradient(to right, rgb(15, 15, 15), rgb(15, 15, 15)); + background-image: linear-gradient( + to right, + var(--underline-color, rgb(15, 15, 15)), + var(--underline-color, rgb(15, 15, 15)) + ); background-size: 0% 1px; background-repeat: no-repeat; display: inline; padding-bottom: 3px; - transition: background 0.2s ease-in; + transition: background 200ms ease-in-out; background-position: left calc(1em + 4px); } .text-animation:hover { From 81c7869c88d14c90ee7014ef77d301d176960903 Mon Sep 17 00:00:00 2001 From: hta218 Date: Fri, 16 Aug 2024 12:10:53 +0700 Subject: [PATCH 15/29] Update footer schema --- app/modules/Footer.tsx | 43 ++++++++++++++++++------------- app/weaverse/schema.server.ts | 48 +++++++++++++++++------------------ 2 files changed, 49 insertions(+), 42 deletions(-) diff --git a/app/modules/Footer.tsx b/app/modules/Footer.tsx index c238771a..dc793eb9 100644 --- a/app/modules/Footer.tsx +++ b/app/modules/Footer.tsx @@ -53,30 +53,37 @@ export function Footer({ let { items = [] } = menu || {}; let socialItems = [ - { - name: "Facebook", - to: socialFacebook, - icon: , - }, { name: "Instagram", to: socialInstagram, icon: , }, + { + name: "X", + to: socialX, + icon: , + }, { name: "LinkedIn", to: socialLinkedIn, icon: , }, { - name: "X", - to: socialX, - icon: , + name: "Facebook", + to: socialFacebook, + icon: , }, ]; return ( -