Can't find how to add a product (or multiple) to cart in my custom module.

[Bpr3]

Hello,

I'm not sure this is the good place in forums, I hope so !

I'm trying to create a custom module to practice. It's intended to display some categories and their related products to allow user to make a selection of one product in each categories and then add everything to the cart.

In my example, it's a computer builder. There is no rules implemented yet as I'm currently struggling to work with the cart.

In my code below, the template file displays a modal window with some generic bootstrap code with buttons inside. The "Add to config" button is updating an array in my JS file with product ID.

Then the "Add to cart button" is here to update the cart with every chosen products ; that's where I'm stuck.

I was doing it without really worrying about adding a bunch of products to the cart.. I tried a lot of things I saw but nothing worked.

I'm using Prestashop 1.7.

Let me know if I can add any information.

Here is the module controller :

<?php

if (!defined('_PS_VERSION_')) {
    exit;
}

class Buildit extends Module
{
    public function __construct()
    {
        $this->name = 'buildit';
        $this->tab = 'front_office_features';
        $this->version = '1.0.0';
        $this->author = 'Bpr';
        $this->need_instance = 0;
        $this->ps_versions_compliancy = array('min' => '1.7', 'max' => _PS_VERSION_);
//        $this->bootstrap = true;

        parent::__construct();

        $this->displayName = $this->l('Buildit');
        $this->description = $this->l('Displays a computer builder.');

        $this->confirmUninstall = $this->l('Are you sure you want to uninstall the Buildit module?');

        $this->context->controller->addJS($this->_path . 'buildit.js');
    }

    public function install()
    {
        return parent::install() &&
            $this->registerHook('displayHome');
    }

    public function uninstall()
    {
        return parent::uninstall();
    }


    public function hookDisplayHome($params)
    {
        $this->context->smarty->assign(array(
            'buildit_name' => Configuration::get('BUILDIT_NAME', $this->context->language->id)));

        $this->context->controller->registerJavascript('cart-js','/js/cart.js', 'all');



        $categories = Category::getCategories();

        $categories_info = [];
        $products = [];

        foreach ($categories[2] as $category) {
            $curr_cat = new Category($category['infos']['id_category']);
            $categories_info[] = $category['infos'];
            $products = [...$products, ...$curr_cat->getProducts($this->context->language->id, 1, 2)];
        }

        $this->context->smarty->assign('categories', $categories_info);
        $this->context->smarty->assign('products', $products);


        return $this->display(__FILE__, 'buildit.tpl');
    }


}

 

Then the module template :

{block name='home'}
    <div class="container">
        <div class="row">
            <div class="col">
                <h2>Welcome to the BuildIt module!</h2>
                <h3>Feel free to configure your next computer :)</h3>
                <ul>
                    {foreach from=$categories item=category}
                        <li class="my-2">
                            {$category.name}
                            <ul class="pl-3">
                                {foreach from=$products item=product}
                                    <li>
                                        {if $product.id_category_default == $category.id_category}
                                            <button class="preview-button" data-toggle="modal" data-target=#modal{$product.id_product}>
                                                {$product.name}
                                            </button>
                                            <div class="modal fade" name="product-preview-modal" id=modal{$product.id_product}>
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                            <h1 class="modal-title fs-5">{$product.name}</h1>
                                                        </div>
                                                        <div class="modal-body">
                                                            <img class="img-fluid" src={$link->getImageLink($product.link_rewrite, $product.id_image, 'small_default')} alt={$product.name}>
                                                            {$product.description}
                                                        </div>
                                                        <div class="modal-footer text-left">
                                                            <form action="#" class="add-to-temp-basket-form">
                                                                <button type="button" class="btn btn-ternary">
                                                                    <a href={$link->getProductLink($product)}>
                                                                        View product page
                                                                    </a>
                                                                </button>
                                                                <button type="submit" class="btn btn-primary ml-5 mr-1" data-dismiss="modal" value={$product.id_product}>
                                                                    Add to config
                                                                </button>
                                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                                                    Close
                                                                </button>
                                                            </form>
                                                            <button id="add-to-cart-button" data-product-id="{$product.id_product}" data-product-quantity="1">
                                                                Add to Cart
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {/if}
                                    </li>
                                {/foreach}
                            </ul>
                        </li>
                    {/foreach}
                </ul>
            </div>
            <div class="col">
                <button type="button" class="btn btn-secondary">Add to cart</button>
            </div>
        </div>
    </div>
{/block}

 

And the javascript file :

let tempBasket = [];

$('.add-to-temp-basket-form').submit(function (e) {
    e.preventDefault();
    let id_product = $(this).find('button[type=submit]').val();
    tempBasket.push(id_product);
    // console.log(tempBasket)
});

 

Thanks in advance to anyone who will try to help me !