0

I am trying to create a nice gallery for an e-commerce. - all the current code is here

The front-end layout I got from here followed the tutorial and it worked like a charm.

Then to add the payment module I decided to add a floating div:

<?php foreach ($tes as $te): ?>
        <div id="<?php echo $te['Product']['id'] ?>">
            <div class="shop-actions">
                <div class="list-group">
                    <span href="#" class="list-group-item active comprar-menu-button">
                        <?php echo __('<i class="fa fa-shopping-cart"></i> Carrito de Compras'); ?>
                    </span>
                    <span href="#" class="list-group-item comprar-menu">
                        <h3>Agregar al carrito</h3>
                        <?php echo $this->Form->create('Product', array('default' => false, 'inputDefaults' => array(
                                            'div' => 'form-group',
                                            'label' => false,
                                            'wrapInput' => false,
                                            'class' => 'form-control'))); ?>
                        <div class="row">
                            <div class="col-md-12">
                                <?php 
                                    echo $this->Form->input('cantidad', array(
                                                                            'options' => array(
                                                                                                50 => "50gr",
                                                                                                100 => "100gr",
                                                                                                150 => "150gr",
                                                                                                200 => "200gr",
                                                                                                250 => "250gr",
                                                                                                500 => "500gr",
                                                                                                1000 => "1kg",
                                                                                                'mayoreo' => "mayoreo",
                                                                                               ),
                                                                            'empty' => '(Seleccionar)',
                                                                        ));
                                ?>
                            </div>
                            <div class="col-md-12 mayoreo">
                                <div class="input-group">
                                  <?php echo $this->Form->input('mayoreo', array('label' => '', 'type'=>'number')); ?>
                                  <span class="input-group-addon">KG</span>
                                </div>
                            </div>
                            <div class="col-md-12 subtotal">
                                <div id="<?php echo $te['Product']['price']; ?>"><span>$0.00 MXN</span> </div>
                            </div>
                            <div class="col-md-12">
                                </br>
                                <?php   echo $this->Form->submit('Agregar', array('div' => 'form-group','class' => 'btn btn-info col-md-12')); ?>
                            </div>
                        </div>
                        <?php echo $this->Form->end(); ?>
                        <hr />
                        <h4>Ademas en tu carrito</h4>
                        <ul>
                            <li>Lung Jing <span class="pull-right">200gr</span></li>
                            <li>Pu Erh <span class="pull-right">1kg</span></li>
                            <li>Lapsang Su shang <span class="pull-right">10kg</span></li>
                        </ul>
                        <span class="pull-right">Subtotal: $2,500.00 MXN</span>
                    </span>
                </div>        
            </div>
            […]
        </div>
    <?php endforeach; ?>
    <span class="loading"></span>
    <span class="icon close-content"><i class="fa fa-times"></i></span>

Then I tried to add some jQuery to make the UX nice and smooth…

    function formatCurrency(total) {
    var neg = false;
    if(total < 0) {
        neg = true;
        total = Math.abs(total);
    }
    return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}
$('.comprar-menu-button').click(function(){
    $(this).next().slideToggle(function(){
        if ($(this).is(':visible')){
            $(this).css('display','inline-block');
        }
    });

});
$('.cantidad-te').change(function(){
    var value, product, precio, cantidadEspecial;
    value = $(this).val();
    product = $(this).parent().parent();
    precio = $(this).parent().parent().next().next().children();
    cantidadEspecial =product.next();
    if (value === 'mayoreo') {
        cantidadEspecial.show();
        precio.children().html('especifique cantidad');
    }else{
        cantidadEspecial.hide();
        subtotal = precio.attr('id') * value;
        precio.children().html(formatCurrency(subtotal) + ' MXN');
    }
});

In theory it works, however it only works for the last element on my teas product.

Expected outcome

When clicking on any element it should:

  • show the div with the shopping cart
  • slideToggle should show the form to add product to shopping cart
  • When selecting an element from dropdown it should:
    • update with correct price

Current outcome

  • Only slideToggle() works for last element on my grid.
  • when changing values on dropdown list it does not make the changes specified.

Additional info

  • To see a live version of how the 3D grid works visit here (this is not the version am currently working with as I havent pushed the changes)
  • The code for live version is here
  • Page Source (HTML Outcome) - here as pointed out by @AlexAtNet

Thank you

2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.