Using Snipcart with Perch

    I looked into Snipcart to provide an option for a client a while ago. The default way is to include their JS on your page and define the products via the HTML as detailed on their docs (https://docs.snipcart.com/v3/setup/products):


    HTML
    1. <button class="snipcart-add-item"
    2. data-item-id="starry-night"
    3. data-item-price="79.99"
    4. data-item-url="/paintings/starry-night"
    5. data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."
    6. data-item-image="/assets/images/starry-night.jpg"
    7. data-item-name="The Starry Night">
    8. Add to cart
    9. </button>


    So you can create a Runway Collection (or a multiple-item region if you're using standard Perch and don't have too many products):


    HTML
    1. <button class="snipcart-add-item"
    2. data-item-id="<perch:content id="_id">"
    3. data-item-price="<perch:content id="price">"
    4. data-item-url="/products/<perch:content id="slug">"
    5. data-item-description="<perch:content id="desc">"
    6. data-item-image="<perch:content id="image">"
    7. data-item-name="<perch:content id="name">"
    8. >
    9. Add to cart
    10. </button>



    You can also use their API to define products from JSON (https://docs.snipcart.com/v3/a…ce/products#post-products). So you can write a small Perch app that listens to Collection items events (created/updated/deleted) and interact with the Snipcart API accordingly.



    As for inventory, once a product has been defined and created in Snipcart, you can manage the inventory through the Snipcart's dashboard (https://snipcart.com/ecommerce-inventory-management). This means the editor would need to create the product via the Perch control panel, then head over to Snipcart to manage the inventory.