Shopify / storefront-api-examples

Example custom storefront applications built on Shopify's Storefront API
https://help.shopify.com/api/storefront-api
MIT License
1.12k stars 329 forks source link

Back link on checkout page that was generated by Storefront API #99

Open andrenaught opened 5 years ago

andrenaught commented 5 years ago

When generating a checkout webUrl through the storefront API - The logo / name of the store on the top left of the checkout page doesn't actually link back to the home page. The "back to cart" option is also not shown. I feel like there should be a way for customers to press a link to atleast go back to the main shopify store (cause then we can atleast redirect back to the main site). I know we probably won't be able to add in our own link cause checkout page should be untouchable, but atleast give us an option to display the original links (the back links that disappear when it's generated through the storefront API).

malthemilthers commented 5 years ago

I'm struggling to figure this one out as well. How are we suppose to send the customer back to the storefront site? Perhaps a setting in the storefront API could be used to set a callback URL for all checkout-actions that sends the user out of checkout, such as errors or complete states.?

andrenaught commented 5 years ago

I managed to find a work around, I ended up just using https://help.shopify.com/en/themes/customization/cart/use-permalinks-to-preload-cart, I get the id of the products using metafields, and pretty much build the link with javascript. Though the most proper way (instead of metafields) would probably be to just use the admin API (should be called from a server to protect your keys) to get the product ID

eugeneoei commented 4 years ago

Hi @andrenaught ,

Is this still the case now where the generation of a checkout weburl through the Storefront API results in the logo to be not clickable? I've read on Shopify's community forum that this could possibly happened also because:

  1. A theme is not used or
  2. The custom front end page is not hosted on Shopify but instead on other hosting services such as godaddy etc.

But these posts did not get any response. Based on your knowledge, are these reasons possible?

Also, after your workaround using permalinks, does the logo link back to the homepage? And is the "Back to cart" option shown after?

andrenaught commented 4 years ago

@eugeneoei Yeah just checked right now, it's still the case. In my case, the main site is hosted on a separate server (If you're using the storefront API, it's probably gonna be), using the default Shopify theme - though these factors shouldn't matter since the checkout page is hosted on Shopify and is uniform across all Shopify stores.

eugeneoei commented 4 years ago

@andrenaught Thanks for getting back! yea. it's just really weird that the behaviour of the checkout page is different when the storefront API is used despite it supposed to be uniformed across all Shopify stores. It's funny as well when previewing the checkout page within the theme, the logo is clickable and "Back to cart" option are shown.

The perma links workaround is a little too much work for me to handle at this point in time. Best I could do was to attach a click listener on the logo and redirect the user back to my own custom front-end page. Though this event is only triggered after payment was successfully made.