kirchner-trevor/vscode-shopify-liquid-preview

vscode-shopify-liquid-preview's Issues

How to attach an input document?

This extension looks promising, but I don't understand how to specify the input document for the template. The description says "Add file yourtemplate.json to be a context of the template", but how to define the context?

XML Support

Would be great if you could support XML fake files and not just JSON. This would go a long way in supporting XML to XML/JSON in Azure Logic Apps

Ctrl+Shift+P isn't working

Ctrl+Shift+P is bound to "View -> Command Palette"

Furthermore, if I look at the installed commands, Ctrl+Shift+P is not listed.

VS Code: v1.21.1
Liquid Preview: v1.0.2

Live preview warning

Followed the following recommendation:
Extension 'kirchner-trevor.shopify-liquid-preview' uses the 'vscode.previewHtml' command which is deprecated and will be removed soon. Please file an issue against this extension to update to use VS Code's webview API.

Installed Plugin:
Name: Shopify Liquid Preview
Id: kirchner-trevor.shopify-liquid-preview
Description: Live preview for Shopify Liquid templates
Version: 1.0.2
Publisher: Trevor Kirchner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=kirchner-trevor.shopify-liquid-preview

tag not found

I used Slate to build an empty theme. Then I went to theme.liquid and typed, "Ctrl+K, V". The preview window pops up, but I get an error:

Error occured

tag section not found, line:68

(Also, "occured" should be "occurred")

Hope to support regex_replace filter

Great thanks for this excellent plugin, and also hope to support regex_replace filter. I found something here.

Doesn't support JSON property names with spaces

Thanks for the great extension. I've stumbled on the following omission:

Given the input JSON:

{
	"EntityType": "FxRate",
	"Rates": [{
		"Currency Code": "AED",
		"Currency Name": "UNITED ARAB EMIRATES DIRHAM",
		"FX Rate": 3.672900000,
		"Fx Rate Set Id": "MXR2020M05"
	}, {
		"Currency Code": "ZWR",
		"Currency Name": "ZIMBABWE DOLLAR",
		"FX Rate": 25.000000000,
		"Fx Rate Set Id": "MXR2020M05"
	}]
}

The following liquid template should work (does work using other implementations):

{
    "FXRateSetName": "{{ Rates[0]["Fx Rate Set Id"] }}",
    "isDefault": "true", 
    "baseCurrencyCode": "USD",
    "FXRates": [
        {%- for fxrate in Rates -%}
        {
            "currencyCode": "{{ fxrate["Currency Code"] }}",
            "exchangeRate": "{{ fxrate["FX Rate"] }}",
        }{%- if forloop.last == false -%},{%- endif %}
        {%- endfor -%}
    ]
}

But I'm seeing the following error from the extension:

Command 'Shopify Liquid: Open Preview to the Side' resulted in an error (cannot open shopify-liquid-preview:Preview%20sampleExactMaxPayload%20-%20CreateFxRate.json%20%2B%20FxRate_Map.liquid?id%3D1592587377815. Detail: unbalanced ": Rates[0]["Fx, line:2, col:23)

The expected output is:

{
    "FXRateSetName": "MXR2020M05",
    "isDefault": "true", 
    "baseCurrencyCode": "USD",
    "FXRates": [
        {
            "currencyCode": "AED",
            "exchangeRate": "3.6729",
        },
        {
            "currencyCode": "ZWR",
            "exchangeRate": "25",
        }
    ]
}

I've tried a number of approaches, including using single quotes rather than double quotes around the property name, but to no avail.

Cheers,

Doesn't seem to handle Shopify liquid form tags and others

Here's the debut theme's register.liquid file.

Can get preview to show some output if I remove the entire form. i.e. delete everything from

{% form 'create_customer', id: formId, novalidate: 'novalidate' %}
to
{% endform %}

Did a bit more digging and found that there are other tags inside the form that also break the plugin.

`

  <div class="form-vertical">

    <h1 class="text-center">{{ 'customer.register.title' | t }}</h1>

    {%- assign formId = 'RegisterForm' -%}
    {% form 'create_customer', id: formId, novalidate: 'novalidate' %}
      {% include 'form-status', form: form, form_id: formId %}

      <label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
      <input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">

      <label for="{{ formId }}-LastName">{{ 'customer.register.last_name' | t }}</label>
      <input type="text" name="customer[last_name]" id="{{ formId }}-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name">

      <label for="{{ formId }}-email">{{ 'customer.register.email' | t }}</label>
      <input
        type="email"
        name="customer[email]"
        id="{{ formId }}-email"
        class="{% if form.errors contains 'email' %} input--error{% endif %}"
        {% if form.email %} value="{{ form.email }}"{% endif %}
        autocorrect="off"
        autocapitalize="off"
        autocomplete="email"
        aria-required="true"
        {%- if form.errors contains 'email' -%}
          class="input--error"
          aria-invalid="true"
          aria-describedby="{{ formId }}-email-error"
        {%- endif -%}
      >
      {%- if form.errors contains 'email' -%}
        <span id="{{ formId }}-email-error" class="input-error-message">
          <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
          {% include 'icon-error' %}
          <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
        </span>
      {%- endif -%}

      <label for="{{ formId }}-password">{{ 'customer.register.password' | t }}</label>
      <input
        type="password"
        name="customer[password]"
        id="{{ formId }}-password"
        class="{% if form.errors contains 'password' %} input--error{% endif %}"
        aria-required="true"
        {%- if form.errors contains 'password' -%}
          class="input--error"
          aria-invalid="true"
          aria-describedby="{{ formId }}-password-error"
        {%- endif -%}
      >
      {%- if form.errors contains 'password' -%}
        <span id="{{ formId}}-password-error" class="input-error-message">
          {% include 'icon-error' %}
          <span>{{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.</span>
        </span>
      {%- endif -%}

      <p class="text-center">
        <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
      </p>

    {% endform %}
  </div>
</div>

`

Using index.liquid file from the popular Material Shopify theme crashes

All that is rendered in the preview window is

Error Occured

tag paginate not found, line:236, line:196

This is from the Roartheme Material theme, v1.5.1

Money filters support

Would love to have money filters support.

Expected behavior
Input
{{ 145 | money_with_currency }}

Output

<!-- if "HTML with currency" is ${{ amount }} CAD -->
$1.45 CAD

Current behavior
Input
{{ 145 | money_with_currency }}

Output
145

Keybinding for "Open Preview" conflicts with Workbench Quick Open

Ctrl+P is the standard keyboard shortcut for Quick Open (workbench.action.quickOpen) in Visual Studio Code and it is promoted as such in the Welcome screen.

After installing the Shopify Liquid Preview extension, Ctrl+P stops working as intended because of the extension's key binding contribution Ctrl+P L. Now, pressing Ctrl+P doesn't open Quick Open but instead shows the following message in the status bar:

(Ctrl+P) was pressed. Waiting for second key of chord...

Please choose a different non-conflicting keyboard shortcut for Shopify Liquid: Open Preview (shopifyLiquidPreview.preview).

Note to anyone else here because of same issue: As a workaround, you can press Ctrl+E to launch Quick Open. You can also edit the keybindings in Keyboard Shortcuts settings.