Product - date added

Tourist
16 0 2

Hey guys,

Is it possible to display the date that a new product was added to the site?

My client would like this listed on their product details page, and I'd also like to add a highlight to products under a month old. I wasn't able to find this variable in the docs.

Thanks for your help

0 Likes
Navigator
1151 0 118

Hey Steve ...

 

product.published_at

   Returns the date and time the product was published

product.created_at

   Returns the date and time the product was created

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.
0 Likes
Tourist
16 0 2

Awesome, thanks mate. I wonder why it's not listed on the docs.

0 Likes
Navigator
1151 0 118

Hey, Steve. Happy to help out. Here is the wiki page with the product variables I referenced ...

http://wiki.shopify.com/Product

 

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.
0 Likes
Highlighted
Excursionist
36 0 31

Hi,

Do you know if it is possible to use make use of the product.created at/product.published_at to determine if it is a new product so as to allow us to display a "new" icon?

Thanks.

0 Likes
Shopify Expert
49 0 12

Hi Gwen. 

This sounds completely doable. One quick idea off the top of my head is to render your template with the product.created_at ( or published_at ) variable as a data-attribute on your products thumbnail container, and then use javascript to find that value, compare it to today's date within a certain threshold, then show your new icon.

Here is some non-working psuedo code to maybe get you started:

In your liquid template:

<div class="product-thumbnail" data-publish-date="{{ product.published_at }}">
     <img .... >
</div>


Then somewhere in your scripts:

$('.product-thumbnail').each(function(){

    var pubDate = $(this).data("publish-date");
    var todayDate = new Date();

   ... code to format dates appropriately so they can be compared.
 
   ... comparison operator to see if pubDate is within certain range based on todayDate

   ... show / hide your sale icon if conditions are met

});

Sorry for brevity, just highlighting concept. The hardest part will probably be the formatting of the dates and setting up the condition. But all completely doable using javascript. I could also be overthinking it and theres a much simpler solution.

If you don't have that many products, you could also use a tag and manage 'new status' manually.

<div class="product-thumbnail {% if product.tags contains 'new' %}new-icon{% endif %}">
     <img .... >
</div>

Hope that helps get you going. Good luck!

@radiatorstudios
0 Likes
Excursionist
36 0 31

Hi Radiator,

When you say completely doable using javascript, does it mean that i need to create a new .js file for the conditions or can i just work on the existing scripts.js.liquid? Sorry, just a beginner for coding.

Seems complicating...

Thanks.

0 Likes
Shopify Expert
9922 75 1439

You wouldn't need to use JavaScript. As an untested quick thought:

{% assign date_published = product.published_at | date:'%Y%m%d' %}
{% assign date_now = 'now' | date:'%Y%m%d' %}
{% assign date_difference = date_now | minus: date_published %}
{% if date_difference < 30 %}Fresh!{% endif %}

Hackish but it would work. Really the two dates should be converted to days for this to function for longer time spans.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
3 Likes
Shopify Expert
49 0 12

Post edited. Jason has the right idea. Formatting your date YYYYMMDD will get you there. 

@radiatorstudios
0 Likes
Excursionist
36 0 31

@ Jason - The code works! You're really good! Thanks a lot!

@ Radiator - What do you mean formatting my date to YYYYMMDD. I didn't see anywhere in the setting that allows me to set the date format.

0 Likes