Single button adding multiple products at once when I don't want it to.

jm987jm987 Member
in Help edited July 28
Got a problem where a page has multiple products, but clicking on a single "buy now" button adds all of the products on the page when I don't want that to happen. I want each button to be able to be added to the cart individually.


<div class="foxy-content">
<div class="options-wrap">
<div id="option1" class="option-item">
<p><span style="font-size: 20px;"><strong>MediaReach:&nbsp;<span style="font-weight: 400;">press release wire services: $550/news release</span></strong></span></p>
<form id="foxyform" accept-charset="utf-8" action="https://axiapr.foxycart.com/cart" method="post"><span style="font-size: 20px;"><input name="name" type="hidden" value="MediaReach"> <input name="price" type="hidden" value="550" data-min="550"> Quantity</span><input name="quantity" type="text" value="1">
<p>&nbsp;</p>
<a class="cta_button submitForm foxy-button" href="#">Add to Cart&nbsp;</a></form></div>
<div id="option2" class="option-item last-option-item">
<p><span style="font-size: 20px;"><strong>MediaReach:&nbsp;<span style="font-weight: 400;">press release wire services: $550/news release</span></strong></span></p>
<form id="foxyform" accept-charset="utf-8" action="https://axiapr.foxycart.com/cart" method="post"><span style="font-size: 20px;"><input name="name" type="hidden" value="MediaReach for retained"><input name="price" type="hidden" value="450" data-min="450"> Quantity</span><input name="quantity" type="text" value="1">
<p>&nbsp;</p>
<a class="cta_button submitForm foxy-button" href="#">Add to Cart&nbsp;</a></form></div>
</div>
</div>
Comments
  • marijamarija FoxyCart Team
    Hello @jm987 -

    Thanks for reaching out. I tried to reproduce the issue by using the code you pasted there, but wasn't able to. It caused a different issue (I suspect related to the href="#"), but I think having the entire context here will help reproduce what you're experiencing. Is it possible to provide a live link (you can whisper it) to the page that you're showing these Add to Carts?

    As an aside, if you're using <a> as your Add to Cart, this is where you'll want to have your href point to your cart with the product parameters. See here: https://wiki.foxycart.com/v/2.0/products#using_links

    However, I'm also wondering if you're using a CMS to create your website, in which case things might be a bit different.
  • marijamarija FoxyCart Team
    Hi @jm987 -

    Assuming that Hubspot allows you to manually manipulate your forms -

    I think what you'll want to do if possible is rather than having your Add to Cart button be a link, it should be a submit type input. Here's a very simple example of a FoxyCart Add to Cart:


    <form action="https://YOURSTORE.foxycart.com/cart" method="post" accept-charset="utf-8">
    <input type="hidden" name="name" value="Simple Product">
    <input type="hidden" name="price" value="10">
    <input type="hidden" name="image" value="IMAGE_URL">
    <input type="submit" value="Add Simple Product">
    </form>


    Notice the submit input type within the form tags. If that doesn't resolve the issue, let us know and we'll look at the changes.
  • jm987jm987 Member
    This looks good, except that the code <input type="submit" value="Add Simple Product"> does not accept the formatting tags cta_button and foxy-button, which are needed to make the page consistent.

    Here's the code for the CSS I want to use on the button.

    a.foxy-button {
    margin: 10px 0;
    }

    a.foxy-button {
    -webkit-font-smoothing: antialiased !important;
    cursor: pointer !important;
    -moz-user-select: none !important;
    -webkit-user-select: none !important;
    -o-user-select: none !important;
    user-select: none !important;
    display: inline-block !important;
    font-weight: normal !important;
    text-align: center !important;
    text-decoration: none !important;
    font-family: sans-serif !important;
    background: rgb(53,116,227) !important;
    color: rgb(255, 255, 255) !important;
    border-radius: 4px !important;
    border-width: 0px !important;
    transition: all .4s ease !important;
    -moz-transition: all .4s ease !important;
    -webkit-transition: all .4s ease !important;
    -o-transition: all .4s ease !important;
    text-shadow: none !important;
    margin: 10px 0;
    padding: 13px 26px 13px !important;
    line-height: normal !important;
    font-size: 16px !Important;
    }

    a.foxy-button a.foxy-button span {
    vertical-align: middle !important;
    font-size: 100% !important;
    }




  • fc_adamfc_adam FoxyCart Team
    @jm987,

    To clarify the issue you're running into here - there is some javascript on the page that is looking for click events on your add to cart links. When they're clicked, it submits any form with an ID of foxyform - which as there are multiple of those, it submits all of them.

    Switching to having the native submit button for a form will solve that - as it will just use the approach the browser expects. In terms of the styling - are you able to add your own custom styles to your site? If so - you can simply add those classes to the input as well, and then target either an input with those classes too (code>a.foxy-button, input.foxy-button {), or remove the element from the classes so it'd apply to any element with those classes instead of just links (.foxy-button instead of a.foxy-button)

    Could that work?
Sign In or Register to comment.