Solved

Custom AJAX Handler for Grouped Products

Posted on 2011-02-15
9
588 Views
Last Modified: 2013-12-13
Hi guys, I have a group of products on a main product page. As of now, all grouped products have their own Add to Cart button. The parent product does not have one. I only wanted to add the grouped products to the cart.

Here is the coding for that:
<div>
  <? if ($product->grouped_products->count): ?>
    <ul>
      <? foreach($product->grouped_products as $grouped_product): ?>
      <? if($grouped_product->id == $product->id) continue ?>
       
        <li class="child" >     
          <?= open_form() ?>  
            <? $image_url = $grouped_product->image_url(0, 75, 'auto'); if ($image_url): ?>
              <img src="<?= $image_url ?>" alt="<?= h($product->name) ?>"/>
            <? endif ?>      
           <h3><?= $grouped_product->name ?></h3>
           <p class="price">...</p>          
           <?= $grouped_product->description ?>
      
           <? $this->render_partial('shop:product_options', array('product'=>$grouped_product)) ?>
      
           <? if (!$grouped_product->is_out_of_stock()): ?>

         <a href="#" onclick="return $(this).getForm().sendRequest
           ( 'shop:on_addToCart',
               {extraFields: {product_id: '<?= $grouped_product->id ?>',
               message: 'Number of products added to the cart: %s'},
               update: {'mini_cart': 'shop:mini_cart'}}
               )"
         type="button" value="Add to cart">Add to cart</a>

       <? endif ?>
          </form>
        </li>
      <? endforeach ?>
    </ul>
  <? endif ?>
</div>¿

Open in new window


What I want to accomplish is, instead of group product having it's own add to cart button, I want to use only ONE Add to Cart button, where it can add all grouped products at once. I think this would be possible by placing the <form> elements wrapping the <ul>, making the field name's part of a sub-array, iterate them in the backend, and then adding them to the cart.

How would I create the sub-array? For the field name, would that be the 'product_id'? And where would I iterate them inside the coding?

I believe all of that would be in this coding:
  <a href="#" onclick="return $(this).getForm().sendRequest
           ( 'shop:on_addToCart',
               {extraFields: {product_id: '<?= $grouped_product->id ?>',
               message: 'Number of products added to the cart: %s'},
               update: {'mini_cart': 'shop:mini_cart'}}
               )"
         type="button" value="Add to cart">Add to cart</a>

Open in new window


Thanks for any help!
0
Comment
Question by:areyouamac
  • 5
  • 4
9 Comments
 
LVL 4

Expert Comment

by:JayDiablo
ID: 34899130
Welcome back. :)

Quick question for you, say on that example page you posted in your previous question someone clicks on this single "add to cart" button, would the user now have two items in their cart (each grouped product represents an item in the cart)?
0
 

Author Comment

by:areyouamac
ID: 34899215
Hey Jay!

I was hoping you would answer! haha. You helped me a lot last time. So, I was hoping you'll see this post too!

Here is the link so you won't have to go back to the previous post: Test Page

Yep, that's what I want to achieve. If there are 3 grouped products, those 3 products will be added to the cart via that sing;e "add to cart" button.
0
 
LVL 4

Expert Comment

by:JayDiablo
ID: 34899242
Is your goal to also completely remove the individual add to cart buttons?
0
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 

Author Comment

by:areyouamac
ID: 34899313
For this question yes. I am trying to learn both things (individual add to cart and bulk add to cart).

I am assuming another possible was is to have multi-requests, where I can the <form> element as is in the 1st post (where each <form> is still in the group product's <li>). Then remove the add to cart buttons from the <li>'s, and at the bottom of the coding, iterate and submit the <form> elements.

Which do you think would be the most convenient and less confusing to tackle?

Thanks Jay btw!
 
0
 
LVL 4

Expert Comment

by:JayDiablo
ID: 34899457
Good call, that was actually going to be my suggestion (and why I was trying to be specific with the questions).

I'd propose the iteration approach vs. trying to make one giant form that encompasses everything, primarily because I don't know how much of LemonStand is editable (for the back-end processing).

I'd leave the forms as is, but remove the add-to-cart buttons that you have now.  Outside of any of the form elements create a new add to cart button, but you're going to have to modify the javascript code used when the button is clicked.

It should be possible to do something like this:

<a href="#" onclick="return $$('form').each(function(form) {
           form.sendRequest
           ( 'shop:on_addToCart',
               {extraFields: {product_id: form.getElement('input[name=product_id]').get('value'),
               message: 'Number of products added to the cart: %s'},
               update: {'mini_cart': 'shop:mini_cart'}})
               })"
         type="button" value="Add to cart">Add to cart</a>

Open in new window


To make this work fully, you may need to add a hidden input field to each of your grouped products' form, with the name of "product_id" and the value "<?= $grouped_product->id ?>".  I changed the extraFields line to grab that value from such an input.

Note that this is going to loop through EVERY form on the page, which may not be desirable if you have a search form at the top of the page or something, so it's also possible to narrow down the scope of the "$$" function, like so:

$$('div.info ul form').each

Open in new window


That would only look for forms in the div with class "info" that are also contained by a ul.  Standard CSS selectors here.  That's probably a safer option in the long-run.

If that totally blows up, then I may be off on my JavaScript library assumptions here.  Based on the documentation I read last time, LemonStand uses Mootools and JQuery together, so what I've provided is Mootools code, which I think is what most of LemonStand's provided additions are written in, but I could be wrong. :)
0
 

Author Comment

by:areyouamac
ID: 34899856
Hey Jay!

Ok, the single add to cart button works, but only adds the FIRST grouped product to the cart, not the rest.

Here is what I added to the grou product li for the <input>:
<li class="child" >     
          <?= open_form() ?>
          <input type="hidden" name="product_id" value="<?= $grouped_product->id ?>"/> ... the rest is the same.</li>

Open in new window


I added the add to cart button after the <ul> code:
          </form>
        </li>
      <? endforeach ?> 
    </ul>
  <? endif ?>

<a href="#" onclick="return $$('form').each(function(form) 
  { form.sendRequest
    ( 'shop:on_addToCart',
    {extraFields: {product_id: form.getElement('input[name=product_id]').get('value'),
    message: 'Number of products added to the cart: %s'},
    update: {'mini_cart': 'shop:mini_cart'}})
    })"
type="button" value="Add to cart">Add to cart</a>

Open in new window


It doesn't seem to capture the individual <input> values.

Any ideas? Does this have to deal with any JS?

Thanks!
0
 

Author Comment

by:areyouamac
ID: 34899926
Also, when viewing the Page Source... there seems to two <input> codes, which the first one seems to be automatically generated by the <form> element. However, I don't think this is interfering with the 2nd <input> element we are using.
<li class="child" >     
  <form enctype="multipart/form-data" action="/project/hera/product/look-0" method="post"> 
    <input type="hidden" name="ls_session_key" value="lsk4d5ad16ce3e678.42672342"/> 
    <input type="hidden" name="product_id" value="3"/>
...
 

Open in new window

0
 
LVL 4

Accepted Solution

by:
JayDiablo earned 500 total points
ID: 34900436
Yeah, it looks like LemonStand's Javascript doesn't allow multiple simultaneous Ajax calls to happen at the same time.

I suppose in this case, the only option available would be to have one big form element that gathers all of the options.  However, in order for this to work, the script that accepts that Ajax post has to be modified.  You may want to hit up the LemonStand forums to see if it's possible to modify the script that handles the form post "/project/hera/product/look-0", it might be useful if they know the "cms_handler_name", which is "shop:on_addToCart".  If that can be modified, then this should be possible.  If they have it encrypted, then you'd have to work with them to come up with a working solution for this.
0
 

Author Comment

by:areyouamac
ID: 34900462
OK. Thanks Jay!
0

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question