merchi_product_form

Merchi product form for Next.js

Table of Contents

• Installation
• Usage
• Props

Installation

npm install merchi_product_form

or

yarn add merchi_product_form

Usage

import MerchiProductForm from 'merchi_product_form';
import { notFound } from 'next/navigation';

export async function fetchProduct(id: number) {
  const url = `https://api.merchi.co/v6/products/${id}/`;
  try {
    const response = await fetch(url, fetchOptions);
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const responseJson = await response.json();
    return responseJson.product;
  } catch (e: any) {
    throw new Error(e);
  }
}

export default async function Page({ params: { id } } : { params: { id: number } }) {
  const initProduct = await fetchProduct(id);
  if (!dataProduct) return notFound();
  const onBuyNow = (job: Job) => console.log(job);
  const onGetQuote = (job: Job) => console.log(job);
  return (
    <MerchiProductForm
      initProduct={initProduct}
      onBuyNow={onBuyNow}
      onGetQuote={onGetQuote}
    />
  );
}

Props

| Name | Type | Default | Description | | ------------------------------------------ | -------------- | ---------------------------------------------------- | --------------------------------------------------- | | apiUrl | string? | 'https://api.merchi.co/v6/' | The api url for merchi | | allowAddToCart | boolean? | undefined | Controls if the add to cart button is shown | | btnNameAddToCart | string? | undefined | The text on the add to cart button | | classNameAlertSellerEditable | string? | 'alert alert-light' | Class for the seller editable alert element | | classNameButtonSubmit | string? | 'btn btn-primary w-100 merchi-embed-form_button-submit'| Class for the Submit button element | | classNameButtonGroupAdd | string? | 'btn btn-white' | Class for the add group button element | | classNameButtonGroupRemove | string? | 'btn btn-danger' | Class for the delete group button element | | classNameButtonsSubmitContainer | string? | 'merchi-product-buttons-submit-container' | Class for the container of the submit buttons | | classNameFileUploadContainer | string? | 'merchi-input-file-container' | Class for the input file container | | classNameFileUpload | string? | 'merchi-embed-form_dropzone' | Class for the dropzone container | | classNameFilePreviewContainer | string? | 'uploaded-variation-file' | Class for the file variation upload element | | classNameFileUploadTextContainer | string? | 'merchi-embed-form_dropzone-text-container' | Class for the dropzone text element | | classNameFilePreviewIconWrapper | string? | 'uploaded-variation-file-icon-wrapper' | Class for the upload variation icon wrapper | | classNameFileUploadButton | string? | 'btn btn-sm btn-link ml-auto' | Class for the file upload button element | | classNameFileUploadIcon | string? | 'merchi-embed-form_dropzone-icon' | Class for the form dropzone icon element | | classNameFileUploadIconSecond | string? | 'merchi-embed-form_dropzone-icon-plus' | Class for the form dropzone plus icon element | | classNameFileUploadIconContainer | string? | 'merchi-embed-form_dropzone-icon-container' | Class for the form dropzone icon container | | classNameFileListItem | string? | 'list-group-item no-z-index-hover' | Class for file list item element | | classNameFileButtonDownload | string? | 'btn btn-sm btn-secondary' | Class for the file download button element | | classNameFileButtonDelete | string? | 'btn btn-sm btn-danger ml-2' | Class for the file delete button element | | classNameFileListItemContainer | string? | 'list-group' | Class for the file item list | | classNameGroupsContainer | string? | 'merchi-embed-form_product-group-container' | Class for the product variation group container | | classNameGroupPriceContainer | string? | 'merchi-embed-form_product-group-total-cost' | Class for the variation group total cost | | classNameInput | string? | 'form-control' | Class for form inputs | | classNameInventoryStatus | string? | 'flex-fill' | Class for the inventory status element | | classNameInputContainer | string? | 'merchi-embed-form_product-group-input-qty-container'| Class for the input container | | classNameOptionContainer | string? | 'merchi-embed-form_checkbox_radio-item' | Class for the radio/checkbox container | | classNameOptionInput | string? | 'merchi-embed-form_checkbox_radio-input' | Class for the radio input | | classNameOptionLabel | string? | 'merchi-embed-form_checkbox_radio-label' | Class for the radio label | | classNameOptionSuper | string? | 'merchi-embed-form_checkbox_radio-super' | Class for the checkbox radio super | | classNameOptionsCheckboxRadioContainer | string? | '' | Class for the option checkbox/radio container | | classNameOptionImage | string? | 'merchi-embed-form_image-select-option-item-img' | Class for the variation image select element | | classNameOptionImageContainer | string? | 'merchi-embed-form_image-select-option-item-container'| Class for the variation image container element | | classNameOptionColour | string? | 'merchi-embed-form_color-select-option' | Class for the variation colour element | | classNameOptionColourContainer | string? | 'merchi-embed-form_color-select-item' | Class for the variation colour container element | | classNameProductTitle | string? | 'merchi-product-title' | Class for the product title element | | classNameProductOriginTitle | string? | 'merchi-product-origin-title' | Class for the product origin title element | | classNameProductTotalContainer | string? | 'merchi-embed-form_summary-product-cost-container' | Class for the product total cost container element | | classNameProductTotal | string? | 'merchi-embed-form_summary-product-cost' | Class for the product total cost element | | classNameQuantityLabelContainer | string? | 'merchi-embed-form_quantity-label-container' | Class for the product quantity label element | | classNameUnitPrice | string? | undefined | Class for the unit price element | | currentUser | User? | undefined | A Merchi client json object to be used as client | | hideCost | boolean? | undefined | Hide the cost. Used for quote requests | | hideCountry | boolean? | undefined | Hide the country flag. | | hideCalculatedPrice | boolean? | undefined | Hide calculated price. Used for quote requests | | hideDomainName | boolean? | undefined | Hide product domain | | hideQuantityField | boolean? | undefined | Hide Quantity field. Used for quote requests | | hideRequestQuotationButton | boolean? | undefined | Hide request quote button | | hidePaymentUpfrontButton | boolean? | undefined | Hide buy now button | | hideTitle | boolean? | undefined | Hide product title | | isCartItem | boolean? | undefined | Used if the product form in being used in cart item context | | initJob | job | cartItem| undefined | The Merchi job or cartItem to be used for the form| | initProduct | Product | undefined | The Merchi product to be used for the form | | onAddToCart | () => void? | undefined | An action to be applied to the add to cart button | | onBuyNow | () => void? | undefined | An action to be added to the buy now button | | onGetQuote | () => void? | undefined | An action to be added to the get quote button | | onSubmit | (data) => void?| undefined | An callback which returns the most recent job data| | productFormId | string? | undefined | An option id to be applied to the product form | | showCurrency | boolean? | undefined | Show the currency icon to the user | | showCurrencyCode | boolean? | undefined | Show the currency code to the user | | showFeatureDeadline | boolean? | undefined | Will display a countdown timer | | showGroupBuyStatus | boolean? | undefined | will show a the group buy status bar | | showUnitPrice | boolean? | undefined | Show the unit price to the user |