Query shopify cart contents

Technical Questions Shopify
1

Hi there :wave:

Is there a way to query the cart contents and extract data to use elsewhere on my page.

This is the flow I’m trying to achieve:
A user selects a product card → cart is cleared & selected product is added to cart → fixed bottom bar displays cart total + generates a dynamic checkout link based on cart contents.

Screen Shot 2022-06-17 at 12.59.35 PM
Screen Shot 2022-06-17 at 12.59.35 PM1068×185 10.2 KB

Any help is greatly appreciated!

1 Like
2

Hi @yael-montufar, you can access the Shopify cart object with some custom code.

  1. First, open up the options tab in the editor and click the “Show Advanced” button. Then select the “Edit Bootstrap Code” button. This will open up a code editor, which will look different depending on the type of content you are editing.

  2. If the code editor is blank you can copy and paste all of the code below. If you can already see the first line of code in the editor, you can skip that and just add the second line.

window.BuilderJsonData = window.BuilderJsonData || {};
window.BuilderJsonData.cart = {{ cart | json }};
  1. Close that code editor and switch to the data tab. Click the “Edit Content CSS + JS” button. Inside the if (Builder.isBrowser) statement, add the code below:
const shopifyWindow = window as any;
if (shopifyWindow.BuilderJsonData) {
  state.cart = shopifyWindow.BuilderJsonData.cart;
}

Now you should be able to access the cart object from state.cart

3

Hi, thank you for replying to my question. I have placed a block on my page, selected it, opened the [Options] tab and expanded [Show Advanced] but I am not seeing an “Edit Bootstrap Code” button/option anywhere.
I am only seeing “Replace nodes” toggle & “Scripts client only” options.

4

Ok, I found the option. I was looking at the “Show Advanced” under the Element options but it was in the Page field options.
Thanks again

1 Like
5

Hey, I followed the steps provided and am still having trouble accessing the cart.
Also I am getting this error on the editor:Screen Shot 2022-06-17 at 4.59.58 PM.png

6

Hi @yael-montufar, you will have to test this on a live page to be able to access Shopify data this way, so this won’t work in your live preview or in the editor.

7

HI @yael-montufar, were you able to get this working? To clarify, you can access the cart object from state.cart, so if you wanted to show the total cart item count for example you could add an element binding to a text block to bind it to state.cart.item_count. Or to access the array of items in the cart, you can access state.cart.items.