User Tools

Site Tools


public:apps:preorder:manual_installation

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Next revision Both sides next revision
public:apps:preorder:manual_installation [04.02.19 в 17:54]
Максим Дубинин
public:apps:preorder:manual_installation [30.04.21 в 18:12]
Максим Дубинин
Line 1: Line 1:
 +====== Manual installation ======
  
 +1. Add a snippet //"​simple-preorder-bootstrap.liquid"//​ with next code:
 +
 +<​code>​
 +<style id="​simple_preorder_style"></​style>​
 +<​script>​
 +    // Bootstrap for Simple Preorder app
 +    var SimplePreorderBootstrap = {
 +        "​page":​ {{ template | json }},
 +        "​product":​ {
 +            "​id":​ {{ product.id | json }},
 +            "​title":​ {{ product.title | json }},
 +            "​variants":​ [
 +                {% for variant in product.variants %}
 +                    {
 +                        "​id":​ {{variant.id}},​
 +                        "​inventory_quantity":​ '​{{variant.inventory_quantity}}',​
 +                        "​inventory_management":​ '​{{variant.inventory_management}}',​
 +                        "​inventory_policy":​ '​{{variant.inventory_policy}}'​
 +                    },
 +                {% endfor %}
 +            ]
 +        },
 +        "​cart":​ {
 +            "​items":​ [
 +                {% for item in cart.items %}
 +                    {
 +                        "​variant_id":​ {{item.variant.id}},​
 +                        "​product_id":​ {{item.product.id}},​
 +                        "​quantity":​ {{item.quantity}},​
 +                        "​inventory_quantity":​ '​{{item.variant.inventory_quantity}}',​
 +                        "​inventory_management":​ '​{{item.variant.inventory_management}}',​
 +                        "​inventory_policy":​ '​{{item.variant.inventory_policy}}',​
 + "​properties":​ {{ item.properties | json }}
 +                    },
 +                {% endfor %}
 +            ]
 +        },
 +        // "​startupDelay":​ 100,
 +        // "​productFormSelector":​ '/​cart/​add',​
 +        // "​productSelector":​ '​form[action="/​cart/​add"​] [type="​submit"​]',​
 +        // "​variantsSelector":​ '​form[action="/​cart/​add"​] .variants-selector',​
 + // "​nativeVariantsSelector":​ '​form[action="/​cart"​] [name^="​id"​]',​
 +        // "​checkoutSelector":​ '​form[action="/​cart"​] [type="​submit"​][name="​checkout"​]',​
 +        // "​updateSelector":​ '​form[action="/​cart"​] [type="​submit"​][name="​update"​]',​
 +        // "​updateInputsSelector":​ '​form[action="/​cart"​] [name^="​updates["​]',​
 +        // "​debug":​ true,
 +    };
 +</​script>​
 +
 +<script src="​{{ '​simple-preorder-data.js'​ | asset_url }}" ​ defer="​defer"></​script>​
 +<script src="​https://​preorder.kad.systems/​scripts/​NAME-OF-YOUR-SHOP.myshopify.com.js" ​ defer="​defer"></​script>​
 +<script src="​{{ '​simple-preorder.js'​ | asset_url }}" ​ defer="​defer"></​script>​
 +</​code>​
 +
 +> **Important:​** At the very bottom of the snippet in the last line, replace the text "​NAME-OF-YOUR-SHOP"​ with the address of your store from the address bar of the browser when you are in the admin area of the store (like "//​**simple-pre-order-demo-shop**//​.myshopify.com",​ and not, for example, "<​del>​spo-demo.shop</​del>"​).
 +
 +2. In the theme template //"​theme.liquid"//​ right before the closing tag "</​head>"​ add the code to connect the snippet:
 +<​code>​
 +<!-- Snippet for Simple Preorder app -->
 +{% include '​simple-preorder-bootstrap'​ %}
 +</​code>​
 +3. (Not mandatory) In the snippet adjust the selectors for following buttons:
 +
 +  * productSelector — add to cart button ​
 +  * variantsSelector — list of variants ​
 +  * checkoutSelector — checkout button in cart
 +  * updateSelector — update cart button
 +
 +If this does not work, please write to [[support@kad.systems]]
public/apps/preorder/manual_installation.txt · Last modified: 17.03.22 в 04:29 by Дария Тяжлова