Shopify Shortcodes

Highlighted
Shopify Partner
371 0 51

Continued discussion from https://ecommerce.shopify.com/c/ecommerce-design/t/useful-and-important-links-for-creating-your-firs...

Project - https://github.com/ryanheart/shopify-shortcodes

Jason you seem to know the editor well what do you think the best syntax would be it can really be anything

$$shortcode&&

<short>shortcode</short>

<<shortcode>>

Want an app but can't find what you need? Let us know we custom build apps for Free
0 Likes
Shopify Partner
371 0 51

For this to be something that works in needs to be able to be typed in the design and edit view and not be common as to require much or any escaping.

Want an app but can't find what you need? Let us know we custom build apps for Free
1 Like
Shopify Expert
157 0 39

I too am very keep to hear Jason's take on this :)

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes
Shopify Partner
371 0 51

From what I have tested 

{{shortcode}} and [[shortcode]] are the best options as there is no html encoding and the editor doesn't seem to do anything too weird.

Want an app but can't find what you need? Let us know we custom build apps for Free
0 Likes
Shopify Expert
157 0 39

I am not sure it's necessary to think this way, but I am thinking [[shortcode]] is best, as it separates conceptually from the liquid tags. That way people who are used to short codes who dabble in liquid wouldn't get confused.

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes
Shopify Partner
371 0 51

Yeah I think [[shortcode]] is better as well as this is what people who use shortcodes are use to and the separation you mentioned is a massive tick for it.

Want an app but can't find what you need? Let us know we custom build apps for Free
1 Like
Shopify Expert
9764 86 1510

what do you think the best syntax would be it can really be anything

My vote will always be on html comments. Partly because it would be so easy for the RTE to take this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. [[ foo ]]

[[ foo ]]

And turn it into this:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Shortcode magic added...</p>
<p>Shortcode magic...</p>

Being wrapped in a <p> <span> <div> -- whatever it will be might cause havoc on the design front. Imagine adding the shortcode into soup pasted from Word - something many store owners won't even notice unless they look at the html. Much sadness in the css will result. Even if you think you've added in a good spot any bad html in the box could cause tinyMCE to force html spec, moving stuff around (in a way no one may notice unless they view the html).

Secondly, I hate the idea of having [[ foo ]] somehow appearing in excerpts, or in other apps and systems that use that description. You know, like the POS. At least with a comment, it can be purged with a html strip, or if it does appear there's a greater chance that it will stay safely hidden from view, by default.  

The theory on the shortcodes is sound in any case. Leave peeps to choose whatever crazy bracketing they like. Really doesn't matter here. Whatever you pick - unless you are adding html is going to get wrapped by the RTE.

That's my two cents of course. Something overrated at the impending vodka o'clock. 

[update] Didn't someone make an app or was currently making an app for shortcodes?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
371 0 51

Thinking about this all I think it would need is a bit of preprocessing I think the [[shortcode]] is sound but before processing it I think it needs to do a few replaces such as

<p>[[shortcode]]</p> to [[shortcode]]
<!--[[shortcode]]--> to [[shortcode]]

This allows it to correct the auto tagging of the RTE and allows the use of it hidden for the situations it is having impact on something else. I would go for the comment short tag by default but it also could be very confusing for customers who are looking for the shortcode but its not showing in the RTE and they spend all day looking for where this code is as they want to change one of its variables or remove it all together.

An additional free app may be necessary as well as a service to provide rendering of shortcodes specifically for external apps that need it so you can pass the data and the app would have authorisation to run it through the processing on the apps behalf. As the variables can only ever be text I see no security concerns with providing an open service and executing shortcodes with no authorisation needed by external apps. However more heads and thought on this would be needed before making such a big decision. I'd be happy to code this up and absorb the infrastructure to back it.

Want an app but can't find what you need? Let us know we custom build apps for Free
0 Likes
Shopify Partner
371 0 51

I've found a few examples of people hardcoding shortcodes as needed but nothing dynamic. I think this is something that also needs to be free for adoption to work and everyone working together. The app could also install the shortcode.liquid and keep it up to date with the latest features so all that would be needed is the switch from

{{page.content}}

to

{% include shortcode load: page.content%}

where needed to activate shortcodes.

Want an app but can't find what you need? Let us know we custom build apps for Free
0 Likes
Shopify Expert
157 0 39

Good point Jason, I hadn't thought of that. Ryan, I think you may be right in that using HTML comments could get very confusing for many users.

Looks like this one isn't going to be simple! But there is obviously a way. It would be great if there was a way to parse the text editor code around the shortcode elements, but I can't think of a clean way to do that. Unless a shortcode is always preceded by, and appended by a line break perhaps.

Ryan I think you are right that an app may be the only way to do this cleanly, and perhaps could even offer some sort of library of short code basics that can be built upon.

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes