Paypal integration - How to modify the class .form-product-item so each one is a unique class

  • JasonBonell
    Asked on May 4, 2016 at 10:13 PM

    I am adding some nifty css transitions that show the products image when the product item is hovered over. The problem is that I need the class .form-product-item to be unique for each product so I can apply a different background image to each one. I am embedding the form on my site via an iframe so I can't alter the source code in that way otherwise I would do it myself. 

    So I was hoping someone could just add in something that will make each class unique 

    ie. .form-product-item1, .form-product-item2, .form-product-item3 etc. so I can target each one separatly in the css.

    I don't want to use the source code btw - I like how the iframe functions on my site - plus it seems to load faster.

  • Ashwin JotForm Support
    Replied on May 4, 2016 at 10:58 PM

    Hello JasonBonell,

    I am currently working on your custom css requirement but it is taking a bit of time. I will get back to you as soon as I am able to complete it.

    Thank you!

  • JasonBonell
    Replied on May 5, 2016 at 9:45 AM
    If it helps, you could also just assign a unique id to the class="form-product-item hover-product-item"> sections. I can target the id
    instead of the class for each section. I imagine that would be easier.
    Each id could be
    ShrimpPlatter
    ColdSmokedSalmonPlatter
    ComboSmokedSalmonPlatter
    ShuckedOysterPlatter
    WholeSmallSalmon
    WholeMediumSalmon
    WholeLargeSalmon
    just assign them to each
    I know you guys know what your doing - I just thought this might help make
    it easier as you don't need to change any classes this way, just add in an
    id - no conflicts or major changes.
    ...
  • Jan
    Replied on May 5, 2016 at 10:46 AM

    Thank you for sharing that information. It might be helpful for my colleague Ashwin. I'll let him know.

  • Ashwin JotForm Support
    Replied on May 6, 2016 at 5:09 AM

    Hello JasonBonell,

    Please injected the following custom css code which will target each item of your payment question:

    #cid_3 > span.form-product-item:nth-child(2) {

    /*Add your custom css code here*/

    }

    #cid_3 > span.form-product-item:nth-child(4) {

    /*Add your custom css code here*/

    }

    #cid_3 > span.form-product-item:nth-child(6) {

    /*Add your custom css code here*/

    }

    #cid_3 > span.form-product-item:nth-child(8) {

    /*Add your custom css code here*/

    }

    #cid_3 > span.form-product-item:nth-child(10) {

    /*Add your custom css code here*/

    }

    #cid_3 > span.form-product-item:nth-child(12) {

    /*Add your custom css code here*/

    }

    #cid_3 > span.form-product-item:nth-child(14) {

    /*Add your custom css code here*/

    }

    Please be noted that "/*Add your custom css code here*/" needs to be replaced by your own css code.

    In the above css code #cid_3 > span.form-product-item:nth-child(2) will target the first product and then each increment by 2 of nth-child(2) will target the next product.

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • JasonBonell
    Replied on May 6, 2016 at 10:45 AM
    works perfect thank you so much. It's funny though. I knew I had to use the
    nthchild somehow. Good to know I was close lol. You guys are awesome!!
    ...
  • Jan
    Replied on May 6, 2016 at 11:03 AM

    Glad to hear that the solution provided by Ashwin resolved your issue. Thank you for your compliments and on behalf of Ashwin, you are welcome. Have a nice day!

  • fraanco3
    Replied on February 21, 2017 at 4:46 PM

    I need to be able to launch my JotForm form from another program and have the

    form open and scroll down to a specific product on my form, like an "anchor" tag would.  Unfortunately, each product item in the paypal integration widget does not have an encapsulating and unique tag "ID" that I can use to target my link.  See the example below: 

    https://form.jotform.com/9999999999#targetProducID

    The closest unique ID that I can see is the product name, but unfortunately when the form opens and goes to the anchor ID, you can only see part of the product beginning with the product name.

     

    Any thoughts?

  • Ian
    Replied on February 21, 2017 at 9:15 PM

    I had moved your concern to a new thread https://www.jotform.com/answers/1072622

    Please follow that thread .

    One of our team member would reply you back on the thread soon.

    Please specify the URL of the form in the thread https://www.jotform.com/answers/1072622