@shoprocket/react-embed
v1.1.10
Published
## Installation
Downloads
4
Readme
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",
},
}}
/>