Shopify - настроить createCart () и использовать на страницах без кнопки «Купить» - PullRequest
Новая
       11

Shopify - настроить createCart () и использовать на страницах без кнопки «Купить»

0 голосов
/ 16 января 2019

В настоящее время я встраиваю Shopify Buy Buttons в свой веб-сайт, предлагая только пару продуктов.

Любой из шаблонов продуктов, в которых используется встроенный код кнопки «Купить», отображает стили, которые я выбрал. И отображает корзину, когда продукт был добавлен.

Чтобы сохранить корзину на каждой странице, я добавил фрагмент к базовому шаблону. 

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createCart({
    options: {
      "styles": {
        "button": {
          "background-color": "#1a1a1a",
          ":hover": {
            "background-color": "#2c2c2c"
          },
          ":focus": {
            "background-color": "#2c2c2c"
          }
        },
        "footer": {
          "background-color": "#ffffff"
        }
      }
    }
  });
});

Я не могу понять синтаксис, чтобы правильно оформить корзину! Shopify документация не помогла.

1 Ответ

0 голосов
/ 18 января 2019

Решается путем перемещения createCart () и createComponent () в 1 include для базовых шаблонов. И передачу параметров в качестве глобальной переменной каждому, см. Ниже: 

(function () {
  var shopifyOptions = {
    "product": {
      ... normal product options go here ...
    },
    "cart": {
      "contents": {
        "button": true
      },
      "styles": {
        "button": {
          "background-color": "#1a1a1a",
          ":hover": {
            "background-color": "#2c2c2c"
          },
          ":focus": {
            "background-color": "#2c2c2c"
          }
        },
        "footer": {
          "background-color": "#ffffff"
        }
      }
    },
    "modalProduct": {
      "contents": {
        "img": false,
        "imgWithCarousel": true,
        "variantTitle": false,
        "buttonWithQuantity": true,
        "button": false,
        "quantity": false
      },
      "styles": {
        "product": {
          "@media (min-width: 601px)": {
            "max-width": "100%",
            "margin-left": "0px",
            "margin-bottom": "0px"
          }
        },
        "button": {
          "background-color": "#1a1a1a",
          ":hover": {
            "background-color": "#2c2c2c"
          },
          ":focus": {
            "background-color": "#2c2c2c"
          }
        },
        "variantTitle": {
          "font-family": "Montserrat, sans-serif",
          "font-weight": "normal"
        },
        "title": {
          "font-family": "Montserrat, sans-serif",
          "font-weight": "normal"
        },
        "description": {
          "font-family": "Montserrat, sans-serif",
          "font-weight": "normal"
        },
        "price": {
          "font-family": "Montserrat, sans-serif",
          "font-weight": "normal"
        },
        "compareAt": {
          "font-family": "Montserrat, sans-serif",
          "font-weight": "normal"
        }
      },
      "googleFonts": [
        "Montserrat",
        "Montserrat",
        "Montserrat",
        "Montserrat",
        "Montserrat"
      ]
    },
    "toggle": {
      "styles": {
        "toggle": {
          "background-color": "#1a1a1a",
          ":hover": {
            "background-color": "#2c2c2c"
          },
          ":focus": {
            "background-color": "#2c2c2c"
          }
        }
      }
    },
    "option": {
      "styles": {
        "label": {
          "font-family": "Montserrat, sans-serif"
        },
        "select": {
          "font-family": "Montserrat, sans-serif"
        }
      },
      "googleFonts": [
        "Montserrat",
        "Montserrat"
      ]
    },
    "productSet": {
      "styles": {
        "products": {
          "@media (min-width: 601px)": {
            "margin-left": "-20px"
          }
        }
      }
    }
  };

  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'STORE.myshopify.com',
      storefrontAccessToken: 'ACCESSTOKEN',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      if ($('#buy-online-component').length) {
        ui.createComponent('product', {
          id: appSettings.shopifyProductEmbedCode,
          node: document.getElementById('buy-online-component'),
          moneyFormat: '%24%7B%7Bamount%7D%7D',
          options: shopifyOptions
        });
      } else {
        ui.createComponent('cart', {
          node: document.getElementById('cart-component'),
          options: shopifyOptions
        });
      }
    });
  }

  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
})();
...