Shoprocket react embed

Installation

npm i @shoprocket/react-embed

Usage

Initialization

You'll need to grab your store_id and publishable_key from Shoprocket dashboard > Sales channels > Existing website > Embed > Advanced / React JS > Initializing Shoprocket

https://shoprocket.io/dashboard/sales-channels/existing-website/embed?type=multiple_products

Then wrap your entire app in the ShoprocketProvider (note if you're using Gatsby, you'll need to render the ShoprocketProvider in wrapRootElement in both gatsby-ssr and gatsby-browser: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/)

import {ShoprocketProvider} from '@shoprocket/react-embed';
<ShoprocketProvider
    value={{
      store_id: 1,
      publishable_key: "1",
    }}
>
    {/* rest of your app here */}
</ShoprocketProvider>

Embedding products

You'll need to grab your the embed config from Shoprocket dashboard > Sales channels > Existing website > Embed > Advanced / React JS > Embed product

https://shoprocket.io/dashboard/sales-channels/existing-website/embed?type=multiple_products

and paste it as the config prop to the ShoprocketEmbed component:

import {ShoprocketEmbed} from '@shoprocket/react-embed';
<ShoprocketEmbed
    config={{
        options: {
            product_to_display: "29390",
            image_dimension_value: "crop",
            image_width: "1126",
            image_height: "1400",
            button_style: "standard",
        },
        includes: {
            show_product_name: "1",
            show_product_price: "1",
            show_product_image: "1",
            show_product_summary: "1",
            open_modal_on_image_click: "1",
            show_view_product_button: "1",
            show_add_to_cart_button: "1",
            show_min_max_order_quantity: "1",
            show_sale: "1",
            show_free_shipping: "1",
            show_new_product: "1",
            show_digital_download: "1",
            image_swap: "1",
        },
        product_popup: {
            show_product_name: "1",
            show_product_price: "1",
            show_product_summary: "1",
            show_product_description: "1",
            show_product_image: "1",
            show_select_quantity: "1",
            show_image_thumbnails: "1",
            show_product_reviews: "1",
            show_product_sku: "1",
            show_product_categories: "1",
            show_social_sharing_icons: "1",
            show_related_products: "1",
            thumbnail_layout: "horizontal_below",
            image_dimension_value: "crop",
            image_width: "1126",
            image_height: "1400",
            variation_styling: "dropdown",
            show_min_max_order_quantity: "1",
            show_sale: "1",
            show_free_shipping: "1",
            show_new_product: "1",
            show_digital_download: "1",
            show_product_tabs: "1",
            image_zoom: "1",
        },
    }}
/>