How to ship inventory to Amazon FBA? Package like you mean it

Have you ever ordered a package from Amazon and had it show up mangled, or worse off, the product was broken inside? As a buyer damaged orders are incredibly frustrating. That’s why sellers need to learn how to correctly ship inventory to Amazon FBA by packing their products well to avoid unhappy customer reviews.

With Amazon FBA, Amazon handles all the difficult aspects of your business, like orders, shipping, returns, and even customer service. Your only job is to pack and ship your inventory to the Amazon FBA fulfillment centers.

Fulfillment by Amazon is designed to make your life easy, however, there are certain criteria you are expected to meet when it comes to packaging your products for Amazon FBA. Amazon offers sellers various packaging options depending on your chosen order fulfillment means. To learn more about how to properly package your products and keep your customers happy continue reading.

Why should you be concerned with how your inventory is packaged when you ship to Amazon FBA?

New sellers often make this critical mistake; they assume that Amazon fulfillment centers will care for their inventory when picking it up and packaging it for buyers. When in reality, if you don’t take the time to package your items adequately, there is a chance that your products could get damaged en route to the fulfillment centers or get lost. As you can imagine, selling damaged goods is bad for business since they can ruin the brand you’re working hard to build.

Something else to worry about is the FBA prep service fee per item that you might be forced to pay if you don’t comply with the packaging and prep requirements set by Amazon for FBA shipments. At the same time, it’s worth noting that Amazon reserves a right to refuse, return and repackage items that don’t meet their packaging requirement, which will incur certain non-compliance fees. If you don’t want to incur additional costs or risk your inventory getting lost or damaged, package it like you mean it.

What can go wrong with inventory en route to Amazon FBA fulfillment centers?

Amazon takes the packaging requirements they have in place seriously, and there are penalties for anyone who fails to comply. Amazon will not hesitate to dispose of your inventory or block future shipments to fulfillment centers. And as you can imagine, this doesn’t make for a very successful business model.

So, while it might seem tiring at first when you think about everything that could go wrong with the inventory that you ship to Amazon FBA fulfillment centers, it all makes perfect sense.

• Poorly packaged goods may get damaged in transit
• Poorly labeled inventory might get mixed up or lost on the way to the fulfillment centers or while already there.

Most Amazon sellers need to worry about inventory damage, and there is a lot that can go wrong depending on what you are shipping. Some items are harder to ship than others, so you must ensure that you package your inventory correctly to avoid damage. Examples of things that go wrong include:

• Candles shipped in padded envelopes might arrive shattered.
• CDs shipped in padded envelopes might arrive with crushed cases.
• Delicate items like makeup shipped in large boxes without bubble wrap, dunnage, and other leak-proof materials might arrive with shock damage.

It’s also worth noting that:

• Over-packaging goods are wasteful and damaging to the environment. Understandably, you want your inventory to reach the fulfillment centers in the right condition, but that doesn’t mean over-packaging.
• Poorly packaged items could negatively impact your reputation and brand. If Amazon decides to ship your items in damaged cases, this only attracts negative reviews on your seller account.

Amazon marks improperly labeled products as unsellable and will slap you with a hefty non-compliance fee. You don’t want that.

To avoid all these problems, stick to Amazon’s rules of packaging inventory for FBA shipment.

Reasons why you should follow a standard called “prep guidance”

Amazon Fulfillment Centers follow a standard “prep guidance” that instructs sellers on properly packing items for shipping. Correct packaging and prep help:

• Reduce any delays in receiving time of your inventory
• Protect your inventory while in the Amazon fulfillment centers
• Create a better customer experience

The Amazon prep guidance guides you on how to package and ship different products depending on the category. The categories include:

• Adult category – these are items that display potentially offensive material such as nudity and profanity.
• Apparel, fabric, plush, and textiles – clothing or fabric that could be damaged by dust, dirt, moisture, or liquid.
• Baby – items meant for children aged three years or younger or any packaging with cutouts greater than a square inch.
• Fragile – glass, other fragile goods, or a liquid in a glass container.
• Liquids – non-glass items like liquid or viscous items without a double seal.
• Perforated packaging – items that come in perforated packaging like chocolate boxes and candy display boxes.
• Powder, pellets, and granular – include items like sugar, facial powder, and powdered detergents.
• Sharp items – these are products like scissors and other sharp tools not already contained in protective packaging.
• Small items – products like jewelry, keychains, and flash drives
• No prep needed category – items like DVDs, video games, and books don’t require prep. Still, these items need labeling.

If you use the Amazon prep service, Amazon prepares all your eligible products for a per-unit fee. Once you enable the service, choose whether it will be you or Amazon who preps the items you send to the fulfillment centers. After you’ve built a shipment plan, Amazon will provide an estimate of the prep fees for the products in question.

But there are usually a few problems with the Amazon “prep guidance.”

• Sometimes the prep guidance is ignored.
• The fulfillment center sometimes runs out of appropriate packaging materials like the correct box size or envelopes.
• Sometimes the prep guidance is wrong with the Amazon system where some products don’t fall in any category or multiple categories.

How to protect your inventory en route to fulfillment centers

As an Amazon FBA seller, you must ensure that you prep your inventory in a way that it survives inbound shipping to the fulfillment center and shipment to the buyer. This means following certain prep guidance when prepping your inventory, like:

• Box fragile items like makeups with appropriate dunnage
• Shrink-wrap any items that might leak when squeezed
• Shrink-wrap also items that might accidentally open or spill, leading to a customer concluding that the item was sold used
• If you package your items in boxes, ensure that you use the correct size boxes so items inside are not crushed.
• If your items are in a box, seal the box appropriately to avoid any accidental openings

Summary

There are more than 2 million registered sellers on the Amazon platform, each shipping different products to the Amazon fulfillment centers. With that number, anything can happen to your inventory in transit to the Amazon warehouses or the buyer. Don’t assume your job is done after your goods are in transit.

Protecting your inventory ensures that your reputation as a seller remains stellar by ensuring that your customers don’t receive damaged goods. Improper packaging could also damage your reputation on Amazon because Amazon could easily dispose of your inventory or block you from ever shipping anything to their fulfillment centers.

Reactivity In Vue

 Reactivity is the ability for a variable (array, string, number, object, etc) to update when its value or any other variable that it makes reference to is changed after declaration.

 

In this article, we’re going to look at reactivity in Vue, how it works, and how we can create reactive variables using newly created methods and functions. This article is targeted at developers who have a good understanding of how Vue 2.x works and are looking to get familiar with the new Vue 3.

We’re going to build a simple application to better understand this topic.

By default, JavaScript isn’t reactive. This means that if we create the variable boy and reference it in part A of our application, then proceed to modify boy in part B, part A will not update with the new value of boy.

let framework = 'Vue';
let sentence = `${framework} is awesome`;
console.log(sentence)
 // logs "Vue is awesome"
framework = 'React';
console.log(sentence)
//should log "React is awesome" if 'sentence' is reactive.

The snippet above is a perfect example of the non-reactive nature of JavaScript — hence, why the change isn’t reflected in the sentence variable.

In Vue 2.x, props, computed, and data() were all reactive by default, with the exception of properties that are not present in data when such components are created. This means that when a component is injected into the DOM, only the existing properties in the component’s data object would cause the component to update if and when such properties change.

Internally, Vue 3 uses the Proxy object (an ECMAScript 6 feature) to ensure that these properties are reactive, but it still provides the option to use Object.defineProperty from Vue 2 for Internet Explorer support (ECMAScript 5). This method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

At first glance and since most of us already know that reactivity is not new in Vue, it might seem unnecessary to make use of these properties, but the Options API has its limitations when you’re dealing with a large application with reusable functions in several parts of the application. To this end, the new Composition API was introduced to help with abstracting logic in order to make a code base easier to read and maintain. Also, we can now easily make any variable reactive regardless of its data type using any of the new properties and methods.

When we use the setup option, which serves as the entry point for the Composition API, the data object, computed properties, and methods are inaccessible because the component instance has not yet been created when setup is executed. This makes it impossible to take advantage of the built-in reactivity in any of these features in setup. In this tutorial, we’re going to learn about all of the ways we can do this.

The Reactive Method

According to the documentation, the reactive method, which is the equivalent of Vue.observable() in Vue 2.6, can be useful when we’re trying to create an object all of whose properties are reactive (such as the data object in the Options API). Under the hood, the data object in the Options API uses this method to make all of the properties in it reactive.

But we can create our own reactive object like this:

import { reactive } from 'vue'

// reactive state
let user = reactive({
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "address": {
            "street": "Kulas Light",
            "suite": "Apt. 556",
            "city": "Gwenborough",
            "zipcode": "92998-3874",
            "geo": {
                "lat": "-37.3159",
                "lng": "81.1496"
            }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
            "name": "Romaguera-Crona",
            "catchPhrase": "Multi-layered client-server neural-net",
            "bs": "harness real-time e-markets"
        },
        "cars": {
            "number": 0
        }
    })

Here, we imported the reactive method from Vue, and then we declared our user variable by passing its value to this function as an argument. In doing so, we’ve made user reactive, and, thus, if we use user in our template and if either the object or a property of this object should change, then this value will get automatically updated in this template.

ref

Just as we have a method for making objects reactive, we also need one to make other standalone primitive values (strings, booleans, undefined values, numbers, etc.) and arrays reactive. During development, we would work with these other data types while also needing them to be reactive. The first approach we might think of would be to use reactive and pass in the value of the variable that we want to make reactive.

import { reactive } from 'vue'

const state = reactive({
  users: [],
});

Because reactive has deep reactive conversion, user as a property would also be reactive, thereby achieving our goal; hence, user would always update anywhere it is used in the template of such an app. But with the ref property, we can make any variable with any data type reactive by passing the value of that variable to ref. This method also works for objects, but it nests the object one level deeper than when the reactive method is used.

let property = {
  rooms: '4 rooms',
  garage: true,
  swimmingPool: false
}
let reactiveProperty = ref(property)
console.log(reactiveProperty)
// prints {
// value: {rooms: "4 rooms", garage: true, swimmingPool: false}
// }

Under the hood, ref takes this argument passed to it and converts it into an object with a key of value. This means, we can access our variable by calling variable.value, and we can also modify its value by calling it in the same way.

import {ref} from 'vue'
let age = ref(1)

console.log(age.value)
//prints 1
age.value++
console.log(age.value)
//prints 2

With this, we can import ref into our component and create a reactive variable:

<template>
  <div class="home">
    <form @click.prevent="">
      <table>
        <tr>
          <th>Name</th>
          <th>Username</th>
          <th>email</th>
          <th>Edit Cars</th>
          <th>Cars</th>
        </tr>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>
            <input
              type="number"
              style="width: 20px;"
              name="cars"
              id="cars"
              v-model.number="user.cars.number"
            />
          </td>
          <td>
            <cars-number :cars="user.cars" />
          </td>
        </tr>
      </table>
      <p>Total number of cars: {{ getTotalCars }}</p>
    </form>
  </div>
</template>
<script>
  // @ is an alias to /src
  import carsNumber from "@/components/cars-number.vue";
  import axios from "axios";
  import { ref } from "vue";
  export default {
    name: "Home",
    data() {
      return {};
    },
    setup() {
      let users = ref([]);
      const getUsers = async () => {
        let { data } = await axios({
          url: "data.json",
        });
        users.value = data;
      };
      return {
        users,
        getUsers,
      };
    },
    components: {
      carsNumber,
    },
    created() {
      this.getUsers();
    },
    computed: {
      getTotalCars() {
        let users = this.users;
        let totalCars = users.reduce(function(sum, elem) {
          return sum + elem.cars.number;
        }, 0);
        return totalCars;
    },
  };
</script>

Here, we imported ref in order to create a reactive users variable in our component. We then imported axios to fetch data from a JSON file in the public folder, and we imported our carsNumber component, which we’ll be creating later on. The next thing we did was create a reactive users variable using the ref method, so that users can update whenever the response from our JSON file changes.

We also created a getUser function that fetches the users array from our JSON file using axios, and we assigned the value from this request to the users variable. Finally, we created a computed property that computes the total number of cars that our users have as we have modified it in the template section.

It is important to note that when accessing ref properties that are returned in the template section or outside of setup(), they are automatically shallow unwrapped. This means that refs that are an object would still require a .value in order to be accessed. Because users is an array, we could simply use users and not users.value in getTotalCars.

In the template section, we displayed a table that displays each user’s information, together with a <cars-number /> component. This component accepts a cars prop that is displayed in each user’s row as the number of cars they have. This value updates whenever the value of cars changes in the user object, which is exactly how the data object or computed property would work if we were working with the Options API.

 

toRefs

When we use the Composition API, the setup function accepts two arguments: props and context. This props is passed from the component to setup(), and it makes it possible to access the props that the component has from inside this new API. This method is particularly useful because it allows for the destructuring of objects without losing its reactivity.

<template>
  <p>{{ cars.number }}</p>
</template>
<script>
  export default {
    props: {
      cars: {
        type: Object,
        required: true,
      },
      gender: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      console.log(props);
   // prints {gender: "female", cars: Proxy}
    },
  };
</script>
<style></style>

To use a value that is an object from props in the Composition API while ensuring it maintains its reactivity, we make use of toRefs. This method takes a reactive object and converts it into a plain object in which each property of the original reactive object becomes a ref. What this means is that the cars prop…

cars: {
  number: 0
}

… would now become this:

{
  value: cars: {
    number: 0
  }

With this, we can make use of cars inside any part of the setup API while still maintaining its reactivity.

 setup(props) {
      let { cars } = toRefs(props);
      console.log(cars.value);
      // prints {number: 0}
    },

We can watch this new variable using the Composition API’s watch and react to this change however we might want to.

setup(props) {
      let { cars } = toRefs(props);
      watch(
        () => cars,
        (cars, prevCars) => {
          console.log("deep ", cars.value, prevCars.value);
        },
        { deep: true }
      );
    }

toRef

Another common use case we could be faced with is passing a value that is not necessarily an object but rather one of the data types that work with ref (array, number, string, boolean, etc.). With toRef, we can create a reactive property (i.e. ref) from a source reactive object. Doing this would ensure that the property remains reactive and would update whenever the parent source changes.

const cars = reactive({
  Toyota: 1,
  Honda: 0
})

const NumberOfHondas = toRef(state, 'Honda')

NumberOfHondas.value++
console.log(state.Honda) // 1

state.Honda++
console.log(NumberOfHondas.value) // 2

Here, we created a reactive object using the reactive method, with the properties Toyota and Honda. We also made use of toRef to create a reactive variable out of Honda. From the example above, we can see that when we update Honda using either the reactive cars object or NumberOfHondas, the value gets updated in both instances.

This method is similar and yet so different from the toRefs method that we covered above in the sense that it maintains its connection to its source and can be used for strings, arrays, and numbers. Unlike with toRefs, we do not need to worry about the existence of the property in its source at the time of creation, because if this property does not exist at the time that this ref is created and instead returns null, it would still be stored as a valid property, with a form of watcher put in place, so that when this value changes, this ref created using toRef would also be updated.

We can also use this method to create a reactive property from props. That would look like this:

<template>
  <p>{{ cars.number }}</p>
</template>
<script>
  import { watch, toRefs, toRef } from "vue";
  export default {
    props: {
      cars: {
        type: Object,
        required: true,
      },
      gender: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      let { cars } = toRefs(props);
      let gender = toRef(props, "gender");
      console.log(gender.value);
      watch(
        () => cars,
        (cars, prevCars) => {
          console.log("deep ", cars.value, prevCars.value);
        },
        { deep: true }
      );
    },
  };
</script>

Here, we created a ref that would be based on the gender property gotten from props. This comes in handy when we want to perform extra operations on the prop of a particular component.

Conclusion

In this article, we have looked at how reactivity in Vue works using some of the newly introduced methods and functions from Vue 3. We started by looking at what reactivity is and how Vue makes use of the Proxy object behind the scenes to achieve this. We also looked at how we can create reactive objects using reactive and how to create reactive properties using ref.

Finally, we looked at how to convert reactive objects to plain objects, each of whose properties are a ref pointing to the corresponding property of the original object, and we saw how to create a ref for a property on a reactive source object.

Further Resources

• “Proxy” (object), MDN Web Docs
• “Reactivity Fundamentals”, Vue.js
• “Refs”, Vue.js
• “Lifecycle Hook Registration Inside setup”, Vue.js