Display Product Dimensions On Page

Site URL: https://www.halebyhenderson.com/gallery/p/kapulua-entry-table

Hello

I'm trying to find a way to display the product dimensions on product pages. Ideally below the choice of Material. 

As you'll see they are a decor company and this information is key to potential clients in setting up their spaces. 

I assume it could be accomplished by pulling information from the JSON data, however I'm pretty new to JSON and wouldn't know exactly how to pull it to print, plus does the Squarespace 'Code Block' support JSON and what I'm looking to accomplish?

Thank you for your time.

The first hurdle is getting the info. Are you thinking you want to use the shipping dimensions? Keep in mind that the shipping dimensions ideally represent the dimensions ( and weight ) of the shipping container. Which in some cases could be some number of inches larger than the actual product. If that is not a problem then the dimensions are available without diving into the JSON. There are two sources. In memory at Static.SQUARESPACE_CONTEXT.product. Or on the DOM on various data attributes of the element with class product-variants.

Manipulating these elements is a bit tricky. You will need to use JavaScript to get the information needed and put it into the DOM somewhere.

For each of your products are the dimensions that same no matter what variant is selected? In other words changing a variant on a product does not change its size, just its finish? If this is the case then the code becomes a bit easier as you don't have to deal with variants changing the size and making the code more complex.

If the product size and the shipping container size are not nearly the same then I'd recommend not using code to grab the shipping information. I suggest something like including it in the description. Or, adding it to the additional info as perhaps a text block and then use JavaScript to move elsewhere on the page, if desired.

We had been plugging in the product dimensions in the shipping information section, thinking this was its intended use.  Thus my hope was being able to pull that into a piece of code that displays that info for each product.

With that said, I think what should also be noted that at this time, the site is more of a gallery with buyers inquiring for purchases, so shipping isn't really a concern on the website side. Thus using 'Dimensions' for products with this desired result.

Regarding variants there are only I believe 2 products that have different sizes for one of their variants, though client could likely be convinced to bounce those to separate product if it eases this implementation. 

Does the above help clarify anything?

Please see the following Store Page Detail Product Dimensions.

Let us know how it goes.

This worked out, though I'm not sure if related or not, but on the live site text blocks are no longer appearing, though on the backend they are still present.
Any ideas?

7 minutes ago, mbj21 said:

I'm not sure if related or not, but on the live site text blocks are no longer appearing, though on the backend they are still present.
Any ideas?

It sounds like a failure in the code. The code does hide text blocks initially and when successfully run, it unhides them. That it to hide the background manipulations out of site of visitors view.

As to why the code failed, I don't know without seeing the site in action, with the code installed.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

@mbj21

Oh and the reason there isn't a problem in the editor is that the code is disabled there so as not to interfere with editing.

this is the home/landing page https://www.halebyhenderson.com/ but every page is experiencing it.

My code is not broken. It appears the code has been installed in Settings > Advanced > Code Injection > HEADER.

The code was designed for store pages only and should be installed per the install steps, Store Settings > Advanced > Page Header Code Injection for the store page.

Thank you for that clarity, this has cleared things up. Much appreciated brother.

On 5/13/2022 at 11:33 AM, creedon said:

Please see the following Store Product Detail Dimensions.

Let us know how it goes.

Hey @creedon which part of your code should I delete to stop the metric conversion, if I want to use mm instead of inches? I've updated the formatting part, but the calculation is past the borg. 😂

Also any chance you have another one of these magical snippets to show the cost of shipping on the product page as well? Thanks so much! 

14 hours ago, melaniejaane said:

which part of your code should I delete to stop the metric conversion

Find the following line.

d [ key ] = inchesToMillimeters ( inches, decimalPlaces );

Change it to the following.

d [ key ] = inches.toFixed ( decimalPlaces ); // inchesToMillimeters ( inches, decimalPlaces );

Let us know how it goes.

14 hours ago, melaniejaane said:

Also any chance you have another one of these magical snippets to show the cost of shipping on the product page as well?

I do not.

On 8/16/2024 at 8:56 AM, creedon said:

Find the following line.

d [ key ] = inchesToMillimeters ( inches, decimalPlaces );

Change it to the following.

// d [ key ] = inchesToMillimeters ( inches, decimalPlaces );

Let us know how it goes.

I do not.

@creedon thanks so much. I updated the line in code to above, but the measurements have reverted back to this state instead:  "%wMm".  

Added link and password to site below, and included dimensions in the description if that's helpful?

https://selwyndealers.squarespace.com/shop/p/table

password: Selwyn

18 minutes ago, melaniejaane said:

I updated the line in code to above, but the measurements have reverted back to this state instead:  "%wMm".

I'll need to dig a bit deeper.

The site URL and password will help. It's easier to work on a working example. This may take some time. Please ping in several days if you don't hear back from me.

26 minutes ago, melaniejaane said:

I updated the line in code to above, but the measurements have reverted back to this state instead:  "%wMm".

I have updated my previous code change post.

Let us know how it goes.

What I'd like to do at some point would be to update the code to recognize the two different measurement systems ( imperial, metric ) site settings and do the conversions from those starting points. Then in theory this hack wouldn't be needed.

30 minutes ago, creedon said:

I have updated my previous code change post.

Let us know how it goes.

What I'd like to do at some point would be to update the code to recognize the two different measurement systems ( imperial, metric ) site settings and do the conversions from those starting points. Then in theory this hack wouldn't be needed.

@creedonPerfect thank you and great idea!

Is there a way to remove measurements and/or decimal points when they're zero? 

So if the measurement is 600mm it would show as 600mm not 600.00mm.
And if one / any of the shipping dimensions were 0 it would skip those lines. I tried but just made the entire description disappear. 🤦‍♀️
 

4 hours ago, melaniejaane said:

Is there a way to remove measurements and/or decimal points when they're zero?

It could be done for all items. But if you want some to have decimals and others not, my code isn't that smart.

I have updated my code post.

From the changes...

• control decimal places in format instead of a single setting
• use site measurement standard setting for conversions

Let me know how it goes.

If you've used this code previously note the change in the format tags you can use.

@melaniejaane You may find this new version of interest. I think you'll be able to use it without hacks to the code.

@creedon works brilliantly thank you!!

@creedon I discovered one mini bump, I think this section of the code is hiding all the Footer text blocks in display mode (preview and public but not edit).

 Can I turn it off or will this ruin something else?

Thanks again! 😊

1 hour ago, melaniejaane said:

I discovered one mini bump, I think this section of the code is hiding all the Footer text blocks in display mode (preview and public but not edit).

Thank you for reporting this bug.

I have updated my code post.

From the changes...

• fix for text blocks being hidden in footer

Let me know how it goes.

On 8/20/2024 at 1:21 PM, creedon said:

Thank you for reporting this bug.

I have updated my code post.

From the changes...

• fix for text blocks being hidden in footer

Let me know how it goes.

@creedon Thanks for update, it fixed the footer across the store but text blocks on the main shop page are missing.

4 hours ago, melaniejaane said:

it fixed the footer across the store but text blocks on the main shop page are missing.

Thank you for reporting this bug.

I have updated my code post.

From the changes...

• fix for text blocks being hidden on category pages ( all and etc. )

Let me know how it goes.

On 8/22/2024 at 2:49 PM, creedon said:

Thank you for reporting this bug.

I have updated my code post.

From the changes...

• fix for text blocks being hidden on category pages ( all and etc. )

Let me know how it goes.

@creedon  Thanks for update, that did the trick!

I've also discovered that my accordions won't open when your code is applied. I do have other code in the page injection so not sure if it's a general bug or just a clash of codes. Would you possibly be able to take a look?

https://selwyndealers.squarespace.com/shop/p/table-bt4zd

Thanks again! 😊

1 hour ago, melaniejaane said:

not sure if it's a general bug or just a clash of codes. Would you possibly be able to take a look?

First let get rid of some extra code. In Website > Website Tools > Code Injection > HEADER after the following line you have the full twcsl code. You're basically are trying to define it twice which isn't necessary, the follwing line is all that is needed to get twcsl going.

<script src="/s/twcsl-min.js"></script>

You have to be very careful excising the extra code. It's really long and if you lose track of things you can really mess things up.

Now onto the issue.

My code is not designed to work with other code. It is designed to work with a standard SS site.

I can describe what is happening. Your accordion block moving code is appending the accordion block into the product details excerpt. My code manipulates the excerpt as part of replacing my codes trigger text with the dimensions. My code doesn't expect non-standard elements to be in the excerpt and so when it does the search and replace, it breaks the accordion which has complicated code associated with it that makes the accordion work (DOM event stuff).

If the accordion moving code were to not append the accordion code to the excerpt but put it after the excerpt element, then I think all would be good.