salla-fulfillment-methods

Shows how a product can be received, as side-by-side cards for "available for delivery" and "available for pickup". Use it on a product page. It shows only the cards the product supports, using the supports_delivery and supports_pickup flags of the product details, and renders nothing when neither is true or the details cannot be loaded. It only displays these flags and does not check eligibility itself.

The product is read from the data-product-id attribute, falling back to the current page id.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-fulfillment-methods> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaFulfillmentMethods } from '@salla.sa/twilight-components-react/fulfillment-methods';

ExampleCopy Anchor Link

import { SallaFulfillmentMethods } from '@salla.sa/twilight-components-react/fulfillment-methods';

export function Example() {
  return (
    <SallaFulfillmentMethods dataProductId="123456" />
  );
}