Announcement

Collapse
No announcement yet.

Javascript for Multi-Add attributes?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Javascript for Multi-Add attributes?

    On this page:

    https://docs.miva.com/how-to-guides/...ti-product-add

    Scolling down, it looks as though a RAW block of code should be some Javascript. Is that right? If so, what is the script? (The code in that block is a repeat of the form to add to basket.)

    Also, is it still true the Attribute machine needs to be disabled? That would make sense since I can't get the attributes to render.

    NOTE: generally, I am looking to present multi-add of variants on the product page.

    Thanks,

    Scott
    Need to offer Shipping Insurance?
    Interactive Design Solutions https://www.myids.net
    MivaMerchant Business Partner | Certified MivaMerchant Web Developer
    Competitive Rates, Custom Modules and Integrations, Store Integration
    AutoBaskets|Advanced Waitlist Integration|Ask about Shipping Insurance Integration
    My T-shirt Collection is mostly MivaCon T-shirts!!

    #2
    Never used it in real project, but was playing with multi-add a bit on a test page. So code does just basics, but may be useful.


    Code below let you add a product to the "temporary list" with the javascript and after clicking the button submits the form with multiple products

    Code:
    
    <mvt:foreach iterator="product" array="all_products:products">
        <div>&mvte:product:code;    <input type="text" style="width: 35px;" name="qty_&mvt:product:id;" value="1"> <span id_to_add="&mvt:product:id;" code_to_add="&mvte:product:code;" class="add-to-cart" style="border:1px #eee solid; padding: 3px; background-color: #ccc; cursor: pointer;">Select</span></div>
    </mvt:foreach>
    
    
    <script type="text/javascript">
        $('.add-to-cart').click(function(){
            var id = $(this).attr('id_to_add');
            var code = $(this).attr('code_to_add');
            var qty = $("input[name='qty_"+id+"']").val();
    
            if (!qty) {
                return;
            }
    
            if ($('input[name="Products[ '+id+' ]:quantity"]').val() != null ) {
                var old_amt = $('input[name="Products[ '+id+' ]:quantity"]').val();
                var new_amt = Number(old_amt) + Number(qty);
                $('input[name="Products[ '+id+' ]:quantity"]').val(new_amt);
                $('#iStrQty_'+id).text(new_amt);
                return;
            }
    
            var iProduct = '<input type="hidden" name="Products[ '+id+' ]:code" value="'+code+'">';
            var iQty = '<input type="hidden" name="Products[ '+id+' ]:quantity" value="'+qty+'">';
            var iStr = "<div>Code: "+code+"; Qty: <span id='iStrQty_"+id+"'>"+qty+"</span></div>"
    
            $("#add_elements_here").append(iProduct);
            $("#add_elements_here").append(iQty);
            $("#add_elements_here").append(iStr);
        });
    </script>
    
    <form method="post" action="&mvte:global:sessionurl;Screen=BASK">
        <input type="hidden" name="Action" value="ADPM">
        <input type="hidden" name="Attributes" value="Yes">
        <input type="hidden" name="Store_Code" value="&mvte:store:code;">
    
        <div id="add_elements_here"><h2>Selected products</h2></div>
    
        <input type="submit" value="Add Selected to Basket">
    </form>

    Comment

    Working...
    X