Cart widget with Buy Button - go to full checkout and not popup?

BrianOES
New Member
4 0 0

I'm converting a site using another service to Shopify using the 'lite' service level, and things are going well. I have just one issue.

The floating cart widget on the product page when using the embedded Buy-button code is great, but I really want to get the 'Checkout' button on the floating widget to go to load the entire page to the dedicated checkout page, not do so as a popup. I have been unable to find where I can edit the code for this widget after lots of sleuthing - any tips?

 

 

Replies 22 (22)
Paul91
Tourist
8 1 2

I'm also interested in this. Did you have any luck hunting this down Brian?

BrianOES
New Member
4 0 0

I have not heard anything. Any help would be appreciated!

 

- Brian

Paul91
Tourist
8 1 2

Hi Brian,

I've been reviewing the code here, and basically it looks like the 'buy button' functionality is based around boiling all of Shopify down to the simplest unit possible.

When you think about Shopify normally, you're talking about a templated-based experience which has available to it all of the methods of their API, etc. The buy button is designed to do exactly one thing. It is powered by a single javascript file which loads up the specific behavior available to the buy button.

What I'm looking in to now is the JavaScript Buy SDK (http://shopify.github.io/js-buy-sdk/). Seems to be relatively straightforward, if you're the coding type.

Will try and remember to post back here with my experiences as I learn more.

Paul91
Tourist
8 1 2

Hi Brian,

I've got this figured out now. It's actually prett straight forward.

Want some help?

BrianOES
New Member
4 0 0

Paul, that would be awesome. 

I'm not a non-coder but I'm certainly not a pro. Any insight you can provide would be much appreciated (for others I think too).

 

- Brian

Paul91
Tourist
8 1 2

Ok, so since I'm not sure what your starting point is, I'll speak from mine and we'll put a coherent guide together as we go.

So basically, copy this:

var client = ShopifyBuy.buildClient({
                  apiKey: 'yourapikey',
                    myShopifyDomain: 'your-shopify-SUB!!!!-domain',
                    appId: '6'
                });

 

Replace apiKey with your api key. Instructions on getting your API key: https://docs.shopify.com/api/sdks/js-buy-sdk/getting-started#app-id

Here is something the Shopify docs are a bit too unspecific about which cost me about 45 minutes. They tell you to include your shopify domain in myShopifyDomain. So i pasted in myuniquesubdomain.myshopify.com in there (value changed obviously). This is not quite correct. Your want to paste in myuniquesubdomain. Otherwise you will get HTTPS -> HTTP errors.

Then paste in this, changing yourproductid (get your product id here: https://docs.shopify.com/api/sdks/js-buy-sdk/getting-started#retrieving-products):

client.fetchProduct('yourproductid').then(function(product) {

                    var html =
                    "<img class='product__image' src='" + product.selectedVariantImage.src + "' >" +
                    "<h2 class='product__title'>" + product.title + "</h2>" +
                    "<a class='product__buy' href='" +
                        product.selectedVariant.checkoutUrl(1) +
                    "'>Buy Now!</a>";

                    $('#product-1').html(html);

                    });

Save, reload, done.

tl;dr, do the stuff it says here: http://shopify.github.io/js-buy-sdk/

Happy to help / clarify further.

 

 

BrianOES
New Member
4 0 0

This looks excellent - I will be reviewing this later in the week, thanks so much for your help up to now!

Tofolux
Tourist
9 0 5

Hi Paul,

Thanks for trying to help... My first time trying to setup buy button to go to cehck out and not popup as thread says however I think maybe the generated code has changed since your post. I am no coder and desparetly trying to get it to work now.

Below is the generated code, could you perhaps have a look and let me know if it is possible?

Much appreciated! Thanks.

 

<div id='product-component-addc6cac047'></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: 'powapod.myshopify.com',
      apiKey: '395cea30438167f167ed53b6daf6334f',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [8585990145],
        node: document.getElementById('product-component-addc6cac047'),
        moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "buttonDestination": "checkout",
    "variantId": "all",
    "width": "240px",
    "contents": {
      "img": false,
      "title": false,
      "variantTitle": false,
      "price": false,
      "description": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "text": {
      "button": "BUY NOW"
    },
    "styles": {
      "product": {
        "text-align": "right",
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "border-radius": "10px",
        "font-weight": "bold"
      },
      "variantTitle": {
        "font-weight": "bold"
      },
      "title": {
        "font-size": "26px"
      },
      "description": {
        "font-weight": "bold"
      },
      "price": {
        "font-size": "18px",
        "font-weight": "bold"
      },
      "compareAt": {
        "font-size": "15px",
        "font-family": "Helvetica Neue, sans-serif",
        "font-weight": "bold"
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "button": {
        "border-radius": "10px",
        "font-weight": "bold"
      },
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "border-radius": "10px",
        "font-weight": "bold"
      },
      "variantTitle": {
        "font-weight": "bold"
      },
      "description": {
        "font-weight": "bold"
      },
      "price": {
        "font-weight": "bold"
      },
      "compareAt": {
        "font-family": "Helvetica Neue, sans-serif",
        "font-weight": "bold"
      }
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-weight": "bold"
      },
      "count": {
        "color": "#ffffff",
        ":hover": {
          "color": "#ffffff"
        },
        "font-size": "16px"
      },
      "iconPath": {
        "fill": "#ffffff"
      }
    }
  },
  "option": {
    "styles": {
      "label": {
        "font-weight": "bold"
      },
      "select": {
        "font-weight": "bold"
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

Gary1ie
New Member
2 0 4

Hi,

Replace the following line of code;

<script type="text/javascript">

With the code below;

<script data-shopify-buy-ui="">
window.open = function (open) {
return function (url, name, features) {
// Pass through non-shopify URLS
if (url.indexOf("myshopify") < 0) {
return open.call(window, url, name, features);
}
// Use current window
console.log("Redirecting to:", url);
window.location.href = url;
return null;
};
}(window.open);

The checkout page should now open in the same window.

Cheers

Gary