Adding products/collection to a blog post WITHOUT the Buy Button

Solved
sanctumhealth
Tourist
5 0 1

Hi,

 

I'm hoping someone can help with this or at least, there be an easy solution.

 

I need to add products and/or collections to the bottom of a blog post.

 

I researched this and found the solution using the Buy Button but this solution conflicts with a discounts plugin we're using - via the Buy Button cart, the discounts don't appear and aren't applied.

 

The developer of the plugin has got back to say that unfrotunately, the plugin wasn't developeed to work with the dynamic checkout. The plugin is definitely more important that the buy button, so the plugin stays.

 

Is there another convenient way to list products on blog posts? Doesn't even need to be Add to Cart/Buy Now - just listings with the product images, titles and More Details links to the actual product pages would do.


Thanks in advance for any help you can offer.

0 Likes
Nick
Community Moderator
Community Moderator
3500 281 662

Hi @sanctumhealth,

 

Nick here from Shopify. Great question!

 

One way you could do this is by inserting a link to some text as a hyperlink so when someone clicks on the text it would take them to the product or collection page. It can be done natively from within the blog RTE and you wouldn't need an app or a plugin to do it. Once you know what word you want to select to highlight in the blog post, you can highlight it then select the tab in the RTE as seen in the screenshot below:

 

26-40-lkiph-aj2p0

 

It will then give you a couple of different options, such as do you want the person clicking on it to have a new tab opened or take them directly from the page they are on as well as some SEO options. You can see how this would look below:

 

26-42-kz4cv-wgenu

 

Hopefully, this helps and can do what you are looking for. 

 

All the best, Nick

Nick | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Ninthony
Shopify Partner
1626 224 611

This is an accepted solution.

Depending on where you wanted to do it, you could do it inside of liquid. Say you wanted to have the products show at the bottom of the blog post, you could do this under {{ article.content }} in article.liquid. You cannot access liquid inside of your WYSIWYG editor. So if it was below the blog post it could be as simple as going under {{ article.content }} and using a forloop kind of like:

 

{{ article.content }}
{% if article.title = "Your Title for Your Blog Post" %}
{% for product in collections.your-collection.products %}
<div class="product-container">
<div class="product-image">
<img src="{{ product.images[0] | img_url: '300x300' }}"
</div>
<div class="product-title">
{{ product.title }}
</div>
<div class="view-details">
<a href="{{ product.url }}">View Details</a>
</div>
</div>
{% endfor%}
{% endif %}

Alternatively, you CAN use javascript inside your editor if you toggle the html editor (<> button on the top right).  With javascript you can create an array of products urls from the collection you want to use. You can use those urls to access the products with jQuery.

 

So this would go in script tags inside your HTML editor:

 

// product1 and product2 are the handles of your products    
var unique_array = ['/products/product1.js', '/products/product2.js']
    for (var i=0; i < unique_array.length; i++){
      jQuery.getJSON(unique_array[i], function(product){
        var lastPeriod = product.images[0].lastIndexOf('.');
// here I split the product image url by the period in case it's a jpg, or png // and give it _200x because I only want the images to be that big
var imageStringOne = product.images[0].substring(0, lastPeriod); var imageStringTwo = product.images[0].substring(lastPeriod + 1); var productImage = imageStringOne + "_200x." + imageStringTwo; var productPrice = product.price;

//build an HTML template to inject into existing html code var suggestionTemplate = '<div class="image-title__container">' + '<div class="upsell-container__product-image">' + '<img src="'+ productImage + '">' + '</div>' + '<div class="title-price__container">' + '<div class="upsell-container__title">' + product.title + '</div>' + '<div class="upsell-container__price">' + Shopify.formatMoney(productPrice) + '</div>' + '<a href="' + product.url + '">' + '<div class="upsell-container__view-product">'+ 'View' + '</div>' + '</a>' + '</div>' + '</div>'; //then after all of this, I append the suggestionTemplate variable to an html // div with the class of "suggested-products__container" that you put //wherever you want the products to populate. $('.suggested-products__container').append(suggestionTemplate); }); }

It's kind of a long winded response, and something you'll probably only be able to do if you're a bit familiar with coding. But hopefully it helps you and anyone else who might want to know how to do something like that.

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
sanctumhealth
Tourist
5 0 1

Thanks @Nick for your reply - I was looking for something that works a bit more with the product listing functions. I think the answer below maybe what I'm after. Thanks though - much appreciated for the timely response!

sanctumhealth
Tourist
5 0 1

@Ninthony - I shall try this out. I figured there must be a way to do this with Liquid. Much appreciated and I'll let you know the outcome.

0 Likes
Nick
Community Moderator
Community Moderator
3500 281 662

No problem at all. I am not as comfortable with editing code and thought this way could be of some use. @Ninthony, on the other hand, is quite proficient and always offer's good advice in the community. Hope it works out for you. 

Nick | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Ninthony
Shopify Partner
1626 224 611

Cool let, me know. I also noticed I forgot to close my image tag in the liquid example, so be sure you do that:

 

<img src="{{ product.images[0] | img_url: '300x300' }}">
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
sanctumhealth
Tourist
5 0 1

@Ninthony - that pretty much worked. Thanks!

I was getting a JS error saying "shopify.formatmoney is not a function".

 

Did a bit of research and ended up adding the code from this comment: https://community.shopify.com/c/Shopify-Design/quot-shopify-formatmoney-is-not-a-function-quot-error...

 

That made the products visible. Need a bit of styling but that's all fine.

One small thing - the prices listed are in dollars - is there something that needs to be added to Shopify.formatmoney that lists them as GBP?

 

Also, as a further development of this solution - is there a way to build the array via the calling the product handles in a collection or do the product handles always have to added manually? Would just automate things a bit more.

 

Cheers!

0 Likes
Ninthony
Shopify Partner
1626 224 611

As far as I know, there is no way to get a hold of a collection or it's products outside of liquid, which you can't use for blog posts or pages. So I think it will always have to be done manually, if someone else knows, I'd certainly welcome that information cause lord knows I could use it. 

 

As for shopify.formatMoney() , I have only ever needed USD so I hadn't even thought about it. Here's a link to where I found those javascript functions, I don't see any documentation on them. There is a link on top to the minified javascript, which is like trying to read Sanskrit, but if you can decode it have at it. I do see the function accepts a second parameter, just no idea what it does:

 

https://mayert-douglas4935.myshopify.com/pages/api

 

Otherwise the only thing I could suggest is write your own function to handle the price.

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
sanctumhealth
Tourist
5 0 1

OK, I managed to format the price but it was a bit of a hack, not 100% perfect and I'm surprised there's not more dialogue out there about this.

 

First off - for some reason between yesterday and today, Shopify started added CDATA tags to the script I added to the test blog post - not sure why it started doing this several hours after I placed it but there you go. It stopped the script meaning I had to move it into the theme-custom.js file first of all.

 

So once that was in place, I replaced this code:

var productPrice = product.price; 

with with this

var productPrice = product.price;
var decimalPrice = (productPrice = (productPrice / 100).toFixed(2)).split('.');

that created the decimal place so the prices were listed as 20.00 rather than 2000 - although it's a comma and not a period.

 

Then in the HTML template of the script, I replaced,

shopify.FormatMoney(productPrice) +

with

'&pound;' + decimalPrice +

which nicely displays the prices as I need them.

 

As you've said - I'm open to neater solutions if anyone has one. Pretty sure the functionality is there to do it. This works for me though.

0 Likes