User Manual Quickstart Quickstart General Concepts Buyer Side Snippets Engraving Styles and Form Fields Flex Designs Sub Documents Scripting Workflows Editing Workflow Production Workflow Tutorial Videos Frame Features Resources Account Portal Style Reference Change Log Known Bugs & Limitations Glossary Acknowledgements Integrations Woo Commerce Shopify Api Reference Authorization Tokens Embedding The Editor Custom Integration Backend Api Price Display Setup in the Editor Code Setup Summary

Price Display

The price display feature allows to show important information on a product including price, product name, legal notice as well as the product information via an info icon button. Reduced or special-offer prices are also possible to display.

Price Display

Setup in the Editor

There are multiple ways to setup price categories or price tags in the editor. Group and layout snippets can have price categories from 1 to 5. Documents can have a named price category and form-fields different price-tags.

When creating layout snippets or stickers go to the “Snippet Export” section. Here one can choose a price category between one and five. These categories will be used to allocate a price label via the snippetPriceCategoryLabels attach parameter. Labels are displayed as a badge on each categorized snippet.

Snippet Price Category

Form-field price labels can be set for select-list, image-list and color-list form-fields. It is important to mark them as Price Relevant to see results. Price-tags can be set in the column tag (price-category). Same like for snippets you need to set the respective labels in the attach parameters. For form-fields and documents it is the priceCategoryLabels. One can give any random named tag to the list items. To see a price label in the buyer side, the tag needs to match a key in the priceCategoryLabels attach parameter.

Form-Field Price Category

Code Setup

In the attach parameters one can add the customized labels for the different categories and price tags set in the editor. Also the priceChangeCallback needs to be added to handle price changes and to update the price display.

Snippet Price Category Labels

As mentioned snippets have a price category from 1 to 5. In the same order from one to five one needs to add an array of strings for the respective categories as follows:

/* Labels displayed at stickers which have a price categorie-number set */
snippetPriceCategoryLabels: ["+ 1.50 €", "+ 2.50 €", "+ 3.50 € ", "+ 4.50 €", "+ 5.50 €"]

Hereby, the labels are just an example, where snippets with category 1 would get a price badge of “+ 1.50 €” and snippets with category 5 a price badge of “+ 5.50 €”.

Price Category Labels

Form-field labels will be added via the priceCategoryLabels attach parameter, which is of type Record<string, string>. In the following example, if an item from a select list has the tag “mug-back” then it will receive a badge with the label “+ 2.10 €” on it.

/* Labels displayed at form-fields which have a price tag set */
priceCategoryLabels: {
  "mug-front": "+ 2.10 €",
  "mug-back": "+ 2.10 €"
}

Price Change Callback

After setting up the editor and code and then choosing a snippet or changing a price relevant form-field in the buyer side, a priceChangeCallback will be fired. It returns the parameter priceInfo which has all the relevant information one needs for calculating the new price displayed beside the basket button.

If now for example the two-sided mug variant was selected from the list, a priceChangeCallback will be thrown and the following priceInfo will be returned:

{
  priceCategories: ["mug-back"],
  priceRelevantFormFields: {
    MugVariants: {
      tag: "mug-back",
      value: "two-sided"
    }
  },
  snippetPriceCategories: [
    {
      priceCategory: 2,
      amount: 1
    },
    {
      priceCategory: 4,
      amount: 1
    }
  ],
  testModeEnabled: false
}

Whereas the priceCategories contain an array of tags that were selected via the form-field lists. The priceRelevantFormFields store information about selected items from price-relevant form-field lists with its value and tag (price-category). And the snippetPriceCategories return the number of times snippets of each price category were used.

The above information can be used to calculate and display a new price to the user. To do so, an object with the new price information has to be put as a parameter when calling the uiHelper.refreshPriceDisplay function, which updates the price display in the buyer side.

{
    price: "11.90 €*",
    legalNotice: "*Inkl. VAT plus shipping",
    productName: "Coffee Mug",
    oldPrice: "14.60 €",
    infoUrl: "https://product-info.com"
}

Overall, the priceChangeCallback could look as follows:

const priceChangeCallback = (priceInfo) => {

  console.log("received price-change notification");

  const customPriceData = {
    snippetPrices: [1.50, 2.50, 3.50, 4.50, 5.50],
    priceCategories: {
      "mug-front": 2.10,
      "mug-back": 2.10,
    },
    basePrice: 9.80,
    oldPrice: 12.50,
    productName: "Coffee Mug",
    legalNotice: "*Inkl. VAT plus shipping",
    infoUrl: "https://product-info.com"
  }

  const snippetPrice = priceInfo.snippetPriceCategories.map(pc => (customPriceData.snippetPrices[pc.priceCategory - 1] || 0) * pc.amount).reduce((p, c) => p + c, 0);

  const categoriesPrice = priceInfo.priceCategories.map(dc => (customPriceData.priceCategories[dc] || 0)).reduce((p, c) => p + c, 0);

  const r = {
    price: (customPriceData.basePrice + categoriesPrice + snippetPrice).toFixed(2) + "€*",
    legalNotice: customPriceData.legalNotice,
    productName: customPriceData.productName,
    oldPrice: customPriceData.oldPrice > 0 ? (customPriceData.oldPrice + categoriesPrice + snippetPrice).toFixed(2) + "€" : "",
    infoUrl: customPriceData.infoUrl
  }

  uiHelper.refreshPriceDisplay(printess, r);
}

Summary

To conclude, there are three steps to take when setting up a price display. You need the attach parameters [“priceChangeCallback”, “snippetPriceCategoryLabels”, “priceCategoryLabel”] - labels depend on your requirements. Next you need to setup price categories and / or price tags for your templates in the designer. And you need to handle the data and call the uiHelper.refreshPriceDisplay within the priceChangeCallback to update the final price displayed beside the basket button.