4

I'm creating Shopify embedded app using Shopify Polaris. I have to include a modal form in a page of the embedded app. I know that I have to use this. But I'm not using ReactJS. So I can't change form in the modal. I don't know how to do it. If anyone knows the solution, it will be appreciated.

I also have noticed one more thing. I have tried "Number field" input (select Number field in the dropdown from here). The increment and decrement arrow key are working in the example but not in my form.

Here is my code

<html>
    <head>
        <link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/2.0.0-rc.3/polaris.min.css" />
    </head>
    <body>
        <div class="">
            <div class="Polaris-Labelled__LabelWrapper">
                <div class="Polaris-Label">
                    <label id="TextField3Label" for="TextField3" class="Polaris-Label__Text">Quantity</label>
                </div>
            </div>
            <div class="Polaris-TextField Polaris-TextField--hasValue">
                <input id="TextField3" class="Polaris-TextField__Input" type="number" aria-labelledby="TextField3Label" aria-invalid="false" value="1">
                <div class="Polaris-TextField__Spinner" aria-hidden="true">
                    <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
                        <div class="Polaris-TextField__SpinnerIcon"> 
                            <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M15 12l-5-5-5 5z"></path></svg></span>
                        </div>
                    </div>
                    <div role="button" class="Polaris-TextField__Segment" tabindex="-1">
                        <div class="Polaris-TextField__SpinnerIcon">        
                            <span class="Polaris-Icon"><svg class="Polaris-Icon__Svg" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path></svg></span>
                        </div>
                    </div>
                </div>
                <div class="Polaris-TextField__Backdrop"></div>
            </div>
        </div>
    </body>
</html>
Akshay Vaghasiya
  • 1,597
  • 9
  • 36
  • 60
  • IMHO if you don't use React so you'd better to not use Polaris too. You can mimic Shopify UI by reuse Polaris' styles, it must be easier to write and maintain your code. – Tien Do May 22 '18 at 03:10

1 Answers1

4

Sorry to say but if don't use React Js in Shopify Polaris then it will be just HTML and CSS basic code.

There is no support for js events like model tabs, hide show etc. You need to write all in basic javascript or jQuery own.

Onkar
  • 2,409
  • 2
  • 11
  • 14