Slot Block

SlotBlock is a component that is used to render the components inserted into a slot. It takes slotId as a prop and renders the components inserted into that slot.

import { SlotBlock } from '@appmaker-xyz/shopify';
...
<SlotBlock slotId="slot-id" {...props} />

insertToSlot(slotId, Component, priority);

Parameter	Type	Description	Required
slotId	string	id of the slot where the component should be inserted	Yes
Component	React Component	Component to be inserted	Yes
priority	number	priority of the component. Higher priority components will be inserted first. Default is 0	No

Example usage

To insert a component into a slot, use the insertToSlot function in the activate function of the src/index.js file.

src/index.js

import { insertToSlot } from "@appmaker-xyz/core";
import ExampleComponent from "./components/ExampleComponent";
import VendorName from "./components/VendorName";

export function activate(params) {
  insertToSlot("grid-item-below-price", ExampleComponent);
  insertToSlot("grid-item-below-price", VendorName, 0);
  insertToSlot("pdp-below-price", ExampleComponent, 0);
}

Default slots

• grid-item-below-price : Slot to insert components below the price in grid item
• pdp-below-price : Slot to insert components below the price in product detail page

---

Example component with appmaker hook

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { useProductListItem } from "@appmaker-xyz/shopify";

const VendorName = (props) => {
  const { vendorName } = useProductListItem(props);
  return (
    <View style={styles.container}>
      <Text>Vendor: {vendorName}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#f0f0f0",
    padding: 2,
  },
});

export default VendorName;