crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-26 19:51:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Shopify Provier Updates (#212)

Browse Source 
* changes

* Adding shopify commit

* Changed to query page by id

* Fixed page query, Changed use-search GraphQl query

* Update use-search.tsx

* remove unused util

* Changed cookie expiration

* Update tsconfig.json

Co-authored-by: okbel <curciobel@gmail.com>
This commit is contained in:
cond0r
2021-03-01 16:47:30 +02:00
committed by GitHub
parent 751011767a
commit 641ce0aa64
18 changed files with 164 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
framework/shopify/utils/customer-token.ts
View File

@@ -1,12 +1,21 @@
import Cookies from 'js-cookie'
import { SHOPIFY_CUSTOMER_TOKEN_COOKIE } from '../const'
import Cookies, { CookieAttributes } from 'js-cookie'
import { SHOPIFY_COOKIE_EXPIRE, SHOPIFY_CUSTOMER_TOKEN_COOKIE } from '../const'
export const getCustomerToken = () => Cookies.get(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
export const setCustomerToken = (token: string | null, options?: any) => {
export const setCustomerToken = (
token: string | null,
options?: CookieAttributes
) => {
if (!token) {
Cookies.remove(SHOPIFY_CUSTOMER_TOKEN_COOKIE)
} else {
Cookies.set(SHOPIFY_CUSTOMER_TOKEN_COOKIE, token, options)
Cookies.set(
SHOPIFY_CUSTOMER_TOKEN_COOKIE,
token,
options ?? {
expires: SHOPIFY_COOKIE_EXPIRE,
}
)
}
}

4
framework/shopify/utils/get-categories.ts
View File

@@ -17,8 +17,8 @@ const getCategories = async (config: ShopifyConfig): Promise<Category[]> => {
return (
data.collections?.edges?.map(
({ node: { title: name, handle } }: CollectionEdge) => ({
entityId: handle,
({ node: { id: entityId, title: name, handle } }: CollectionEdge) => ({
entityId,
name,
path: `/${handle}`,
})

11
framework/shopify/utils/get-search-variables.ts
View File

@@ -2,9 +2,9 @@ import getSortVariables from './get-sort-variables'
import type { SearchProductsInput } from '../product/use-search'
export const getSearchVariables = ({
categoryId,
brandId,
search,
categoryId,
sort,
}: SearchProductsInput) => {
let query = ''
@@ -13,17 +13,14 @@ export const getSearchVariables = ({
query += `product_type:${search} OR title:${search} OR tag:${search}`
}
if (categoryId) {
query += `tag:${categoryId}`
}
if (brandId) {
query += `${categoryId ? ' AND ' : ''}vendor:${brandId}`
query += `${search ? ' AND ' : ''}vendor:${brandId}`
}
return {
categoryId,
query,
...getSortVariables(sort),
...getSortVariables(sort, !!categoryId),
}
}

4
framework/shopify/utils/get-sort-variables.ts
View File

@@ -1,4 +1,4 @@
const getSortVariables = (sort?: string) => {
const getSortVariables = (sort?: string, isCategory = false) => {
let output = {}
switch (sort) {
case 'price-asc':
@@ -21,7 +21,7 @@ const getSortVariables = (sort?: string) => {
break
case 'latest-desc':
output = {
sortKey: 'CREATED_AT',
sortKey: isCategory ? 'CREATED' : 'CREATED_AT',
reverse: true,
}
break

59
framework/shopify/utils/normalize.ts
View File

@@ -1,3 +1,5 @@
import { Product } from '@commerce/types'
import {
Product as ShopifyProduct,
Checkout,
@@ -5,8 +7,8 @@ import {
SelectedOption,
ImageConnection,
ProductVariantConnection,
ProductOption,
MoneyV2,
ProductOption,
} from '../schema'
import type { Cart, LineItem } from '../types'
@@ -19,18 +21,26 @@ const money = ({ amount, currencyCode }: MoneyV2) => {
}
const normalizeProductOption = ({
id,
name: displayName,
values,
...rest
}: ProductOption) => {
return {
__typename: 'MultipleChoiceOption',
id,
displayName,
values: values.map((value) => ({
label: value,
hexColors: displayName === 'Color' ? [value] : null,
})),
...rest,
values: values.map((value) => {
let output: any = {
label: value,
}
if (displayName === 'Color') {
output = {
...output,
hexColors: [value],
}
}
return output
}),
}
}
@@ -41,19 +51,28 @@ const normalizeProductImages = ({ edges }: ImageConnection) =>
}))
const normalizeProductVariants = ({ edges }: ProductVariantConnection) => {
return edges?.map(({ node: { id, selectedOptions } }) => ({
id,
options: selectedOptions.map(({ name, value }: SelectedOption) =>
normalizeProductOption({
id,
name,
values: [value],
})
),
}))
return edges?.map(
({
node: { id, selectedOptions, sku, title, priceV2, compareAtPriceV2 },
}) => ({
id,
name: title,
sku: sku ?? id,
price: +priceV2.amount,
listPrice: +compareAtPriceV2?.amount,
requiresShipping: true,
options: selectedOptions.map(({ name, value }: SelectedOption) =>
normalizeProductOption({
id,
name,
values: [value],
})
),
})
)
}
export function normalizeProduct(productNode: ShopifyProduct): any {
export function normalizeProduct(productNode: ShopifyProduct): Product {
const {
id,
title: name,
@@ -95,8 +114,8 @@ export function normalizeCart(checkout: Checkout): Cart {
},
taxesIncluded: checkout.taxesIncluded,
lineItems: checkout.lineItems?.edges.map(normalizeLineItem),
lineItemsSubtotalPrice: checkout.subtotalPriceV2?.amount,
subtotalPrice: checkout.subtotalPriceV2?.amount,
lineItemsSubtotalPrice: +checkout.subtotalPriceV2?.amount,
subtotalPrice: +checkout.subtotalPriceV2?.amount,
totalPrice: checkout.totalPriceV2?.amount,
discounts: [],
}

69
framework/shopify/utils/queries/get-all-products-query.ts
View File

@@ -1,3 +1,38 @@
export const productConnection = `
pageInfo {
hasNextPage
hasPreviousPage
}
edges {
node {
id
title
vendor
handle
description
priceRange {
minVariantPrice {
amount
currencyCode
}
}
images(first: 1) {
pageInfo {
hasNextPage
hasPreviousPage
}
edges {
node {
originalSrc
altText
width
height
}
}
}
}
}`
export const productsFragment = `
products(
first: $first
@@ -5,39 +40,7 @@ products(
reverse: $reverse
query: $query
) {
pageInfo {
hasNextPage
hasPreviousPage
}
edges {
node {
id
title
vendor
handle
description
priceRange {
minVariantPrice {
amount
currencyCode
}
}
images(first: 1) {
pageInfo {
hasNextPage
hasPreviousPage
}
edges {
node {
originalSrc
altText
width
height
}
}
}
}
}
${productConnection}
}
`

21
framework/shopify/utils/queries/get-collection-products-query.ts
View File

@@ -1,16 +1,23 @@
import { productsFragment } from './get-all-products-query'
import { productConnection } from './get-all-products-query'
const getCollectionProductsQuery = /* GraphQL */ `
query getProductsFromCollection(
$categoryHandle: String!
$categoryId: ID!
$first: Int = 250
$query: String = ""
$sortKey: ProductSortKeys = RELEVANCE
$sortKey: ProductCollectionSortKeys = RELEVANCE
$reverse: Boolean = false
) {
collectionByHandle(handle: $categoryHandle)
{
${productsFragment}
node(id: $categoryId) {
id
... on Collection {
products(
first: $first
sortKey: $sortKey
reverse: $reverse
) {
${productConnection}
}
}
}
}
`

15
framework/shopify/utils/queries/get-page-query.ts
View File

@@ -1,12 +1,13 @@
export const getPageQuery = /* GraphQL */ `
query getPageBySlug($slug: String!) {
pageByHandle(handle: $slug) {
query($id: ID!) {
node(id: $id) {
id
title
handle
body
bodySummary
url
... on Page {
title
handle
body
bodySummary
}
}
}
`

1
framework/shopify/utils/queries/get-product-query.ts
View File

@@ -32,6 +32,7 @@ const getProductQuery = /* GraphQL */ `
node {
id
title
sku
selectedOptions {
name
value

68
framework/shopify/utils/to-commerce-products.ts
View File

@@ -1,68 +0,0 @@
// TODO: Fix the types in this file
// import { Product, Image } from '../types'
type Product = any
type Image = any
export default function toCommerceProducts(products: Product[]) {
return products.map((product: Product) => {
return {
id: product.id,
entityId: product.id,
name: product.title,
slug: product.handle,
title: product.title,
vendor: product.vendor,
description: product.descriptionHtml,
path: `/${product.handle}`,
price: {
value: +product.variants[0].price,
currencyCode: 'USD', // TODO
},
images: product.images.map((image: Image) => {
return {
url: image.src,
}
}),
// TODO: Fix the variant type
variants: product.variants.map((variant: any) => {
return {
id: variant.id,
// TODO: Fix the selectedOption type
options: variant.selectedOptions.map((selectedOption: any) => {
return {
__typename: 'MultipleChoiceOption',
displayName: selectedOption.name,
values: [
{
node: {
id: variant.id,
label: selectedOption.value,
},
},
],
}
}),
}
}),
// TODO: Fix the option type
productOptions: product.options.map((option: any) => {
return {
__typename: 'MultipleChoiceOption',
displayName: option.name,
// TODO: Fix the value type
values: option.values.map((value: any) => {
return {
node: {
entityId: 1,
label: value.value,
hexColors: [value.value],
},
}
}),
}
}),
options: [],
}
})
}