Redirect users based on input codes, with Mechanic.

Mechanic is a development and ecommerce automation platform for Shopify. :)

Redirect users based on input codes

Use this task to prompt your users for a code, redirecting them to an appropriate destination based on what they enter. Some assembly required, with sample Javascript and HTML provided. :)

Runs . Configuration includes redirects and codes, require case sensitive codes, and invalid code message.

15-day free trial – unlimited tasks

Documentation

Use this task to prompt your users for a code, redirecting them to an appropriate destination based on what they enter. Some assembly required, with sample Javascript and HTML provided. :)

Configure this task by filling in redirect URLs on the left, and a series of codes for each redirect on the right. The intent is to route users to the appropriate redirect, based on the code they enter.

This task doesn't run automatically. Instead, it generates some Javascript that's automatically embedded into your online storefront, redirecting the user when they enter a code that matches one of the redirects you've configured.

You can prompt the user for a code yourself, and pass the result to the function attemptRedirectByCode, like this:

<script>
  attemptRedirectByCode(prompt('Enter your code here:'))
</script>

Or, modify this HTML to set up a form for your users:

<form id="redirect-form">
  <input type="text" placeholder="Enter your code here">
</form>
<script>
  document.getElementById('redirect-form').onsubmit = function (event) {
    event.preventDefault();
    var input = event.target.children[0];
    attemptRedirectByCode(input.value) || input.select();
  };
</script>

Developer details

Mechanic is designed to benefit everybody: merchants, customers, developers, agencies, Shopifolks, everybody.

That’s why we make it easy to configure automation without code, why we make it easy to tweak the underlying code once tasks are installed, and why we publish it all here for everyone to learn from.

(By the way, have you seen our documentation? Have you joined the Slack community?)

Open source
View on GitHub to contribute to this task
Subscriptions
Tasks use subscriptions to sign up for specific kinds of events. Learn more
Options
redirects and codes (keyval, multiline), require case sensitive codes (boolean), invalid code message (required)
Code
Task code is written in Mechanic Liquid, an extension of open-source Liquid enhanced for automation. Learn more
Online store JavaScript
var redirects = {{ options.redirects_and_codes__keyval_multiline | json }};
var codesToRedirects = {};

Object.getOwnPropertyNames(redirects).forEach(function (redirect) {
  redirects[redirect].split("\n").map(function (code) {
    {% if options.require_case_sensitive_codes__boolean %}
      return code.toLowerCase().trim();
    {% else %}
      return code.trim();
    {% endif %}
  }).forEach(function (code) {
    codesToRedirects[code] = redirect;
  });
});

window.attemptRedirectByCode = function (code) {
  {% unless options.require_case_sensitive_codes__boolean %}code = code.toLowerCase();{% endunless %}
  code = code.trim();
  
  if (codesToRedirects[code]) {
    window.location.href = codesToRedirects[code];
    return true;
  } else {
    alert({{ options.invalid_code_message__required | json }});
    return false;
  }
};
When this task is installed, this code is loaded into the online storefront using a ScriptTag.
Defaults
Redirects and codes
{"/pages/secret-one"=>"one\num\nuno", "/pages/secret-two"=>"two\ndois\ndos", "/pages/secret-three"=>"three\ntrês\ntres"}
Invalid code message
That code wasn't valid - try again.