Question 1

Inventory Information - Developer Javascript Events

Accepted Answer

If you are a developer, and want to use our app for custom functionality, you can access these events:

tomitVariantChanged Listen to this event to reparse data if you need to

tomitLoaded For instance if you would like to get inventory information for multiple products, you can use our object once it's loaded:

document.addEventListener('tomitLoaded', function(e) { var productIds = ['123422,464117']; tomitProductInventoryInfo.getProductsInventoryInformation(productIds).then(function(e){ console.log(e); }); }); </script>

tomitProductLoaded For instance, on a product page if you would like to get the product object with inventory information, you can listen for the tomitProductLoaded event:

<script type="text/javascript"> document.addEventListener('tomitProductLoaded', function(e) { console.log('product loaded'); console.log(tomitProductInventoryInfo.activeProduct); }); </script>

If you would like to display the inventory block in another element on the page as well (sometimes you have a mobile template hidden for instance)

```

Question 2

Inventory Information - Styling the inventory list

Accepted Answer

Since every store has their own look and feel, and everyone has their own wishes for styling, we've decided to leave any styling up to you. Here are a few things you can do.

Remove dots from location list If you want to remove the dots from the location list, add this snippet to your theme.scss.liquid file (somewhere at the bottom):

```ul#tomitinventorylist { list-style-type: none; padding: 0; margin: 0; }

tomitinventorylist li {

margin: 0; padding: 0; }```

Color inventory Threshold If you use the 3 inventory threshold values (out of stock, low stock, high stock) you can use this css snippet to give the text some color:

.tomItInventoryLocationHighStock, .tomitInStock{ color:#00b268; } .tomItInventoryLocationLowStock{ color:#f29500; } .tomItInventoryLocationNoStock, .tomitOutOfStock{ color:#bc1f00; }

We added more styling options to the app so you can style some of the options without css. Adding css to your theme css will still be an option ofcourse. Additionally you can add your custom styling to the 'Custom css' within the 'Style Settings' tab. This way you can keep all your custom styling, even when changing themes.

If you want to add css to the location names you can use the class '.location' For example:

.location{ color:#ff0000; }

This will make the location names red. To add styling to the stock count you can use '.stockCount'

The class names for the treshold values and in/out of stock can be viewed earlier on in this article.

Question 3

Inventory Information - How Do Pickup Locations Work?

Accepted Answer

When you enable pickup options, your customer will be able to select a pickup location on the product page:

Once the order is placed our app will reserve the inventory on the correct selected location. the order will have fulfillment status "open"

This is what the order detail page looks like:

When the customer picks up the order, you can mark the order as fulfilled.

Question 4

Inventory Information - Stop disable add to cart for certain products

Accepted Answer

If you want to enable the feature that blocks the add to cart button for products, but have some products you do not want to disable the add to cart button for, you can block the functionality with this script:

<script>
document.addEventListener('tomitLoaded', function(e) {
  tomitProductInventoryInfo.setBlockDisabling(true);
});
</script>```


If for instance you want to disable the behaviour for products that don't track inventory:

{% if product.inventory_management != 'shopify' %}

{% endif %}```

Question 5

PostNL - How do i set up the app?

Accepted Answer

App settings

In the settings you have to fill in your post nl klantnummer (${color}#ff0000) first. This can be found in the my postnl environment.

The post NL klantcode (${color}#ff0000) must be entered in the 2nd box. The post NL klantcode can also be found in the my postnl environment. First click on name -> my account in the top right corner of my postnl environment.

Then you have to click under module settings on afzender en retouradressen.

The post NL klantcode can then be found under the algemeen general.

Next you need to fill in a PostNL Api-Key(3). You can request a PostNL Test (Sandbox) API-Key via https://developer.postnl.nl the required API's are:

Shipping
Labelling
Shipping
Location

With this key you will need to create a few test labels, to make sure everything works.

When you are done testing, you can get a Production API via the PostNL CIT Service Desk.

The telephone number of the CIT Service Desk is: +31 (0)88 225 56 51

**Fullfill orders automatisch ** When this option is enabled, the track and trace code will automatically be put

Question 6

Inventory Information - Show inventory on collection page

Accepted Answer

If you want to show the product inventory on the collection page you need to enable that feature in the 'Advanced options' settings.

You will also need to add some code to your theme.

First you'll need to find the for which loops over the products in the collection-template.
You will see a file being included. (It probably doesn't have the same name as the example in the image below because of differences between themes.)

Go to the file that is being included and add the following code in a div like in the image below :

 data-tomit-variant-id="{{product.selected_or_first_available_variant.id}}"```

![](https://storage.crisp.chat/users/helpdesk/website/f8da57a5473fb000/data-variant-id_1xm468s.png)

If the inventory isn't shown correctly you can try to place the code in a different element. You can also place the code in a div and place the div in your file.

```

We recommend turning on the cache feature because with the inventory shown on your collection page we will reach the api limit of shopify much faster than usual. If you need help setting up this feature in your theme you can always ask for su

Frequently Read Articles

Browse All Categories