Skip to content

Commit

Permalink
preparing the newsted product grid feature experience
Browse files Browse the repository at this point in the history
  • Loading branch information
iamkevingreen committed Sep 10, 2023
1 parent 3fa51a4 commit ead053a
Show file tree
Hide file tree
Showing 8 changed files with 138 additions and 9 deletions.
2 changes: 2 additions & 0 deletions app/components/PageComponentList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import React from 'react';
import { Hero } from '~/components/sharable/hero'
import { ValueProps } from '~/components/sharable/valueProps'
import { Faqs } from '~/components/sharable/faqs'
import { ProductGrid } from '~/components/sharable/productGrid'

const COMPONENTS = {
'module.hero': Hero,
'module.valueProps': ValueProps,
'module.faqs': Faqs,
'module.productGrid': ProductGrid
};

const PageComponentList = ({components = [], componentProps = {}}) => {
Expand Down
18 changes: 18 additions & 0 deletions app/components/sharable/productGrid.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// import BlockContent from '@sanity/block-content-to-react'
// import Serializer from '~/serializers/richText'

export const ProductGrid = ({
bgColor,
products,
}) => {
// console.log('products', products)
return (
<section style={{
backgroundColor: bgColor
}} className='p-4 text-center 800:py-20'>
PRODUCT GRID

</section>
)
}

17 changes: 17 additions & 0 deletions app/queries/sanity.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,22 @@ const MODULE_BIG_BENEFITS = groq`
}
`

const MODULE_PRODUCT_GRID = groq`
(_type == 'module.productGrid') => {
'bgColor': bgColor.hex,
products[] {
_key,
_type,
'product': product-> {
store,
},
'productVariant': productVariant-> {
store,
}
}
}
`

const MODULE_FAQS = groq`
(_type == 'module.faqs') => {
'bgColor': bgColor.hex,
Expand Down Expand Up @@ -153,6 +169,7 @@ const PAGE_MODULES = groq`
_key,
${MODULE_STANDARD_TEXT},
${MODULE_HERO},
${MODULE_PRODUCT_GRID},
${MODULE_VALUE_PROPS},
${MODULE_FAQS}
`
Expand Down
2 changes: 1 addition & 1 deletion app/routes/($locale)._index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export async function loader({context}) {
const articles = await context.storefront.query(ARTICLES_QUERY)

const sanityPage = await context.sanity.fetch(QUERY_HOME)

console.log('sanity page', sanityPage)
// We're not covering accounts/auth in this class
// const customerAccessToken = await context.session.get('customerAccessToken');
// const customer = customerAccessToken ?
Expand Down
11 changes: 3 additions & 8 deletions app/styles/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -1382,11 +1382,6 @@ select {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[1\.4\] {
--tw-scale-x: 1.4;
--tw-scale-y: 1.4;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[1\.1\] {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
Expand Down Expand Up @@ -1849,15 +1844,15 @@ select {
.opacity-100 {
opacity: 1;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-25 {
opacity: 0.25;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-60 {
opacity: 0.6;
}
.outline {
outline-style: solid;
}
Expand Down
2 changes: 2 additions & 0 deletions cms/schemas/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ import moduleHero from './objects/module/hero'
import moduleFAQs from './objects/module/faqModule'
import moduleValueProps from './objects/module/valueProps'
import moduleBigBenefits from './objects/module/bigBenefits'
import moduleProductGrid from './objects/module/productGrid'

import shopifyCollection from './objects/shopifyCollection'
import shopifyCollectionRule from './objects/shopifyCollectionRule'
Expand All @@ -111,6 +112,7 @@ const objects = [
moduleFAQs,
moduleValueProps,
moduleBigBenefits,
moduleProductGrid,

moduleProduct,
moduleProducts,
Expand Down
1 change: 1 addition & 0 deletions cms/schemas/modules/pageComponentList.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default {
{ type: 'module.valueProps' },
{ type: 'module.faqs' },
{ type: 'module.image' },
{ type: 'module.productGrid' },
{ type: 'module.standardText' },
],
};
94 changes: 94 additions & 0 deletions cms/schemas/objects/module/productGrid.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React from 'react'
import {defineField, defineType} from 'sanity'
import {PackageIcon} from '@sanity/icons'

import {COLORS} from '../../../constants'

const GROUPS = [
{
name: 'theme',
title: 'Theme',
},
{
default: true,
name: 'editorial',
title: 'Editorial',
},
]

export default defineType({
name: 'module.productGrid',
title: 'Product Grid',
type: 'object',
icon: PackageIcon,
groups: GROUPS,
fields: [
defineField({
name: 'products',
title: 'Products',
type: 'array',
group: 'editorial',
validation: Rule => Rule.required().min(1).max(3),
of: [{
type: 'object',
name: 'productWithVariant',
title: 'Product With Variant',
fields: [
defineField({
name: 'product',
title: 'Product',
type: 'reference',
to: { type: 'product' }
}),
defineField({
name: 'productVariant',
title: 'Product Variant',
type: 'reference',
to: { type: 'productVariant' },
options: {
filter: ({ parent }) => {
const productId = parent?.product?._ref
return {
filter: '_id in *[_id == $shopifyProductId][0].store.variants[]._ref',
params: {
shopifyProductId: productId
}
}
}
}
})
],
preview: {
select: {
product: 'product'
},
prepare(selection) {
const { product } = selection

return {
title: 'Product With Variant',
subtitle: product.title
}
}
}
}]
}),
defineField({
name: 'bgColor',
title: 'Background Color',
type: 'color',
group: 'theme',
options: {
colorList: COLORS,
},
}),
],
preview: {
select: {},
prepare(selection) {
return {
title: 'Product Grid',
}
},
},
})

0 comments on commit ead053a

Please sign in to comment.