troubleshooting – App Authority Media

IMPORTANT NOTES:
Application contains specific placeholders in the form of html comments. These placeholders deliver styles and scripts on the specific place of Shopify store page to override Shopify styles and add extra functionality.

Different templates may contain different set of liquid files with different names. If user receive errors after application installation, he has to paste specific code to liquid files.

If Registry menu item is missing

If you see Error “The Registry button can’t be inserted because <ul> element hasn’t been found in the liquid structure”, you should go to Edit HTML/CSS and find specific liquid file responsible for the implementation of menu items.

For example, in Debut template menu items are implemented in file site-nav.liquid.

Open the liquid file and paste the following code in required position.

<!-- GR: menu item start -->
<li>
    <a href="/pages/registry" class="site-nav__link">
        Registry
    </a>
</li>
<!-- GR: menu item end -->

Click on Save at the bottom of the page. In the end, Registry menu item appears at the store page.

If "Add to Registry" button is missing

If you have problems with inserting “Add to Registry” button, you should find product template liquid file and paste the following code after add to cart form.

                                    <!-- Product details css section start -->
<link href="../Content/css/bootstrap.css?version=f91eb916-71fb-4def-b05e-6f9923c9a88e" rel="stylesheet">
<link href="../Content/css/font-awesome.min.css?version=f91eb916-71fb-4def-b05e-6f9923c9a88e" rel="stylesheet">
<link href="../Content/css/bootstrap-datetimepicker.min.css?version=f91eb916-71fb-4def-b05e-6f9923c9a88e" rel="stylesheet">
<link href="../Content/css/styles.css?version=f91eb916-71fb-4def-b05e-6f9923c9a88e" rel="stylesheet">
<link href="../Content/css/media.css?version=f91eb916-71fb-4def-b05e-6f9923c9a88e" rel="stylesheet">
<link href="../Content/css/spinner.css?version=f91eb916-71fb-4def-b05e-6f9923c9a88e" rel="stylesheet" />
<!-- Product details css section end -->

<!-- Product details scripts section start -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.shopify.com/s/files/1/1654/0383/t/4/assets/jquery.placeholder.js?14507200719927474752"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-cookies.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.16.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<script src="../Scripts/vendor/angular-socialshare.js?version=f91eb916-71fb-4def-b05e-6f9923c9a88e"></script>
<script src="../Scripts/vendor/angular-uuid2.js?version=f91eb916-71fb-4def-b05e-6f9923c9a88e"></script>
<script src="../Scripts/vendor/datetime.js?version=f91eb916-71fb-4def-b05e-6f9923c9a88e"></script>
<script src="../Scripts/vendor/ui-select.js?version=f91eb916-71fb-4def-b05e-6f9923c9a88e"></script>
<script src="../Scripts/grapp/gr_factories.js?version=f91eb916-71fb-4def-b05e-6f9923c9a88e"></script>
<script src="../Scripts/grapp/gr_product.js?version=f91eb916-71fb-4def-b05e-6f9923c9a88e"></script>
<script src="../Scripts/grapp/gr_cart.js?version=f91eb916-71fb-4def-b05e-6f9923c9a88e"></script>
<script src="../Scripts/grapp/gr_lists.js?version=f91eb916-71fb-4def-b05e-6f9923c9a88e"></script>
<script src="../Scripts/grapp/gr_app.js?version=f91eb916-71fb-4def-b05e-6f9923c9a88e"></script>
<script src="../Content/js/docs.min.js?version=f91eb916-71fb-4def-b05e-6f9923c9a88e"></script>
<!-- Product details scripts section end -->

<!-- Product details section start -->
<div class="snap-reg-cont" ng-app="GRApp" ng-controller="ProductCtrl">
    <div class="mb10">
        <button type="button" ng-click="showGRLists()" class="btn bnt-table btn-extended">
            Add to Registry
        </button>
    </div>
    <script type="text/ng-template" id="addProductToGRModal.html">
        <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal" aria-label="Close" ng-click="cancel()"><img src="https://api.snapregistry.co/Content/images/close.png" alt="close"></button>
            <h3 class="modal-title">}[} grLists.length == 0 ? 'Pick a list' : 'Edit saved product' {]{</h3>
        </div>
        <div class="spinner" ng-show="showProgress"></div>
        <div class="modal-body" ng-show="!showProgress">
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="image-modal">
                            <img class="img-thumbnail img-responsive" src="}} featured_image | img_url: '1024x1024' {{" alt="}} featured_image.alt | escape {{" id="ProductPhotoImg" }% if settings.product_image_zoom_type= ='zoom-in' %{ data-zoom="}} featured_image | img_url: '1024x1024' {{" }% endif %{ data-image-id="}} featured_image.id {{" />
                        </div>
                    </div>
                    <div class="row">
                        <h3 class="text-center">}} product.title {{</h3>
                    </div>
                </div>
                <div class="col-md-6" ng-show="grLists.length <=0">
                    <form>
                        <h4>
                            Create your first list.
                        </h4>
                    </form>
                </div>
                <div class="col-md-6" ng-show="grLists.length > 0">
                    <form>
                        <h4>
                            My lists
                        </h4>
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>List title</th>
                                    <th>Quantity</th>
                                    <th>Action</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="grList in grLists">
                                    <td>}[}grList.Title{]{</td>
                                    <td>
                                        <input ng-show="!grList.hasProduct" type="number" ng-model="grList.Amount" class="form-control input-xs" range="1" min="1" ng-init="grList.amount=1" required />
                                        <input ng-show="grList.hasProduct" min="1" type="number" ng-model="grList.Amount" class="form-control input-xs" range="1" min="0" required />
                                    </td>
                                    <td>
                                        <button class="btn bnt-table" ng-click="modify(true, grList.ID)">}[} grList.hasProduct ? 'Update' : 'Save' {]{</button>
                                    </td>
                                    <td>
                                        <button ng-show="grList.hasProduct" class="btn bnt-table" ng-click="modify(true, grList.ID, true)">Remove</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="row">
                <div class="col-md-12">
                    <div class="block-overflow">
                        <div class="pull-right">
                            <div class="">
                                <button type="button" class="btn btn-modal" ng-click="expandPanel()" ng-if="isCollapsed">Create New List</button>
                            </div>
                            <form class="form-inline" uib-collapse="isCollapsed" name="addItemForm1" novalidate>
                                <div class="form-group">
                                    <input type="text" ng-model="newGRList" class="form-control" placeholder="Product List name" name="newGRList" ng-required="!newGRList" />
                                    <label style="color: red;" ng-show="addItemForm1.newGRList.$error.required && newGRListPostedForm">Product List name is required </label>
                                </div>
                                <div class="form-group">
                                    <input type="number" min="1" ng-pattern="/^[1-9]+[0-9]*$/" ng-model="amount" class="form-control" placeholder="Quantity" name="amount" ng-required="(amount <= 0) ||!amount  " />
                                    <label style="color: red;" ng-show="(addItemForm1.amount.$error.required || addItemForm1.amount.$error.pattern) && newGRListPostedForm">Amount is required and should be grater then 0</label>
                                </div>
                                <button class="btn btn-table " ng-click="modify(false, null,null, addItemForm1)" ng-disabled="addItemForm1.$invalid && newGRListPostedForm">Save</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
    <script type="text/ng-template" id="savedProductModal.html">
        <div class="modal-header" style="top:40px;">
            <button class="close" type="button" data-dismiss="modal" aria-label="Close" ng-click="cancel()"><img src="https://api.snapregistry.co/Content/images/close.png" alt="close"></button>
            <h3 class="modal-title text-danger" ng-show="data.status == 'deleted'">Product has been }[}data.status{]{ from list successfully</h3>
            <h3 class="modal-title text-danger" ng-show="data.status != 'deleted'">Product successfully }[}data.status{]{ list</h3>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="image-modal">
                        <img class="img-thumbnail img-responsive" src="}} featured_image | img_url: '1024x1024' {{" alt="}} featured_image.alt | escape {{" id="ProductPhotoImg" }% if settings.product_image_zoom_type= ='zoom-in' %{ data-zoom="}} featured_image | img_url: '1024x1024' {{" }% endif %{ data-image-id="}} featured_image.id {{" />
                        <!--<img src="https://cdn.shopify.com/s/files/1/1426/2166/products/WP_20151003_16_13_19_Pro_ca9d6c29-1125-47dc-8714-83c0fe4a44d8.jpg?v=1475577051" class="img-thumbnail img-responsive">-->
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="modal-block mb20" ng-show="data.status != 'deleted'">
                        Saved to list: <span>}[}data.listTitle{]{</span>
                    </div>
                    <div class="modal-block" ng-show="data.status != 'deleted'">
                        Quantity: <span>}[}data.qty{]{</span>
                    </div>
                </div>
            </div>
        </div>
    </script>
</div>
<!-- Product details section end -->

Troubleshooting guide

If Registry menu item is missing

If "Add to Registry" button is missing

If you have problem with uninstall application

Uninstall Application

Remove "Add to Registry" button

Remove extra styles