URI закодировать Shopify URL статьи

Question

Есть ли способ Uri закодировать ссылку в Shopify:

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

Строительство из кнопок акций и tubmlr не нравится, что они не кодируются.

Answer 1

К сожалению, Shopify не предоставляет никаких фильтров для кодирования URI. Лучше всего использовать Javascript. Например добавить данные для URL = «{{shop.url}} {{article.url}}» атрибут вашей HTML-разметки и придать ему уникальный идентификатор, то скрипт:

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); 
} 

Называйте это в себе призыве или приготовьте документ, если хотите. Установите href в HTML на все, что вы хотите для браузеров, отличных от javascript. Вы могли бы рассмотреть вопрос об использовании Tumblr значка виджет строителя: http://www.tumblr.com/buttons и их официальных JS, потому что вы никогда не знаете, когда синтаксис ссылки может изменить

Answer 2

Моей грубой попытка выглядит следующим образом:

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

и так далее. Я еще не освоил искусство писать жидкие функции.

Answer 3

Не уверен, что он был недавно добавлен, но url_param_escape, похоже, делает именно то, что вы хотите. Это работает для меня:

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

Answer 4

Я закончил тем, что делал это с помощью Tumblr-х build a button widget, а затем слегка изменяя JS. Поскольку я хотел использовать значок Tumblr из Font Awesome/Bootstrap, я просто удалил атрибуты стиля, которые JS присваивает, а затем назначил соответствующий класс якорю, создаваемому JS. Инструкции следующим образом:

1. Получить код: Выберите случайный стиль кнопки (это не имеет значения, потому что вы в конечном итоге удаление кода, который задает фоновое изображение), установите тип записи на «фото» и выберите «Javascript» в качестве языка программирования (последние два варианта находятся в разделе «Расширенный» аккордеон). Как только вы это сделаете, Tumblr выплюнет какой-то код, который вы затем сможете изменить.

2. Создайте новый сниппет: Создание нового фрагмента кода в редакторе вашей темы, а затем скопировать и вставить в сценарии, найденных в пунктах 1 и 3 кнопки строителя.

<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. Настройка JS: Во-первых, установить переменные. Затем вы можете указать фоновое изображение или значок для якоря. Как я уже сказал выше, я использую значок Tumblr из Font Awesome, поэтому я просто удалил все атрибуты стиля, innerHTML и присвоил класс «fa fa-tumblr».

Если вы хотите использовать фоновое изображение, вы можете просто заменить URL своим изображением и настроить свойства высоты и ширины.

<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. Включите кнопку и фрагмент в HTML: Последнее, вставьте код ниже, где вы хотите, чтобы ваша кнопка, чтобы показать.

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

и добавьте фрагмент кода непосредственно перед </body> в вашем theme.liquid файле. .

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

Answer 5

Бит поздно к партии здесь, но для тех, кто интересно, Shopify теперь имеет фильтр для этого встроенный в

{{ my_var | url_param_escape }} 

Так, в приведенном выше случае, вы могли бы сделать:

{% capture my_escaped_url %} 
    {{ shop.url }}{{ article.url }} 
{% endcapture %} 

http://www.tumblr.com/share?v=3&u={{ my_escaped_url | url_param_escape }} 

Надеюсь, это поможет кому-то. Вы можете узнать больше здесь: https://help.shopify.com/themes/liquid/filters/string-filters#url_param_escape