How to implement add to cart functionality in ember app

I have been working on e-commerce project. As a part of this project I have to implement a add to cart feature. My frontend is ember and backend is rails-api. I have used computed property to implement this, but all data from database get displayed in the cart page. How to implement a proper cart using ember?

Ember version is 3.4.4 Rails version is 7.0.2.3

// app/services/shopping-cart.js
import Service from '@ember/service';
import { computed } from '@ember/object';
const { service } = Ember.inject;
export default Service.extend({
    session: service('session'),
    store: service('store'),
    currentUser: service('currentUser'),
    itemsIds: [],
    items:computed("itemsIds.[]", function(){
        const itemsIds = this.itemsIds;
        return this.store.query('product', {id: itemsIds.id});
    }),
    addItem(itemId){
        this.itemsIds.addObject(itemId);
    },
    removeItem(itemId){
        this.itemsIds.removeObject(parseInt(itemId));
    }

});

// app/routes/product.js
import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
const { service } = Ember.inject;

export default Route.extend(AuthenticatedRouteMixin, {
    session: service('session'),
    currentUser: service('currentUser'),
    
    model(params){
        return this.store.findRecord('product', params.product_id);
    }
    
});

// app/controllers/product.js
import Controller from '@ember/controller';

const { service } = Ember.inject;
export default Controller.extend({
    session: service('session'),
    currentUser: service('currentUser'),
    shoppingCart: service('shoppingCart'),
    quantity: 1,
    price: 0,
    dialogBox: false,
    actions:{
        addToItem(model){
            const id = model.id;
            this.shoppingCart.addItem(id);
        },

        order(){
            var self = this;
            function setPrice(){
                self.set('price', (self.model.price * self.quantity));
            }
            this.set('dialogBox', true);
            const user_id = this.currentUser.user;
            let date = new Date();
            date.setDate(date.getDate() + 2);
            const orders = this.store.createRecord('order',{
                deliveryDate: date,
                processing: true,
                user_id: user_id
            });
            orders.save().then(setPrice());
        },

        orderItem(){
            this.set('dialogBox', false);
            console.log(this.model.id);
            const orderItems = this.store.createRecord('order-item', {
               quantity: this.quantity,
               product_id: this.model,
               price: this.quantity * this.model.price

           })
           orderItems.save().then(function(response){
               alert("Order has been placed successfully!!");
           });
        },

        showDialog(){
            this.set('dialogBox', true);
        },

        hideDialog(){
            this.set('dialogBox', false);
        },
        cancel(){
            
        }
    }
});

<div class="container mt-5">
    <div class="row">
        <div class="col">
             <i class="fa-solid fa-arrow-left fa-2x"></i>
        </div>
        <div class="col">
            <h1>Product details</h1>
        </div>
        <div class="col">
            <i class="fa-solid fa-cart-shopping fa-2x"></i>
        </div>
    </div>
    <hr>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <img class="product-image" src="/assests/images/.jpeg" alt="">
            </div>

            <div class="col-sm-6">
                <h1></h1>
                
                <button class="btn btn-success"  >
                    <i class="fa-solid fa-cart-shopping"></i>
                    <span>Add to Cart</span>
                </button>
                <label class="quantity-label" for="quantity">Quantity Selector:</label>
                "> --}}
                
            </div>
        </div>
    </div> 
    <hr> 
    <h4> Description</h4>
    <div class="container">
        
            <p></p>
        
        <ul>
        
        </ul>
    </div>
    <button class="btn btn-success" >Order now</button>

</div>

<div class="dialog-container ">
    <div class="dialog">
        <h5></h5>
        <h5>The price is </h5>
        <h5 class="confirmation">Are you sure, you wanna place this order?</h5>
        <h5>Quantity: </h5>
        <div class="dialog-buttons">
            <button  class="btn btn-success">
                <i class="fa-solid fa-badge-check"></i>Yes
            </button>
            <button  class="btn btn-danger">Cancel</button>
        </div>
    </div>
</div>

// app/controller/cart.js
import Controller from '@ember/controller';

const { service } = Ember.inject;

export default Controller.extend({
    session: service('session'),
    currentUser: service('currentUser'),
    shoppingCart: service('shopping-cart'),
});

class ProductsController < ApplicationController
    def index
        if params[:id]
            render json: Product.find(params[:id]) 
        else
            render json: Product.all 
        end
        
    end

    def show
        render json: Product.find(params[:id])
    end
    def create
        title = params[:product][:title]
        description = params[:product][:description]
        price = params[:product][:price]
        quantity = params[:product][:quantity]

        Product.create!(
            title: title,
            description: description,
            price: price,
            quantity: quantity,
        )

    end

    def update
    end
end