Skip to content

Fix variable mobile design #1356

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
merged 3 commits into from
Oct 23, 2024
Merged

Fix variable mobile design #1356

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0366ddb
Update SingleProduct.component.tsx
w3bdesign Oct 23, 2024
0672f20
Update SingleProduct.component.tsx
w3bdesign Oct 23, 2024
8a28440
Update SingleProduct.component.tsx
w3bdesign Oct 23, 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
116 changes: 59 additions & 57 deletions src/components/Product/SingleProduct.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/*eslint complexity: ["error", 20]*/
// Imports
import { useState, useEffect } from 'react';

Expand Down Expand Up @@ -43,109 +42,112 @@ const SingleProduct = ({ product }: IProductRootObject) => {
if (process.browser) {
DESCRIPTION_WITHOUT_HTML = new DOMParser().parseFromString(
description,
'text/html',
'text/html'
).body.textContent;
}

return (
<section className="bg-white mb-[8rem] md:mb-12">
{/* Show loading spinner while loading, and hide content while loading */}
{isLoading ? (
<div className="h-56 mt-20">
<p className="text-2xl font-bold text-center">Laster produkt ...</p>
<br />
<LoadingSpinner />
</div>
) : (
<div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
<div className="grid grid-cols-1 gap-4 md:mt-16 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
{image && (
<img
id="product-image"
src={image.sourceUrl}
alt={name}
className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 md:hover:grow md:hover:scale-105"
/>
)}
{!image && (
<div className="container mx-auto px-4 py-8">
<div className="flex flex-col md:grid md:grid-cols-2 md:gap-8">
{/* Image Container */}
<div className="mb-6 md:mb-0">
<img
id="product-image"
src={
process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ??
image?.sourceUrl ||
process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ||
placeholderFallBack
}
alt={name}
className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 md:hover:grow md:hover:shadow-lg md:hover:scale-105"
className="w-full h-auto object-cover transition duration-500 ease-in-out transform md:hover:scale-105"
/>
)}
<div className="px-4 md:ml-8">
</div>

{/* Product Details Container */}
<div className="flex flex-col">
<h1 className="text-2xl font-bold text-center md:text-left mb-4">
{name}
</h1>
{/* Display sale price when on sale */}
{onSale && (
<div className="flex flex-col md:flex-row items-center md:items-start mb-4">
<p className="text-2xl font-bold text-gray-900">
{product.variations && filteredVariantPrice(price, '')}
{!product.variations && salePrice}
</p>
<p className="text-xl text-gray-500 line-through md:ml-4">
{product.variations && filteredVariantPrice(price, 'right')}
{!product.variations && regularPrice}
</p>
</div>
)}
{/* Display regular price when not on sale */}
{!onSale && <p className="text-2xl font-bold mb-4">{price}</p>}
<p className="text-lg mb-4 text-center md:text-left">

{/* Price Display */}
<div className="text-center md:text-left mb-6">
{onSale ? (
<div className="flex flex-col md:flex-row items-center md:items-start gap-2">
<p className="text-2xl font-bold text-gray-900">
{product.variations
? filteredVariantPrice(price, '')
: salePrice}
</p>
<p className="text-xl text-gray-500 line-through">
{product.variations
? filteredVariantPrice(price, 'right')
: regularPrice}
</p>
</div>
) : (
<p className="text-2xl font-bold">{price}</p>
)}
</div>

{/* Description */}
<p className="text-lg mb-6 text-center md:text-left">
{DESCRIPTION_WITHOUT_HTML}
</p>

{/* Stock Status */}
{Boolean(product.stockQuantity) && (
<div className="mb-4 p-2 bg-green-100 border border-green-400 rounded-lg mx-auto md:mx-0 max-w-[14.375rem]">
<p className="text-lg text-green-700 font-semibold text-center md:text-left">
{product.stockQuantity} på lager
</p>
<div className="mb-6 mx-auto md:mx-0">
<div className="p-2 bg-green-100 border border-green-400 rounded-lg max-w-[14.375rem]">
<p className="text-lg text-green-700 font-semibold text-center md:text-left">
{product.stockQuantity} på lager
</p>
</div>
</div>
)}

{/* Variations Select */}
{product.variations && (
<div className="mb-4">
<div className="mb-6 mx-auto md:mx-0 w-full max-w-[14.375rem]">
<label
htmlFor="variant"
className="block text-lg font-medium mb-2"
className="block text-lg font-medium mb-2 text-center md:text-left"
>
Varianter
</label>
<select
id="variant"
name="variant"
className="max-w-[14.375rem] block w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
onChange={(e) => {
setSelectedVariation(Number(e.target.value));
}}
className="w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
onChange={(e) => setSelectedVariation(Number(e.target.value))}
>
{product.variations.nodes.map(
({ id, name, databaseId, stockQuantity }) => {
// Remove product name from variation name
const filteredName = name.split('- ').pop();
return (
<option key={id} value={databaseId}>
{filteredName} - ({stockQuantity} på lager)
</option>
);
},
({ id, name, databaseId, stockQuantity }) => (
<option key={id} value={databaseId}>
{name.split('- ').pop()} - ({stockQuantity} på lager)
</option>
)
)}
</select>
</div>
)}
<div className="w-full p-4 md:p-0">
{product.variations && (

{/* Add to Cart Button */}
<div className="w-full mx-auto md:mx-0 max-w-[14.375rem]">
{product.variations ? (
<AddToCart
product={product}
variationId={selectedVariation}
fullWidth={true}
/>
)}
{!product.variations && (
) : (
<AddToCart product={product} fullWidth={true} />
)}
</div>
Expand Down
Loading