Uri encode shopify url to article

Question

Is there any way uri can encode the link in shopify:

http://www.tumblr.com/share?v=3&u={{ shop.url }}{{ article.url }}

Creating common buttons and tubmlr do not like the fact that they are not encoded.

Answer 1

Unfortunately, Shopify does not provide any filters for encoding URIs. Best to use Javascript. For example, add the attribute data-url = "{{shop.url}} {{article.url}}" to your HTML markup and give it a unique identifier, and then a script:

 var x=document.getElementById("uniqueID"); if (x != null) { var url='http://www.tumblr.com/share?v=3&u='+encodeURIComponent(x.getAttribute("data-url")); x.setAttribute("href", url); } 

Call it yourself or in the finished document, if you want. Install href in HTML to whatever you want for browsers other than javascript. You might think about how to use the Tumblr widget widget: http://www.tumblr.com/buttons and their official JS, because you never know when the link syntax can change

Answer 2

Not sure if it was recently added, but url_param_escape seems to do exactly what you want. This worked for me:

{{ shop.url | append: article.url | url_param_escape }}

Answer 3

My rude attempt is this:

 {{ article.url | replace: ' ', '%20' | replace: '&', '%26' | replace: '?', '%3F' | replace: '!', '%21' | replace: ',', '%2C' | replace: "'", "%27" }} 

etc. I have not yet mastered the art of writing fluid functions.

Answer 4

A bit late for the party here, but for someone wondering, Shopify now has a filter for this inline.

 {{ my_var | url_param_escape }} 

So in the above example you can do:

 {% capture my_escaped_url %} {{ shop.url }}{{ article.url }} {% endcapture %} http://www.tumblr.com/share?v=3&u={{ my_escaped_url | url_param_escape }} 

Hope this helps someone. You can read more here: https://help.shopify.com/themes/liquid/filters/string-filters#url_param_escape

Answer 5

I ended this with Tumblr built a button widget , and then slightly modified JS. Since I wanted to use the Tumblr icon from Font Awesome / Bootstrap, I simply removed the style attributes that JS assigns, and then assigned the corresponding class to the anchor created by JS. Instructions are as follows:

1. Get the code: Choose the style of the random button (it doesn’t matter because you delete the code that sets the background image), set the message type to “photo” and select “Javascript” as the programming language (the last two options can be found in the section "Advanced" accordion). Once you do this, Tumblr will spit out code that you can change.

2. Create a new fragment: Create a new fragment in the theme editor, and then copy and paste the scripts found in steps 1 and 3 of the button builder.

 <script src="http://platform.tumblr.com/v1/share.js"></script> <!-- Set these variables wherever convenient --> <script type="text/javascript"> var tumblr_photo_source = ""; var tumblr_photo_caption = ""; var tumblr_photo_click_thru = ""; </script> <!-- Put this code at the bottom of your page --> <script type="text/javascript"> var tumblr_button = document.createElement("a"); tumblr_button.setAttribute("href", "http://www.tumblr.com/share/photo?source=" + encodeURIComponent(tumblr_photo_source) + "&caption=" + encodeURIComponent(tumblr_photo_caption) + "&clickthru=" + encodeURIComponent(tumblr_photo_click_thru)); tumblr_button.setAttribute("title", "Share on Tumblr"); tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:20px; height:20px; background:url('http://platform.tumblr.com/v1/share_4.png') top left no-repeat transparent;"); tumblr_button.innerHTML = "Share on Tumblr"; document.getElementById("tumblr_button_abc123").appendChild(tumblr_button); </script> 

3. Configure JS: First set the variables. You can then specify a background image or icon for the anchor. As I said, I use the Tumblr icon from Font Awesome, so I just removed all the style attributes, innerHTML, and assigned the class "fa fa-tumblr".

If you want to use a background image, you can simply replace the URL with your image and adjust the height and width properties.

 <script src="http://platform.tumblr.com/v1/share.js"></script> <script type="text/javascript"> var tumblr_photo_source = "{{ product.featured_image | product_img_url: "master" }}"; var tumblr_photo_caption = ""; var tumblr_photo_click_thru = "{{ shop.url | append: product.url }}"; </script> <script type="text/javascript"> var tumblr_button = document.createElement("a"); tumblr_button.setAttribute("class", "fa fa-tumblr"); tumblr_button.setAttribute("href", "http://www.tumblr.com/share/photo?source=" + encodeURIComponent(tumblr_photo_source) + "&caption=" + encodeURIComponent(tumblr_photo_caption) + "&clickthru=" + encodeURIComponent(tumblr_photo_click_thru)); tumblr_button.setAttribute("title", "Share on Tumblr"); document.getElementById("tumblr_button_abc123").appendChild(tumblr_button); </script> 

4. Include the button and snippet in your HTML: Finally, paste the code below wherever you want your button to appear.

 <!-- Put this tag wherever you want your button to appear --> <span id="tumblr_button_abc123"></span> 

And add the snippet just before </body> to the theme.liquid file.

 <!-- Scripts for Tumblr Share Button --> {% include 'your-tumblr-script-name' %}