Skip to content

Staging #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sankartn merged 5 commits into from
Apr 3, 2024
Merged

Staging #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c8f1bb
added pixel changes
ChinmayeeMestryCstk Apr 3, 2024
4ab032b
resolved PR comments and added footer dynamic
ChinmayeeMestryCstk Apr 3, 2024
6544bef
resolved PR comments and added footer dynamic
ChinmayeeMestryCstk Apr 3, 2024
f1781c6
Merge pull request #37 from contentstack/shopify-add-oxygen-workflow-…
sankartn Apr 3, 2024
b3c8a7f
Merge pull request #38 from contentstack/development
sankartn Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions app/components/Cart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,10 +250,10 @@ export function CartEmpty({
</p>
<br />
<Link
to="/collections"
to="/collections/all"
onClick={() => {
if (layout === 'aside') {
window.location.href = '/collections';
window.location.href = '/collections/all';
}
}}
>
Expand Down Expand Up @@ -294,7 +294,9 @@ function CartDiscounts({
<div>
<input type="text" name="discountCode" placeholder="Discount code" />
&nbsp;
<button type="submit">Apply</button>
<button className="view-all-products search-aside-cta " type="submit">
Apply
</button>
</div>
</UpdateDiscountForm>
</div>
Expand Down
7 changes: 6 additions & 1 deletion app/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,12 @@ function SearchAside() {
type="search"
/>
&nbsp;
<button type="submit">Search</button>
<button
className="view-all-products search-aside-cta "
type="submit"
>
Search
</button>
</div>
)}
</PredictiveSearchForm>
Expand Down
2 changes: 1 addition & 1 deletion app/routes/($locale)._index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -604,7 +604,7 @@ function RecommendedProducts({
<div className="featured-wrapper container">
<div className="featured-content">
<div>
<h2 className="bodyCss feature-heading">
<h2 className="bodyCss feature-heading bs-mg-bt">
{cmsData?.best_seller?.title}
</h2>
<p>{cmsData?.best_seller?.description}</p>
Expand Down
5 changes: 2 additions & 3 deletions app/routes/($locale).account_.register.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,19 +146,18 @@ export default function Register() {
required
/>
</fieldset>
{error ? (
{error && (
<p>
<mark>
<small>{error}</small>
</mark>
</p>
) : (
<br />
)}
<button className="banner-repo-cta update recover-cta" type="submit">
Create Account
</button>
</Form>
<br />
<p className="sign-in">
<span>
Already have an account?
Expand Down
257 changes: 116 additions & 141 deletions app/routes/($locale).products.$handle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,97 +190,101 @@ export default function Product() {
variants={variants}
/>
</div>
<div className="related-wrapper">
<Suspense fallback={<div>Loading...</div>}>
<div className="featured-wrapper container">
<div className="featured-content">
<h2 className="product-css">{fetchedData?.heading}</h2>
</div>
<div className="feature-products-grid">
{limitedProducts?.length
? limitedProducts?.map((product: any) => {
let priceOff: any;
// Check if the product is available for sale and all necessary price data is provided
if (
product.availableForSale &&
product.priceRange &&
product.compareAtPriceRange
) {
const price = parseFloat(
product.priceRange.minVariantPrice.amount,
);
const compareAtPrice = parseFloat(
product.compareAtPriceRange.minVariantPrice.amount,
);

priceOff = compareAtPrice - price;
}

return (
<Fragment key={product?.id}>
<Link
className="feature-product"
to={`/products/${product?.handle}`}
>
{product?.images?.nodes[0] ? (
<Image
data={product?.images?.nodes[0]}
aspectRatio="1/1"
sizes="(min-width: 45em) 20vw, 50vw"
/>
) : (
// eslint-disable-next-line jsx-a11y/img-redundant-alt
<img
src={NoImg}
alt="No Image"
style={{height: '85% !important'}}
/>
)}
<p className="product-cta">{product?.title}</p>
<small className="product-small-cta">
{product?.title}
</small>
{
<div className="product-price-on-sale">
{product?.priceRange ? (
<Money
className="price"
data={product?.priceRange?.minVariantPrice}
/>
) : null}
{product?.priceRange?.minVariantPrice?.amount <
product?.compareAtPriceRange?.minVariantPrice
?.amount ? (
<s>
{limitedProducts?.length ? (
<div className="related-wrapper">
<Suspense fallback={<div>Loading...</div>}>
<div className="featured-wrapper container">
<div className="featured-content">
<h2 className="product-css">{fetchedData?.heading}</h2>
</div>
<div className="feature-products-grid">
{limitedProducts?.length
? limitedProducts?.map((product: any) => {
let priceOff: any;
// Check if the product is available for sale and all necessary price data is provided
if (
product.availableForSale &&
product.priceRange &&
product.compareAtPriceRange
) {
const price = parseFloat(
product.priceRange.minVariantPrice.amount,
);
const compareAtPrice = parseFloat(
product.compareAtPriceRange.minVariantPrice.amount,
);

priceOff = compareAtPrice - price;
}

return (
<Fragment key={product?.id}>
<Link
className="feature-product"
to={`/products/${product?.handle}`}
>
{product?.images?.nodes[0] ? (
<Image
data={product?.images?.nodes[0]}
aspectRatio="1/1"
sizes="(min-width: 45em) 20vw, 50vw"
/>
) : (
// eslint-disable-next-line jsx-a11y/img-redundant-alt
<img
src={NoImg}
alt="No Image"
style={{height: '85% !important'}}
/>
)}
<p className="product-cta">{product?.title}</p>
<small className="product-small-cta">
{product?.title}
</small>
{
<div className="product-price-on-sale">
{product?.priceRange ? (
<Money
className="comparePrice"
data={
product?.compareAtPriceRange
?.minVariantPrice
}
className="price"
data={product?.priceRange?.minVariantPrice}
/>
</s>
) : (
''
)}
{priceOff > 0 ? (
<p className="comparePrice">
(${priceOff.toFixed(2)} OFF)
</p>
) : (
''
)}
</div>
}
</Link>
</Fragment>
);
})
: ''}
) : null}
{product?.priceRange?.minVariantPrice?.amount <
product?.compareAtPriceRange?.minVariantPrice
?.amount ? (
<s>
<Money
className="comparePrice"
data={
product?.compareAtPriceRange
?.minVariantPrice
}
/>
</s>
) : (
''
)}
{priceOff > 0 ? (
<p className="comparePrice">
(${priceOff.toFixed(2)} OFF)
</p>
) : (
''
)}
</div>
}
</Link>
</Fragment>
);
})
: ''}
</div>
</div>
</div>
</Suspense>
</div>
</Suspense>
</div>
) : (
''
)}
</>
);
}
Expand Down Expand Up @@ -316,26 +320,18 @@ function ProductMain({
metafield?.reference?.fields?.forEach((field: any) => {
valueMap.set(field.key, field.value);
});
function generateStars(rating: any) {
const roundedRating = Math.round(parseFloat(rating));
const fullStars = '★'.repeat(roundedRating);
const emptyStars = '☆'.repeat(5 - roundedRating);
return fullStars + emptyStars;
}

const rating = '4.4';
const stars = generateStars(rating);
const collectionName = product?.collections?.edges?.[0]?.node?.title;

return (
<>
<div className="product-main">
<h1>{title}</h1>
<br />
<div
className="description"
dangerouslySetInnerHTML={{__html: descriptionHtml}}
/>
{descriptionHtml && (
<div
className="description"
dangerouslySetInnerHTML={{__html: descriptionHtml}}
/>
)}
<ProductPrice selectedVariant={selectedVariant} />
<br />
<Suspense
Expand All @@ -361,16 +357,6 @@ function ProductMain({
</Await>
</Suspense>

<br />
{stars && (
<div
className="star-rating"
dangerouslySetInnerHTML={{
__html: stars,
}}
/>
)}

<br />
{valueMap.get('product_review') && (
<>
Expand All @@ -383,10 +369,10 @@ function ProductMain({
__html: valueMap.get('product_review'),
}}
/>
<br />
</>
)}

<br />
{valueMap.get('shipping_return_policy') && (
<>
<p>
Expand All @@ -398,21 +384,9 @@ function ProductMain({
__html: valueMap.get('shipping_return_policy'),
}}
/>
<br />
</>
)}

<br />
<div className="seprrator">
<svg
xmlns="http://www.w3.org/2000/svg"
width="600"
height="2"
viewBox="0 0 600 2"
fill="none"
>
<path d="M0 1H600" stroke="#E6E6E6" />
</svg>
</div>
<div className="shipping-container">
<div className="postalcode-container">
<svg
Expand Down Expand Up @@ -686,11 +660,7 @@ function AddToCartButton({
type="hidden"
/>
<div className="addtocartquantiy">
<button
className="increment-button"
onClick={handleIncrement}
disabled={disabled || fetcher.state !== 'idle'}
>
<button className="decrement-button" onClick={handleDecrement}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
Expand All @@ -701,19 +671,18 @@ function AddToCartButton({
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 3C12.3824 3 12.6923 3.30996 12.6923 3.69231V20.3077C12.6923 20.69 12.3824 21 12 21C11.6176 21 11.3077 20.69 11.3077 20.3077V3.69231C11.3077 3.30996 11.6176 3 12 3Z"
fill="#212121"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21 12C21 12.3824 20.69 12.6923 20.3077 12.6923L3.69231 12.6923C3.30996 12.6923 3 12.3824 3 12C3 11.6176 3.30996 11.3077 3.69231 11.3077L20.3077 11.3077C20.69 11.3077 21 11.6176 21 12Z"
d="M21 12C21 11.5858 20.69 11.25 20.3077 11.25L3.69231 11.25C3.30996 11.25 3 11.5858 3 12C3 12.4142 3.30996 12.75 3.69231 12.75L20.3077 12.75C20.69 12.75 21 12.4142 21 12Z"
fill="#212121"
/>
</svg>
</button>
<span className="totalquantiy">{quantity}</span>
<button className="decrement-button" onClick={handleDecrement}>
<span className="totalquantiy">{quantity - 1}</span>

<button
className="increment-button"
onClick={handleIncrement}
disabled={disabled || fetcher.state !== 'idle'}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
Expand All @@ -724,7 +693,13 @@ function AddToCartButton({
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21 12C21 11.5858 20.69 11.25 20.3077 11.25L3.69231 11.25C3.30996 11.25 3 11.5858 3 12C3 12.4142 3.30996 12.75 3.69231 12.75L20.3077 12.75C20.69 12.75 21 12.4142 21 12Z"
d="M12 3C12.3824 3 12.6923 3.30996 12.6923 3.69231V20.3077C12.6923 20.69 12.3824 21 12 21C11.6176 21 11.3077 20.69 11.3077 20.3077V3.69231C11.3077 3.30996 11.6176 3 12 3Z"
fill="#212121"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21 12C21 12.3824 20.69 12.6923 20.3077 12.6923L3.69231 12.6923C3.30996 12.6923 3 12.3824 3 12C3 11.6176 3.30996 11.3077 3.69231 11.3077L20.3077 11.3077C20.69 11.3077 21 11.6176 21 12Z"
fill="#212121"
/>
</svg>
Expand Down
Loading