Skip to content

Commit

Permalink
Merge pull request #205 from PaitoAnderson/sold-out-indicator
Browse files Browse the repository at this point in the history
Add Sold Out Indicator
  • Loading branch information
jaepass authored Jun 3, 2021
2 parents 27bc5c9 + 1e3bafe commit 05fb75e
Show file tree
Hide file tree
Showing 9 changed files with 33 additions and 41 deletions.
29 changes: 9 additions & 20 deletions components/collections/Collections.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { Component } from 'react';
import Link from 'next/link';
import Head from 'next/head';
import { connect } from 'react-redux';
import ProductCard from '../products/ProductCard';

class Collections extends Component {
constructor(props) {
Expand Down Expand Up @@ -106,26 +107,14 @@ class Collections extends Component {
<div className="row mb-5 collection-1">
{ this.filterProductsByCat(category.slug).map(product => (
<div key={product.id} className="col-6 col-sm-4 col-md-3">
<Link href="/product/[permalink]" as={`/product/${product.permalink}`}>
<a className="mb-5 d-block font-color-black cursor-pointer">
<div
className="mb-3"
style={{
paddingBottom: '125%',
background: `url("${product.media.source}") center center/cover`
}}
/>
<p className="font-size-subheader mb-2 font-weight-medium">
{product.name}
</p>
<p className="mb-2 font-color-medium">
{product.description.replace(reg, '')}
</p>
<p className="font-size-subheader font-weight-medium pb-2 borderbottom border-color-black">
{product.price.formatted_with_symbol}
</p>
</a>
</Link>
<ProductCard
permalink={product.permalink}
image={product.media.source}
name={product.name}
price={product.price.formatted_with_symbol}
description={product.description && product.description.replace(reg, '')}
soldOut={product.is.sold_out}
/>
</div>
))}
</div>
Expand Down
5 changes: 3 additions & 2 deletions components/productAssets/ProductDetail.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ class ProductDetail extends Component {
price,
variant_groups: variantGroups,
} = this.props.product;
const soldOut = this.props.product.is.sold_out;
const priceSymbol = this.getCurrencySymbol(price.formatted_with_symbol);
const { selectedOptions } = this.state;
const reg = /(<([^>]+)>)/ig;
Expand Down Expand Up @@ -148,10 +149,10 @@ class ProductDetail extends Component {

{/* Add to Cart & Price */}
<div className="d-flex py-4">
<button onClick={this.handleAddToCart}
<button onClick={this.handleAddToCart} disabled={soldOut}
className="h-56 bg-black font-color-white pl-3 pr-4 d-flex align-items-center flex-grow-1" type="button">
<span className="flex-grow-1 mr-3 text-center">
Add to cart
{ soldOut ? 'Sold out' : 'Add to cart' }
</span>
<span className="border-left border-color-white pl-3">
{priceSymbol}{this.getPrice()}
Expand Down
6 changes: 4 additions & 2 deletions components/products/ProductCard.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import Link from 'next/link';

export default function ProductCard({ permalink, image, name, description, price}) {
export default function ProductCard({ permalink, image, name, description, price, soldOut}) {
return (
<Link href="/product/[permalink]" as={`/product/${permalink}`}>
<a className="mb-5 d-block font-color-black cursor-pointer">
Expand All @@ -11,7 +11,9 @@ export default function ProductCard({ permalink, image, name, description, price
paddingBottom: '125%',
background: `url("${image}") center center/cover`
}}
/>
>
{soldOut && <div className="product-card--overlay-text">SOLD OUT</div>}
</div>
<p className="font-size-subheader mb-2 font-weight-medium">
{name}
</p>
Expand Down
16 changes: 8 additions & 8 deletions components/products/ProductRow.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ class ProductRow extends Component {

return (
<div className="row mb-5">
{products.map(({ id, permalink, media, name, price, description }) => (
<div key={id} className="col-6 col-sm-6 col-lg-3">
{products.map((product) => (
<div key={product.id} className="col-6 col-sm-6 col-lg-3">
<ProductCard
id={id}
permalink={permalink}
image={media.source}
name={name}
price={price.formatted_with_symbol}
description={description && description.replace(reg, '')}
permalink={product.permalink}
image={product.media.source}
name={product.name}
price={product.price.formatted_with_symbol}
description={product.description && product.description.replace(reg, '')}
soldOut={product.is.sold_out}
/>
</div>
))}
Expand Down
2 changes: 1 addition & 1 deletion pages/checkout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -587,7 +587,7 @@ class CheckoutPage extends Component {
</p>
<button
type="submit"
className="bg-black font-color-white w-100 border-none h-56 font-weight-semibold d-none d-lg-block checkout-btn"
className="bg-black font-color-white w-100 border-none h-56 font-weight-semibold d-none d-lg-block"
disabled={!selectedShippingOption}
onClick={this.captureOrder}
>
Expand Down
5 changes: 5 additions & 0 deletions style/scss/components/_product-card.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.product-card--overlay-text {
background-color: rgba(0,0,0,.7);
color: white;
text-align: center;
}
3 changes: 2 additions & 1 deletion style/scss/layout/_body.scss
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,8 @@ button {
}

&:disabled {
background: $gray-400;
cursor: not-allowed;
opacity: 60%;
}
}

Expand Down
7 changes: 0 additions & 7 deletions style/scss/pages/_checkout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,6 @@
padding-bottom: 6px;
}

.checkout-btn {
&:disabled {
cursor: not-allowed;
opacity: 60%;
}
}

.checkout-summary {
position: sticky;
top: 15%;
Expand Down
1 change: 1 addition & 0 deletions style/scss/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,4 @@
@import "components/footer-follow";
@import "components/loader";
@import "components/breadcrumbs";
@import "components/product-card";

0 comments on commit 05fb75e

Please sign in to comment.