How can I add a dynamic button to my cart drawer before checkout?

[Leblancfashion]

Hello,

in trying to get a dynamic button in my cart drawer before checkout page. I currently have dynamics button enabled in product pages etc but I want it to have it like this in my checkout drawer, is it possible? Somebody that can help me with a code? This is my cart drawer today: 

 

And this is how I’d like to have it in the cart drawer 

 

[Ritu-25]

Hello @Leblancfashion , 

Please add this code after the checkout button.

{% if additional_checkout_buttons %}
  <div class="additional-checkout-buttons">
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}

If you have enabled the apply pay or additional payments that will autometically show with above code. 

Thanks, 

Ritu

[Leblancfashion]

@Ritu-25 

Where should I put it? Cart drawer liquid? Please tell me where exactly

[Ritu-25]

@Leblancfashion , 

Yes, in cart-drawer.liquid file 

[Leblancfashion]

@Ritu-25 Hey I tried it and the buttons shows after the product whereas I want them to show under the checkout button and also I only want one button in the same size as the checkout not three. Is that possible? 

 

[Ritu-25]

@Leblancfashion  Please share the website URL so I can easily share the code. 

[Leblancfashion]

leblancfashion.myshopify.com

password: Leblancfashion 132

[Leblancfashion]

@Ritu-25 

[Ritu-25]

Hey @Leblancfashion , 

It's showing correct on my page. 

Let me know if any further help required.

The payment method will show with the available payment methods like if you have iphone/ ipad then it will show apple pay + google pay. 

Thanks, 

Ritu 

[Leblancfashion]

@Ritu-25 right now they are like this.

 Id like them to be beside each other  in the same shape as these 

 

[Ritu-25]

@Leblancfashion , 

Use this CSS for border changes : 

.additional-checkout-buttons div[role="button"] {
    border-radius: 50px !important;
    height: 45px !important;
}

See if you add those button side by side then it might chances that there will be more then 2 buttons are there and all of those will not fit in one line so i'll suggest to show checkout as full width button and rest addittional button as group buttons. 

[Leblancfashion]

Yeah I understand,

Where do I put in the CSS that you provided me? Can you please show me since I inserted it and it didn’t work @Ritu-25 

I can do it as you mentioned but for me it seems that I get all dynamic buttons and not only one as I want it to be. I’ve fixed so my checkout button is not full width I only need now that the buttons are the same size and next to each other. Please see the image 

 

 

[Ritu-25]

@Leblancfashion , Add it to Theme.css file 

[Leblancfashion]

Thank you so much!

@Ritu-25  

is it possible to get it one the same row as the checkout and only one of them not all three of them? For instance Apple Pay besides the checkout button?

[Ritu-25]

Yes you can do that as well. 

.additional-checkout-buttons div[data-testid="GooglePay-button"] {
    display: none !important;
}
.additional-checkout-buttons div[data-testid="[<-----add paypal data-testid here ------>]"] {
    display: none !important;
}

For adding the paypal test it. inspact that button and copy that and replace it on above CSS "<-----add paypal data-testid here ------>"

Then add above CSS to Theme.css and save it after that you have only one button which is apple pay. 

after that in "button-group" div add the additional button code.

That's it and you done. 

[Leblancfashion]

I havet inserted the gode and now its only one dynamic button which is good but I didn’t understand the last part..

where should I put the button group code and can you paste it to me if I have to any pasting? @Ritu-25 

[Ritu-25]

@Leblancfashion , 

You need to put this code 

{% if additional_checkout_buttons %}
  <div class="additional-checkout-buttons">
    {{ content_for_additional_checkout_buttons }}
  </div>
{% endif %}

Search "button-group" Div into cart-drawer.liquid file and into that div there is code starts with <button > before that pur above code. 

[Leblancfashion]

I Did so now but it’s still not changed

@Ritu-25 

  

[Ritu-25]

@Leblancfashion , 

As in my device, there is no showing Apple Pay

.button-group {
    flex-wrap: nowrap !important;
}

That might help you

so I'm just assuming the CSS. 

[Leblancfashion]

Now it’s like this, You can’t see apple pay because it’s only available to apple customers, but can you see Google pay? I want it to show the button that’s available for all. So if you android user it shows Google pay and if you are apple user then you get apple pay 

[Leblancfashion]

@Ritu-25 And also is this PayPal code right? I can’t see the button code for PayPal because I don’t have an computer right now..  

Also PayPal still comes up in the cart 

 

[Ritu-25]

Hey @Leblancfashion , 

I understand your situation but this can't be done with a single line of code coz for that i need to make changes into theme codes and requires more efforts to make this happen.

Hope you understand.

Thanks

[Leblancfashion]

I understand. So it’s not possible to make them on same row? @Ritu-25 

[Ritu-25]

@Leblancfashion , 

Try this CSS. 

.button-group {
    flex-wrap: nowrap!important;
    align-items: center;
    gap: 0.5rem;
}

Hope this works 

[RomaNovomodnyi]

Hello @Ritu-25 , @Leblancfashion  I've encountered an issue where dynamic checkout buttons are hidden when I update the quantity of any products in the cart drawer.

So looks like content_for_additional_checkout_buttons is undefined while additional_checkout_buttons is true, because OR is still rendered.

          {%- if additional_checkout_buttons -%}
            <div class="font-bold mt-2 text-center text-[13px]">----- OR -----</div>
            <div class="cart__dynamic-checkout-buttons additional-checkout-buttons">
              {{ content_for_additional_checkout_buttons }}
            </div>
          {%- endif -%}

Also, I've noticed that if I add these buttons in two places, duplicating the code above, for example, at the top and bottom, the buttons will only render at the top, that is, once.
Have you ever come across a situation where dynamic checkout buttons are hidden when updating the quantity of products in the cart drawer? If so, how did you resolve it?

[CAT1]

Hi, why this code is not working for me ?

[temurbek]

Hello
Do you know how to render the dynamic checkout buttons with theme app extension (app blocks or app embed)?