Skip to main content

Additional Use Cases

Here are a list of things you might want to achieve with Spiff Commerce inside your Shopify store.

Hide Item Properties​

Navigate to the cart page where the item properties are being placed. In the loop that decides what item properties to display you want to filter them using something similar to the code below.

{% if p.first contains 'previewImage' or p.first contains 'spiffTransactionId' %}
    {% continue %}
{% endif %}

Hide Additional Buttons​

To hide additional buttons you want to apply the data-spiff-hide and data-product-id='{{product.id}}' attribute to any button element you wish to be hidden. The button will be hidden once the Spiff Commerce button renders.

<button
    data-spiff-hide
    data-product-id='{{product.id}}'
>
    My Button
</button>

Add Quantity​

By default the quantity that is passed into the cart is 1. This is because every theme handles quantity differently. If you want to pass in the quantity, inside the Spiff Commerce button snippet you need to access the quantity thats set on the document.

const addToCartRequestBody = JSON.stringify({
    quantity: document.querySelector("input[name='quantity']").value
});

Each theme will have a different ID or class name for quantity.