1.0.9 • Published 2 months ago

merchi_product_form v1.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

merchi_product_form

Merchi product form for Next.js

Table of Contents

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

NameTypeDefaultDescription
apiUrlstring?'https://api.merchi.co/v6/'The api url for merchi
allowAddToCartboolean?undefinedControls if the add to cart button is shown
btnNameAddToCartstring?undefinedThe text on the add to cart button
classNameAlertSellerEditablestring?'alert alert-light'Class for the seller editable alert element
classNameButtonSubmitstring?'btn btn-primary w-100 merchi-embed-form_button-submit'Class for the Submit button element
classNameButtonGroupAddstring?'btn btn-white'Class for the add group button element
classNameButtonGroupRemovestring?'btn btn-danger'Class for the delete group button element
classNameButtonsSubmitContainerstring?'merchi-product-buttons-submit-container'Class for the container of the submit buttons
classNameFileUploadContainerstring?'merchi-input-file-container'Class for the input file container
classNameFileUploadstring?'merchi-embed-form_dropzone'Class for the dropzone container
classNameFilePreviewContainerstring?'uploaded-variation-file'Class for the file variation upload element
classNameFileUploadTextContainerstring?'merchi-embed-form_dropzone-text-container'Class for the dropzone text element
classNameFilePreviewIconWrapperstring?'uploaded-variation-file-icon-wrapper'Class for the upload variation icon wrapper
classNameFileUploadButtonstring?'btn btn-sm btn-link ml-auto'Class for the file upload button element
classNameFileUploadIconstring?'merchi-embed-form_dropzone-icon'Class for the form dropzone icon element
classNameFileUploadIconSecondstring?'merchi-embed-form_dropzone-icon-plus'Class for the form dropzone plus icon element
classNameFileUploadIconContainerstring?'merchi-embed-form_dropzone-icon-container'Class for the form dropzone icon container
classNameFileListItemstring?'list-group-item no-z-index-hover'Class for file list item element
classNameFileButtonDownloadstring?'btn btn-sm btn-secondary'Class for the file download button element
classNameFileButtonDeletestring?'btn btn-sm btn-danger ml-2'Class for the file delete button element
classNameFileListItemContainerstring?'list-group'Class for the file item list
classNameGroupsContainerstring?'merchi-embed-form_product-group-container'Class for the product variation group container
classNameGroupPriceContainerstring?'merchi-embed-form_product-group-total-cost'Class for the variation group total cost
classNameInputstring?'form-control'Class for form inputs
classNameInventoryStatusstring?'flex-fill'Class for the inventory status element
classNameInputContainerstring?'merchi-embed-form_product-group-input-qty-container'Class for the input container
classNameOptionContainerstring?'merchi-embed-form_checkbox_radio-item'Class for the radio/checkbox container
classNameOptionInputstring?'merchi-embed-form_checkbox_radio-input'Class for the radio input
classNameOptionLabelstring?'merchi-embed-form_checkbox_radio-label'Class for the radio label
classNameOptionSuperstring?'merchi-embed-form_checkbox_radio-super'Class for the checkbox radio super
classNameOptionsCheckboxRadioContainerstring?''Class for the option checkbox/radio container
classNameOptionImagestring?'merchi-embed-form_image-select-option-item-img'Class for the variation image select element
classNameOptionImageContainerstring?'merchi-embed-form_image-select-option-item-container'Class for the variation image container element
classNameOptionColourstring?'merchi-embed-form_color-select-option'Class for the variation colour element
classNameOptionColourContainerstring?'merchi-embed-form_color-select-item'Class for the variation colour container element
classNameProductTitlestring?'merchi-product-title'Class for the product title element
classNameProductOriginTitlestring?'merchi-product-origin-title'Class for the product origin title element
classNameProductTotalContainerstring?'merchi-embed-form_summary-product-cost-container'Class for the product total cost container element
classNameProductTotalstring?'merchi-embed-form_summary-product-cost'Class for the product total cost element
classNameQuantityLabelContainerstring?'merchi-embed-form_quantity-label-container'Class for the product quantity label element
classNameUnitPricestring?undefinedClass for the unit price element
currentUserUser?undefinedA Merchi client json object to be used as client
hideCostboolean?undefinedHide the cost. Used for quote requests
hideCountryboolean?undefinedHide the country flag.
hideCalculatedPriceboolean?undefinedHide calculated price. Used for quote requests
hideDomainNameboolean?undefinedHide product domain
hideQuantityFieldboolean?undefinedHide Quantity field. Used for quote requests
hideRequestQuotationButtonboolean?undefinedHide request quote button
hidePaymentUpfrontButtonboolean?undefinedHide buy now button
hideTitleboolean?undefinedHide product title
isCartItemboolean?undefinedUsed if the product form in being used in cart item context
initJobjob | cartItemundefinedThe Merchi job or cartItem to be used for the form
initProductProductundefinedThe Merchi product to be used for the form
onAddToCart() => void?undefinedAn action to be applied to the add to cart button
onBuyNow() => void?undefinedAn action to be added to the buy now button
onGetQuote() => void?undefinedAn action to be added to the get quote button
onSubmit(data) => void?undefinedAn callback which returns the most recent job data
productFormIdstring?undefinedAn option id to be applied to the product form
showCurrencyboolean?undefinedShow the currency icon to the user
showCurrencyCodeboolean?undefinedShow the currency code to the user
showFeatureDeadlineboolean?undefinedWill display a countdown timer
showGroupBuyStatusboolean?undefinedwill show a the group buy status bar
showUnitPriceboolean?undefinedShow the unit price to the user