Most slide out carts are triggered by detecting a user click on a cart icon. When this click is detected theme code triggers the slide out cart to open.
Option price calculate taps into this behaviour by simulating a user click event on this button to trigger the existing scripts that open your slide out cart.
To set this up, you will need to determine the CSS element that triggers your existing themes javascript to open the Slideout cart.
To find the CSS selector to trigger your themes Javascript you can use one for the following strategies:
Inspect the page using web browser dev tools
Right click on page, select Inspect, use the inspect tool and hover over cart icon that triggers slideout cart to open.
This method will not give you exactly the correct element. You will need to perform some trial and error locating a selector and testing it.
In this case, inspector shows that the cart icon is part of the “.cart-link” class element. This also happens to be what triggers the slide out cart in the Option Price Calculator demo store template.
In many cases, inspector will not tell you exactly which selector is correct. Often times it is the class element on the svg or image icon. In the case above that would be “.icon.icon-cart”.
Remember, if a div has multiple class names such as “icon icon-cart” does, it is referenced as “.icon.icon-cart” this would be the selector you would put into Option Price Calculator app.
By default Option Price Calculator will trigger an on click event on the “.cart-link” class. Most likely your template will not use this CSS selector to trigger your slide out cart. You will need to provide your own Ajax Query Selector in this case.
Search your template
- Export your Shopify theme.
- Check your email and download the zip file containing your theme.
- Extract the zip file.
- Search all of your theme files using VS Code or another program that can search the content of all theme files at once.
Search for:
.on(“click”
or
.on(‘click’
Then look for references to slideout cart drawer or class selectors that you found while inspecting the page cart icon.
Hopefully you will find some code that indicates the exact selector you should put in Option Price Calculator.
Once you have found the CSS selector, make the following configuration changes:
- Settings => Add to Cart Method => Add to Cart Method => DOM
- Option Set must be configured as follows:
Redirect Method = Ajax
Ajax Query Selector = CSS selector you found in previous step