Hi, I would like to Show dynamic checkout button below products on collection page into Debut theme.
So I added this code below into Snippets/product-card-grid.liquid
<div>
{% capture "form_classes" -%}
product-form product-form-{{ product.id }} product-form--hide-variant-labels
{%- endcapture %}
{% form 'product', product, class:form_classes %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option selected="selected" value="{{ product.id }}">
{{ variant.title }}
</option>
{% endfor %}
</select>
<div class="product-form__item product-form__item--quantity">
<label for="Quantity-{{ product.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ product.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
</div>
<div class="product-form__item product-form__item--submit product-form__item--payment-button product-form__item--no-variants">
<button type="submit" name="add" id="AddToCart-{{ product.id }}" class="btn product-form__cart-submit btn--secondary-accent">
<span id="AddToCartText-{{ product.id }}">
{{ 'products.product.add_to_cart' | t }}
</span>
</button>
{{ form | payment_button }}
</div>
{% endform %}
</div>
But as you see here https://mariposasrl.myshopify.com/ it is not possible to actually use the payment_button seems like part of the product link.
Any clue on how to fix it?
Thank you
This is purposefully done to prevent things like FOUC, or layout jutter by the following CSS style added into the area of your theme as part of the payment system
shopify-payment-button__button--hidden {
visibility: hidden;
}
Get this working on a single product page first and follow it’s javascript and css to adapt it for dispaly in a collection
Also the system isn’t getting the right variant id on the homepage.
I injected before the end tag of layout/theme.liquid file this line:
<style>.shopify-payment-button__button--hidden { visibility: visible; }</style>
And now the result is visible so you see appearing the “More payments option” text here https://mariposasrl.myshopify.com/collections/menu
But as you see, still seems part of the same link. So it does not work
Afterwards I will take correctly the variant.id
For now the problem remaining the same
Any more help?
Always simply problems first.
Here get it working on product page first, then move onto try to adapt to a collection.
Be sure to go through the setup instructions carefully and get it working.
Keep in mind dynamic checkout buttons adapt to the users|customers preferred payment methods, so what you see may not be what they see if they have made an order before, see the help docs for details.
Boom! Works!
My solution result Debut theme snippets/product-card-grid.liquid file:
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
<span class="visually-hidden">{{ product.title }}</span>
</a>
{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% unless product.featured_image == blank %}
{% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
src="{{ product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt }}">
</div>
</div>
<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
</noscript>
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
{% include 'product-price', variant: product %}
<div>
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %} product-form--payment-button-no-variants
{%- endcapture %}
{% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
<div class="product-form__item product-form__item--submit product-form__item--payment-button product-form__item--no-variants">
<div class="wrap-cart-buttons">
<div class="wrap-cart-buttons--quantity">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ product.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
</div>
<button type="submit" name="add" id="AddToCart-{{ product.id }}" class="btn btn--secondary-accent">
<span id="AddToCartText-{{ product.id }}">Add</span>
</button>
</div>
{{ form | payment_button }}
</div>
{% endform %}
</div>
</div>
<style>
.shopify-payment-button__button--hidden { visibility: visible; }
a.grid-view-item__link { position: static; }
</style>
Here I showed the fix in this last inline style by removing position absolute to static.
But then in production I am just removing the class from the element.
Thank you!
On product pages “Buy Now” button is going directly to checkout
On collection pages “Buy Now” and “more payment options” just seem to redirect to the product page are directing to checkout, gj.
??
My last version of file snippets/product-card-grid.liquid
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
<a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% unless product.featured_image == blank %}
{% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
src="{{ product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt }}">
</div>
</div>
<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
</noscript>
<div class="h4 grid-view-item__title" aria-hidden="true">{{ product.title }}</div>
{% include 'product-price', variant: product %}
</a>
<div>
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %} product-form--payment-button-no-variants
{%- endcapture %}
{% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
<div class="product-form__item product-form__item--submit product-form__item--payment-button product-form__item--no-variants">
<div class="wrap-cart-buttons">
<div class="wrap-cart-buttons--quantity">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ product.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
</div>
<button type="submit" name="add" id="AddToCart-{{ product.id }}" class="btn btn--secondary-accent">
<span id="AddToCartText-{{ product.id }}">Add</span>
</button>
</div>
{{ form | payment_button }}
</div>
{% endform %}
</div>
</div>
<style>
.shopify-payment-button__button--hidden { visibility: visible; }
</style>
So in case its not clear I just removed the class
full-width-link
form element
Ah ok my two recent posts were marked as spam automatically by Shopify forum platform!
Moderators restored each post! And also trained a little bit more the spam engine.
At the end of the day people can now show dynamic checkout buttons below the products also into collection pages at least for the Shopify Debut theme.
Thank you,
hi,
I set this option, show dynamic checkout button… but you see… doesn’t work…
can you help me, please? https://venfit.myshopify.com/collections/all
I set this option in each page,
Alemens
September 14, 2019, 6:47pm
12
Hi @Briancast , did you add this
<div>
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %} product-form--payment-button-no-variants
{%- endcapture %}
{% form 'product', product, class:form_classes, novalidate: 'novalidate' %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
<div class="product-form__item product-form__item--submit product-form__item--payment-button product-form__item--no-variants">
<div class="wrap-cart-buttons">
<div class="wrap-cart-buttons--quantity">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ product.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
</div>
<button type="submit" name="add" id="AddToCart-{{ product.id }}" class="btn btn--secondary-accent">
<span id="AddToCartText-{{ product.id }}">Add</span>
</button>
</div>
{{ form | payment_button }}
</div>
{% endform %}
</div>
just before the end tag on file Snippets/product-card-grid.liquid
Are you using Debut theme by the way?
hey I_T_S
is it possible to use the same solution to add the dynamic checkout button (=dcb) on the homepage in any section i want?
my issue: i am using the featured product section at the top of my page but than i want add additional DCB on the page. for example under the slideshow or under every text coloumn and so on…to make sure that my customer can checkout at any given point on my page…
currently i have the solved that with anchor link to link back from any seciton to the top of my page - but this is suboptimal.
would be glad for tips
cheers
Hey @danyalxy you can play by adding and customize the snippet I just told to @Briancast but in your question I see you do not understand how exactly works the form ‘product’ snippet in this topic require {{ section.id }} and {{ product.id }} also if present {{ variant.id }} to show the beautiful {{ form | payment_button }} dynamically. So as soon as you pass all this information you can inject those and show the payment_button form wherever you want into your HTML. As you probably understand. Your goal require extra custom code that of course I will not write for free. So maybe try yourself or ask a quotation
Thanks Man its help me a lot.
Can you give solution for this alignment are terrible. can anyone please tell my mistake?
You have to look in the inspector and give some style to the elements. If you share store url and tell what exactly you want to achieve we can try to help you
Hi so I used the code you provided and it works, the only thing is I do not want to have the quantity selector. How can I remove this?
I tried removing the quantity code but it messes up the whole collections section.
Your help would be greatly appreciated, trying to find a solution is proving rather difficult.
Using this code disables being able to click the product and go to the product page. Is there a fix to this?
