Solved

Custom AJAX Handler for Grouped Products

Posted on 2011-02-15
9
597 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

690 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