Bonjour tout le monde

(c'est mon premier post soyez indulgent)

j'ai une fonction Js qui me permet d'ajouter tout le contenu de mon panier. c'est à dire que dans ma variable Js j'ai tout le contenu HTML.

function addProduct() {
		//this is just a product placeholder
		//you should insert an item with the selected product info
		//replace productId, productName, price and url with your real product info
		productId = productId + 1;
		var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0"></a></h3><span class="price"></span><div class="actions"><a href="#0" class="delete-item">Effacer</a><div class="quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="select"><select id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
		cartList.prepend(productAdded);
	}

Mon problème est que les infos du produit (image,prix,nom,descriptif) sont dans une base de données.

Dans la vue html.twig je fais une boucle for pour afficher toutes ces informations, mais la le html est dans une fonctions Js et je ne sais pas comment intégrer ces infos.

Je vous remercie d'avance de votre aide.

-
Edité par ComComB 4 juillet 2017 à 17:02:52

Bonjour,

Une solution consisterait a ajouter les infos du produit dans ton controller un peu comme ceci:

<?php
// Depuis un contrôleur

return $this->render('OCPlatformBundle:Advert:index.html.twig', array(
  'titre' => $titre,
  'description' => $description
));

Puis ensuite de les assigner a des variables javascript, un peu dans ce style:

<script type="text/javascript">
	var titre = "{{ titre }}";
	var description = "{{ description }}";
</script>

Bonjour, je suis désolé pour mon retard de réponse.

Merci Scion pour ta réponse mais j'ai essayé et sa ne passe pas.

Voici mon controller.

namespace EcommerceBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class ProduitsController extends Controller {
	/**
	 * @Route("/catalog")
	 */
	public function CatalogProduitsAction() {
		$em = $this->getDoctrine()->getManager();
		$repository = $em->getRepository('EcommerceBundle:ProductsCategory');

		$products = $repository->findAll();
		// var_dump($products);
		return $this->render('EcommerceBundle:Default:catalog.html.twig', array(
			'produit' => $products,

		));
	}

j'affiche tous les produits de ma bdd.

Dans ma vue je fais ceci

<h1>MyCafé</h1>
            <ul class="catalog">
                {% for product in produit %}
                    <li class="col-md-3">
                        <div class="thumbnail" data-price="{{product.view}}">
                            <div class="item-img"><img style="width:382px;
                            height:214px;" src="{{product.view}}" alt=""></div>
                            <div class="item-pnl">
                                <div class="pnl-wrapper">
                                    <div class="pnl-description">
                                        <span class="pnl-label">{{product.name}}</span>
                                        <span class="pnl-price">{{product.price}} €</span>
                                    </div>

                                    <a href="#0" class="cd-add-to-cart" data-id="{{product.id}}"   data-view="{{product.view}}" data-name="{{product.name}}" data-price="{{product.price}}">Add</a>

                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button>
                                </div>
                            </div>
                        </div>

jusque là tout fonctionne bien

Et pour mon panier j'ai du code html (qui n'est pas dans la boucle php)

 <div class="cd-cart-container empty">
                <a href="#0" class="cd-cart-trigger">
                    Cart
                    <ul class="count"> <!-- cart items count -->
                    <li>0</li>
                    <li>0</li>
                    </ul> <!-- .count -->
                </a>
                <div class="cd-cart">
                    <div class="wrapper">
                        <header>
                            <h2>Panier</h2>
                            <span class="undo">Articles effacés <a href="#0">Annuler</a></span>
                        </header>
                        <div class="body">
                            <ul>
                                <!-- LES PRODUITS SERONT AJOUTES EN UTILISANT JQUERY-->
                            </ul>
                        </div>
                        <footer>
                            <a href="#0" class="checkout btn"><em>Total = <span>0</span> €  </em></a>
                        </footer>
                    </div>
                    </div> <!-- .cd-cart -->
                    </div> <!-- cd-cart-container -->

Et voici mon code jQuery pour mon panier (ce n'est pas tout le code du panier)

jQuery(document).ready(function($) {
function addProduct(event) {
        //     //this is just a product placeholder
        //     //you should insert an item with the selected product info
        //     //replace productId, productName, price and url with your real product info
        productId = productId + 1;
        var price = $(".cd-add-to-cart").data("price");
        var name = $(".cd-add-to-cart").data("name");
        var id = $(".cd-add-to-cart").data("id");
        var view = $(".cd-add-to-cart").data("view");
        productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="' + view + '" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">' + name + '</a></h3><span class="price">' + price + '</span><div class="actions"><a href="#0" class="delete-item">Effacer</a><div class="quantity"><label for="cd-product-' + productId + '">Qty</label><span class="select"><select id="cd-product-' + productId + '" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
        cartList.prepend(productAdded);
    }

Voici le problème:

Quand je Click sur le lien <a> Add mon panier s'affiche et un produit est rajouté grâce au jQuery et html.

par contre quelque soit le produit sur lequel je click mon panier affiche tjs le premier produit de ma bdd.

Donc en clinquant sur 3 produits differents (ds ma vue) je me retrouve avec le même produit  (3x) dans mon panier. (et tjs le premier de ma bdd)

le fichier panier.js est a part le voici en entier.

jQuery(document).ready(function($) {
    var cartWrapper = $('.cd-cart-container');
    //product id - you don't need a counter in your real project but you can use your real product id
    var productId = 0;
    if (cartWrapper.length > 0) {
        //store jQuery objects
        var cartBody = cartWrapper.find('.body');
        var cartList = cartBody.find('ul').eq(0);
        var cartTotal = cartWrapper.find('.checkout').find('span');
        var cartTrigger = cartWrapper.children('.cd-cart-trigger');
        var cartCount = cartTrigger.children('.count');
        var addToCartBtn = $('a.cd-add-to-cart');
        var undo = cartWrapper.find('.undo');
        var undoTimeoutId;
        //add product to cart
        addToCartBtn.click(function(event) {
            event.preventDefault();
            var price = $(this).data('price');
            addToCart($(this));
        });
        //open/close cart
        cartTrigger.on('click', function(event) {
            event.preventDefault();
            toggleCart();
        });
        //close cart when clicking on the .cd-cart-container::before (bg layer)
        cartWrapper.on('click', function(event) {
            if ($(event.target).is($(this))) toggleCart(true);
        });
        //delete an item from the cart
        cartList.on('click', '.delete-item', function(event) {
            event.preventDefault();
            removeProduct($(event.target).parents('.product'));
        });
        //update item quantity
        cartList.on('change', 'select', function(event) {
            quickUpdateCart();
        });
        //reinsert item deleted from the cart
        undo.on('click', 'a', function(event) {
            clearInterval(undoTimeoutId);
            event.preventDefault();
            cartList.find('.deleted').addClass('undo-deleted').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
                $(this).off('webkitAnimationEnd oanimationend msAnimationEnd animationend').removeClass('deleted undo-deleted').removeAttr('style');
                quickUpdateCart();
            });
            undo.removeClass('visible');
        });
    }

    function toggleCart(bool) {
        var cartIsOpen = (typeof bool === 'undefined') ? cartWrapper.hasClass('cart-open') : bool;
        if (cartIsOpen) {
            cartWrapper.removeClass('cart-open');
            //reset undo
            clearInterval(undoTimeoutId);
            undo.removeClass('visible');
            cartList.find('.deleted').remove();
            setTimeout(function() {
                cartBody.scrollTop(0);
                //check if cart empty to hide it
                if (Number(cartCount.find('li').eq(0).text()) == 0) cartWrapper.addClass('empty');
            }, 500);
        } else {
            cartWrapper.addClass('cart-open');
        }
    }

    function addToCart(trigger) {
        var cartIsEmpty = cartWrapper.hasClass('empty');
        //update cart product list
        addProduct();
        //update number of items
        updateCartCount(cartIsEmpty);
        //update total price
        updateCartTotal(trigger.data('price'), true);
        //show cart
        cartWrapper.removeClass('empty');
    }
///////////////////////////////////// Celle qui m'interresse ////////////////////////////////////////////////////////
    function addProduct(event) {
        //     //this is just a product placeholder
        //     //you should insert an item with the selected product info
        //     //replace productId, productName, price and url with your real product info
        productId = productId + 1;
        var price = $(".cd-add-to-cart").data("price");
        var name = $(".cd-add-to-cart").data("name");
        var id = $(".cd-add-to-cart").data("id");
        var view = $(".cd-add-to-cart").data("view");
        productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="' + view + '" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">' + name + '</a></h3><span class="price">' + price + '</span><div class="actions"><a href="#0" class="delete-item">Effacer</a><div class="quantity"><label for="cd-product-' + productId + '">Qty</label><span class="select"><select id="cd-product-' + productId + '" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
        cartList.prepend(productAdded);
    }
///////////////////////////////////////////////////////////////////////////////////////////////////
    function removeProduct(product) {
        clearInterval(undoTimeoutId);
        cartList.find('.deleted').remove();
        var topPosition = product.offset().top - cartBody.children('ul').offset().top,
            productQuantity = Number(product.find('.quantity').find('select').val()),
            productTotPrice = Number(product.find('.price').text().replace('$', '')) * productQuantity;
        product.css('top', topPosition + 'px').addClass('deleted');
        //update items count + total price
        updateCartTotal(productTotPrice, false);
        updateCartCount(true, -productQuantity);
        undo.addClass('visible');
        //wait 8sec before completely remove the item
        undoTimeoutId = setTimeout(function() {
            undo.removeClass('visible');
            cartList.find('.deleted').remove();
        }, 8000);
    }

    function quickUpdateCart() {
        var quantity = 0;
        var price = 0;
        cartList.children('li:not(.deleted)').each(function() {
            var singleQuantity = Number($(this).find('select').val());
            quantity = quantity + singleQuantity;
            price = price + singleQuantity * Number($(this).find('.price').text().replace('$', ''));
        });
        cartTotal.text(price.toFixed(2));
        cartCount.find('li').eq(0).text(quantity);
        cartCount.find('li').eq(1).text(quantity + 1);
    }

    function updateCartCount(emptyCart, quantity) {
        if (typeof quantity === 'undefined') {
            var actual = Number(cartCount.find('li').eq(0).text()) + 1;
            var next = actual + 1;
            if (emptyCart) {
                cartCount.find('li').eq(0).text(actual);
                cartCount.find('li').eq(1).text(next);
            } else {
                cartCount.addClass('update-count');
                setTimeout(function() {
                    cartCount.find('li').eq(0).text(actual);
                }, 150);
                setTimeout(function() {
                    cartCount.removeClass('update-count');
                }, 200);
                setTimeout(function() {
                    cartCount.find('li').eq(1).text(next);
                }, 230);
            }
        } else {
            var actual = Number(cartCount.find('li').eq(0).text()) + quantity;
            var next = actual + 1;
            cartCount.find('li').eq(0).text(actual);
            cartCount.find('li').eq(1).text(next);
        }
    }

    function updateCartTotal(price, bool) {
        bool ? cartTotal.text((Number(cartTotal.text()) + Number(price)).toFixed(2)) : cartTotal.text((Number(cartTotal.text()) - Number(price)).toFixed(2));
    }
});

Je vous remercie d'avance si vous trouvez une solution.

et merci encore Scion.

-
Edité par ComComB 27 juillet 2017 à 17:53:12