Product - date added

Steve_D1
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
standoutd
Navigator
1135 0 128

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
Steve_D1
Tourist
16 0 2

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

0 Likes
standoutd
Navigator
1135 0 128

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
Jane25
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
Radiator
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
Jane25
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
Jason
Shopify Expert
10360 158 2003

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.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
Radiator
Shopify Expert
49 0 12

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

@radiatorstudios
0 Likes
Jane25
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