Shopify Buy Button - how to add products to cart

evenvisionstaff
New Member
7 0 0

I am trying to get the Shopify Buy Button set up on a couple of my Drupal sites.

 

I have it set up on two of them, but we are finding that the cart flyout is not appearing for some customers.   Because of this, I am wanting to build in a back up way that customers can get to their carts, such as a link in the menu.

 

The issue I am having is that when someone adds a product, it is not actually added to their cart.  It is only added for the purposes of checkout.  So, giving customers a link to their cart would take them to an empty cart, even if they have added products.

 

Is there a built-in way to handle this sort of thing?  Or, some custom way that I can do it?

 

Here is my code for the buy button:

 

<div id='product-component-1604629781277'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  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: 'wildberries-store.myshopify.com',
      storefrontAccessToken: 'fae781c4b3614788d02e510560a4df2b',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
iframe: "false",
        id: [product_id],
        node: document.getElementById('product-component-1604629781277'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
buttonDestination: 'cart',
iframe: false,
DOMEvents: {
        'click .shopify-buy__option-select': function (evt, target) {
          var data = target.dataset;
          var product = ui.components.product[0];
          product.updateVariant(data.option, data.value);
        },
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "title": {
        "color": "#333333"
      },
      "button": {
        ":hover": {
          "background-color": "#685368"
        },
        "background-color": "#735c74",
        ":focus": {
          "background-color": "#685368"
        },
        "border-radius": "0px"
      },
      "price": {
        "color": "#333333"
      },
      "compareAt": {
        "color": "#333333"
      },
      "unitPrice": {
        "color": "#333333"
      }
    },
    "text": {
      "button": "Add Product to Cart"
    }
  },
  "productSet": {
iframe: false,
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
iframe: false,
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        ":hover": {
          "color": "#F2B36F"
        },
        "background-color": "#735c74",
        ":focus": {
          "color": "#F2B36F"
        },
        "border-radius": "0px"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        "padding": "17px",
        ":hover": {
          "background-color": "#685368"
        },
        "background-color": "#735c74",
        ":focus": {
          "background-color": "#685368"
        },
        "border-radius": "0px"
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    },
"popup": false
  },
  "toggle": {
    "styles": {
      "toggle": {
        "background-color": "#735c74",
        ":hover": {
          "background-color": "#685368"
        },
        ":focus": {
          "background-color": "#685368"
        }
      }
    }
  },
  "option" : {
    iframe: false,
    "templates": {
      "option": `<div class={{data.classes.option.option}} data-element="option.option">
              <div class="{{data.classes.option.wrapper}}" data-element="option.wrapper">
              <div>
              {{#data.values}}
              <button {{#data.styleAttr}} {{name}} {{/data.styleAttr}} data-value="{{name}}" data-option={{data.name}} class="{{#disabled}}{{data.classes.option.optionDisabled}}{{/disabled}} {{#selected}}{{data.classes.option.optionSelected}}{{/selected}} {{data.classes.option.option}}">{{name}}</button>
              {{/data.values}}
            </div>
             </div>
         </div>`,
    },
  },
},
      });
    });
  }
})();
/*]]>*/
</script>

 

 

 

0 Likes