Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save stefbowerman/a7b5906e7c0aa7ed8a83c28e80ebf0f9 to your computer and use it in GitHub Desktop.

Select an option

Save stefbowerman/a7b5906e7c0aa7ed8a83c28e80ebf0f9 to your computer and use it in GitHub Desktop.
Strip the last embedded iframe from a Shopify product description using liquid. This is helpful if a store wants to use a custom video per product, just use the 'embed video' button on the WYSIWYG editor and this code will take care of the rest.
<!--
Strip the last embedded iframe from a Shopify product description using liquid.
This is helpful if a store wants to use a custom video per product (without the img alt tag hack)
Just use the 'embed video' button on the WYSIWYG editor and this code will take care of the rest.
Place code in product.liquid
This snippet will turn this -
<p>Here's my description</p>
<p><iframe src="https://youtube.com..." /></p>
Into this -
<p>Here's my description</p>
<p></p>
With the following liquid variables available -
description (string) - Product description with iFrame stripped, returns product.description if no iframe is found
product_has_video (boolean) - Whether or not an iframe was found
product_video_src (string) - Src attribute stripped from iframe
-->
{% comment %} Code for stripping last iframe embedded in product description {% endcomment %}
{% assign product_has_video = false %}
{% assign product_video_src = '' %}
{% assign iframe_open_tag = '<iframe' %}
{% assign iframe_close_tag = '</iframe>' %}
{% assign description = product.description %}
{% if description contains iframe_open_tag %}
{% assign description_parts = description | split: iframe_open_tag %}
{% assign description = '' %} {% comment %} Reset this because we're going to rebuild it without any iframes {% endcomment %}
{% assign parts_loop_max = description_parts | size | minus: 2 %} {% comment %} Minus 1 because array is zero index, minus 1 more because we don't want the last element {% endcomment %}
{% assign target_description_part = description_parts | last %}
{% for i in (0..parts_loop_max) %}
{% assign description = description | append: description_parts[i] | append: iframe_open_tag %}
{% endfor %}
{% assign target_part = description_parts | last %}
{% if target_part contains iframe_close_tag %}
{% comment %} Split on the tag and extract the "src" {% endcomment %}
{% assign parts = target_part | split: iframe_close_tag %}
{% assign product_video_src = parts[0] | split: 'src="' %}
{% assign product_video_src = product_video_src[1] | split: '"' | first %}
{% assign description_remainder = parts[1] %} {% comment %} The fact that we split on iframe first and then on </iframe> pretty much guarantees that we only have 2 parts{% endcomment %}
{% if product_video_src %}
{% assign product_has_video = true %}
{% endif %}
{% assign description = description | append: description_remainder %} {% comment %} Build description out of what is left {% endcomment %}
{% endif %}
{% endif %}
{% comment %} End iframe stripping {% endcomment %}
.
.
.
.
.
<div class"product-description">
{{ description }}
</div>
{% if product_has_video %}
<iframe src="{{ product_video_src }}" frameborder="0" allowfullscreen></iframe>
{% endif %}
.
.
.
.
<style type="text/css">
/* Since we strip iframes, we might be left with empty p tags, hide them just in case */
.product-description p:empty {
display: none;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment