PDP Hero Section Updates, Pt 2 #174

chrismekim · 2021-05-04T20:54:55Z

Description

Adds Variant and Quantity Spinner (Quantity spinner shows a hardcoded value of 10, like we talked about 5/5 :) @sepowitz
Adds ProductTextFields, which are repeatable Accentuate text fields for any text + wingdings the editors want to add (design)
Addresses this comment
Other minor styling updates to the PDP hero section, like padding

NOTE: For now, ignore themegit and check this preview.

Type(s) of changes

New feature
Update to an existing feature

Motivation for PR

#166, and part 2 of #173

How Has This Been Tested?

Preview: https://qmvt59fhb48l21hh-52674822324.shopifypreview.com

Example of product with variants:
https://index-space.org/products/anthropocene-copy

Applicable screenshots:

Follow-up PR

To implement the TO-DO in cart.ts: This function should check when the add to cart button is clicked and use a setTimeout to change the text to "Added to cart" and then revert back to "Add to cart" after a few seconds.
Related future PR: Slideshow styling adjustments (Product Description Page Slideshow #164)

github-actions · 2021-05-04T20:58:30Z

🤖 [themegit] The theme preview URL for 63e7bf3 is now deployed here: https://nunu-school.myshopify.com/?preview_theme_id=122395525300

chrismekim · 2021-05-04T21:08:57Z

theme/styles/snippets/add-to-cart-container.scss

+    position: relative;
+
+      &::after {
+        content: "▼";


Currently using this unicode character but will confirm with XXIX if we can use this or need to use the svg triangle from Figma.

theme/snippets/add-to-cart-container.liquid

github-actions · 2021-05-04T21:13:23Z

🤖 [themegit] The theme preview URL for aedcf7c is now deployed here: https://nunu-school.myshopify.com/?preview_theme_id=122395525300

github-actions · 2021-05-04T22:50:26Z

🤖 [themegit] The theme preview URL for eeb9b28 is now deployed here: https://nunu-school.myshopify.com/?preview_theme_id=122395525300

theme/snippets/add-to-cart-container.liquid

github-actions · 2021-05-05T20:09:52Z

🤖 [themegit] The theme preview URL for 2fa493f is now deployed here: https://nunu-school.myshopify.com/?preview_theme_id=122395525300

github-actions · 2021-05-05T23:18:27Z

🤖 [themegit] The theme preview URL for 7a8fb19 is now deployed here: https://nunu-school.myshopify.com/?preview_theme_id=122395525300

chrismekim · 2021-05-05T23:26:18Z

theme/snippets/add-to-cart-container.liquid

+        <option value="" selected="selected">{{"snippets.add_to_cart_container.quantity_spinner.label" | t }}</option>
+        {% comment %}
+        TO-DO: Add notification if user adds quantity > product inventory
+        {% endcomment %}


@sepowitz and I talked about adding this to-do in the case that the added quantity is > product inventory, so the user is notified that they can't add X quantity.

Are you able to use liquid to get the available inventory and just disable Quantity options that exceed that amount?

chrismekim · 2021-05-06T21:46:33Z

theme/scripts/cart.ts

      const addToCartButton = document.querySelector(Cart.SELECTORS.addToCartButton);
-
+      


Added a to-do to update this function. This was written when products only had one variant.

When the user adds an item to their cart, if the item in the cart has the same variantId as the product page you are currently on, the Add to Cart button changes to "Added to cart"

This no longer works now that we have products with several variants.

In a future PR, I will update this function to check when the Add to cart button is clicked and use a setTimeout to change the text to "Added to cart" for a few seconds before reverting back to "Add to cart" so users can add multiple variants to their cart.

github-actions · 2021-05-06T22:06:52Z

🤖 [themegit] The theme preview URL for f987a52 is now deployed here: https://nunu-school.myshopify.com/?preview_theme_id=122395525300

good-idea

Looking good! My comments are from the POV of someone who has never seen this code before -- there's just some things happening in cart.ts that I had to dig into a bit to understand. So just some suggestions on improving that, but also --- I haven't had to do a vanilla JS + liquid thing in a long time, I remember how annoying it was and do not envy you...

good-idea · 2021-05-07T01:02:16Z

theme/snippets/add-to-cart-container.liquid

+        {% for i in (1...10) %}
+          <option value="{{ i }}">{{ i }}</option>
+        {% endfor %}       


Is there a reason why the quantity is a select from 1-10 and not a number input?

Gooood question! It was originally a number input but I changed it to a <select> because the design is a dropdown menu! When I looked into it, it seems like the way to create that design is a <select>. What do you think?

If that's what is designed, then yeah a dropdown makes sense! The only issue I can imagine is if there is someone who wants to add more than 10... but I don't think this will come up and they can just refresh and add in multiple batches i spose

good-idea · 2021-05-07T01:13:44Z

theme/scripts/cart.ts

@@ -216,7 +216,7 @@ export default(function() {
      }


For lines 210-216 (github won't actually let me comment on lines that are collapsed in the PR review zone)

These two calls might be able to be simplified:

from:

const cartHtml = await Cart.getCartHtml(); Cart.render(cartHtml); const cartItemCount = document.querySelector(Cart.SELECTORS.cartItemCount).getAttribute(Cart.ATTRIBUTES.itemCount); if (cartItemCount) { Cart.updateCartItemCount(cartItemCount); }

to simply:

await Cart.render() Cart.updateCartItemCount()

Then let these two functions deal with getting the cartHtml and the cartItemCount, respectively

good-idea · 2021-05-07T01:17:15Z

theme/scripts/cart.ts

      const addToCartButton = document.querySelector(Cart.SELECTORS.addToCartButton);
-
+      
      if (!addToCartButton) return;



Again my comment is for a line that is out of reach...

The fact that you're calling Cart.init(false) at the end of this function is a smell to me - shouldn't it already have been initialized? Maybe separate out the functionality that binds the addToCart forms into a separate method and call that here instead?

If I were to read Cart.bindAddToCartForms() at the bottom of this function I'd have a better sense of what's going on.

good-idea · 2021-05-07T01:23:54Z

theme/scripts/cart.ts

@@ -285,9 +285,10 @@ export default(function() {
      })


Line 270 above:

I hadn't ever done this: [].slice.call(...) - it looks like it's just to convert a NodeList into an array? You can use Array.from(document.querySelectorAll(...)). Or better yet just make a utility function:

function getElements(selector: string): Element[] { return Array.from(document.querySelectorAll(selector)) }

Then your usage of it will be a little more semantic

good-idea · 2021-05-07T01:29:59Z

theme/scripts/cart.ts

@@ -216,7 +216,7 @@ export default(function() {
      }



Line 209, above: would it be worth adding an Action.UPDATE and making the action argument required?

(it looks like it's required in handleAddtoCartButton... since it's optional in onChange I'd expect TS to be bugging you about this?)

good-idea · 2021-05-07T01:33:57Z

theme/snippets/add-to-cart-container.liquid

+        <option value="" selected="selected">{{"snippets.add_to_cart_container.quantity_spinner.label" | t }}</option>
+        {% comment %}
+        TO-DO: Add notification if user adds quantity > product inventory
+        {% endcomment %}


Are you able to use liquid to get the available inventory and just disable Quantity options that exceed that amount?

chrismekim · 2021-05-07T19:11:57Z

@good-idea

Are you able to use liquid to get the available inventory and just disable Quantity options that exceed that amount?

Previously I was getting the product selected or first available variant's inventory quantity to show options <= inventory, but realized that presented its own problems.. I wonder if Udit would have an idea about this!

It also gets complicated when the user selects one variant and then selects another. The quantity options should update based on the selected variant. @sepowitz mentioned that to implement this, it would be a bit more complex (e.g. have eventListeners listening to changes in the variant dropdown menu). I have about a week left, not full time, to make as many design updates as possible. So for lack of time we decided to go with having the quantity options as 1 - 10 to keep things simple. Then in the future, either show a notification if user adds quantity > product inventory, or refactor to only show quantity options <= product inventory. Maybe this could be something for Udit to work on if he's interested?

chrismekim · 2021-05-07T19:16:19Z

@good-idea thank you for taking the time to review, especially the cart! I'm going to take these comments and make an issue so we can make improvements to the cart in a separate PR. :)

ETA: Issue #176

chrismekim commented May 4, 2021

View reviewed changes

theme/snippets/add-to-cart-container.liquid Outdated Show resolved Hide resolved

chrismekim commented May 4, 2021

View reviewed changes

theme/snippets/add-to-cart-container.liquid Show resolved Hide resolved

chrismekim mentioned this pull request May 5, 2021

PDP Hero Section Styling Updates, Pt. 1 #173

Merged

2 tasks

chrismekim added 13 commits May 5, 2021 14:45

In progress

3fb541c

Clean up

582cf32

Fix quantity and variant

ce72c50

Remove quantity spinner and variant styling

0a54352

test

01fd88a

add quantity and variant

671268b

update styling

feb3220

clean up

e274322

clean up

b4ff11c

Clean up

8cfda7c

Change variable names

b6a8372

clean up

effc906

Update quantity spinner to have 10

68292bb

chrismekim force-pushed the feature/165-pdp-detail-pt2 branch from 06cfa1e to 68292bb Compare May 5, 2021 21:56

chrismekim changed the title ~~[WIP] PDP Hero Section Styling Updates, Adds Variant and Quantity Spinner, Pt 2~~ [WIP] Adds PDP Variant and Quantity Spinner May 5, 2021

Add product text fields

753a6a1

clean up

87cc0e7

chrismekim commented May 5, 2021

View reviewed changes

chrismekim changed the title ~~[WIP] Adds PDP Variant and Quantity Spinner~~ [WIP] PDP Hero Section Updates, Pt 2 May 5, 2021

add to do

fab508c

chrismekim commented May 6, 2021

View reviewed changes

chrismekim changed the title ~~[WIP] PDP Hero Section Updates, Pt 2~~ PDP Hero Section Updates, Pt 2 May 6, 2021

chrismekim requested a review from limsohee1002 May 6, 2021 21:47

chrismekim requested a review from good-idea May 6, 2021 22:07

good-idea approved these changes May 7, 2021

View reviewed changes

chrismekim mentioned this pull request May 7, 2021

Cart Improvements #176

Open

chrismekim requested a review from good-idea May 7, 2021 19:19

good-idea approved these changes May 7, 2021

View reviewed changes

chrismekim mentioned this pull request May 7, 2021

Improve handling Product Page Variant Select Quantities #177

Open

chrismekim merged commit 340fe09 into main May 7, 2021

chrismekim deleted the feature/165-pdp-detail-pt2 branch May 7, 2021 19:42

chrismekim mentioned this pull request May 7, 2021

Product Description Detail Section #165

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PDP Hero Section Updates, Pt 2 #174

PDP Hero Section Updates, Pt 2 #174

chrismekim commented May 4, 2021 •

edited

Loading

github-actions bot commented May 4, 2021

chrismekim May 4, 2021

github-actions bot commented May 4, 2021

github-actions bot commented May 4, 2021

github-actions bot commented May 5, 2021

github-actions bot commented May 5, 2021

chrismekim May 5, 2021

good-idea May 7, 2021

chrismekim May 6, 2021

github-actions bot commented May 6, 2021

good-idea left a comment

good-idea May 7, 2021

chrismekim May 7, 2021

good-idea May 7, 2021

good-idea May 7, 2021

good-idea May 7, 2021

good-idea May 7, 2021

good-idea May 7, 2021

good-idea May 7, 2021

chrismekim commented May 7, 2021

chrismekim commented May 7, 2021 •

edited

Loading

		const addToCartButton = document.querySelector(Cart.SELECTORS.addToCartButton);

		const addToCartButton = document.querySelector(Cart.SELECTORS.addToCartButton);


		if (!addToCartButton) return;

PDP Hero Section Updates, Pt 2 #174

PDP Hero Section Updates, Pt 2 #174

Conversation

chrismekim commented May 4, 2021 • edited Loading

Description

Type(s) of changes

Motivation for PR

How Has This Been Tested?

Applicable screenshots:

Follow-up PR

github-actions bot commented May 4, 2021

Choose a reason for hiding this comment

github-actions bot commented May 4, 2021

github-actions bot commented May 4, 2021

github-actions bot commented May 5, 2021

github-actions bot commented May 5, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented May 6, 2021

good-idea left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrismekim commented May 7, 2021

chrismekim commented May 7, 2021 • edited Loading

chrismekim commented May 4, 2021 •

edited

Loading

chrismekim commented May 7, 2021 •

edited

Loading