Announcement

Collapse
No announcement yet.

PayPal Commerce CSS for Colossus

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

  • ids
    replied
    Thanks, Ron. Explains why I can apply a style in the dev tools but what should be the correct target doesn't actually reach into the bowels of this. I'll give it a try and see what I can do.

    Scott

    UPDATE: assigning the ID to the form seemed to do the trick. Thanks again, Ron.
    Last edited by ids; 07-22-21, 09:28 AM.

    Leave a comment:


  • Ron Frigon
    replied
    Hey Scott!

    It looks like this was added to CSS/JavaScript Resources > paypalcp - Inline CSS. The site is https://www.magicknature.com/ if you want to add something to your cart and check out OPAY.

    It looks like I added the form id to this myself looking at my template version history. I must have had a hard time targeting the css rules.

    On OPAY find the opay-form and add the id to it.

    Code:
    <mvt:item name="readytheme" param="contentsection( 'checkout_steps' )" />
    <mvt:item name="readytheme" param="contentsection( 'messages' )" />
    <form data-hook="opay-form" method="post" action="&mvt:payment:url;" id="payment-fields">
    Cheers!
    Last edited by Ron Frigon; 07-20-21, 04:54 PM. Reason: Found more info

    Leave a comment:


  • ids
    replied
    Thanks, Ron for posting your CSS.

    The interesting question here is for the correct location of the styles; in a styles tag on OPAY? This doesn't seem to work for me. The Paypal Commerce has the Style Tab. I noticed you need to add the CSS as JSON name-value format? Where did you add this CSS?

    Originally posted by Ron Frigon View Post
    Hey Leslie, I've added this to Colossus. Here's a copy of the css. It did take some tweaking.

    Code:
    #payment-fields .paypalcp-cc-name-field,
    #payment-fields .paypalcp-cc-number-field,
    #payment-fields .paypalcp-cc-exp-field,
    #payment-fields .paypalcp-cc-cvv-field {
    display: block;
    width: 100%;
    height: calc(3.5em - 2px);
    margin-bottom: 0.25em;
    padding: 0;
    position: relative;
    background-color: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 0.125em;
    }
    
    #payment-fields label {
    width: 100%;
    max-width: 33%;
    margin-right: 0;
    }
    
    #payment-fields .paypalcp-cc-name-field input {
    display: inline-block;
    width: 100%;
    height: 100%;
    max-width: none;
    border: 0 none;
    box-sizing: border-box;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    }
    .t-payment-form .c-form-input--cvv {
    max-width: none;
    }
    
    .t-payment-form .t-data-cvv {
    margin-left: 0.5rem;
    }
    FWIW: I've defined some simple CSS in the Styles Tab and these don't appear to be recognized on the page.

    Scott
    Last edited by ids; 07-20-21, 04:08 PM.

    Leave a comment:


  • lesliekirk
    replied
    Oops there's more...once I get it all in place I can send it to you.

    Leave a comment:


  • lesliekirk
    replied
    Matt Zimmermann I had to tweak the <ul> for the CSS that both Ron & I have had to use.


    Code:
    <mvt:else>
    <ul id="payment-fields" class="c-form-list o-layout u-grids-1 u-text-bold u-text-uppercase t-payment-form t-&mvt:global:payment_module_class;">
    <mvt:foreach array="payment:fields" iterator="field">

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Matt Zimmermann View Post
    Hi Leslie,

    This may be related to a similar issue that was discovered in Shadows [https://github.com/mivaecommerce/rea...dows/issues/73]. Try updating your OPAY Page Template with the following [https://gist.github.com/influxweb/73...8c08a530bcf46e] and make the CSS adjustment mentioned in the Shadows link.
    Thanks - that fixed the popup but wiped out all my CSS tweaks.

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Leslie,

    This may be related to a similar issue that was discovered in Shadows [https://github.com/mivaecommerce/rea...dows/issues/73]. Try updating your OPAY Page Template with the following [https://gist.github.com/influxweb/73...8c08a530bcf46e] and make the CSS adjustment mentioned in the Shadows link.

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Matt Zimmermann View Post
    Hi Leslie,

    Make sure the button for the "What's This?" has the attribute type="button"
    Here's was the button code

    Code:
    <button class="c-button c-button--small c-button--clear u-bg-transparent x-messages--info" data-mini-modal data-mini-modal-type="inline" data-mini-modal-content="data-cvv" title="Card Security Code Information">What's This? <span class="u-icon-question"></span></button>
    I updated it to this

    Code:
    <button class="c-button c-button--small c-button--clear u-bg-transparent x-messages--info" data-mini-modal data-mini-modal-type="inline" data-mini-modal-content="data-cvv" title="Card Security Code Information" type="button">What's This? <span class="u-icon-question"></span></button>

    Now nothing happens...


    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Leslie,

    Make sure the button for the "What's This?" has the attribute type="button"

    Leave a comment:


  • lesliekirk
    replied
    I'm close, really close but the CVV info message doesn't work. I'm getting a drop-down message saying One or more fields are invalid.


    cuMwaz.png

    FWIW, the dev branch (Shadows 2.0) works as expected.

    Attached Files

    Leave a comment:


  • lesliekirk
    replied
    So here's what I did. I set up a branch and installed Shadows 2.0, removed the demo categories, and worked with the OPAY screen. The CSS that installed with PayPal Commerce wasn't quite up to snuff. Here's what I used


    Code:
    #payment-fields .paypalcp-cc-exp-field,
    #payment-fields .paypalcp-cc-cvv-field,
    #payment-fields .paypalcp-cc-number-field,
    #payment-fields .paypalcp-cc-name-field {
    display: block;
    width: 100%;
    height: calc(3.5em - 2px);
    margin-bottom: 0.25em;
    padding: 0;
    position: relative;
    background-color: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 0.125em;
    }
    
    #payment-fields label {
    width: 100%;
    max-width: 33%;
    margin-right: 0;
    }
    
    #payment-fields .paypalcp-cc-name-field input {
    display: inline-block;
    width: 100%;
    height: 100%;
    max-width: none;
    border: 0 none;
    box-sizing: border-box;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    }
    Turns out what I used is almost identical to what Ron Frigon posted (I didn't notice that until I came back to post what I used). I don't know if it can be called a bug or not, but what is being added doesn't work. Thanks, Ron!

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Matt Zimmermann View Post
    Hi Leslie,

    I do not have a demo site using Colossus with PayPal Commerce. Maybe someone in the community has a live site they can share here.
    Here's hoping someone does. Kinda sucks not being able to duplicate what is shown in the examples

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Leslie,

    I do not have a demo site using Colossus with PayPal Commerce. Maybe someone in the community has a live site they can share here.

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Matt Zimmermann View Post
    Hi Leslie,

    You are correct, the CSS does need to be modified to fit the look and feel of any non-Shadows based site or if the Shadows based site is highly customized.
    Is there a demo site with the same look and feel for the OPAY screen that is shown here? https://docs.miva.com/paypal-commerc...-card-payments

    I'm stuck on converting a couple of the classes and still have the look & feel from the screenshot I included.

    Leave a comment:


  • lesliekirk
    replied
    Thanks, Ron. I had already tried that first (it wasn't what I needed). I don't think my page has the ID payment-fields - I did discover it looks to have 3 that I've been working with.

    Leave a comment:

Working...
X