User Tools

Site Tools


public:apps:preorder:manual_installation

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
public:apps:preorder:manual_installation [04.02.19 в 17:54]
Максим Дубинин
public:apps:preorder:manual_installation [17.03.22 в 04:29] (current)
Дария Тяжлова
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["​]',​
 +        // "​preorderBadgeContainerSelector":​ '​.product-item__image-wrapper',​
 +        // "​updateInputsSelector":​ '​input[name="​quantity"​]',​
 +        // "​debug":​ true,
 +    };
 +</​script>​
 +
 +<script id="​kad-preorder-config-loader">​
 +  (() => {
 +    try {
 +      function loadPersonalConfig() {
 +        let personalConfig = localStorage.getItem('​SimplePreorderBootstrap'​)
 +        if (typeof personalConfig === '​string'​) {
 +          return JSON.parse(personalConfig)
 +        }
 +      }
 +
 +      function savePersonalConfig(config) {
 +        localStorage.setItem('​SimplePreorderBootstrap',​ JSON.stringify(config,​ null, 2))
 +      }
 +
 +      function isDevParamSpecified() {
 +        return new URLSearchParams(window.location.search).get('​kad-dev'​) !== null
 +      }
 +
 +      let personalConfig = loadPersonalConfig()
 +
 +      if (isDevParamSpecified()) {
 +        personalConfig = personalConfig || {}
 +        personalConfig.dev = true
 +      }
 +
 +      if (personalConfig) {
 +        Object.assign(SimplePreorderBootstrap,​ personalConfig)
 +        savePersonalConfig(personalConfig)
 +      }
 +    } catch (err) {}
 +  })()
 +</​script>​
 +
 +<script id="​kad-preorder-injector">​
 +  (() => {
 +    let lastScript = document.getElementById('​kad-preorder-injector'​)
 +
 +    function injectScript(url,​ type) {
 +      const script = document.createElement('​script'​)
 +      script.src = url
 +      script.type = type || ''​
 +      script.async = false
 +      script.defer = true
 +      lastScript = lastScript.parentNode.insertBefore(script,​ lastScript.nextSibling)
 +    }
 +
 +    if (SimplePreorderBootstrap.dev && SimplePreorderBootstrap.devScriptUrl) {
 +      injectScript(SimplePreorderBootstrap.devScriptUrl,​ SimplePreorderBootstrap.devScriptType)
 +    }
 +
 +    if (SimplePreorderBootstrap.dataScriptUrl) {
 +      injectScript(SimplePreorderBootstrap.dataScriptUrl,​ SimplePreorderBootstrap.dataScriptType)
 +    }
 +
 +    if (SimplePreorderBootstrap.settingsScriptUrl) {
 +      injectScript(SimplePreorderBootstrap.settingsScriptUrl,​ SimplePreorderBootstrap.settingsScriptType)
 +    }
 +
 +    if (SimplePreorderBootstrap.appScriptUrl) {
 +      injectScript(SimplePreorderBootstrap.appScriptUrl,​ SimplePreorderBootstrap.appScriptType)
 +    }
 +  })()
 +</​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.1549292051.txt.gz · Last modified: 04.02.19 в 17:54 by Максим Дубинин