add to cart button outside the product page

[Leolautzu]

Good morning, I would like to create a landing page with an add to cart button inside for a product x among those available on the site. The theme I use now is alysum and this thing from the theme is not possible for me.
I wanted to ask you if it is possible to "programme" a button that calls up the addition to cart of product 'x' outside its product page.
Do you have any examples I can take inspiration from. 
Thank you in advance

[Leolautzu]

Da chat gpt ricevo questo soluzione:
Creare un pulsante di aggiunta al carrello personalizzato: <button class="btn btn-primary" id="aggiungi-al-carrello">Aggiungi al carrello</button>

Aggiungere JavaScript: $(document).ready(function() { $('#aggiungi-al-carrello').click(function() { // Ottieni l'ID del prodotto che desideri aggiungere al carrello var idProdotto = 123; // Sostituisci 123 con l'ID del tuo prodotto // Invia una richiesta Ajax per aggiungere il prodotto al carrello $.ajax({ type: 'POST', url: baseUri + 'index.php?controller=cart&add=1&id_product=' + idProdotto, success: function(response) { // Aggiorna la visualizzazione del carrello o mostra un messaggio di successo alert('Prodotto aggiunto al carrello con successo'); } }); }); });

Dove 123 sta per il codice ID del prodotto.
Purtroppo non so dove dovrei inserire la parte relativa al javascript,
qualcuno?

[endriu107]

Please write in correct language, this topic is in english section so write in english here.

 

If you want a button like on amazon "Buy now" you can follow this tutorial:

https://www.youtube.com/watch?v=Aijpplt-0W0

If you want to add buy button on products in category there is also few tutorials in web.

[metacreo]

<form action="https://example.com/en/cart" method="post" id="add-to-cart-or-refresh">
    <input type="hidden" name="token" value="{$token}">
    <input type="hidden" name="id_product" value="{$id_product}" id="product_page_product_id">
    <div class="row mt-2">
        <div class="col-6 tc-info-left">
            <div class="tc-num-inp">
                <button type="button" class="tc-spin tc-decr btn btn-sm btn-info" data-id="{$id_product}"> <i class="fa fa-minus" aria-hidden="true"></i> </button>
                <input class="tc-qty-input" type="number" name="qty" id="quantity_wanted_{$id_product}" value="1" min="1" max="10" aria-label="Quantity">
                <button type="button" class="tc-spin tc-incr btn btn-sm btn-info" data-id="{$id_product}"> <i class="fa fa-plus" aria-hidden="true"></i> </button>
            </div>
        </div>
        <div class="col-6 tc-info-right">
            <button class="tc-btn-add btn btn-sm btn-info" data-button-action="add-to-cart" type="submit"><strong>Add to cart</strong></button>
        </div>
    </div>
</form>

You need post request to cart controller. Here you need 2 variables. $token and $id_product

[ps8modules]

Hi

TPL form:

<form id="add-to-cart-or-refresh">
    <input type="hidden" name="id_product" value="{$id_product}" id="product_page_product_id">
    <div class="row mt-2">
        <div class="col-6 tc-info-left">
            <div class="tc-num-inp">
                <button type="button" class="tc-spin tc-decr btn btn-sm btn-info" data-id="{$id_product}"> <i class="fa fa-minus" aria-hidden="true"></i> </button>
                <input class="tc-qty-input" type="number" name="qty" id="quantity_wanted_{$id_product}" value="1" min="1" max="10" aria-label="Quantity">
                <button type="button" class="tc-spin tc-incr btn btn-sm btn-info" data-id="{$id_product}"> <i class="fa fa-plus" aria-hidden="true"></i> </button>
            </div>
        </div>
        <div class="col-6 tc-info-right">
            <button class="tc-btn-add btn btn-sm btn-info" name="my-custom-button" id="my-custom-button-{$id_product}" data-id-product="{$id_product}" type="button"><strong>Add to cart</strong></button>
        </div>
    </div>
</form>

 

custom.js (if not exists create it)

./themes/your_theme/assets/js/custom.js

$(document).ready(function () {
    /* click custom button */
    $('[name=my-custom-button]').on('click', function () {
        var idProduct = $(this).attr('data-id-product');
        var idProductAttribute = '0'; /* if exists add here */
        var qty = $('#quantity_wanted_'+idProduct).val();
        myCustomAddToCart(idProduct, idProductATtribute, qty);
    });
});

function myCustomAddToCart(t, a, e) {
    let n = prestashop.static_token,
        l = prestashop.urls.pages.cart;
    $.post(l, "controller=cart&add=1&action=update&ajax=true&token=" + n + "&id_product=" + t + "&id_product_attribute=" + a + "&qty=" + e, null, "json")
        .then((t) => {
            prestashop.emit("updateCart", { reason: {}, resp: t });
        })
        .fail((t) => {
            prestashop.emit("handleError", { eventType: "addProductToCart", resp: t });
        });
}

 

[metacreo]

@ps8moduly.cz what is JS for? The form works great without JS.

[ps8modules]

Hi,

You need to get the parameters for the action.
The resulting URL should look something like this:

{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&id_product_attribute={$product.id_product_attribute&}token={$static_token}&add

Ajax for Cart is (ajax-cart.js):

//for product page 'add' button...
		$('#add_to_cart input').unbind('click').click(function(){
			ajaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, null, $('#quantity_wanted').val(), null);
			return false;
		});

so you can rename your inputs so that the original ajax-cart.js handles your form.

In the sample I gave you, you don't have to use form, but maybe just div ...

Edited October 3, 2023 by ps8moduly.cz (see edit history)

[metacreo]

Usually, I use variables from the module and try to avoid JavaScript. This is more reliable, but each specific case has a different implementation. For example, if the module is of a wide range, such as a catalogue, it is better to assign a token and use simple forms. Of course, if we are talking about a "universal add to cart button", then yes, it’s unlikely to do without a script.

[ps8modules]

your form called https://example.com/en/cart

and ?

paramaters id_product & id_product_attribute & quantity_wanted ?

You need to pass parameters to ajax-cart, but you don't send them.

I wrote what the ajax cart needs.

If you think that using JS is bad, you are very wrong.
JS is faster and you have control over it.
The question is if you know JS. I don't mean it badly.

When you send via submit, you send data from forms.
If the recipient of the get / post does not know the parameters, it will do nothing !!!

I understand, you have your own solution, unfortunately I am unable to help you with it.

I'd like to help you, but it's really not possible to decode what you need.

Edited October 3, 2023 by ps8moduly.cz (see edit history)

[metacreo]

calling ajaxCart.add is extra... one way or another there will still be a post request

Form just make $_POST request to cart controller.

id_product comes from hidden input name id_product

quantity_wanted from input name qty

token from token

id_product_attribute is optional

XHRPOST : token=c6c7e968f90555586dc2a967c737c7&id_product=6433&qty=1&add=1&action=update

in theme JS already exists data-button-action click prevent defaults... so form not submitting as default post

all other mechanism you can see in /controllers/front/CartController.php
 

class CartControllerCore extends FrontController
{
    /** @var string */
    public $php_self = 'cart';

    protected $id_product;
    protected $id_product_attribute;
    protected $id_address_delivery;
    protected $customization_id;
    protected $qty;

there is a simple and clear code, even with a descriptions

Edited October 3, 2023 by metacreo
add (see edit history)

[endriu107]

I think js is not needed, action should be {$urls.pages.cart} and also there should be at least 3 checks (about catalog - enable/disable, customization - required or not and product could have disabled add to cart), so any of solution above is complete.